:root {
    color-scheme: light;
    --bg: #f4f6f5;
    --panel: #ffffff;
    --text: #15201c;
    --muted: #63706b;
    --line: #d7dedb;
    --accent: #176c5f;
    --accent-2: #365a7c;
    --warning: #8a5b12;
}

a:hover,
a:focus-visible {
    text-decoration: none;
}

a:not([class]):hover,
a:not([class]):focus-visible,
.back-link:hover,
.back-link:focus-visible {
    color: var(--accent);
}

.related-records,
.dashboard-editor {
    background: #fff;
    border: 1px solid var(--border, #d7ddd9);
    border-radius: 14px;
    margin: 24px 0;
    overflow: hidden;
}

.related-records > summary,
.dashboard-editor > summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    list-style: none;
    padding: 18px 22px;
}

.related-records > summary::-webkit-details-marker,
.dashboard-editor > summary::-webkit-details-marker { display: none; }

.related-records > summary::after,
.dashboard-editor > summary::after {
    content: "+";
    font-size: 22px;
    font-weight: 600;
}

.related-records[open] > summary::after,
.dashboard-editor[open] > summary::after { content: "−"; }

.related-records > summary span { display: grid; font-size: 18px; gap: 2px; }
.related-records > summary small { color: #68746f; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.related-records > summary strong { color: #52605b; font-size: 13px; margin-left: auto; }
.related-records .data-table-wrap { border-left: 0; border-radius: 0; border-right: 0; margin: 0; }
.related-record-actions { align-items: center; border-top: 1px solid #e5e9e6; display: flex; justify-content: space-between; padding: 12px 22px; }

.table-tools {
    background: #f7f8f6;
    border-top: 1px solid #e5e9e6;
    display: grid;
    gap: 14px;
    padding: 14px 22px 16px;
}

.table-tools-search-only {
    justify-items: end;
}

.table-view-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.table-view-button {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    padding: 7px 11px;
    text-decoration: none;
}

.table-view-button:hover,
.table-view-button:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.table-view-button.is-active {
    background: var(--sidebar);
    border-color: var(--sidebar);
    color: #ffffff;
}

.account-type-bar {
    margin-bottom: 14px;
}

.table-search {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: flex-end;
}

.table-search label {
    color: var(--muted);
    flex: 1 0 100%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.table-search > div {
    align-items: center;
    display: flex;
    gap: 7px;
}

.table-search input {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    min-height: 39px;
    min-width: min(360px, 60vw);
    padding: 8px 11px;
}

.table-search button,
.table-search a {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    justify-content: center;
    min-height: 39px;
    padding: 8px 12px;
    text-decoration: none;
}

.table-search button {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff;
    cursor: pointer;
}

.table-search a {
    color: var(--accent-2);
}

.table-search a:hover,
.table-search a:focus-visible {
    color: var(--accent);
}

.inline-entry-form {
    align-items: end;
    border-top: 1px solid #e5e9e6;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    padding: 18px 22px;
}

.inline-entry-form label, .social-entry-form label { display: grid; font-size: 12px; gap: 6px; }
.inline-entry-form input,
.inline-entry-form select, .social-entry-form input, .social-entry-form select { border: 1px solid #cbd3cf; border-radius: 7px; min-height: 40px; padding: 8px 10px; }
.inline-entry-form .alert { grid-column: 1 / -1; }

.dashboard-customize-trigger {
    background: transparent;
    border: 0;
    color: var(--accent-2);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    padding: 7px 0;
}
.dashboard-customize-trigger:hover,
.dashboard-customize-trigger:focus-visible { color: var(--accent); text-decoration: none; }
.dashboard-editor[popover] {
    box-shadow: 0 28px 80px rgba(10, 24, 20, .34), 0 8px 24px rgba(10, 24, 20, .18);
    inset: 0;
    margin: auto;
    max-height: min(720px, calc(100vh - 40px));
    max-width: 780px;
    overflow: auto;
    padding: 0;
    width: calc(100% - 32px);
}
.dashboard-editor[popover]::backdrop { background: rgba(10, 20, 17, .76); }
.dashboard-editor-heading {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    padding: 20px 22px 17px;
}
.dashboard-editor-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 24px; margin: 2px 0 0; }
.dashboard-editor-heading .eyebrow { margin: 0; }
.dashboard-editor-close {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-size: 28px;
    height: 34px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 34px;
}
.dashboard-editor-close:hover,
.dashboard-editor-close:focus-visible { color: var(--text); }
.dashboard-editor form { border-top: 1px solid #e5e9e6; padding: 18px 22px 22px; }
.widget-options { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.widget-options label { align-items: flex-start; background: #f5f7f5; border-radius: 9px; display: flex; gap: 10px; padding: 12px; }
.widget-options label span { display: grid; gap: 3px; }
.widget-options small { color: #68746f; }
.dashboard-widget-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-widget { background: #fff; border: 1px solid #d7ddd9; border-radius: 14px; color: #173a32; display: grid; gap: 7px; min-height: 170px; padding: 22px; position: relative; text-decoration: none; }
.dashboard-widget > span { color: #68746f; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.dashboard-widget > strong { font-size: clamp(30px, 4vw, 48px); }
.dashboard-widget > small { color: #68746f; padding-right: 26px; }
.dashboard-widget > b { bottom: 20px; position: absolute; right: 22px; }
.dashboard-widget:hover { border-color: #79978e; transform: translateY(-1px); }

@media (max-width: 900px) {
    .dashboard-widget-grid,
    .widget-options,
    .inline-entry-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .dashboard-widget-grid,
    .widget-options,
    .inline-entry-form { grid-template-columns: 1fr; }
    .related-record-actions { align-items: stretch; flex-direction: column; gap: 10px; }
    .table-tools-search-only { justify-items: stretch; }
    .table-search,
    .table-search > div { align-items: stretch; flex-direction: column; width: 100%; }
    .table-search input { min-width: 0; width: 100%; }
}

/* Approved operations application shell */
:root {
    --bg: #f3f1eb;
    --panel: #ffffff;
    --panel-soft: #ebe8df;
    --text: #1c2824;
    --muted: #68736e;
    --line: #dedbd2;
    --accent: #b96832;
    --accent-2: #275f53;
    --sidebar: #17372f;
    --sidebar-soft: #20473d;
    --sidebar-text: #f6f2e8;
    --sidebar-muted: #a8bbb4;
    --shadow: 0 18px 45px rgba(30, 45, 39, .08);
}

html {
    scroll-behavior: smooth;
}

body.app-body {
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    min-width: 320px;
}

.skip-link {
    background: #ffffff;
    color: var(--text);
    left: 16px;
    padding: 10px 14px;
    position: fixed;
    top: -60px;
    z-index: 100;
}

.skip-link:focus {
    top: 16px;
}

.app-shell {
    display: grid;
    grid-template-columns: 276px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    box-shadow: 7px 0 18px -3px rgba(16, 31, 26, .28);
    background:
        radial-gradient(circle at 10% 0, rgba(255, 255, 255, .08), transparent 31%),
        var(--sidebar);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 26px 18px 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.section-drafts {
    margin-bottom: 24px;
    padding: 20px 24px;
    border: 1px solid var(--line, #d9dfdc);
    border-radius: 14px;
}
.section-drafts h2 { margin: 0 0 6px; font-size: 1.1rem; }
.section-drafts > p { margin: 0 0 12px; color: var(--muted); }

.brand-block {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 4px 30px;
}

.brand {
    align-items: center;
    color: var(--sidebar-text);
    display: flex;
    gap: 12px;
    text-decoration: none;
}

.brand-mark {
    align-items: center;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.brand-mark img {
    display: block;
    height: 42px;
    image-rendering: auto;
    width: 42px;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.05;
}

.brand small {
    color: var(--sidebar-muted);
    font-size: 10px;
    letter-spacing: .18em;
    margin-top: 5px;
    text-transform: uppercase;
}

.sidebar-close,
.mobile-topbar,
.nav-scrim {
    display: none;
}

.nav-stack {
    display: grid;
    flex: 0 0 auto;
    gap: 7px;
}

.nav-link,
.nav-group summary {
    align-items: center;
    border-radius: 10px;
    color: var(--sidebar-muted);
    cursor: pointer;
    display: grid;
    font-size: 14px;
    font-weight: 650;
    gap: 11px;
    grid-template-columns: 30px minmax(0, 1fr);
    list-style: none;
    min-height: 44px;
    padding: 8px 12px;
    text-decoration: none;
}

.nav-group summary::-webkit-details-marker {
    display: none;
}

.nav-group summary::after {
    color: #799189;
    content: "+";
    font-size: 18px;
    grid-column: 3;
}

.nav-group[open] summary::after {
    content: "–";
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active,
.nav-group summary:hover,
.nav-group summary:focus-visible,
.nav-group[open] > summary {
    background: var(--sidebar-soft);
    color: #ffffff;
    outline: none;
}

.nav-kicker {
    color: #789187;
    font-family: Consolas, monospace;
    font-size: 10px;
    letter-spacing: .08em;
}

.nav-link.is-active .nav-kicker,
.nav-group[open] .nav-kicker {
    color: #e3a276;
}

.nav-children {
    border-left: 1px solid #3e5f56;
    display: grid;
    gap: 2px;
    margin: 5px 0 10px 27px;
    padding: 2px 0 2px 14px;
}

.nav-children a {
    border-radius: 8px;
    color: var(--sidebar-muted);
    font-size: 13px;
    padding: 8px 10px;
    text-decoration: none;
}

.nav-children a:hover,
.nav-children a:focus-visible,
.nav-children a.is-active {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
    outline: none;
}

.nav-more {
    margin-top: 1px;
}

.nav-group .nav-more > summary {
    align-items: center;
    background: transparent;
    border-radius: 8px;
    color: var(--sidebar-muted);
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: space-between;
    min-height: 34px;
    padding: 7px 10px;
}

.nav-group .nav-more > summary::after {
    content: "+";
    font-size: 15px;
}

.nav-group .nav-more[open] > summary::after {
    content: "–";
}

.nav-group .nav-more > summary:hover,
.nav-group .nav-more > summary:focus-visible,
.nav-group .nav-more:not(.nav-deleted-items)[open] > summary,
.nav-group .nav-deleted-items > summary.is-active {
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}

.nav-more-children {
    border-left: 1px solid #4b6d63;
    display: grid;
    gap: 1px;
    margin: 2px 0 3px 9px;
    padding-left: 8px;
}

.nav-more-children a {
    font-size: 12px;
    padding: 7px 9px;
}

.sidebar-footer {
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .11);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin-top: auto;
    padding: 18px 10px 0;
    position: relative;
    flex: 0 0 auto;
}

.sidebar-footer a {
    color: var(--sidebar-muted);
    font-size: 12px;
    text-decoration: none;
}

.sidebar-footer a:hover {
    color: #ffffff;
}

.sidebar-footer a.is-active {
    color: #ffffff;
}

.footer-settings {
    align-items: center;
    display: inline-flex;
    justify-self: start;
}

.footer-settings svg {
    fill: currentColor;
    height: 18px;
    width: 18px;
}

.footer-feedback {
    position: relative;
    left: -10px;
    justify-self: center;
    white-space: nowrap;
}

.footer-signout {
    justify-self: end;
    white-space: nowrap;
}

.workspace-shell {
    min-width: 0;
}

.workspace-shell main {
    margin: 0 auto;
    max-width: 1480px;
    padding: 42px 48px 64px;
}

.settings-header {
    margin-bottom: 22px;
}

.settings-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-card {
    align-items: flex-start;
    background: var(--panel);
    border: 1px solid #e1ddd3;
    border-radius: 18px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 16px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 24px;
}

.settings-card-icon {
    align-items: center;
    background: #edf3ef;
    border-radius: 12px;
    color: var(--sidebar);
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.settings-card h2 {
    font-size: 18px;
    margin: 0 0 5px;
}

.settings-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 17px;
}

.settings-card dl {
    display: grid;
    gap: 10px 16px;
    grid-template-columns: minmax(110px, auto) 1fr;
    margin: 0;
}

.settings-card dt {
    color: var(--muted);
    font-size: 12px;
}

.settings-card dd {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    text-align: right;
}

.settings-card label {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.settings-card label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.settings-card select {
    border: 1px solid #d9d5cb;
    border-radius: 8px;
    font: inherit;
    min-height: 40px;
    padding: 7px 10px;
    width: 100%;
}

.settings-card .settings-check {
    align-items: center;
    display: flex;
    gap: 9px;
}

.settings-card .settings-check input {
    height: 18px;
    width: 18px;
}

body[data-density="compact"] .workspace-shell main {
    padding-bottom: 42px;
    padding-top: 28px;
}

body[data-density="compact"] .data-table th,
body[data-density="compact"] .data-table td {
    padding-bottom: 7px;
    padding-top: 7px;
}

body[data-reduced-motion="on"] *,
body[data-reduced-motion="on"] *::before,
body[data-reduced-motion="on"] *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
}

/* Clear, vertically centered disclosure chevrons. */
.related-records > summary::after,
.dashboard-editor > summary::after,
.feedback-panel-header::after,
.nav-group > summary::after,
.nav-group .nav-more > summary::after {
    align-self: center;
    content: "›";
    display: inline-block;
    font-size: 30px;
    line-height: .8;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .16s ease;
}

.related-records[open] > summary::after,
.dashboard-editor[open] > summary::after,
.feedback-panel[open] > .feedback-panel-header::after,
.nav-group[open] > summary::after,
.nav-group .nav-more[open] > summary::after {
    content: "›";
    transform: rotate(90deg);
}

/* Fill the available width while sizing business table columns to their content. */
.app-body .data-table,
.app-body .customer-table,
.app-body .ledger-table,
.app-body .document-table,
.app-body .document-list-table,
.app-body .document-lines-table,
.app-body .document-line-edit-table,
.app-body .record-lines-table,
.app-body .wip-table,
.app-body .draft-record-table,
.app-body .rate-service-table,
.app-body .rate-matrix-table,
.app-body .zone-chart-table,
.app-body .report-catalog-table,
.app-body .report-file-table,
.app-body .report-definition-table {
    min-width: 0;
    table-layout: auto;
    width: 100%;
}

.app-body .data-table input,
.app-body .data-table select,
.app-body .data-table textarea {
    field-sizing: content;
    min-inline-size: 5ch;
    width: auto;
}

.feedback-panel-header {
    align-items: center;
}

.field-hint {
    color: var(--muted);
    font-size: 11px;
    min-height: 15px;
}

.field-hint.is-valid { color: #1f6a48; }
.field-hint.is-invalid { color: #a23a2b; }

.communication-section .inline-entry-form {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.communication-entry-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.communication-entry-fields:has(> label:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.communication-entry-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px auto;
    align-items: end;
    gap: 12px;
}

.communication-section > summary .communication-add {
    margin-left: auto;
    font-size: 13px;
    white-space: nowrap;
}

.communication-section > summary strong {
    margin-left: 0;
}

.communication-save-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.communication-section {
    scroll-margin-top: 20px;
}

.communication-section .validation-summary-valid {
    display: none;
}

.communication-section .inline-entry-form label, .social-entry-form label {
    min-width: 0;
}

.communication-section .inline-entry-form input,
.communication-section .inline-entry-form select,
.social-entry-form input,
.social-entry-form select {
    width: 100%;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
}

.communication-section .primary-checkbox-field input[type="checkbox"] {
    appearance: none;
    margin: 0;
    cursor: pointer;
    background: white;
}

.communication-section .primary-checkbox-field input[type="checkbox"]:checked {
    background: #285f53 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' d='m5 12 4 4 10-10'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}

.communication-section .primary-checkbox-field input[type="checkbox"]:focus-visible {
    outline: 2px solid #285f53;
    outline-offset: 2px;
}

.communication-section .inline-entry-form button {
    align-self: end;
    justify-self: end;
    min-height: 42px;
}

@media (max-width: 900px) {
    .communication-entry-fields,
    .communication-entry-fields:has(> label:nth-child(3):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .communication-entry-fields,
    .communication-entry-fields:has(> label:nth-child(3):last-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .communication-entry-actions {
        grid-template-columns: minmax(0, 1fr) 60px;
    }

    .communication-save-actions {
        grid-column: 1 / -1;
    }
}

.table-line-filter {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 12px 16px;
}

.table-line-filter label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.table-line-filter input {
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    min-height: 38px;
    padding: 7px 10px;
    width: min(420px, 100%);
}

.settings-note {
    color: var(--muted);
    font-size: 13px;
    margin: 18px 2px 0;
}

.dashboard-hero,
.area-hero {
    align-items: flex-end;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .98), rgba(246, 240, 229, .94)),
        var(--panel);
    border: 1px solid #e1ddd3;
    border-radius: 22px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 32px;
    justify-content: space-between;
    margin-bottom: 22px;
    overflow: hidden;
    padding: 42px;
    position: relative;
}

.dashboard-hero::after,
.area-hero::after {
    background: #cc7f4d;
    border-radius: 50%;
    content: "";
    height: 180px;
    opacity: .13;
    position: absolute;
    right: -70px;
    top: -80px;
    width: 180px;
}

.hero-copy {
    max-width: 760px;
}

.eyebrow {
    color: var(--accent);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .14em;
    margin: 0 0 9px;
    text-transform: uppercase;
}

h1,
.dashboard-hero h1,
.area-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.02;
    margin: 0;
}

.hero-lede,
.subhead {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 14px 0 0;
    max-width: 720px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.primary-action,
.secondary-action {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    min-height: 43px;
    padding: 10px 16px;
    text-decoration: none;
}

.primary-action {
    background: var(--sidebar);
    color: #ffffff;
}

.secondary-action {
    background: #ffffff;
    border: 1px solid var(--line);
    color: var(--text);
}

.hero-status {
    align-items: center;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex: 0 0 auto;
    gap: 11px;
    padding: 13px 16px;
    position: relative;
    z-index: 1;
}

.hero-status strong,
.hero-status small {
    display: block;
}

.hero-status strong {
    font-size: 13px;
}

.hero-status small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 3px;
}

.status-dot {
    background: #4c9a6a;
    border: 4px solid #dff0e5;
    border-radius: 50%;
    height: 14px;
    width: 14px;
}

.metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 42px;
}

.metrics-grid article,
.summary-strip article {
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: none;
    padding: 19px 20px;
}

.metrics-grid strong {
    font-family: Georgia, serif;
    font-size: 29px;
    font-weight: 500;
}

.metrics-grid small {
    color: #8a928e;
    display: block;
    font-size: 11px;
    margin-top: 6px;
}

.dashboard-section {
    margin-bottom: 42px;
}

.section-heading-spacious {
    margin: 0 0 16px;
}

.section-heading h2,
.panel-heading h2,
.legacy-notes h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.operations-grid,
.workflow-grid {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operation-card,
.workflow-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--text);
    min-height: 190px;
    padding: 22px;
    position: relative;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.operation-card {
    display: grid;
    gap: 17px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
}

.operation-card:hover,
.operation-card:focus-visible,
.workflow-card:hover,
.workflow-card:focus-visible {
    border-color: #b9b4a9;
    box-shadow: var(--shadow);
    outline: none;
    transform: translateY(-2px);
}

.operation-index,
.workflow-code {
    color: var(--accent);
    font-family: Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.operation-card h3,
.workflow-card h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 500;
    margin: 0 0 9px;
}

.operation-card p,
.workflow-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.operation-card small {
    color: #8b928e;
    display: block;
    font-size: 11px;
    margin-top: 20px;
}

.card-arrow {
    color: #9aa19d;
    font-size: 17px;
}

.dashboard-columns {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.25fr .75fr;
    margin-bottom: 26px;
}

.dashboard-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
}

.panel-heading {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.panel-heading h2 {
    margin: 0;
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quick-links a {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--text);
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-height: 78px;
    padding: 13px 8px;
    text-decoration: none;
}

.quick-links a:nth-child(odd) {
    padding-right: 20px;
}

.quick-links a:nth-child(even) {
    border-left: 1px solid var(--line);
    padding-left: 20px;
}

.quick-links strong,
.quick-links small {
    display: block;
}

.quick-links strong {
    font-size: 13px;
}

.quick-links small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    margin-top: 4px;
}

.coverage-list {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.coverage-list li {
    border-top: 1px solid var(--line);
    display: grid;
    gap: 4px;
    padding: 13px 0;
}

.coverage-list span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.coverage-list strong {
    font-size: 13px;
}

.area-hero {
    align-items: center;
    margin-top: 8px;
}

.area-code {
    background: var(--sidebar);
    border-radius: 16px;
    color: #ffffff;
    min-width: 130px;
    padding: 19px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.area-code span,
.area-code strong {
    display: block;
}

.area-code span {
    color: var(--sidebar-muted);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.area-code strong {
    font-family: Georgia, serif;
    font-size: 28px;
    margin-top: 5px;
}

.workflow-section {
    margin: 34px 0;
}

.workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-card {
    min-height: 220px;
}

.workflow-card-topline {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.workflow-card h3 {
    font-size: 25px;
}

.workflow-cta {
    bottom: 21px;
    color: var(--accent-2);
    font-size: 12px;
    font-weight: 750;
    position: absolute;
}

.legacy-notes {
    align-items: flex-start;
    background: #e7ede8;
    border: 1px solid #cfdbd3;
    border-radius: 16px;
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
    margin-bottom: 28px;
    padding: 24px;
}

.legacy-notes h2 {
    margin: 0;
}

.legacy-notes > p {
    color: #4f625a;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.workspace-header {
    margin-bottom: 25px;
}

.workspace-header h1 {
    font-size: clamp(34px, 4vw, 50px);
}

.user-chip {
    background: #e7ede8;
    border: 1px solid #cfdbd3;
    color: #3c594f;
}

.back-link {
    color: var(--accent-2);
    margin-bottom: 16px;
}

.search-bar input,
.search-bar select,
.pagination-form input,
.pagination-form select,
.feedback-form textarea,
.login-panel input {
    border-radius: 9px;
}

.search-bar button,
.pagination-form button,
.feedback-form button,
.login-panel button,
.report-action-button,
.table-action {
    background: var(--sidebar);
    border-color: var(--sidebar);
    border-radius: 9px;
}

.data-table-wrap {
    border-radius: 13px;
    box-shadow: 0 8px 28px rgba(30, 45, 39, .045);
}

.data-table th {
    background: #e8ece8;
    color: #2a4038;
    font-size: 11px;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.data-table td {
    padding-bottom: 11px;
    padding-top: 11px;
}

.data-table tbody tr:hover td {
    background: #faf9f5;
}

.feedback-panel {
    background: #fffaf2;
    border-color: #eadbc3;
    border-radius: 15px;
    margin-top: 26px;
    padding: 18px;
}

.feedback-panel h2,
.feedback-form label span,
.feedback-recent h3 {
    color: #795231;
}

.status-pill {
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .04em;
    min-height: 25px;
    text-transform: uppercase;
}

@media (max-width: 1160px) {
    .workspace-shell main {
        padding: 34px 30px 54px;
    }

    .operations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        bottom: 0;
        box-shadow: 20px 0 50px rgba(16, 31, 26, .28);
        left: 0;
        position: fixed;
        top: 0;
        transform: translateX(-105%);
        transition: transform .2s ease;
        width: min(86vw, 310px);
    }

    body[data-nav-open] {
        overflow: hidden;
    }

    body[data-nav-open] .sidebar {
        transform: translateX(0);
    }

    .sidebar-close {
        background: transparent;
        border: 0;
        color: var(--sidebar-muted);
        cursor: pointer;
        display: block;
        font-size: 27px;
    }

    .nav-scrim {
        background: rgba(16, 31, 26, .45);
        border: 0;
        bottom: 0;
        cursor: pointer;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .2s ease;
        z-index: 40;
    }

    body[data-nav-open] .nav-scrim {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-topbar {
        align-items: center;
        background: rgba(243, 241, 235, .96);
        border-bottom: 1px solid var(--line);
        display: grid;
        gap: 12px;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        min-height: 64px;
        padding: 10px 18px;
        position: sticky;
        top: 0;
        z-index: 35;
    }

    .nav-toggle {
        align-items: center;
        background: #ffffff;
        border: 1px solid var(--line);
        border-radius: 9px;
        cursor: pointer;
        display: flex;
        height: 40px;
        justify-content: center;
        padding: 0;
        width: 40px;
    }

    .mobile-brand {
        color: var(--text);
        font-family: Georgia, serif;
        font-size: 17px;
        font-weight: 600;
        text-decoration: none;
    }

    .mobile-brand span {
        color: var(--muted);
        font-family: "Segoe UI", sans-serif;
        font-size: 10px;
        letter-spacing: .08em;
        margin-left: 5px;
        text-transform: uppercase;
    }

    .environment-chip {
        color: var(--accent-2);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .workspace-shell main {
        padding: 26px 18px 42px;
    }

    .dashboard-hero,
    .area-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px 24px;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workflow-grid {
        grid-template-columns: 1fr;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .legacy-notes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .operations-grid,
    .metrics-grid,
    .quick-links {
        grid-template-columns: 1fr;
    }

    .operation-card {
        min-height: 165px;
    }

    .quick-links a:nth-child(even) {
        border-left: 0;
        padding-left: 8px;
    }

    .quick-links a:nth-child(odd) {
        padding-right: 8px;
    }

    .hero-status,
    .area-code {
        width: 100%;
    }

    .area-code {
        text-align: left;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Segoe UI", Arial, sans-serif;
}

.topbar {
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 32px;
    min-height: 56px;
    padding: 0 28px;
}

.brand {
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.nav-toggle {
    display: none;
}

.primary-nav {
    display: flex;
    gap: 18px;
}

.primary-nav a {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a:focus {
    color: var(--text);
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
    background: var(--text);
    border-radius: 999px;
    display: block;
    height: 2px;
    width: 20px;
}

.menu-icon {
    position: relative;
}

.menu-icon::before,
.menu-icon::after {
    content: "";
    left: 0;
    position: absolute;
}

.menu-icon::before {
    top: -6px;
}

.menu-icon::after {
    top: 6px;
}

main {
    margin: 0 auto;
    max-width: 1180px;
    padding: 32px 28px 48px;
}

.workspace-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

h1 {
    font-size: 34px;
    line-height: 1.1;
    margin: 0;
}

.user-chip {
    background: #e8eeeb;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    max-width: 360px;
    overflow-wrap: anywhere;
    padding: 8px 12px;
}

.metrics-grid,
.module-grid,
.report-list {
    display: grid;
    gap: 14px;
}

.metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 22px;
}

.metrics-grid article,
.module-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.metrics-grid article {
    padding: 18px;
}

.metrics-grid span,
.module-card p,
.module-card span {
    color: var(--muted);
    font-size: 13px;
}

.metrics-grid strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    margin-top: 8px;
}

.module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
}

.report-list a {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    min-height: 58px;
    padding: 16px 18px;
    text-decoration: none;
}

.report-list span {
    display: grid;
    gap: 4px;
    font-size: 15px;
    font-weight: 700;
}

.report-list small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.report-list strong {
    color: var(--accent-2);
    font-size: 13px;
}

.module-card {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-height: 92px;
    padding: 18px;
    text-decoration: none;
}

.module-card h2 {
    color: var(--text);
    font-size: 17px;
    margin: 0 0 6px;
}

.module-card p {
    margin: 0;
}

.module-card span {
    border-radius: 999px;
    font-weight: 700;
    padding: 6px 10px;
    white-space: nowrap;
}

.module-card-link:hover,
.module-card-link:focus {
    border-color: #a8b9b3;
}

.module-card .status-open {
    background: #e8f2ed;
    border: 1px solid #bdd7c8;
    color: #1e523a;
}

.module-card .status-discovery {
    background: #f7f1e6;
    border: 1px solid #ead9b7;
    color: var(--warning);
}

.feedback-panel {
    background: #fff9ec;
    border: 1px solid #ead9b7;
    border-radius: 8px;
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
}

.feedback-panel-header {
    align-items: start;
    cursor: pointer;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    list-style: none;
}

.feedback-panel-header::-webkit-details-marker {
    display: none;
}

.feedback-panel-header::after {
    color: #70470c;
    content: "+";
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.feedback-panel[open] > .feedback-panel-header::after {
    content: "−";
}

.feedback-panel-header a {
    margin-left: auto;
}

.feedback-panel h2 {
    color: #70470c;
    font-size: 15px;
    margin: 0 0 5px;
}

.feedback-panel p {
    color: #4f4030;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
}

.feedback-panel-header a {
    color: var(--accent-2);
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.feedback-form {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.feedback-form label {
    display: grid;
    gap: 6px;
}

.feedback-form label span,
.feedback-recent h3 {
    color: #70470c;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}

.feedback-form textarea {
    border: 1px solid #ead9b7;
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    min-height: 82px;
    padding: 8px 10px;
    resize: vertical;
}

.feedback-form button {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 7px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    min-height: 40px;
    padding: 8px 12px;
}

.feedback-result {
    background: #e8f2ed;
    border: 1px solid #bdd7c8;
    border-radius: 7px;
    color: #1e523a;
    font-size: 13px;
    padding: 9px 10px;
}

.feedback-recent {
    border-top: 1px solid #ead9b7;
    display: grid;
    gap: 8px;
    padding-top: 10px;
}

.feedback-recent article {
    background: #ffffff;
    border: 1px solid #ead9b7;
    border-radius: 7px;
    padding: 10px;
}

.feedback-recent article div {
    align-items: center;
    display: flex;
    gap: 10px;
    margin-bottom: 5px;
}

.feedback-recent strong,
.feedback-recent span {
    color: var(--muted);
    font-size: 12px;
}

.subhead {
    color: var(--muted);
    font-size: 14px;
    margin: 8px 0 0;
}

.search-bar {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin-bottom: 18px;
}

.search-bar label {
    display: grid;
    gap: 6px;
}

.search-bar label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.search-bar input {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    min-height: 40px;
    padding: 8px 10px;
}

.search-bar select {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    min-height: 40px;
    padding: 8px 10px;
}

.rates-filter {
    grid-template-columns: minmax(260px, 1.4fr) minmax(160px, .8fr) auto auto;
}

.report-filter {
    grid-template-columns: minmax(260px, 1.3fr) minmax(190px, .7fr) auto auto;
    margin-top: 22px;
}

.search-bar button,
.search-bar a,
.data-toolbar a,
.pagination-form button {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    text-decoration: none;
}

.search-bar button,
.pagination-form button {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    cursor: pointer;
}

.data-toolbar {
    align-items: center;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: 13px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.data-toolbar > .search-bar {
    align-items: center;
    flex: 1 1 320px;
    max-width: 540px;
    margin: 0 auto;
}

.data-toolbar > .search-bar label {
    min-width: 0;
}

.data-toolbar > .search-bar label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.data-toolbar > .search-bar input {
    min-width: 0;
    width: 100%;
}

@media (max-width: 760px) {
    .data-toolbar > .search-bar {
        flex: none;
        max-width: none;
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
}

.data-toolbar div {
    display: flex;
    gap: 8px;
}

.data-toolbar .data-toolbar-summary {
    gap: calc(8px + 3ch);
}

.data-toolbar-summary span:last-child {
    color: var(--accent);
    font-weight: 700;
}

.pagination-actions {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pagination-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.pagination-form label {
    align-items: center;
    color: var(--muted);
    display: flex;
    gap: 6px;
}

.pagination-form input,
.pagination-form select {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    min-height: 40px;
    padding: 8px 10px;
}

.pagination-form input {
    width: 82px;
}

.pagination-form select {
    min-width: 78px;
}

.data-table-wrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 100%;
    min-width: 0;
    overflow: auto;
}

.data-table {
    border-collapse: collapse;
    min-width: 0;
    table-layout: auto;
    width: 100%;
}

/* Empty record tables share their full width evenly between column headers. */
.app-body .data-table:not(:has(> tbody > tr)),
.report-output-data-table:not(:has(> tbody > tr)) {
    min-width: 0;
    table-layout: fixed;
    width: 100%;
}

.app-body .data-table:not(:has(> tbody > tr)) th,
.report-output-data-table:not(:has(> tbody > tr)) th {
    width: auto;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    padding: 9px 10px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.data-table input,
.data-table select,
.data-table textarea {
    field-sizing: content;
    min-inline-size: 5ch;
    width: auto;
}

.data-table input[type="checkbox"],
.data-table input[type="radio"] {
    min-inline-size: 0;
}

.data-table th {
    background: #eaf0ed;
    color: #24362f;
    font-weight: 700;
    position: sticky;
    top: 0;
}

.data-table a {
    color: var(--accent-2);
    font-weight: 700;
    text-decoration: none;
}

.status-pill,
.table-action {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    min-height: 28px;
    padding: 5px 9px;
    white-space: nowrap;
}

.status-ready {
    background: #e8f2ed;
    border: 1px solid #bdd7c8;
    color: #1e523a;
}

.status-review {
    background: #f7f1e6;
    border: 1px solid #ead9b7;
    color: var(--warning);
}

.status-partial {
    background: #eef3f8;
    border: 1px solid #c9d8e7;
    color: var(--accent-2);
}

.table-action {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #ffffff !important;
    justify-content: center;
}

.data-table .selected-row td {
    background: #f0f6f3;
}

.empty-state {
    color: var(--muted);
    font-size: 14px;
}

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

.customer-table {
    min-width: 1320px;
}

.ledger-table,
.document-table {
    min-width: 1120px;
}

.feedback-table {
    min-width: 1040px;
}

.wip-table {
    min-width: 1500px;
}

.rate-service-table {
    min-width: 1040px;
}

.rate-matrix-table,
.zone-chart-table {
    min-width: 920px;
}

.report-catalog-table {
    min-width: 1580px;
}

.report-file-table {
    min-width: 980px;
}

.report-definition-table {
    min-width: 1280px;
}

.compact-report-list {
    margin-top: 0;
}

.report-run-panel {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 16px 18px;
}

.report-run-panel h2 {
    font-size: 17px;
    margin: 0 0 5px;
}

.report-run-panel span {
    color: var(--muted);
    font-size: 13px;
}

.report-action-button {
    align-items: center;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 7px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
}

.secondary-button {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 14px;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
}

.report-parameter-dialog {
    background: var(--panel);
    border: 1px solid #c5cfca;
    border-radius: 8px;
    box-shadow: 0 22px 52px rgba(21, 32, 28, 0.28);
    color: var(--text);
    max-width: 620px;
    padding: 0;
    width: min(calc(100vw - 32px), 620px);
}

.report-parameter-dialog::backdrop {
    background: rgba(21, 32, 28, 0.24);
}

.report-parameter-form {
    display: grid;
    gap: 16px;
    padding: 22px;
}

.report-parameter-form h2 {
    font-size: 24px;
    margin: 0;
}

.report-parameter-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-parameter-grid label {
    display: grid;
    gap: 6px;
}

.report-parameter-grid label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.report-parameter-grid input {
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    min-height: 40px;
    padding: 8px 10px;
}

.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.report-output-shell {
    background: #dfe5e2;
    min-height: 100vh;
    padding: 24px;
}

.report-output-document {
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(21, 32, 28, 0.18);
    color: #111111;
    font-family: Consolas, "Courier New", monospace;
    margin: 0 auto;
    max-width: 1120px;
    min-height: 720px;
    overflow: auto;
    padding: 28px;
    position: relative;
}

.report-output-title {
    align-items: baseline;
    border-bottom: 1px solid #d0d7d4;
    display: flex;
    gap: 14px;
    left: 28px;
    min-height: 28px;
    position: absolute;
    right: 28px;
    top: 16px;
}

.report-output-title strong {
    font-size: 14px;
}

.report-output-title span {
    color: #4f5c58;
    font-size: 11px;
}

.report-output-body {
    bottom: 28px;
    left: 28px;
    position: absolute;
    right: 28px;
    top: 58px;
}

.report-output-object {
    color: #111111;
    font-size: 12px;
    line-height: 1.15;
    overflow: hidden;
    padding: 1px 2px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-output-object.is-label {
    font-weight: 700;
}

.report-output-object.is-value {
    font-weight: 400;
}

.report-output-object.is-line {
    border-top: 1px solid #111111;
    min-height: 0 !important;
    padding: 0;
}

.report-output-object.is-box {
    border: 1px solid #111111;
    padding: 0;
}

.report-output-object.is-picture {
    border: 1px solid #999999;
    color: #666666;
}

.report-output-message {
    color: var(--muted);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 14px;
}

.report-output-data-document {
    font-family: "Segoe UI", Arial, sans-serif;
    margin-top: 18px;
    min-height: 0;
}

.report-output-data-header {
    align-items: flex-start;
    border-bottom: 1px solid #d0d7d4;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
}

.report-output-data-header div {
    display: grid;
    gap: 4px;
}

.report-output-data-header strong {
    font-size: 15px;
}

.report-output-data-header span,
.report-output-footnote {
    color: #4f5c58;
    font-size: 12px;
}

.report-output-refinement {
    background: #f4f6f5;
    border: 1px solid #d0d7d4;
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.report-output-refinement span {
    color: #4f5c58;
    font-size: 12px;
}

.report-output-data-table-wrap {
    overflow: auto;
}

.report-output-data-table {
    border-collapse: collapse;
    font-size: 12px;
    min-width: 720px;
    width: 100%;
}

.report-output-data-table th,
.report-output-data-table td {
    border-bottom: 1px solid #d0d7d4;
    max-width: 220px;
    padding: 7px 8px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.report-output-data-table th {
    background: #eef3f0;
    color: #17221e;
    font-weight: 700;
}

.precut-report-document {
    font-family: Consolas, "Courier New", monospace;
    max-width: 1320px;
    overflow: visible;
}

.precut-report-header {
    align-items: flex-start;
    border-bottom: 2px solid #111111;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
}

.precut-report-header h1 {
    font-size: 24px;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 4px 0 8px;
}

.precut-report-header p,
.precut-report-header span,
.precut-report-header dt {
    color: #4f5c58;
    font-size: 11px;
    margin: 0;
}

.precut-report-header span {
    display: block;
    margin-top: 3px;
}

.precut-report-header dl {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(88px, max-content));
    margin: 0;
    text-align: right;
}

.precut-report-header dd {
    font-size: 16px;
    font-weight: 700;
    margin: 3px 0 0;
}

.precut-parameter-strip,
.precut-source-notes {
    border: 1px solid #d0d7d4;
    margin-bottom: 16px;
    padding: 10px 12px;
}

.precut-parameter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.precut-parameter-strip span,
.precut-source-notes li {
    color: #4f5c58;
    font-size: 11px;
}

.precut-source-notes strong {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
}

.precut-source-notes ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
}

.precut-style-group {
    break-inside: avoid;
    margin-top: 22px;
    page-break-inside: avoid;
}

.precut-style-heading,
.precut-color-heading {
    align-items: baseline;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.precut-style-heading {
    border-bottom: 1px solid #111111;
    margin-bottom: 10px;
    padding-bottom: 6px;
}

.precut-style-heading h2,
.precut-color-heading h3 {
    letter-spacing: 0;
    margin: 0;
}

.precut-style-heading h2 {
    font-size: 18px;
}

.precut-style-heading span,
.precut-color-heading span {
    color: #4f5c58;
    font-size: 11px;
}

.precut-color-group {
    margin-bottom: 16px;
    overflow-x: auto;
}

.precut-color-heading {
    margin-bottom: 6px;
}

.precut-color-heading h3 {
    font-size: 13px;
}

.precut-table {
    border-collapse: collapse;
    font-size: 11px;
    min-width: 1080px;
    width: 100%;
}

.precut-table th,
.precut-table td {
    border-bottom: 1px solid #d0d7d4;
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.precut-table th {
    background: #eef3f0;
    font-weight: 700;
}

.precut-table .is-number {
    text-align: right;
}

.precut-table tfoot th {
    border-top: 2px solid #111111;
}

.precut-style-total,
.precut-grand-total {
    border: 1px solid #111111;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
    padding: 8px 10px;
}

.precut-style-total strong,
.precut-grand-total strong {
    margin-right: auto;
}

.precut-style-total span,
.precut-grand-total span {
    font-size: 11px;
}

.precut-grand-total {
    background: #eef3f0;
    margin-top: 24px;
}

@media print {
    .report-output-shell {
        background: #ffffff;
        padding: 0;
    }

    .precut-report-document {
        box-shadow: none;
        max-width: none;
    }
}

.report-definition-summary {
    margin-bottom: 14px;
}

.mapping-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 14px;
}

.mapping-grid article {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
}

.mapping-grid h3 {
    font-size: 15px;
    margin: 0 0 10px;
}

.mapping-grid ul {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mapping-grid li,
.mapping-grid p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: anywhere;
}

.mapping-grid li strong {
    color: var(--text);
}

.mapping-grid li span {
    color: var(--muted);
    display: block;
    margin-top: 3px;
}

.mapping-grid code,
.refinement-table code {
    overflow-wrap: anywhere;
    white-space: normal;
}

.mapping-evidence-table {
    min-width: 980px;
}

.refinement-grid {
    margin-bottom: 14px;
}

.refinement-table-wrap {
    margin-bottom: 14px;
}

.refinement-table {
    min-width: 1180px;
}

.definition-note {
    background: #eaf0ed;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.definition-note strong {
    color: var(--text);
}

.legacy-report-preview {
    background:
        linear-gradient(#eef3f0 1px, transparent 1px),
        linear-gradient(90deg, #eef3f0 1px, transparent 1px),
        #ffffff;
    background-size: 18px 18px, 18px 18px, auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: auto;
    position: relative;
}

.preview-object {
    background: #fbfcfb;
    border: 1px dashed #b7c5c0;
    color: var(--accent-2);
    font-size: 12px;
    line-height: 1.2;
    overflow: hidden;
    padding: 2px 4px;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-object.is-label {
    background: #eaf0ed;
    border-style: solid;
    color: var(--text);
    font-weight: 700;
}

.report-frame {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    height: 72vh;
    margin-top: 18px;
    overflow: hidden;
}

.report-frame iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

.document-list-table,
.document-lines-table {
    min-width: 1340px;
}

.document-line-edit-table {
    min-width: 1650px;
}

.document-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.back-link {
    color: var(--accent-2);
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
    text-decoration: none;
}

.detail-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.detail-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}

.detail-panel h2,
.section-heading h2 {
    font-size: 17px;
    margin: 0;
}

.detail-panel dl {
    display: grid;
    gap: 9px 14px;
    grid-template-columns: 120px minmax(0, 1fr);
    margin: 16px 0 0;
}

.detail-panel dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.detail-panel dd {
    font-size: 13px;
    margin: 0;
    overflow-wrap: anywhere;
}

.summary-strip {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
}

.summary-strip article {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 15px 16px;
}

.summary-strip span,
.section-heading span {
    color: var(--muted);
    font-size: 13px;
}

.summary-strip strong {
    display: block;
    font-size: 21px;
    margin-top: 7px;
}

.section-heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin: 24px 0 10px;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    padding: 28px;
    place-items: center;
}

.login-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(21, 32, 28, .14);
    display: grid;
    gap: 18px;
    max-width: 420px;
    padding: 28px;
    width: min(100%, 420px);
}

.login-panel label {
    display: grid;
    gap: 7px;
}

.login-panel label span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.login-panel input {
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--text);
    font: inherit;
    min-height: 42px;
    padding: 8px 10px;
}

.login-panel button {
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 7px;
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    min-height: 42px;
    padding: 9px 12px;
}

.login-panel button:disabled {
    background: #9aa5a1;
    border-color: #9aa5a1;
    cursor: not-allowed;
}

.alert {
    background: #fff3e0;
    border: 1px solid #e8c27f;
    border-radius: 7px;
    color: #70470c;
    font-size: 13px;
    padding: 10px 12px;
}

@media (max-width: 760px) {
    .workspace-header,
    .module-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .topbar {
        display: grid;
        gap: 0 14px;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 56px;
        padding: 8px 18px;
        position: relative;
        z-index: 20;
    }

    .brand {
        align-self: center;
    }

    .nav-toggle {
        align-items: center;
        align-self: center;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 7px;
        cursor: pointer;
        display: flex;
        height: 40px;
        justify-self: end;
        justify-content: center;
        padding: 0;
        width: 40px;
    }

    .nav-toggle:focus {
        outline: 2px solid var(--accent-2);
        outline-offset: 2px;
    }

    .primary-nav {
        background: #ffffff;
        border-bottom: 1px solid #c5cfca;
        border-top: 1px solid var(--line);
        box-shadow: 0 12px 18px rgba(21, 32, 28, 0.14);
        display: none;
        gap: 0;
        left: 0;
        margin: 0;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        padding: 0 18px 8px;
        position: absolute;
        right: 0;
        top: 100%;
        width: 100%;
        z-index: 30;
    }

    .primary-nav[data-open="true"] {
        display: grid;
    }

    .primary-nav a {
        border-bottom: 1px solid var(--line);
        color: var(--text);
        font-size: 15px;
        min-height: 44px;
        padding: 12px 0;
    }

    .primary-nav a:last-child {
        border-bottom: 0;
    }

    .metrics-grid,
    .module-grid,
    .report-list,
    .mapping-grid,
    .detail-grid,
    .summary-strip {
        grid-template-columns: 1fr;
    }

    .search-bar {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .rates-filter {
        grid-template-columns: 1fr;
    }

    .report-filter {
        grid-template-columns: 1fr;
    }

    .data-toolbar,
    .pagination-actions,
    .pagination-form {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-form label {
        justify-content: space-between;
    }

    .pagination-form input,
    .pagination-form select {
        width: 100%;
    }

    .feedback-panel-header,
    .feedback-form,
    .report-run-panel,
    .dialog-actions {
        grid-template-columns: 1fr;
    }

    .feedback-panel-header,
    .report-run-panel,
    .dialog-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .report-parameter-grid {
        grid-template-columns: 1fr;
    }

    .report-output-shell {
        padding: 12px;
    }

    .report-output-document {
        padding: 18px;
    }

    .precut-report-header,
    .precut-style-heading,
    .precut-color-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .precut-report-header dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        text-align: left;
        width: 100%;
    }

    .precut-style-total,
    .precut-grand-total {
        display: grid;
        grid-template-columns: 1fr;
    }

    .detail-panel dl {
        grid-template-columns: 1fr;
    }

    main {
        padding: 24px 18px 36px;
    }
}

/* Draft recovery and session-expiry protection */
.draft-save-status {
    color: var(--muted);
    flex: 1 1 auto;
    font-size: 12px;
    margin: 0 auto 0 0;
    min-width: 180px;
}

.draft-save-status[data-tone="saving"] { color: #81621e; }
.draft-save-status[data-tone="saved"] { color: #276344; }
.draft-save-status[data-tone="local"] { color: #8a4e20; }
.draft-save-status[data-tone="restored"] { color: var(--accent-2); font-weight: 700; }

.draft-popover {
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(8, 27, 22, .24), 0 8px 24px rgba(8, 27, 22, .12);
    max-height: min(620px, calc(100dvh - 40px));
    overflow: auto;
    padding: 20px;
    position: fixed;
    right: 22px;
    top: 22px;
    width: min(430px, calc(100vw - 32px));
    z-index: 80;
}

.draft-popover[hidden],
.session-shield[hidden],
.login-panel [hidden] { display: none !important; }

.draft-popover-heading {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.draft-popover-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 500;
    margin: 4px 0 0;
}

.draft-popover-heading .eyebrow { margin: 0; }

.draft-popover-heading > button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    font-size: 27px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.draft-popover-copy {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 10px 0 16px;
}

.draft-list { display: grid; gap: 10px; }

.draft-list-item {
    align-items: center;
    background: color-mix(in srgb, var(--panel) 76%, var(--page));
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px;
}

.draft-list-item > div:first-child { min-width: 0; }
.draft-list-item strong,
.draft-list-item span { display: block; }
.draft-list-item strong { font-size: 13px; overflow-wrap: anywhere; }
.draft-list-item span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.draft-list-item > div:last-child { display: flex; gap: 7px; }

.draft-restore,
.draft-discard {
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    min-height: 34px;
    padding: 6px 10px;
}

.draft-restore { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.draft-discard { background: transparent; border: 1px solid var(--line); color: var(--muted); }

.session-shield {
    align-items: center;
    background: rgba(7, 19, 16, .46);
    display: grid;
    inset: 0;
    justify-items: center;
    padding: 24px;
    position: fixed;
    z-index: 200;
}

.session-shield::before {
    backdrop-filter: blur(22px) saturate(.7);
    content: "";
    inset: 0;
    position: absolute;
}

body[data-session-locked] .app-shell,
body[data-session-locked] .draft-popover {
    filter: blur(16px) saturate(.55);
    pointer-events: none;
    transform: scale(.992);
    user-select: none;
}

.session-shield-card {
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 24px;
    box-shadow: 0 38px 100px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .34);
    max-width: 520px;
    padding: 34px;
    position: relative;
    text-align: center;
    width: 100%;
}

.auth-brand-star {
    display: block;
    height: 64px;
    width: 64px;
    object-fit: contain;
    margin: 0 auto 17px;
}

.session-shield-card .eyebrow { margin: 0 0 7px; }
.session-shield-card h2 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 5vw, 42px); font-weight: 500; margin: 0; }
.session-shield-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; margin: 15px auto 22px; max-width: 420px; }
.session-shield-card .primary-action { display: inline-flex; justify-content: center; min-width: 190px; }

.session-draft-summary {
    background: color-mix(in srgb, var(--accent) 8%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-radius: 10px;
    font-size: 12px;
    padding: 10px 12px;
}

@media (max-width: 620px) {
    .draft-popover { left: 16px; right: 16px; top: 16px; width: auto; }
    .draft-list-item { grid-template-columns: 1fr; }
    .draft-list-item > div:last-child { justify-content: flex-end; }
    .session-shield { padding: 16px; }
    .session-shield-card { border-radius: 18px; padding: 28px 20px; }
}

button:not(:disabled):not(.nav-scrim):hover {
    box-shadow: 0 4px 10px rgba(21, 32, 28, .16);
}

.clickable-row {
    cursor: pointer;
    transition: background-color .14s ease, box-shadow .14s ease;
}

.data-table .clickable-row:hover td,
.data-table .clickable-row:focus td {
    background: #f2f5f2;
}

.clickable-row:focus {
    outline: 2px solid var(--accent-2);
    outline-offset: -2px;
}

.clickable-row td:first-child {
    position: relative;
}

.clickable-row td:first-child::before {
    background: var(--accent);
    bottom: 8px;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    top: 8px;
    transition: opacity .14s ease;
    width: 3px;
}

.clickable-row:hover td:first-child::before,
.clickable-row:focus td:first-child::before {
    opacity: 1;
}

.form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
    .form-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .form-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Final cascade for shared legacy page components inside the new shell. */
.app-body .metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 42px;
}

.app-body .metrics-grid article,
.app-body .summary-strip article,
.app-body .detail-panel,
.app-body .module-card,
.app-body .report-list a,
.app-body .mapping-grid article,
.app-body .report-run-panel {
    border-radius: 15px;
}

.app-body .metrics-grid article {
    padding: 19px 20px;
}

.app-body .section-heading h2,
.app-body .panel-heading h2,
.app-body .legacy-notes h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.app-body .data-table-wrap {
    border-radius: 13px;
    box-shadow: 0 8px 28px rgba(30, 45, 39, .045);
}

.app-body .feedback-panel {
    background: #fffaf2;
    border-color: #eadbc3;
    border-radius: 15px;
    margin-top: 26px;
    padding: 18px;
}

@media (max-width: 820px) {
    .app-body .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .app-body .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* App-owned record entry and lineage */
.record-header-actions,
.record-detail-actions,
.record-form-actions,
.area-entry-bar,
.area-entry-bar > div {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.decision-banner,
.source-banner,
.area-entry-bar {
    background: #edf1ee;
    border: 1px solid #d0dbd4;
    border-radius: 15px;
    margin-bottom: 24px;
    padding: 17px 19px;
}

.decision-banner {
    align-items: flex-start;
    display: flex;
    gap: 14px;
}

.decision-mark {
    align-items: center;
    background: var(--sidebar);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: Georgia, serif;
    font-size: 18px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.decision-banner strong,
.decision-banner p {
    display: block;
}

.decision-banner strong {
    font-size: 13px;
}

.decision-banner p,
.area-entry-bar span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 4px 0 0;
}

.record-filter {
    grid-template-columns: minmax(260px, 1.3fr) minmax(150px, .55fr) minmax(160px, .65fr) auto auto;
}

.draft-record-table {
    min-width: 1260px;
}

.empty-records {
    background: var(--panel);
    border: 1px dashed #c8c4ba;
    border-radius: 16px;
    margin-top: 18px;
    padding: 42px;
    text-align: center;
}

.empty-records h2 {
    font-family: Georgia, serif;
    font-size: 26px;
    font-weight: 500;
    margin: 10px 0 8px;
}

.empty-records p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 580px;
}

.empty-records .hero-actions {
    justify-content: center;
}

.record-entry-form {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.record-entry-form > *,
.form-panel,
.form-grid,
.form-grid > *,
.entry-lines,
.entry-line,
.entry-line > * {
    min-width: 0;
}

.form-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    max-width: 100%;
    padding: 24px;
    width: 100%;
}

.form-panel-heading {
    align-items: flex-start;
    display: grid;
    gap: 13px;
    grid-template-columns: 30px minmax(0, 1fr);
    margin-bottom: 21px;
}

.form-panel-heading > span {
    color: var(--accent);
    font-family: Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    padding-top: 5px;
}

.form-panel-heading h2 {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 500;
    margin: 0;
}

.form-panel-heading p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
    margin: 5px 0 0;
}

.line-heading {
    grid-template-columns: 30px minmax(0, 1fr) auto;
}

.record-type-options {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-type-option {
    cursor: pointer;
    position: relative;
}

.record-type-option input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.record-type-option > span {
    border: 1px solid var(--line);
    border-radius: 13px;
    display: block;
    min-height: 86px;
    padding: 17px;
}

.record-type-option input:checked + span {
    background: #edf3ef;
    border-color: #77a091;
    box-shadow: inset 0 0 0 1px #77a091;
}

.record-type-option input:focus-visible + span {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
}

.record-type-option strong,
.record-type-option small {
    display: block;
}

.record-type-option strong {
    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: 500;
}

.record-type-option small {
    color: var(--muted);
    font-size: 11px;
    margin-top: 7px;
}

.area-choice-grid {
    margin-top: 16px;
}

.form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid label,
.entry-line label {
    display: grid;
    gap: 6px;
}

.form-grid label > span:first-child,
.entry-line label > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.entry-line input {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    min-height: 42px;
    padding: 9px 10px;
    width: 100%;
}

.form-grid textarea {
    resize: vertical;
}

.primary-checkbox-control {
    display: flex;
    align-items: center;
    min-height: 42px;
}

.form-grid .primary-checkbox-control input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 20px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.entry-line input:focus {
    border-color: #6e9889;
    outline: 2px solid rgba(39, 95, 83, .13);
}

.form-span-2 {
    grid-column: span 2;
}

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

.field-error {
    color: #a33931;
    font-size: 11px;
}

.entry-lines {
    display: grid;
    gap: 11px;
}

.entry-line {
    align-items: end;
    background: #faf9f5;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(115px, .8fr) minmax(210px, 1.5fr) minmax(100px, .65fr) minmax(90px, .55fr) minmax(100px, .6fr) minmax(150px, 1fr) 32px;
    padding: 13px;
}

.entry-line legend {
    color: var(--accent);
    font-family: Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 0 7px;
    text-transform: uppercase;
}

.line-remove {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #967f72;
    cursor: pointer;
    font-size: 20px;
    height: 34px;
    width: 32px;
}

.line-remove:hover,
.line-remove:focus-visible {
    background: #f5e8e3;
    border-color: #e7cdc2;
    color: #9d3d31;
}

.record-form-actions {
    justify-content: flex-end;
    padding: 8px 0;
}

button.primary-action {
    border: 1px solid var(--sidebar);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.record-result {
    margin-bottom: 16px;
}

.record-detail-hero {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    display: flex;
    gap: 28px;
    justify-content: space-between;
    margin-bottom: 18px;
    padding: 29px;
}

.record-detail-hero h1 {
    font-family: Georgia, serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    letter-spacing: -.03em;
    margin: 0;
}

.record-detail-actions {
    justify-content: flex-end;
}

.source-banner {
    align-items: center;
    display: flex;
    gap: 10px;
}

.source-banner span,
.source-banner small {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.source-banner a {
    color: var(--accent-2);
    font-weight: 750;
    text-decoration: none;
}

.record-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.record-notes {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 15px 0 0;
    white-space: pre-wrap;
}

.record-lines-table {
    min-width: 1050px;
}

.data-table .converted-line td,
.data-table .converted-line:hover td {
    background: #eef0ef;
    color: #7a827f;
}

.converted-line input:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.area-entry-bar {
    justify-content: space-between;
}

.area-entry-bar > div:first-child {
    align-items: flex-start;
    display: grid;
    gap: 0;
}

.area-entry-bar strong {
    font-size: 13px;
}

@media (max-width: 1050px) {
    .record-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .entry-line {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .line-remove {
        justify-self: end;
    }
}

@media (max-width: 760px) {
    .record-header-actions,
    .record-detail-actions,
    .record-form-actions,
    .area-entry-bar {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .record-header-actions a,
    .record-detail-actions form,
    .record-detail-actions button,
    .record-form-actions a,
    .record-form-actions button,
    .area-entry-bar > div,
    .area-entry-bar a {
        width: 100%;
    }

    .record-filter,
    .record-type-options,
    .form-grid,
    .entry-line,
    .record-detail-grid {
        grid-template-columns: 1fr;
    }

    .form-span-2,
    .form-span-full {
        grid-column: auto;
    }

    .line-heading {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .line-heading .secondary-button {
        grid-column: 1 / -1;
    }

    .record-detail-hero {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Final disclosure-icon override after legacy component rules. */
.related-records > summary::after,
.dashboard-editor > summary::after,
.feedback-panel-header::after,
.nav-group > summary::after,
.nav-group .nav-more > summary::after {
    align-self: center;
    content: "›";
    display: inline-block;
    font-size: 30px;
    line-height: .8;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform .16s ease;
}

.related-records[open] > summary::after,
.dashboard-editor[open] > summary::after,
.feedback-panel[open] > .feedback-panel-header::after,
.nav-group[open] > summary::after,
.nav-group .nav-more[open] > summary::after {
    content: "›";
    transform: rotate(90deg);
}

/* Shared Outlook-style disclosure and record-table presentation. */
details > summary { display: flex; align-items: center; gap: 12px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { display: none !important; content: none !important; }
details > summary::before { content: '›'; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; font-size: 36px; line-height: 1; transform: rotate(0deg); transition: transform .16s; }
details[open] > summary::before { transform: rotate(90deg); }
.related-records > summary .section-record-count { margin: 0; color: #267968; font-size: 14px; white-space: nowrap; }
.feedback-panel .feedback-panel-header h2 { font-size: 24px; }
button:not(:disabled):hover, .primary-action:hover, .secondary-action:hover { box-shadow: 0 4px 10px rgba(20,45,36,.23); border-color: #789d8d; }
button, .primary-action, .secondary-action { transition: box-shadow .15s, border-color .15s; }
.row-actions { width: 1%; white-space: nowrap; text-align: right !important; }
.communication-section .data-table td:last-child, .communication-section .data-table th:last-child { padding-right: 22px; }
.communication-section .data-table th:nth-last-child(2), .communication-section .data-table td:nth-last-child(2) { width: 100%; white-space: normal; }
.communication-section > summary { padding-right: 22px; }
.live-table-search { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center !important; gap: 10px; width: 100%; padding: 12px 22px; margin: 0; }
.live-table-search .search-field { position: relative; width: min(100%, 440px); flex: 0 1 440px; }
.live-table-search input[type=search] { width: 100%; min-height: 42px; padding: 9px 42px 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; font: inherit; }
.live-table-search input::-webkit-search-cancel-button { appearance: none; }
.live-table-search .search-clear { position: absolute; right: 5px; top: 5px; width: 32px; height: 32px; min-height: 0; padding: 0; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 6px; font-size: 23px; }
.search-clear[hidden], .search-filtered { display: none !important; }
.search-status { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .related-records > summary { flex-wrap: wrap; gap: 8px; } }
.nav-group summary, .related-records > summary, .dashboard-editor > summary, .feedback-panel-header { display: flex; }
.nav-group summary::before { flex-basis: 22px; font-size: 30px; }
.line-extra-data { display: grid; grid-template-columns: minmax(140px,1fr) 3fr; gap: 8px 20px; padding: 20px; }
.line-extra-data dd { margin: 0; overflow-wrap: anywhere; }
.account-related > summary { align-items: center; padding: 18px 22px; flex-wrap: nowrap; }
.account-related > summary > span:first-of-type { display: block; white-space: nowrap; }
.account-related > summary > .section-record-count { align-self: center; }
.account-related > summary .live-table-search { flex: 1 1 260px; width: auto; min-width: 120px; padding: 0; margin: 0 auto; }
.account-related > summary .live-table-search .search-field { width: 100%; flex-basis: 300px; }
.account-related > summary .live-table-search input { min-height: 36px; height: 36px; }
.account-related > summary .search-clear { top: 2px; }
.account-related:not([open]) > summary .live-table-search { display: none !important; }
.account-related > summary .communication-add, .account-related > summary .section-add { margin-left: auto; white-space: nowrap; }
.account-related > .table-tools { padding-top: 0; }
@media (max-width: 1000px) {
    .account-related > summary { flex-wrap: wrap; }
    .account-related > summary .live-table-search { flex-basis: 200px; }
}
.account-related .data-table td.row-actions, .account-related .data-table th.row-actions { padding-right: 22px; }

/* User account security form */
.user-account-heading,.user-account-status {display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.user-account-heading {justify-content:space-between;margin-bottom:1.25rem}
.user-account-heading h2 {margin:0}
.user-account-form label:has(input[type="checkbox"]) {display:inline-flex;align-items:center;gap:.45rem;margin:0}
.user-account-form input[type="checkbox"] {width:14px;height:14px;min-width:14px;min-height:14px;margin:0;padding:0;vertical-align:middle;flex:0 0 14px}
.user-account-form input:disabled {background:#e7e9e8;color:#737975;cursor:not-allowed}
.user-access-rights {margin-top:2rem;margin-bottom:1.5rem}
.user-access-rights>summary {font-size:1.15rem;font-weight:600;cursor:pointer}
.user-rights-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.25rem 0}
.user-right-widget {border:1px solid #d6ded9;border-radius:8px;padding:1rem}
.user-rights-select-all{display:flex;align-items:center;gap:8px;margin:16px 0}
.user-right-widget:not(.inherited-rights){background:#fff}
.user-right-widget.inherited-rights{background:#fff;border-color:#c9ced3}
.user-right-widget.inherited-rights > summary{background:#fff;color:#18232b}
.user-right-widget.inherited-rights > summary input{cursor:pointer}
.user-right-widget.inherited-rights .user-right-actions{background:#e5e7e9;color:#59636b}
.user-right-widget.inherited-rights .user-right-actions input{cursor:not-allowed}
.user-right-widget>summary {cursor:pointer;font-weight:600}
.user-right-actions {display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.user-admin-right {margin-right:1.25rem!important}
.user-confirm-popover {max-width:480px;width:calc(100% - 2rem);padding:1.5rem;border:1px solid #ccd4cf;border-radius:12px;box-shadow:0 20px 70px #0004}
.user-confirm-popover::backdrop {background:#102c2844;backdrop-filter:blur(5px)}

.user-detail-actions {display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.user-confirm-popover form {display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1.25rem}
.user-detail-actions button:disabled {opacity:.5;cursor:not-allowed}

/* One compact toolbar immediately above paginated records. */
.data-toolbar {display:grid;grid-template-columns:auto minmax(140px,1fr) auto;align-items:center;gap:8px 14px;margin:0 0 6px;padding:0}
.data-toolbar .data-toolbar-summary {white-space:nowrap;gap:0;font-size:12px}
.data-toolbar > .search-bar {min-width:0;max-width:none;width:100%;margin:0;padding:0;gap:6px}
.data-toolbar > .live-table-search {position:relative;flex-wrap:nowrap}
.data-toolbar .live-table-search .search-field {width:100%;flex:1 1 auto;min-width:0}
.data-toolbar .search-bar input,.data-toolbar .live-table-search input[type=search] {height:32px;min-height:32px;padding:5px 32px 5px 10px;background:var(--panel);color:var(--text)}
.data-toolbar .live-table-search .search-clear {width:24px;height:24px;min-height:0;top:4px;right:4px;font-size:20px}
.data-toolbar .search-status:empty {display:none}
.data-toolbar .search-status:not(:empty) {position:absolute;top:100%;left:0;z-index:2;padding:3px 6px;background:var(--panel)}
.data-toolbar .pagination-actions,.data-toolbar .pagination-form {display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:6px;margin:0}
.data-toolbar .pagination-form label {gap:4px;white-space:nowrap;font-size:12px}
.data-toolbar .pagination-form select {width:auto;height:32px;min-height:32px;padding:4px 6px;font-size:12px}
.data-toolbar .pagination-actions select[name="pageNumber"] {min-width:0;width:auto}
.data-toolbar .pagination-arrow {display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:28px;height:28px;min-height:28px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);font-size:18px;line-height:1;flex:0 0 28px;text-decoration:none}
.data-toolbar .pagination-arrow.is-disabled {opacity:.35;cursor:default}
@media(max-width:900px) {
 .data-toolbar {grid-template-columns:auto minmax(120px,1fr);gap:6px 10px}
 .data-toolbar .pagination-actions {grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:480px) {
 .data-toolbar {grid-template-columns:minmax(0,1fr)}
 .data-toolbar .pagination-actions {justify-content:flex-start;flex-wrap:wrap}
 .data-toolbar > .search-bar {grid-template-columns:minmax(0,1fr) auto auto}
}
.session-shield-actions {display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.session-shield-card .session-shield-actions .primary-action {min-width:0;max-width:190px;flex:1 1 0;box-sizing:border-box}
.session-shield-card .session-close-action {background:#873b3b;border-color:#873b3b;color:#fff;cursor:pointer}
.session-shield-card .session-close-action:hover {background:#713131;border-color:#713131}
.session-shield-card [data-close-tab][hidden] {display:none}

.login-brand-heading {text-align:center}

/* Password / email OTP selector shares the credential field label row. */
.login-auth-choice { border:0; padding:0; margin:0; min-width:0; display:grid; gap:8px; }
.login-auth-options { display:flex; align-items:center; gap:24px; min-height:22px; }
.login-panel .login-auth-options label { display:inline-flex; flex:0 0 auto; align-items:center; gap:5px; margin:0; }
.login-panel .login-auth-options input[type="radio"] { width:13px; height:13px; min-height:0; margin:0; padding:0; accent-color:var(--accent,#397dba); }
.login-otp-help { flex:1; min-width:0; margin-left:-12px; overflow-wrap:anywhere; color:#286c95; font-size:11px; line-height:1.3; text-align:left; font-weight:400; font-variant-numeric:tabular-nums; }
.login-panel .otp-resend { justify-self:end; width:auto; min-height:0; padding:3px 0; color:#286c95; background:transparent; border:0; font-size:11px; }
.login-panel [hidden] { display:none !important; }
.security-policy { margin:24px 0; }
.policy-password-checks { display:flex; flex-wrap:wrap; gap:14px 24px; margin:18px 0; }
.policy-password-checks .settings-check { display:inline-flex; align-items:center; gap:7px; }
.policy-password-checks input[type="checkbox"] { width:13px; height:13px; min-height:0; margin:0; }

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

/* Original Piet Retief star silhouette with a circular highlight and depth. */
.star-logo { display:inline-block; width:64px; height:64px; filter:drop-shadow(0 3px 3px rgba(105,68,0,.35)); }
.star-logo::before { content:""; display:block; width:100%; height:100%; background:radial-gradient(circle at 38% 30%,#fff5a3 0%,#ffe347 28%,#ffd000 57%,#e7a100 84%,#ba7800 100%); mask:url('../img/piet-retief-shell-star.png') center/contain no-repeat; }
.brand-mark .star-logo { width:100%; height:100%; }
.auth-brand-star.star-logo { display:block; margin:0 auto 5px; transform:translateY(-7px); }
.login-brand-heading > .eyebrow, .session-shield-card > .eyebrow { margin:0 0 7px; transform:translateY(-7px); }
.auth-step-form { display:grid; gap:18px; }
.forgot-password-link { text-align:center; font-size:13px; }
.account-password-field .password-visibility { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; }
.password-visibility input[type="checkbox"] { width:13px; height:13px; min-height:0; margin:0; }
.settings-overview { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:24px; }
.settings-overview > .settings-form, .settings-overview .settings-preferences-grid { display:contents; }
.settings-overview .record-form-actions, .settings-overview .validation-summary-errors { grid-column:1/-1; }
.settings-overview .settings-card { margin:0; }
.account-password-settings, .account-authenticator { margin-top:16px; }
.account-password-settings summary, .account-authenticator summary { cursor:pointer; font-weight:600; margin-bottom:12px; }
.security-communications { margin:24px 0; }
.communication-variable-legend { margin:16px 0; }
.communication-variable-legend summary { cursor:pointer; font-weight:600; }
.communication-variable-legend th, .communication-variable-legend td { text-align:left; padding:6px 18px 6px 0; }
@media(max-width:700px) { .settings-overview { grid-template-columns:minmax(0,1fr); } }

.smtp-connection-row {display:grid;grid-template-columns:90px minmax(0,1fr);gap:16px;align-items:end}
.smtp-sender-row {display:grid;grid-template-columns:1fr 1fr;gap:16px}
.user-administrator-options {display:flex;gap:18px;flex-wrap:wrap;margin:18px 0}
.access-right-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.access-right-row {display:grid;grid-template-columns:14px minmax(0,1fr) 32px;align-items:center;gap:10px}
.access-right-row input[type=checkbox] {width:13px;height:13px;margin:0}
.access-right-row form {margin:0}
.access-right-row label {margin:0}
.icon-action {display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:5px;font-size:19px}
.account-profile-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.account-profile-grid .detail-panel {min-width:0;overflow-wrap:anywhere}
.account-profile-grid dl {grid-template-columns:minmax(0,1fr);gap:4px}
.account-profile-grid dd {margin-bottom:9px}
.data-toolbar {grid-template-columns:auto minmax(110px,180px) minmax(0,1fr);gap:10px}
.data-toolbar .data-toolbar-summary,.data-toolbar .pagination-form label,.data-toolbar .pagination-form select,.data-toolbar .search-bar input {font-size:13px}
.data-toolbar .pagination-actions {justify-content:flex-end}
@media(max-width:1100px){.account-profile-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.data-toolbar {grid-template-columns:auto minmax(110px,1fr)}.data-toolbar .pagination-actions {grid-column:1/-1;justify-content:flex-end}}
@media(max-width:650px){.account-profile-grid {grid-template-columns:1fr}.smtp-sender-row {grid-template-columns:1fr}}

/* Transient confirmations release their layout space after the fade. */
.feedback-result { transition: opacity 250ms ease; }
.feedback-result.completion-fading { opacity:0; }
@media(prefers-reduced-motion:reduce) { .feedback-result { transition:none; } }
.data-toolbar { grid-template-columns:auto minmax(140px,540px) auto; }
.live-table-search .search-field { width:min(100%,1320px); flex-basis:1320px; min-width:0; }
.account-related > summary .live-table-search { flex:1 1 540px; min-width:0; }
.account-related > summary .live-table-search .search-field { flex-basis:900px; }
.document-lines-section > summary { justify-content:flex-start; }
.document-lines-section > summary > span { flex:0 1 auto; }
.document-lines-section > summary .section-record-count { margin-left:auto; }
.document-lines-section > summary .live-table-search { max-width:900px; margin:0; }
.access-right-row { grid-template-columns:32px minmax(0,1fr) 32px; }
.access-right-row > input[type=checkbox] { justify-self:center; align-self:end; min-height:13px; padding:0; margin:0 0 14px; }
.access-right-row > .icon-action { align-self:end; height:42px; }
.access-right-row form input[name=name] { height:42px; box-sizing:border-box; }
.access-right-actions { justify-content:space-between; }
.account-password-field { position:relative; }
.account-password-field input[type=password],.account-password-field input[type=text] { padding-right:44px; }
.account-password-field .password-eye { position:absolute; right:5px; bottom:5px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; min-height:0; padding:4px; border:0; border-radius:5px; background:transparent; color:var(--muted); }
.password-eye .eye-slash { display:none; }
.password-eye[aria-pressed=true] .eye-slash { display:block; }
@media(max-width:1200px) { .data-toolbar { grid-template-columns:auto minmax(140px,1fr); } .data-toolbar .pagination-actions { grid-column:1/-1; justify-content:flex-end; } }
@media(max-width:650px) { .data-toolbar { grid-template-columns:minmax(0,1fr); } .data-toolbar .pagination-actions { justify-content:flex-start; flex-wrap:wrap; } .data-toolbar .pagination-form { flex-wrap:wrap; } .document-lines-section > summary .live-table-search { flex-basis:100%; } }

/* Shared settings spacing and icon treatment. */
.settings-admin-panel { padding:24px; }
.settings-admin-panel > h2 { display:flex;align-items:center;gap:16px;margin:0 0 12px; }
.settings-admin-panel > h2 .settings-card-icon { flex:0 0 42px; }
.settings-card > div:last-child { min-width:0;flex:1; }
.settings-admin-panel > p { margin-top:0; }
.settings-admin-panel .record-form-actions { margin-bottom:0; }
.access-right-actions { display:grid;grid-template-columns:32px 1fr 32px;align-items:center;position:relative;top:8px; }
.access-right-actions > [form=save-rights] { justify-self:center; }
.settings-card [data-right-rename] { margin:0; }
.settings-card #delete-rights, .settings-card [data-save-rights-form] { display:none;margin:0; }
.smtp-oauth-settings { margin-top:24px; }
.smtp-oauth-settings summary { cursor:pointer;font-weight:600; }
.smtp-oauth-settings code { overflow-wrap:anywhere; }
.smtp-oauth-settings form { margin:16px 0; }

/* Glass dialogs are the shared popover treatment, including Customize. */
html body [data-main-popover]:popover-open, html body .draft-popover:not([hidden]) {
 background:color-mix(in srgb,var(--panel) 90%,transparent);
 border:1px solid color-mix(in srgb,var(--line) 65%,white);
 backdrop-filter:blur(22px) saturate(.7);
 box-shadow:0 38px 100px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.34);
}
body [data-main-popover]:popover-open::backdrop { background:rgba(7,19,16,.46);backdrop-filter:blur(16px) saturate(.55); }
.logout-confirm { text-align:center; }
.logout-confirm h2 { margin-top:0; }
/* Text actions behave as links. Button shadows appear only on hover. */
body button:not(:hover), body .primary-action:not(:hover), body .secondary-action:not(:hover) { box-shadow:none; }
body a:not(.primary-action):not(.secondary-action):not(.pagination-arrow),
body a:not(.primary-action):not(.secondary-action):not(.pagination-arrow):hover,
body .text-action, body .text-action:hover,
body .dashboard-customize-trigger, body .dashboard-customize-trigger:hover {
 box-shadow:none !important;filter:none;transform:none;
}
body .text-action, body .dashboard-customize-trigger { background:transparent;border-color:transparent; }
body .text-action:hover,body .dashboard-customize-trigger:hover { background:transparent;border-color:transparent;color:var(--accent); }

/* Flexible table tools and consistent navigation alignment. */
.data-toolbar { grid-template-columns:auto minmax(140px,1fr) auto; }
.data-toolbar .search-bar,.data-toolbar .search-bar input { width:100%;min-width:0; }
.live-table-search .search-field { width:100%;flex:1 1 auto;max-width:none; }
.account-related > summary .live-table-search { flex:1 1 0;max-width:none; }
.sidebar-footer .footer-feedback { text-align:center; }
.user-administrator-options,.user-custom-rights { display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center; }
@media(max-width:1100px){.data-toolbar {grid-template-columns:auto minmax(140px,1fr)}.data-toolbar .pagination-actions{grid-column:1/-1}}
@media(max-width:650px){.data-toolbar {grid-template-columns:minmax(0,1fr)}}

.saved-password-control {position:relative;display:block}.saved-password-control input {padding-right:42px!important}.saved-password-control .password-eye {position:absolute;right:5px;top:5px;width:32px;height:32px;padding:4px;border:0;background:transparent;color:var(--text)}
.record-select {width:36px!important;min-width:36px;text-align:center!important}.record-select input {width:16px;height:16px;margin:0;vertical-align:middle}
.record-icon {display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:5px;vertical-align:middle;background:transparent;border:1px solid transparent;color:var(--accent-2);border-radius:6px}
.row-actions {white-space:nowrap}.record-bulk-actions {display:flex;align-items:center;gap:12px;margin:8px 0 20px;padding-left:8px}.record-bulk-actions .field-error {margin:0}

/* Shared settings editor and verification spacing. */
.communication-editor-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:24px;align-items:stretch}
.communication-editor{display:flex;flex-direction:column;gap:14px;min-width:0}
.communication-editor>label{display:flex;flex-direction:column;gap:8px}
.communication-editor>label:has([data-template-select]){flex-direction:row;align-items:center;gap:15px}
.communication-editor [data-template-select]{flex:1;min-width:0;padding-left:15px}
.communication-editor>label:has([data-template-select])>span{flex:none}
.communication-editor>label:has([data-template-select])::after{content:"";flex:1.222222;min-width:0;margin-left:-15px}
.communication-editor label:has([data-template-editor]){display:flex;flex-direction:column;flex:1;gap:8px;min-height:0}
.communication-editor textarea{flex:1;width:100%;min-height:clamp(12rem,35vh,28rem);box-sizing:border-box;resize:vertical}
.communication-editor-layout .communication-variable-legend{align-self:start;margin:0}
.security-communications .communication-save{grid-column:1/-1;justify-content:flex-start;margin:0}
.authenticator-qr{display:block;max-width:100%;height:auto;margin:14px 0;background:white}
.verify-panel form{display:grid;gap:14px;margin-top:20px}.verify-panel button{justify-self:start;padding:8px 16px;min-height:36px}.verify-panel> a{display:inline-block;margin-top:18px}
.verify-actions{display:flex;align-items:center;gap:16px}.verify-actions button{flex:none}.verify-actions [role="timer"]{margin:0;min-width:0}
@media(max-width:720px){.communication-editor-layout{grid-template-columns:1fr}}
.security-policy .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:start}
.policy-field{min-width:0;display:grid;gap:6px}
.security-policy .policy-field>label{display:flex;align-items:flex-end;min-height:2.8em;font-size:12px;line-height:1.4;font-weight:700;color:var(--muted)}
.policy-field-control{display:flex;align-items:flex-start;gap:8px}
.security-policy .policy-field-control>input{flex:1;min-width:0;height:42px;min-height:42px;box-sizing:border-box;margin:0}
.policy-help,.policy-help-spacer{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 24px;height:42px}
.policy-info{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;min-height:0;padding:0;border:0;border-radius:50%;background:#1875ce;color:white;font:bold 14px Georgia,serif;cursor:pointer}
.policy-callout{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:min(260px,calc(100vw - 48px));box-sizing:border-box;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--text);font-size:13px;line-height:1.5;box-shadow:0 6px 18px #0002}
.policy-help:not(.help-dismissed):hover .policy-callout,.policy-help:not(.help-dismissed):focus-within .policy-callout,.policy-info[aria-expanded="true"]+.policy-callout{display:block}
.server-type-field{display:grid;gap:8px;margin-bottom:16px}
.smtp-fields>summary,.smtp-oauth-settings>summary{cursor:pointer;font-weight:600;padding:10px 0}
.smtp-fields-body{display:grid;gap:14px;padding:12px 0}
.smtp-oauth-settings{margin:12px 0}.smtp-oauth-settings[hidden],[data-microsoft-tenant][hidden]{display:none!important}
button[form="smtp-settings-form"][hidden]{display:none!important}
.smtp-server-actions .oauth-disconnect{background:#8b1e27;border-color:#8b1e27;color:#fff}
.smtp-server-actions .oauth-disconnect:hover{background:#701720;border-color:#701720;color:#fff}
.smtp-oauth-status{color:#16803b;font-weight:600}
.policy-username-requirement{display:flex;align-items:center;gap:8px;margin:16px 0}
.policy-requirements-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:18px 0}
.policy-requirements-row>.policy-username-requirement{margin:0;position:relative;top:10px}
.policy-username-requirement .settings-check{display:flex;align-items:center;gap:8px}
.security-policy .policy-username-requirement input[type="checkbox"]{width:16px;min-height:16px;height:16px;padding:0;flex:none}
.policy-password-requirements{flex:0 1 auto;width:fit-content;max-width:100%;min-width:0;margin:0;padding:12px 16px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px}
.policy-password-requirements legend{padding:0 6px;font-weight:600}
.policy-password-requirements .policy-password-checks{display:flex;flex-wrap:nowrap;gap:12px;margin:0}
.policy-requirements-row .settings-check{font-size:14px;white-space:nowrap}
.security-policy .policy-requirements-row input[type="checkbox"]{width:16px;height:16px;min-width:16px;min-height:16px;margin:0;padding:0;box-sizing:border-box;flex:0 0 16px}
@media(max-width:600px){.policy-password-requirements .policy-password-checks{flex-wrap:wrap}.policy-requirements-row .settings-check{white-space:normal}}

.accounting-widget-heading{display:flex;align-items:center;gap:8px}
.accounting-widget-heading .policy-help{height:24px}
.accounting-widget-heading .policy-callout{font-weight:400;letter-spacing:normal;text-transform:none;font-family:Arial,sans-serif;background:var(--panel,#fff)}
body[data-interface="legacy"] .accounting-help .policy-info{border-radius:50%;background:#1875ce;color:#fff}
.accounting-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin:16px 0}
.accounting-filters label{display:grid;gap:6px}
.accounting-filters input{padding:8px;border:1px solid var(--line);border-radius:6px;min-width:150px}
/* Keep nested navigation labels beside their left disclosure arrow. */
.sidebar .nav-group .nav-more > summary {justify-content:flex-start;text-align:left;gap:8px}
.sidebar .nav-group .nav-more > summary > a {margin:0;padding:0;text-align:left;flex:0 1 auto}
/* Draw nested-navigation chevrons geometrically to avoid font-baseline drift. */
.sidebar .nav-group .nav-more > summary {align-items:center;line-height:20px}
.sidebar .nav-group .nav-more > summary::before {content:"";display:block;box-sizing:border-box;flex:0 0 8px;width:8px;height:8px;margin:0 7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);align-self:center}
.sidebar .nav-group .nav-more[open] > summary::before {transform:rotate(45deg)}
.sidebar .nav-group .nav-more > summary > a {line-height:20px;align-self:center}

.nav-section-icon {display:inline-flex;align-items:center;justify-content:center;min-width:22px;font-size:20px;line-height:1}.nav-section-icon svg {display:block;flex-shrink:0}

.user-password-label { display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; }
.user-password-label a { font-size:0.85em; font-weight:normal; text-decoration:underline; }
.record-form-actions .skip-password-change { display:flex; align-items:center; gap:.5rem; margin-right:auto; font-weight:normal; } .skip-password-change input { width:auto; }

.sidebar .styles-nav > summary > a { color:inherit; text-decoration:none; flex:1; padding:0; margin:0; }

/* Consistent settings disclosure panels; nested mail forms determine their own height. */
.settings-administration { align-items:start; }
details.settings-disclosure { display:block;padding:24px;height:auto;min-height:0;align-self:start; }
details.settings-disclosure > summary { display:flex;align-items:center;justify-content:flex-start;gap:16px;list-style:none;cursor:pointer;margin:0;padding:0;text-align:left; }
details.settings-disclosure > summary::-webkit-details-marker { display:none; }
details.settings-disclosure > summary::before { content:'›';display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;font-size:30px;line-height:1;transform:none; }
details.settings-disclosure[open] > summary::before { transform:rotate(90deg); }
details.settings-disclosure > summary::after { display:none; }
details.settings-disclosure > summary h2 { font-size:18px;font-weight:700;line-height:1.3;margin:0; }
details.settings-disclosure > summary .settings-card-icon { flex:0 0 44px; }
.settings-disclosure > .settings-section-body { margin-top:22px;min-width:0;height:auto;max-height:none; }
.scale-chart-section .scale-chart-create { display:flex;justify-content:flex-end;position:relative;top:-10px; }
.scale-chart-section .record-bulk-actions { padding:12px 10px 0;margin:0;border-top:1px solid var(--border,#e1ddd3); }

.saved-password-control .password-eye[hidden], [data-remove-smtp-config][hidden] { display:none!important; }

.settings-administration { grid-template-columns:minmax(0,1fr); }
.account-settings-card { position:relative; }
.account-primary-method { display:flex;align-items:center;justify-content:flex-end;gap:6px; }
.primary-method-edit { display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;cursor:pointer; }
.primary-method-edit:hover { background:transparent;box-shadow:none; }
.primary-method-edit svg { width:11.4px;height:11.4px; }

.settings-card .account-administrator-note { margin:24px 0 0;padding:12px;border:1px solid var(--line);border-radius:6px; }
.account-security-popover { width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto; }
.scale-chart-section .scale-chart-create { top:-17px; }
.data-table tfoot [data-record-footer-row] > td { padding:0; }
.data-table tfoot .record-bulk-actions { margin:0;padding:10px 8px; }
.scale-chart-section .data-table tfoot .record-bulk-actions { padding-left:6px; }
.accounting-view-bar { padding-bottom:10px; }


/* Keep selection and row actions reachable while scrolling wide tables. */
.data-table-wrap .data-table { border-collapse:separate;border-spacing:0; }
.data-table-wrap .data-table :is(th,td).record-select { position:sticky;left:0;z-index:3;box-shadow:1px 0 0 var(--line,#d7dedb); }
.data-table-wrap .data-table :is(th,td).row-actions { position:sticky;right:0;z-index:3;box-shadow:-1px 0 0 var(--line,#d7dedb); }
.data-table-wrap .data-table thead :is(.record-select,.row-actions) { z-index:4; }
.data-table tfoot .record-bulk-actions { width:max-content;max-width:100%;position:sticky;left:0;box-sizing:border-box;background:var(--panel,#fff); }
@media print { .data-table-wrap .data-table :is(th,td).record-select,.data-table-wrap .data-table :is(th,td).row-actions,.data-table tfoot .record-bulk-actions { position:static;box-shadow:none; } }

/* Pinned body cells are opaque; header cells retain the shared theme header color. */
.data-table-wrap .data-table td:is(.record-select,.row-actions) { background:var(--panel,#fff); }

.email-settings-columns { display:flex;align-items:flex-start;gap:24px; }
.email-settings-columns > .smtp-oauth-settings,.email-settings-columns > .email-smtp-column { flex:1 1 0;min-width:0;margin:0; }
.email-smtp-column #smtp-settings-form { margin:0; }
.email-smtp-column .smtp-fields { margin:0; }
[data-microsoft-smtp-note][hidden] { display:none!important; }
@media(max-width:800px){.email-settings-columns{flex-direction:column;}.email-settings-columns > .smtp-oauth-settings,.email-settings-columns > .email-smtp-column{width:100%;}}

/* Workspace title links retain the section color in every link state. */
.sidebar .nav-group > summary > a, .sidebar .nav-group > summary > a:visited, .sidebar .nav-group > summary > a:hover, .sidebar .nav-group > summary > a:focus-visible { color:inherit;text-decoration:none; }

.data-table-wrap .data-table :is(th,td).row-actions { width:40px;min-width:40px;padding-left:4px;padding-right:4px;box-sizing:border-box;text-align:center!important; }

/* Signal that clicking a record row opens it. */
.data-table tbody tr[data-row-href], .data-table tbody tr[data-row-href] > td { cursor:pointer; }

/* Balance record-type filters between their background border and the table. */
.related-records > .table-tools:has(> .table-view-bar) { padding-block:16px;align-items:center; }
.related-records > .table-tools > .table-view-bar { margin-block:0;align-items:center; }

.account-logo-heading { display:flex;align-items:center;gap:16px; }
.account-logo { width:96px;height:96px;flex:0 0 96px;border-radius:50%;object-fit:contain;background:var(--panel);border:1px solid var(--line);padding:5px;box-sizing:border-box; }
.account-social-icons { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.account-social-icons img,.social-logo { width:24px;height:24px;object-fit:contain;vertical-align:middle; }
.social-entry-form { padding:20px 22px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap; }
.social-entry-form > label { display:grid;gap:6px;flex:1 1 220px; }
.social-company-choice { display:flex;align-items:center;gap:10px; }.social-company-choice select{flex:1;min-width:0;}
.social-logo[hidden]{display:none!important;}
.social-entry-form .record-form-actions{margin:0;}

.account-logo-placeholder { display:inline-flex;align-items:center;justify-content:center;font-size:39px;font-weight:700; }
.social-logo,.account-social-icons img { background:white;border-radius:4px;padding:2px;box-sizing:content-box; }

#account-social-media > summary { justify-content:flex-start; }
#account-social-media > summary > .section-record-count { margin:0; }

.social-entry-form .record-form-actions { padding:0;align-self:flex-end;align-items:center;min-height:42px; }
.social-entry-form .record-form-actions > button { height:42px;box-sizing:border-box; }

.account-header-code { margin-left:0; }
.account-logo-edit { position:relative;display:block;flex:0 0 96px;width:96px;height:96px;min-height:0;border:0;padding:0;background:transparent;cursor:pointer;border-radius:50%; }
.account-logo-edit-label { position:absolute;top:100%;left:0;right:0;text-align:center;font-size:11px;line-height:16px;opacity:0; }
.account-logo-edit:hover .account-logo-edit-label,.account-logo-edit:focus-visible .account-logo-edit-label { opacity:1; }
[data-logo-file][hidden] { display:none!important; }

#account-logo-dialog .record-form-actions { flex-basis:100%;width:100%;justify-content:flex-end; }

/* Keep validation and lookup messages from stretching account edit controls. */
.account-edit-form .form-grid { align-items:start; }
.account-edit-form .form-grid > label { align-content:start;grid-template-rows:16px 42px; }
.account-edit-form .form-grid > label > span:first-child { line-height:16px; }
.account-edit-form .form-grid input:not([type="hidden"]),
.account-edit-form .form-grid select,
.account-edit-form .form-grid textarea { box-sizing:border-box;height:42px;min-height:42px;margin:0; }
.account-edit-form .form-grid textarea { resize:vertical; }
.account-edit-form .form-grid > label:has(textarea) { grid-template-rows:16px auto; }

/* Commercial fields do not apply to Salesperson / Salespeople (type 6). */
.record-entry-form:has(select[name="Input.AccountType"] option[value="6"]:checked) label:has(> input:is([name="Input.TaxId"],[name="Input.ResellerId"],[name="Input.Term"],[name="Input.TermsDays"],[name="Input.CreditLimit"],[name="Input.Zone"])) { display:none; }

.account-header-text { min-width:0;display:flex;flex-direction:column;gap:4px; }
.account-header-text > .eyebrow, .account-header-text > h1, .account-header-text > .account-header-code { margin:0; }

/* Large square catalog preview; retain the entire image. */
.catalog-record-heading { display:flex; align-items:center; gap:24px; min-width:0; }
.catalog-record-title { min-width:0; overflow-wrap:anywhere; }
.catalog-image-panel { margin:0; flex:0 0 196px; width:196px; }
.catalog-image-control, .catalog-image-control .account-logo { width: min(196px, 100%); height: auto; aspect-ratio: 1; border-radius: 8px; }
.catalog-image-control { display: block; max-width: 100%; padding: 0; overflow: hidden; }
.catalog-image-control .account-logo { display: flex; width: 100%; object-fit: contain; background: #fff; }
.catalog-image-control .account-logo-placeholder { align-items: center; justify-content: center; font-size: 1rem; color: #687386; background: #f3f5f8; }
.catalog-image-control .account-logo-edit-label { top: auto; bottom: 0; padding: 6px; background: #ffffffdf; }

@media (max-width: 600px) { .catalog-record-heading { gap:14px; } .catalog-image-panel { flex-basis: min(196px, 35vw); width:min(196px, 35vw); } }

#catalog-image-dialog .record-form-actions { flex-basis:100%; width:100%; justify-content:flex-end; }

/* Viewing and editing images are separate, keyboard-accessible actions. */
.record-image-field { position:relative; overflow:visible; }
.account-image-control { width:96px; flex:0 0 96px; }
.record-image-preview-button { display:block; width:100%; height:auto; min-height:0; border:0; padding:0; background:transparent; cursor:pointer; border-radius:inherit; }
.record-image-preview-button:disabled { opacity:1; cursor:pointer; }
.record-image-edit-link { display:block; min-height:0; margin:0 auto; padding:0; border:0; background:transparent; color:var(--accent, #315b99); font-size:11px; line-height:16px; text-decoration:underline; cursor:pointer; }
.record-image-field .record-image-edit-link { position:relative; top:2px; opacity:0; pointer-events:none; }
.record-image-field:hover .record-image-edit-link, .record-image-field:focus-within .record-image-edit-link { opacity:1; pointer-events:auto; }
.catalog-image-control.record-image-field { height:auto; aspect-ratio:auto; }
.record-image-preview-popover { position:fixed; inset:0; margin:auto; width:fit-content; height:fit-content; max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); padding:12px; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; background:var(--panel, #fff); overflow:auto; }
.record-image-preview-popover::backdrop { background:rgb(0 0 0 / 45%); }
.record-image-preview-actions { display:flex; justify-content:flex-end; margin-bottom:8px; }
.record-image-preview-popover > img { display:block; width:auto; height:auto; max-width:calc(100vw - 58px); max-height:calc(100dvh - 112px); object-fit:contain; margin:auto; border-radius:0; }
.record-image-preview-popover > img[hidden] { display:none; }

.account-save-actions .account-logo-status { margin-right:auto; min-width:0; font-size:12px; color:var(--muted); }

.account-settings-card > div:last-child > dl + dl { margin-top:10px; }

/* Reserve the section disclosure column for the Dashboard row. */
body:not([data-interface='legacy']) .nav-stack > .nav-link { display:flex; gap:12px; padding-left:46px; }

.outbound-email-editor { width: min(1080px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); overflow: auto; padding: 24px; border: 1px solid var(--border-color, #ccc); border-radius: 14px; background: var(--surface, white); color: var(--text, #172331); box-shadow: 0 24px 80px #0005; }
.outbound-email-editor::backdrop { background: #0005; backdrop-filter: blur(3px); }
.outbound-email-editor > .record-detail-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.outbound-email-editor .server-type-field { margin-bottom: 12px; }
.outbound-email-editor:popover-open { display:block; }
#outbound-email-accounts .record-header-actions { display:flex; justify-content:flex-end; margin-bottom:12px; }

#outbound-email-accounts .data-toolbar label { margin:0; align-items:center; }

.outbound-email-editor > .outbound-email-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin-top:20px; }

@media(max-width:700px) { .access-right-list { grid-template-columns:minmax(0,1fr); } }

.report-settings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.report-settings-grid .form-panel {margin:0;min-width:0}.report-settings-grid label {display:grid;gap:6px;margin-top:12px}.report-settings-grid input,.report-settings-grid select {width:100%;min-width:0;box-sizing:border-box}.report-settings-form > .record-form-actions {justify-content:center;margin-top:20px}@media(max-width:750px){.report-settings-grid {grid-template-columns:minmax(0,1fr)}}

/* Account avatar crop editor: the circle is the exact saved display area. */
.account-image-control img.account-logo { object-fit:cover; padding:0; }
#account-logo-dialog { box-sizing:border-box; max-height:calc(100dvh - 32px); overflow:auto; }
#account-logo-dialog .account-crop-controls { width:100%; min-width:0; }
#account-logo-dialog [hidden] { display:none!important; }
.account-crop-stage { position:relative; width:min(320px,100%); aspect-ratio:1; margin:0 auto; overflow:hidden; background:#e1e5e3; cursor:grab; touch-action:none; user-select:none; border-radius:8px; }
.account-crop-stage.is-dragging { cursor:grabbing; }
.account-crop-stage:focus-visible { outline:2px solid var(--accent,#315b99); outline-offset:3px; }
.account-crop-stage > img { position:absolute; max-width:none; max-height:none; transform:translate(-50%,-50%); pointer-events:none; }
.account-crop-circle { position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 999px rgb(0 0 0 / 45%); border:1px solid #fff; outline:1px solid rgb(0 0 0 / 25%); outline-offset:-2px; box-sizing:border-box; pointer-events:none; }
.account-crop-zoom { display:flex; align-items:center; gap:12px; margin-top:16px; width:100%; }
.account-crop-zoom input { flex:1; min-width:0; padding:0; height:24px; accent-color:var(--accent,#315b99); }
.account-crop-zoom output { min-width:3.5em; text-align:right; font-variant-numeric:tabular-nums; }
#account-logo-dialog .account-crop-hint { width:100%; font-size:12px; color:var(--muted); margin:6px 0; }
#account-logo-dialog [data-upload-status] { width:100%; margin:0; }