:root {
    --bg: #f3f7fb;
    --surface: #ffffff;
    --surface-2: #eef5fb;
    --ink: #102230;
    --muted: #5f7382;
    --line: #d5e1ea;
    --accent: #246bfe;
    --accent-strong: #1b5af0;
    --accent-soft: #eaf1ff;
    --accent-soft-strong: #dce8ff;
    --accent-border: #bfd0fb;
    --accent-ink: #ffffff;
    --sidebar-bg: #102230;
    --sidebar-bg-strong: #0b1727;
    --sidebar-ink: #e7f0fb;
    --sidebar-active: #246bfe;
    --radius: 12px;
    --shadow: 0 18px 42px rgba(16, 34, 48, 0.10);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top right, rgba(36, 107, 254, 0.14) 0%, transparent 34%),
        linear-gradient(180deg, #f7fbff 0%, var(--bg) 42%, #eef4fb 100%);
}

.layout-shell {
    min-height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: 192px 1fr;
    grid-template-rows: minmax(68px, auto) 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    overflow: hidden;
}

    .layout-shell-auth {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-areas:
        "header"
        "main";
        overflow: visible;
    }

.layout-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, #eef5ff 100%);
    backdrop-filter: blur(14px);
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 180px;
}

.brand-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.header-auth {
    display: flex;
    align-items: center;
}

.verification-banner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #f1d48f;
    border-radius: 12px;
    background: linear-gradient(90deg, #fff9ea 0%, #fff4d6 100%);
}

.verification-banner-blocked {
    border-color: #ebb0b8;
    background: linear-gradient(90deg, #fff2f4 0%, #fde6ea 100%);
}

.verification-banner-copy {
    display: grid;
    gap: 4px;
    font-size: 0.82rem;
}

.verification-banner-copy strong {
    font-size: 0.88rem;
}

.verification-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.verification-banner-form {
    margin: 0;
}

.auth-float {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 28px rgba(16, 34, 48, 0.08);
}

.auth-float-meta {
    display: grid;
    gap: 1px;
}

.auth-float-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.auth-float-identity {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
}

.auth-float-form {
    margin: 0;
}

.auth-float-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-float-button:hover {
    filter: brightness(0.98);
}

.auth-float-button-secondary {
    background: var(--accent-soft);
    color: #1d4fbd;
    border: 1px solid var(--accent-border);
}

.auth-float-button-danger {
    background: linear-gradient(135deg, #d85d6a 0%, #b94754 100%);
}

.status-pill {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1d4eb3;
    background: #edf4ff;
    border: 1px solid #c8d7ff;
}

.status-pill-warning {
    color: #8a5a00;
    background: #fff2cc;
    border-color: #f3d789;
}

.status-pill-neutral {
    color: #294855;
    background: #eef4f7;
    border-color: #d5e2e8;
}

.status-pill-success {
    color: #1f5a4a;
    background: #e3f6ec;
    border-color: #b9e1cb;
}

.layout-sidebar {
    grid-area: sidebar;
    min-height: 0;
    padding: 14px 10px;
    background:
        linear-gradient(180deg, rgba(36, 107, 254, 0.08) 0%, rgba(36, 107, 254, 0) 18%),
        linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-strong) 100%);
    color: var(--sidebar-ink);
    border-right: 1px solid #1e3651;
}

.nav-label {
    margin: 4px 6px 8px;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8ea9c4;
}

.nav-link {
    display: block;
    padding: 8px 9px;
    margin-bottom: 3px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: 0.82rem;
}

.nav-link:hover {
    background: rgba(190, 216, 255, 0.12);
}

.nav-link.is-active {
    background: var(--sidebar-active);
    color: #ffffff;
}

.layout-main {
    grid-area: main;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.panel {
    display: grid;
    gap: 12px;
}

.panel-header h1 {
    margin: 0;
    font-size: 1.2rem;
}

.panel-header p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.grid {
    display: grid;
    gap: 10px;
}

.dashboard-live-region {
    display: grid;
    gap: 12px;
}

.dashboard-analytics-toolbar {
    overflow: hidden;
}

.dashboard-analytics-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
    gap: 12px;
    padding: 12px;
    align-items: end;
}

.dashboard-analytics-toolbar .dashboard-analytics-filter-form.containers-filter-form-dual {
    grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) minmax(0, 1fr);
}

.dashboard-analytics-filter-actions {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 100%;
}

.dashboard-analytics-filter-actions .button-link,
.dashboard-analytics-filter-actions .button-secondary {
    min-height: 35px;
    min-width: 128px;
    padding: 5px 12px;
}

.dashboard-visual-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

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

.stat-card,
.table-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.stat-card {
    padding: 12px;
}

.dashboard-stat-card {
    position: relative;
    border-color: #d2dff0;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: 0 16px 30px rgba(16, 34, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.dashboard-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, #6daeff 0%, #246bfe 100%);
}

.dashboard-stat-card .stat-label,
.dashboard-stat-card .stat-value {
    position: relative;
}

.dashboard-stat-card .stat-label {
    color: #55717f;
}

.dashboard-stat-card .stat-value {
    color: #0f2a39;
}

.stat-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-value {
    margin: 8px 0 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
}

.dashboard-document-queue-card {
    border-color: #d0deee;
    background: linear-gradient(180deg, #f7fbff 0%, #edf4fb 100%);
    box-shadow: 0 20px 38px rgba(16, 34, 48, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.dashboard-document-queue-card,
.dashboard-analytics-toolbar,
.dashboard-section-toggle {
    position: relative;
}

.dashboard-document-queue-card::before,
.dashboard-analytics-toolbar::before,
.dashboard-section-toggle::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #6daeff 0%, #246bfe 100%);
    pointer-events: none;
    z-index: 2;
}

.dashboard-document-queue-card > .table-card-header,
.dashboard-analytics-toolbar > .table-card-header,
.dashboard-section-summary {
    position: relative;
    padding: 12px 14px;
    background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%);
    border-bottom-color: #d5e0ef;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(190, 205, 225, 0.32);
}

.dashboard-analytics-toolbar > .table-card-header,
.dashboard-section-summary {
    padding-left: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.dashboard-analytics-toolbar > .table-card-header > div,
.dashboard-section-summary > div {
    display: grid;
    gap: 2px;
}

.dashboard-title-with-tooltip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dashboard-analytics-toolbar > .table-card-header h2,
.dashboard-section-summary h2,
.dashboard-document-queue-card > .table-card-header h2 {
    color: #102c3b;
}

.dashboard-analytics-toolbar > .table-card-header .muted,
.dashboard-section-summary .muted,
.dashboard-document-queue-card > .table-card-header .muted {
    color: #5a7481;
}

.dashboard-analytics-toolbar > .table-card-header .muted,
.dashboard-section-summary .muted {
    margin: 0;
    line-height: 1.2;
}

.dashboard-info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    cursor: help;
    outline: none;
    flex: 0 0 18px;
}

.dashboard-info-tooltip:focus-visible {
    box-shadow: 0 0 0 3px rgba(67, 127, 255, 0.18);
}

.dashboard-info-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #b8cbe2;
    background: rgba(255, 255, 255, 0.92);
    color: #476173;
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    width: max-content;
    max-width: min(340px, calc(100vw - 320px));
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(17, 35, 47, 0.95);
    color: #f8fbfd;
    font-size: 0.69rem;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    transform: translateY(-50%);
    box-shadow: 0 12px 30px rgba(17, 35, 47, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
    z-index: 4;
}

.dashboard-info-tooltip:hover::after,
.dashboard-info-tooltip:focus-visible::after {
    opacity: 1;
}

.dashboard-document-queue-card .table-wrap {
    background: rgba(255, 255, 255, 0.76);
    border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

.dashboard-document-queue-card table {
    background: rgba(255, 255, 255, 0.82);
}

.table-card-header h2 {
    margin: 0;
    font-size: 0.9rem;
}

.table-card-header > div {
    min-width: 0;
}

.table-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 8px 12px;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    text-decoration: none;
    line-height: 1;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d4fbd;
    background: var(--accent-soft);
    cursor: pointer;
}

.button-link:hover {
    background: var(--accent-soft-strong);
}

.button-link.is-active {
    color: #ffffff;
    background: linear-gradient(180deg, #4b89ff 0%, #246bfe 100%);
    border-color: #1d59e9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(36, 107, 254, 0.14);
}

.button-link.is-active:hover {
    background: linear-gradient(180deg, #427fff 0%, #1f60f5 100%);
}

.button-link:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.button-link-danger {
    color: #8f2632;
    background: #fff1f2;
    border-color: #f2c7cd;
}

.button-link-success {
    color: #205f4a;
    background: #edf9f1;
    border-color: #c9e7d3;
}

.button-link-danger:hover {
    background: #ffe4e8;
}

.button-link-success:hover {
    background: #e1f4e8;
}

.inline-form {
    margin: 0;
}

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

.flash-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.flash-message {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #c8d7ff;
    background: #eff4ff;
    color: #1d4eb3;
    font-size: 0.84rem;
}

.flash-message p {
    margin: 0;
}

.flash-message-error {
    border-color: #e8c2c8;
    background: #fff5f6;
    color: #8b3340;
}

.flash-message-warning {
    border-color: #f0d497;
    background: #fff8e8;
    color: #8a5a00;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}

th,
td {
    text-align: left;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    line-height: 1.28;
}

th {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--surface-2);
}

.dashboard-live-region table {
    table-layout: fixed;
}

.dashboard-col-select {
    width: 4%;
}

.dashboard-col-expand {
    width: 4%;
}

.dashboard-col-type {
    width: 7%;
}

.dashboard-col-document-number {
    width: 12%;
}

.dashboard-col-date {
    width: 9%;
}

.dashboard-col-reference {
    width: 13%;
}

.dashboard-col-supplier,
.dashboard-col-container {
    width: 13%;
}

.dashboard-col-total {
    width: 8%;
}

.dashboard-col-currency {
    width: 6%;
}

.dashboard-col-status {
    width: 8%;
}

.dashboard-top-expense-col-item {
    width: 58%;
}

.dashboard-top-expense-col-occurrences {
    width: 10%;
}

.dashboard-top-expense-col-total,
.dashboard-top-expense-col-average {
    width: 16%;
}

.dashboard-top-expense-table th:first-child,
.dashboard-top-expense-table td:first-child,
.dashboard-top-expense-table th:nth-child(2),
.dashboard-top-expense-table td:nth-child(2),
.dashboard-top-expense-table th:nth-child(3),
.dashboard-top-expense-table td:nth-child(3),
.dashboard-top-expense-table th:nth-child(4),
.dashboard-top-expense-table td:nth-child(4) {
    white-space: nowrap;
}

.dashboard-top-expense-card {
    margin: 12px 16px 16px;
    border: 1px solid #d4e1e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fbfd 0%, #eef5f8 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 28px rgba(17, 35, 47, 0.06);
}

.dashboard-top-expense-card .table-wrap {
    padding-top: 0;
}

.dashboard-usage-col-item {
    width: 44%;
}

.dashboard-usage-col-coverage {
    width: 17%;
}

.dashboard-usage-col-average-qty,
.dashboard-usage-col-average-occurrences,
.dashboard-usage-col-average-spend {
    width: 13%;
}

.dashboard-usage-table td {
    white-space: nowrap;
}

.dashboard-usage-table th {
    white-space: normal;
    line-height: 1.3;
}

.dashboard-usage-table thead th {
    vertical-align: bottom;
}

.dashboard-usage-table th:nth-child(3),
.dashboard-usage-table th:nth-child(4),
.dashboard-usage-table th:nth-child(5) {
    min-width: 96px;
}

.dashboard-usage-table th:nth-child(2),
.dashboard-usage-table th:nth-child(3),
.dashboard-usage-table th:nth-child(4),
.dashboard-usage-table th:nth-child(5),
.dashboard-usage-table td:nth-child(2),
.dashboard-usage-table td:nth-child(3),
.dashboard-usage-table td:nth-child(4),
.dashboard-usage-table td:nth-child(5) {
    text-align: center;
}

.dashboard-usage-table th:first-child,
.dashboard-usage-table td:first-child {
    white-space: normal;
}

.dashboard-usage-table th:nth-child(2),
.dashboard-usage-table td:nth-child(2) {
    white-space: normal;
}

.dashboard-usage-coverage-note {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.3;
}

.dashboard-live-region .status-pill {
    padding: 3px 8px;
    font-size: 0.68rem;
}

.dashboard-live-region .muted {
    font-size: 0.74rem;
}

.dashboard-live-region {
    --dashboard-overlay-control-height: 30px;
}

.dashboard-empty-state-card .table-card-header {
    align-items: flex-start;
}

.dashboard-empty-state-body {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.dashboard-empty-state-body p {
    margin: 0;
}

.dashboard-chart-card {
    min-width: 0;
    border-color: #ccdce4;
    background: linear-gradient(180deg, #f7fbfc 0%, #eef4f7 100%);
    box-shadow: 0 18px 36px rgba(17, 35, 47, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-section-toggle {
    overflow: hidden;
}

.dashboard-section-toggle[data-dashboard-state-key="recurring-price-watch"] {
    overflow: visible;
}

.dashboard-section-toggle[data-dashboard-state-key="expense-by-type"] {
    overflow: visible;
}

.dashboard-section-summary {
    cursor: pointer;
    list-style: none;
}

.dashboard-section-summary::-webkit-details-marker {
    display: none;
}

.dashboard-section-summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #56707d;
    border-bottom: 1.5px solid #56707d;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    flex-shrink: 0;
    margin-top: 4px;
}

.dashboard-section-toggle[open] .dashboard-section-summary::after {
    transform: rotate(225deg);
}

.dashboard-chart-body {
    padding: 14px;
    background: linear-gradient(180deg, #eef4f7 0%, #e6eef2 100%);
}

.dashboard-chart-scroll {
    max-height: 420px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid #d7e3e9;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 253, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(17, 35, 47, 0.04);
}

.dashboard-chart-scroll-static {
    max-height: none;
    overflow: visible;
}

.dashboard-chart-card-wide {
    min-width: 0;
}

.dashboard-chart-group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.dashboard-chart-group-header h3 {
    margin: 0;
    font-size: 0.84rem;
}

.dashboard-chart-type-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.dashboard-chart-group-total {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 7px 10px;
    border: 1px solid #d2dff0;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-chart-group-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.dashboard-chart-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
}

.dashboard-chart-chip.is-active {
    color: #1d4fbd;
    background: #edf4ff;
    border-color: #bfd0fb;
}

.dashboard-chart-chip.is-inactive {
    color: #4c67a3;
    background: #f2f6ff;
    border-color: #d3def7;
}

.dashboard-chart-chip.is-negative {
    color: #8f2632;
    background: #fff1f2;
    border-color: #f2c7cd;
}

.dashboard-chart-canvas-wrap {
    position: relative;
    min-height: 140px;
}

.dashboard-chart-canvas-wrap-group {
    min-height: 120px;
}

.dashboard-chart-canvas-wrap-summary {
    min-height: 320px;
}

.dashboard-chart-canvas-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.dashboard-chart-empty-state {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 240px;
    padding: 18px;
}

.dashboard-chart-empty-state p {
    margin: 0;
}

.dashboard-chart-negative {
    color: #8f2632;
}

.dashboard-container-groups {
    display: grid;
    gap: 10px;
}

.dashboard-usage-groups {
    display: grid;
    gap: 12px;
}

.dashboard-usage-chart-body {
    display: grid;
    gap: 14px;
}

.dashboard-usage-filter-form {
    display: grid;
    gap: 12px;
}

.dashboard-usage-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) max-content;
    align-items: start;
    justify-content: start;
    gap: 12px;
}

.dashboard-usage-filter-dropdown {
    position: relative;
    min-width: 0;
}

.dashboard-usage-filter-dropdown > summary {
    list-style: none;
}

.dashboard-usage-filter-dropdown > summary::-webkit-details-marker {
    display: none;
}

.dashboard-usage-filter-trigger {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #d6e2e8;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: 0 10px 18px rgba(17, 35, 47, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    cursor: pointer;
}

.dashboard-usage-filter-trigger::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #607380;
    border-bottom: 2px solid #607380;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.18s ease;
}

.dashboard-usage-filter-dropdown[open] .dashboard-usage-filter-trigger::after {
    transform: rotate(225deg) translateY(-1px);
}

.dashboard-usage-filter-trigger-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.dashboard-usage-filter-trigger-value {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-usage-filter-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #d6e2e8;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: 0 18px 34px rgba(17, 35, 47, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.dashboard-usage-filter-dropdown-wide .dashboard-usage-filter-panel {
    min-width: min(480px, 100vw - 96px);
}

.dashboard-usage-filter-options {
    display: grid;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.dashboard-usage-filter-options-grouped {
    gap: 12px;
}

.dashboard-usage-filter-container-group {
    display: grid;
    gap: 8px;
}

.dashboard-usage-filter-container-group h3 {
    margin: 0;
    font-size: 0.8rem;
}

.dashboard-usage-filter-container-list {
    display: grid;
    gap: 8px;
}

.dashboard-usage-filter-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d8e4ea;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 248, 250, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    cursor: pointer;
}

.dashboard-usage-filter-option input {
    margin: 2px 0 0;
}

.dashboard-usage-filter-option span:nth-child(2) {
    min-width: 0;
}

.dashboard-usage-filter-meta {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
}

.dashboard-usage-filter-actions {
    display: flex;
    justify-content: flex-start;
    justify-self: start;
    align-items: center;
    min-height: 44px;
    gap: 8px;
    flex-wrap: nowrap;
}

.dashboard-usage-filter-actions .button-link {
    min-height: 40px;
    min-width: 128px;
    padding: 8px 14px;
}

.dashboard-usage-group {
    border: 1px solid #d4e1e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef4fb 0%, #e7eef8 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 28px rgba(17, 35, 47, 0.06);
}

.dashboard-usage-group.is-inactive {
    border-color: #d5e2f5;
    background: linear-gradient(180deg, #eef3f8 0%, #e8eef6 100%);
}

.dashboard-usage-group-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(232, 241, 246, 0.98) 100%);
}

.dashboard-usage-group-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-usage-group-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-usage-group-header h3 {
    margin: 0;
    font-size: 0.92rem;
}

.dashboard-usage-group-count {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.dashboard-usage-group-body {
    border-top: 1px solid #d8e4ea;
    padding: 0 16px 16px;
    background: linear-gradient(180deg, rgba(246, 250, 252, 0.85) 0%, rgba(237, 244, 247, 0.98) 100%);
}

.dashboard-usage-group-body .table-wrap {
    padding-top: 14px;
}


.dashboard-price-watch-card {
    margin: 10px 14px 14px;
    border: 1px solid #d4e1e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f7fbfd 0%, #eef5f8 100%);
    overflow: visible;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 28px rgba(17, 35, 47, 0.06);
}

.dashboard-price-watch-card .table-wrap {
    border-radius: 14px;
    overflow-x: auto;
    overflow-y: visible;
}

.dashboard-price-watch-col-item {
    width: 30%;
}

.dashboard-price-watch-col-supplier {
    width: 15%;
}

.dashboard-price-watch-col-price,
.dashboard-price-watch-col-change,
.dashboard-price-watch-col-change-pct {
    width: 10%;
}

.dashboard-price-watch-col-history {
    width: 15%;
}

.dashboard-price-watch-table td {
    vertical-align: middle;
}

.dashboard-price-watch-table-row.is-increase {
    background: rgba(255, 249, 240, 0.55);
}

.dashboard-price-watch-table-row.is-decrease {
    background: rgba(244, 250, 246, 0.6);
}

.dashboard-price-watch-cell-copy,
.dashboard-price-watch-cell-metric {
    display: grid;
    gap: 2px;
}

.dashboard-price-watch-cell-copy strong,
.dashboard-price-watch-cell-metric strong {
    font-size: 0.82rem;
}

.dashboard-price-watch-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    min-width: 74px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.dashboard-price-watch-delta.is-increase {
    color: #8a5a00;
    background: #fff2d8;
    border-color: #f0d6a3;
}

.dashboard-price-watch-delta.is-decrease {
    color: #1f6b3c;
    background: #e8f5ec;
    border-color: #b8ddc2;
}

.dashboard-price-watch-delta.is-percent {
    min-width: 70px;
}

.dashboard-price-watch-history-dropdown {
    position: relative;
}

.dashboard-price-watch-history-dropdown > summary {
    list-style: none;
}

.dashboard-price-watch-history-dropdown > summary::-webkit-details-marker {
    display: none;
}

.dashboard-price-watch-history-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid #d8e4ea;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #38515f;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-price-watch-history-trigger::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #607380;
    border-bottom: 1.5px solid #607380;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.18s ease;
}

.dashboard-price-watch-history-dropdown[open] .dashboard-price-watch-history-trigger::after {
    transform: rotate(225deg) translateY(-1px);
}

.dashboard-price-watch-history-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    width: min(260px, 48vw);
    padding: 10px;
    border: 1px solid #d6e2e8;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
    box-shadow: 0 18px 34px rgba(17, 35, 47, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.dashboard-price-watch-history-dropdown[open] .dashboard-price-watch-history-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dashboard-price-watch-history-list {
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.dashboard-price-watch-history-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    border: 1px solid #e1e9ee;
    border-radius: 10px;
    background: #f8fbfc;
    font-size: 0.72rem;
}

.dashboard-price-watch-history-list-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-price-watch-history-list-copy span:first-child {
    font-weight: 600;
}

.dashboard-price-watch-history-list-row strong {
    font-size: 0.74rem;
}

.dashboard-price-watch-history-list-row.is-current {
    border-color: #bfd0fb;
    background: #edf3ff;
    color: #1f54bf;
}

@media (max-width: 720px) {
    .dashboard-price-watch-card {
        margin-left: 10px;
        margin-right: 10px;
    }

    .dashboard-price-watch-history-panel {
        right: auto;
        left: 0;
        width: min(240px, 72vw);
    }
}

@media (max-width: 1024px) {
    .dashboard-usage-filter-bar {
        grid-template-columns: 1fr;
    }

    .dashboard-usage-filter-actions {
        flex-wrap: wrap;
    }

    .dashboard-usage-filter-panel,
    .dashboard-usage-filter-dropdown-wide .dashboard-usage-filter-panel {
        position: static;
        width: auto;
        min-width: 0;
        margin-top: 8px;
    }
}

.dashboard-container-group {
    border: 1px solid #d4e1e8;
    border-radius: 14px;
    background: linear-gradient(180deg, #eef4fb 0%, #e7eef8 100%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 28px rgba(17, 35, 47, 0.06);
}

.dashboard-container-group-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(232, 241, 246, 0.98) 100%);
}

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

.dashboard-container-group-summary-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-container-group-summary-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-container-group-summary h3 {
    margin: 0;
    font-size: 0.92rem;
}

.dashboard-container-group-count {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.dashboard-container-group-body {
    border-top: 1px solid #d7e2f0;
    padding: 0 16px 16px;
    background: linear-gradient(180deg, rgba(247, 250, 255, 0.88) 0%, rgba(237, 244, 255, 0.98) 100%);
}

.dashboard-container-group-scroll {
    max-height: 520px;
    overflow-y: auto;
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

.dashboard-container-subgroup {
    display: grid;
    gap: 10px;
    padding: 10px 12px 12px;
    border: 1px solid #d7e2f0;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    box-shadow: 0 10px 18px rgba(16, 34, 48, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.dashboard-container-subgroup.is-active {
    border-color: #c7d8ff;
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
}

.dashboard-container-subgroup.is-inactive {
    border-color: #d9e3f6;
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
}

.dashboard-container-subgroup.is-negative {
    border-color: #ecd3d7;
}

.dashboard-container-subgroup-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(151, 171, 183, 0.3);
}

.dashboard-container-subgroup-header h4,
.dashboard-container-subgroup-empty {
    margin: 0;
}

.dashboard-container-subgroup-header h4 {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.dashboard-container-subgroup-empty {
    color: var(--muted);
    font-size: 0.76rem;
}

.dashboard-container-row-list {
    display: grid;
    gap: 8px;
}

.dashboard-container-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-container-row:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: #d7e3e8;
    box-shadow: 0 6px 12px rgba(17, 35, 47, 0.04);
}

.dashboard-container-row-label,
.dashboard-container-row-value {
    margin: 0;
}

.dashboard-container-row-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.77rem;
    color: inherit;
    text-decoration: none;
}

.dashboard-container-row-label:hover,
.dashboard-container-row-label:focus-visible {
    color: #1f5edc;
    text-decoration: underline;
}

.dashboard-container-row-label:focus-visible {
    outline: 2px solid rgba(36, 107, 254, 0.22);
    outline-offset: 2px;
}

.dashboard-container-row-plot {
    min-width: 0;
    position: relative;
}

.dashboard-container-row-value {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    min-width: 72px;
}

.dashboard-container-row-bar-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            to right,
            rgba(125, 160, 235, 0.22) 0,
            rgba(125, 160, 235, 0.22) 1px,
            transparent 1px,
            transparent 20%
        ),
        #eaf1ff;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(153, 177, 225, 0.24), inset 0 1px 2px rgba(117, 141, 189, 0.14);
}

.dashboard-container-row-bar {
    display: block;
    height: 100%;
    border-radius: 0 999px 999px 0;
    position: relative;
    z-index: 1;
}

.dashboard-container-row-bar.is-active {
    background: linear-gradient(90deg, #4f8cff 0%, #246bfe 100%);
}

.dashboard-container-row-bar.is-inactive {
    background: linear-gradient(90deg, #a6c2ff 0%, #79a3ff 100%);
}

.dashboard-container-row-bar.is-negative {
    background: #c75a5a;
}

.dashboard-container-subgroup + .dashboard-container-subgroup {
    margin-top: 2px;
}

@media (max-width: 900px) {
    .dashboard-container-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dashboard-container-row-value {
        text-align: left;
    }
}

.dashboard-select-column,
.dashboard-select-cell {
    width: 60px;
    text-align: center;
}

.dashboard-expand-column,
.dashboard-expand-cell {
    width: 40px;
    text-align: center;
}

.dashboard-select-column input,
.dashboard-select-cell input {
    accent-color: var(--accent);
}

.dashboard-editable-cell {
    vertical-align: middle;
}

.dashboard-column-cell-reference,
.dashboard-column-cell-supplier,
.dashboard-column-cell-container {
    white-space: nowrap;
}

.dashboard-column-cell-reference .dashboard-cell-button {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-reconciliation-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-select-cell-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.dashboard-cell-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

.dashboard-cell-overlay-host {
    position: relative;
    overflow: hidden;
}

.dashboard-cell-button-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 24px 0 10px;
}

.dashboard-cell-button-overlay::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    opacity: 0.72;
    pointer-events: none;
}

.dashboard-cell-button-overlay .dashboard-cell-text,
.dashboard-cell-button-overlay .muted {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-cell-button:hover,
.dashboard-cell-button:focus-visible {
    color: var(--accent);
    outline: none;
}

.dashboard-cell-button-credit,
.dashboard-credit-total {
    color: #0d6b59;
    font-weight: 700;
}

.dashboard-total-value-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.dashboard-total-stack {
    display: inline-grid;
    gap: 2px;
    justify-items: start;
}

.dashboard-total-currency {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dashboard-total-secondary {
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1.3;
}

.dashboard-total-secondary-warning {
    color: #8a4f0f;
}

.dashboard-cell-form {
    display: grid;
    gap: 4px;
}

.dashboard-cell-form[hidden] {
    display: none;
}

.dashboard-cell-overlay-host .dashboard-cell-display {
    display: flex;
    align-items: center;
    min-height: var(--dashboard-overlay-control-height);
}

.dashboard-cell-overlay-host .dashboard-cell-form select.dashboard-cell-input {
    height: var(--dashboard-overlay-control-height);
}

.dashboard-editable-cell.is-editing [data-dashboard-cell-display],
.dashboard-line-item-cell.is-editing [data-dashboard-cell-display] {
    display: none;
}

.dashboard-cell-input {
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    border: 1px solid #c3d3ea;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    line-height: 1.28;
}

.dashboard-cell-input:focus {
    border-color: var(--accent);
    outline: 2px solid rgba(36, 107, 254, 0.16);
    outline-offset: 0;
}

.dashboard-cell-input-suggested {
    color: #58707c;
    font-style: italic;
}

.dashboard-cell-input-suggested option {
    color: var(--ink);
    font-style: normal;
}

.dashboard-cell-error {
    margin: 0;
    color: #8b3340;
    font-size: 0.68rem;
}

.dashboard-cell-help {
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
}

.dashboard-suggested-value {
    color: #58707c;
    font-style: italic;
}

.dashboard-cell-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-document-number-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.dashboard-document-number-actions .dashboard-cell-button {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-document-view-link {
    flex: 0 0 auto;
}

.dashboard-line-items-toggle {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #cfdce2;
    border-radius: 999px;
    background: #f5fafb;
    color: #36505d;
    cursor: pointer;
}

.dashboard-line-items-toggle:hover,
.dashboard-line-items-toggle:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.dashboard-line-items-toggle-icon {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 140ms ease;
}

.dashboard-line-items-toggle.is-expanded .dashboard-line-items-toggle-icon {
    transform: rotate(45deg);
}

.dashboard-document-view-link {
    flex: 0 0 auto;
    color: #1d4fbd;
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
}

.dashboard-document-view-link:hover,
.dashboard-document-view-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.dashboard-modal[hidden] {
    display: none;
}

.dashboard-line-items-row[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .grid-3,
    .dashboard-visual-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-scroll {
        max-height: none;
        padding-right: 0;
    }

    .dashboard-container-group-scroll {
        max-height: none;
    }
}

.dashboard-line-items-cell-wrap {
    padding: 0 16px 14px 54px;
    background: #fbfdfe;
}

.dashboard-line-items-panel {
    padding-top: 8px;
}

.dashboard-reconciliation-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(214, 139, 52, 0.28);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 247, 236, 0.98) 0%, rgba(255, 251, 244, 0.98) 100%);
}

.dashboard-reconciliation-banner-marker {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 999px;
    background: #d68b34;
    box-shadow: 0 0 0 4px rgba(214, 139, 52, 0.14);
}

.dashboard-reconciliation-banner-copy {
    display: grid;
    gap: 3px;
}

.dashboard-reconciliation-banner-title,
.dashboard-reconciliation-banner-text {
    margin: 0;
}

.dashboard-reconciliation-banner-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: #8a4f0f;
}

.dashboard-reconciliation-banner-text {
    font-size: 0.7rem;
    line-height: 1.45;
    color: #6f4f1a;
}

.dashboard-currency-banner {
    border-color: rgba(55, 120, 191, 0.22);
    background: linear-gradient(180deg, rgba(239, 247, 255, 0.98) 0%, rgba(247, 251, 255, 0.98) 100%);
}

.dashboard-currency-banner .dashboard-reconciliation-banner-marker {
    background: #3778bf;
    box-shadow: 0 0 0 4px rgba(55, 120, 191, 0.16);
}

.dashboard-currency-banner .dashboard-reconciliation-banner-title {
    color: #174d84;
}

.dashboard-currency-banner .dashboard-reconciliation-banner-text {
    color: #284e73;
}

.dashboard-currency-conversion-form {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.dashboard-currency-conversion-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: #174d84;
}

.dashboard-currency-conversion-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-currency-conversion-actions .dashboard-cell-input {
    width: min(220px, 100%);
}

.dashboard-reconciliation-indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    cursor: help;
    outline: none;
}

.dashboard-reconciliation-indicator:focus-visible {
    box-shadow: 0 0 0 3px rgba(214, 139, 52, 0.2);
}

.dashboard-reconciliation-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d68b34;
    box-shadow: 0 0 0 4px rgba(214, 139, 52, 0.12);
}

.dashboard-reconciliation-indicator-currency:focus-visible {
    box-shadow: 0 0 0 3px rgba(55, 120, 191, 0.2);
}

.dashboard-reconciliation-indicator-currency .dashboard-reconciliation-indicator-dot {
    background: #3778bf;
    box-shadow: 0 0 0 4px rgba(55, 120, 191, 0.14);
}

.dashboard-reconciliation-indicator-spacer {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.dashboard-reconciliation-indicator::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    width: max-content;
    max-width: 220px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(17, 35, 47, 0.94);
    color: #f8fbfd;
    font-size: 0.68rem;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    transform: translateY(-50%);
    box-shadow: 0 12px 30px rgba(17, 35, 47, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
    z-index: 3;
}

.dashboard-reconciliation-indicator:hover::after,
.dashboard-reconciliation-indicator:focus-visible::after {
    opacity: 1;
}

.dashboard-line-items-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.73rem;
}

.dashboard-line-items-col-description {
    width: 39%;
}

.dashboard-line-items-col-quantity {
    width: 7%;
}

.dashboard-line-items-col-unit-price {
    width: 9%;
}

.dashboard-line-item-money-stack {
    display: inline-grid;
    gap: 2px;
}

.dashboard-line-item-money-secondary {
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1.25;
}

.dashboard-line-items-col-tax-amount {
    width: 8%;
}

.dashboard-line-items-col-total {
    width: 9%;
}

.dashboard-line-items-col-container {
    width: 19%;
}

.dashboard-line-items-col-actions {
    width: 9%;
}

.dashboard-line-items-table th,
.dashboard-line-items-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #e6eef2;
}

.dashboard-line-items-table th {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: transparent;
}

.dashboard-line-item-cell {
    vertical-align: middle;
}

.dashboard-line-item-delete-cell {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.dashboard-line-item-delete-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
}

.dashboard-line-item-delete-icon {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 14px;
}

.dashboard-line-item-delete-icon-lid {
    position: absolute;
    top: 0;
    left: 1px;
    width: 10px;
    height: 3px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.dashboard-line-item-delete-icon-lid::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 2px;
    width: 4px;
    height: 2px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-radius: 2px 2px 0 0;
}

.dashboard-line-item-delete-icon-body {
    position: absolute;
    top: 3px;
    left: 2px;
    width: 8px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-radius: 0 0 2px 2px;
}

.dashboard-line-item-delete-icon-body::before,
.dashboard-line-item-delete-icon-body::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 0;
    border-left: 1px solid currentColor;
    opacity: 0.95;
}

.dashboard-line-item-delete-icon-body::before {
    left: 2px;
}

.dashboard-line-item-delete-icon-body::after {
    right: 2px;
}

.dashboard-line-item-cell-empty {
    position: relative;
}

.dashboard-line-item-cell .dashboard-cell-button,
.dashboard-line-item-cell .dashboard-cell-text {
    min-width: 0;
}

.dashboard-line-item-cell .dashboard-cell-button-empty {
    position: absolute;
    inset: 0;
}

.dashboard-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 20px;
}

.dashboard-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 35, 47, 0.52);
}

.dashboard-modal-panel {
    position: relative;
    width: min(100%, 440px);
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(17, 35, 47, 0.22);
}

.dashboard-modal-panel h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.dashboard-modal-panel p {
    margin: 0 0 10px;
}

.dashboard-modal-danger-copy {
    color: #a53e4d;
    font-weight: 600;
}

.dashboard-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.document-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.document-link:hover,
.document-link:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}

.empty-row {
    text-align: center;
    color: var(--muted);
    padding: 18px;
}

.upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 12px;
}

.upload-intake-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.upload-card {
    overflow: hidden;
}

.upload-card-body {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.upload-dropzone {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 20px;
    text-align: center;
    border: 1px dashed #8ccfa6;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fdf8 0%, #eef9f0 100%);
}

.upload-dropzone.is-dragover {
    border-color: #2f8f4b;
    background: linear-gradient(180deg, #f1fbf3 0%, #dff2e4 100%);
}

.upload-dropzone-shell {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.upload-dropzone-input {
    display: none;
}

.upload-form {
    display: grid;
    gap: 14px;
}

.upload-dropzone-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.upload-submit {
    width: auto;
    color: #ffffff;
    background: linear-gradient(180deg, #3f84ff 0%, #1f63f2 100%);
    border-color: #1c56d4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 22px rgba(31, 99, 242, 0.18);
}

.upload-submit:hover {
    background: linear-gradient(180deg, #377cf5 0%, #1a59e3 100%);
}

.upload-submit:disabled {
    box-shadow: none;
}

.upload-form.is-submitting .upload-dropzone {
    opacity: 0.76;
}

.upload-form.is-submitting [data-upload-choose] {
    pointer-events: none;
    opacity: 0.6;
}

.upload-inline-notice {
    width: min(100%, 640px);
    padding: 12px 14px;
    border: 1px solid #c8dece;
    border-radius: 12px;
    background: #f2fbf4;
}

.upload-inline-notice[data-tone='info'] {
    border-color: #bfdac7;
    background: #edf8f0;
    color: #215f34;
}

.upload-inline-notice[data-tone='success'] {
    border-color: #a9d5b8;
    background: #ebf8ef;
    color: #1f6637;
}

.upload-inline-notice[data-tone='error'] {
    border-color: #e8c2c8;
    background: #fff5f6;
    color: #8b3340;
}

.upload-inline-notice-copy {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.upload-file-summary {
    margin: 0;
    font-size: 0.84rem;
    color: var(--muted);
}

.upload-dropzone-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
}

.upload-meta-inline {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.upload-meta-copy {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.upload-meta-copy strong {
    color: var(--ink);
}

.upload-results {
    display: grid;
    gap: 12px;
    margin-top: 2px;
}

.upload-results-empty {
    margin-top: 0;
}

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

.upload-results-banner {
    padding: 12px 14px;
    border: 1px solid #b9dedb;
    border-radius: 12px;
    background: #f2fbfa;
    color: #20595b;
}

.upload-results-banner-success {
    border-color: #a9d5b8;
    background: #ebf8ef;
    color: #1f6637;
}

.upload-results-banner-error {
    border-color: #e8c2c8;
    background: #fff5f6;
    color: #8b3340;
}

.upload-results-banner p {
    margin: 0;
    font-size: 0.84rem;
}

.upload-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #ffffff;
}

.upload-result-card-success {
    border-color: #b7dbc2;
    background: #f0faf3;
}

.dashboard-status-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dashboard-status-pill-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.dashboard-status-retry-form .dashboard-status-pill-pending {
    display: none;
}

.dashboard-status-retry-form.htmx-request .dashboard-status-pill-action {
    opacity: 0.88;
    pointer-events: none;
}

.dashboard-status-retry-form.htmx-request .dashboard-status-pill-label {
    display: none;
}

.dashboard-status-retry-form.htmx-request .dashboard-status-pill-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dashboard-status-spinner-inline {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
    border-color: rgba(138, 90, 0, 0.22);
    border-top-color: currentColor;
}

.dashboard-status-cell[aria-label] {
    width: 100%;
    justify-content: center;
}

.dashboard-status-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(36, 107, 254, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: dashboard-status-spin 0.8s linear infinite;
}

@keyframes dashboard-status-spin {
    to {
        transform: rotate(360deg);
    }
}

.upload-result-card-error {
    border-color: #ebc4c9;
    background: #fff6f7;
}

.upload-result-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.upload-result-card .manage-email-badges {
    align-items: center;
    flex-shrink: 0;
}

.upload-result-copy p {
    margin: 0;
}

.upload-result-title {
    font-size: 0.9rem;
    font-weight: 700;
    word-break: break-word;
}

.auth-layout {
    width: min(100%, 540px);
    margin: 0 auto;
}

.auth-card {
    overflow: hidden;
    border-color: #d3def0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 28px 60px rgba(16, 34, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.layout-shell-auth .layout-main {
    display: grid;
    align-content: start;
    justify-items: center;
    padding-top: 32px;
    overflow: visible;
}

.auth-card-body {
    padding: 24px;
}

.auth-eyebrow {
    margin: 0 0 10px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: #1b5af0;
}

.auth-card-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.auth-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

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

.auth-field {
    display: grid;
    gap: 7px;
}

.auth-field label {
    font-size: 0.84rem;
    font-weight: 600;
}

.auth-password-wrap {
    position: relative;
}

.auth-field input:not([type='checkbox']),
.auth-field select,
.auth-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid #c9d7ea;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font: inherit;
}

.auth-field select {
    padding-right: 42px;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #56707d 50%),
        linear-gradient(135deg, #56707d 50%, transparent 50%),
        linear-gradient(to right, #d7e5ea, #d7e5ea);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px),
        calc(100% - 40px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 22px;
    background-repeat: no-repeat;
}

.auth-password-wrap input:not([type='checkbox']) {
    padding-right: 46px;
}

.auth-field input:not([type='checkbox']):focus,
.auth-field select:focus,
.auth-field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.14);
}

.auth-field input:not([type='checkbox']):disabled,
.auth-field input:not([type='checkbox'])[readonly],
.auth-field select:disabled,
.auth-field select[readonly],
.auth-field textarea:disabled,
.auth-field textarea[readonly] {
    background: #e9eef4;
    border-color: #c6d2df;
    color: #53697b;
    box-shadow: none;
    cursor: not-allowed;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #56707d;
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-password-toggle:hover {
    background: rgba(36, 107, 254, 0.08);
    color: #1d4fbd;
}

.auth-password-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-help,
.auth-error,
.auth-footer-copy {
    margin: 0;
}

.auth-help {
    font-size: 0.78rem;
    color: var(--muted);
}

.auth-help ul {
    margin: 8px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
}

.auth-help a,
.auth-inline-link {
    color: #1d4fbd;
    font-weight: 600;
    text-decoration: none;
}

.auth-help a:hover,
.auth-inline-link:hover {
    text-decoration: underline;
}

.auth-error {
    font-size: 0.78rem;
    color: #a53e4d;
}

.auth-checkbox-row {
    display: grid;
    gap: 6px;
}

.auth-checkbox-block {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, #f9fbff 0%, var(--surface-2) 100%);
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--ink);
}

.auth-checkbox input[type='checkbox'] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.auth-submit {
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.auth-submit:hover {
    filter: brightness(0.98);
}

.auth-submit:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: none;
}

.auth-alert {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e8c2c8;
    background: #fff5f6;
    color: #8b3340;
    font-size: 0.84rem;
}

.auth-alert p {
    margin: 0;
}

.auth-footer {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.account-card-body {
    display: grid;
    gap: 18px;
}

.account-footer {
    margin-top: 0;
}

.account-stack {
    display: grid;
    gap: 10px;
}

.account-stack p {
    margin: 0;
}

.account-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-summary {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid #d3def0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.account-summary-title,
.account-summary-copy {
    margin: 0;
}

.account-summary-title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #56707d;
}

.email-confirm-body {
    display: grid;
    gap: 18px;
}

.email-confirm-summary {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border: 1px solid #d3def0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.email-confirm-label,
.email-confirm-address,
.email-confirm-meta {
    margin: 0;
}

.email-confirm-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #56707d;
}

.email-confirm-address {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    word-break: break-word;
}

.email-confirm-footer {
    margin-top: 0;
}

.manage-panel {
    max-width: 960px;
}

.settings-panel {
    max-width: none;
}

.manage-card {
    overflow: hidden;
}

.user-control-card {
    overflow: visible;
}

.manage-card-body {
    padding: 22px;
}

.manage-card-header h1 {
    margin: 0;
    font-size: 1.7rem;
}

.manage-section {
    margin-top: 24px;
}

.manage-section-add {
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.manage-section-title {
    margin: 0 0 8px;
    font-size: 1rem;
}

.manage-form {
    margin-top: 14px;
}

.manage-form-list {
    gap: 18px;
}

.manage-email-list {
    display: grid;
    gap: 12px;
}

.manage-email-option {
    display: block;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    cursor: pointer;
}

.manage-email-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.manage-email-choice input {
    margin-top: 3px;
    accent-color: var(--accent);
}

.manage-email-copy {
    display: grid;
    gap: 8px;
}

.manage-email-address {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--ink);
    word-break: break-word;
}

.manage-email-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.manage-actions .button-link,
.manage-actions .button-secondary,
.manage-button-danger,
.manage-submit-inline {
    min-height: 38px;
}

.manage-button-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #d85d6a 0%, #b94754 100%);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.manage-button-danger:hover {
    filter: brightness(0.98);
}

.manage-submit-inline {
    width: auto;
    padding: 0 18px;
}

.settings-card {
    width: 100%;
    max-width: none;
}

.settings-section {
    margin-top: 28px;
}

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

.settings-form-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.settings-form-card-header {
    display: grid;
    gap: 4px;
}

.settings-form-card-title {
    margin: 0;
    font-size: 1rem;
}

.settings-form-card-copy {
    margin: 0;
}

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

.settings-price-watch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

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

.settings-actions-row {
    padding-top: 4px;
}

.settings-subscription-required-card {
    gap: 20px;
    border-color: var(--line);
    background: var(--surface-2);
}

.settings-subscription-recovery-shell {
    display: grid;
    gap: 18px;
    align-items: start;
}

.settings-subscription-selector-panel {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(36, 107, 254, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 16px 32px rgba(36, 107, 254, 0.08);
}

.settings-subscription-selector-copy {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.settings-subscription-selector-field {
    gap: 8px;
}

.settings-subscription-action-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.settings-subscription-selector {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.settings-subscription-input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.settings-subscription-selector:focus {
    outline: 2px solid rgba(36, 107, 254, 0.18);
    outline-offset: 2px;
    border-color: var(--accent);
}

.settings-subscription-input:focus {
    outline: 2px solid rgba(36, 107, 254, 0.18);
    outline-offset: 2px;
    border-color: var(--accent);
}

.settings-subscription-purchase-button {
    justify-content: center;
    min-height: 40px;
    min-width: 220px;
    padding: 0 18px;
    opacity: 1;
}

.settings-subscription-panel {
    display: grid;
    gap: 14px;
}

.settings-subscription-overview {
    display: grid;
    gap: 12px;
}

.settings-subscription-heading {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.settings-subscription-usage-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
}

.settings-subscription-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-subscription-copy {
    margin: 0;
}

.settings-subscription-feedback {
    min-height: 1.35rem;
    margin: 0;
}

.settings-subscription-management-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(16, 34, 48, 0.08);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 0.94) 100%);
}

.settings-subscription-management-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.settings-subscription-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.settings-subscription-fact {
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 88px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 34, 48, 0.08);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 0.96) 100%);
    box-shadow: 0 8px 18px rgba(16, 34, 48, 0.045);
}

.settings-subscription-fact-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.settings-subscription-fact-value {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.settings-subscription-fact-value-lg {
    font-size: 1.05rem;
    line-height: 1.15;
}

.settings-subscription-usage-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

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

.settings-usage-card {
    display: grid;
    gap: 6px;
    align-content: start;
    min-height: 104px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 34, 48, 0.08);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(16, 34, 48, 0.045);
}

.settings-usage-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.settings-usage-value {
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1.1;
}

.settings-usage-limit {
    margin: 0;
    padding-top: 5px;
    border-top: 1px solid rgba(16, 34, 48, 0.08);
    font-size: 0.76rem;
}

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

.containers-panel {
    max-width: none;
}

.containers-actions-section {
    margin-top: 18px;
}

.containers-page-actions {
    justify-content: flex-end;
    padding: 0;
}

.containers-page-actions .button-link {
    border-color: #1b5af0;
    background: var(--sidebar-active);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(36, 107, 254, 0.16);
}

.containers-page-actions .button-link:hover {
    background: #1b5af0;
}

.containers-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-top: 10px;
    margin-bottom: 10px;
}

.containers-section-heading > :first-child,
.containers-table-header > :first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.containers-toggle-section {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.containers-toggle-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
}

.containers-toggle-summary::-webkit-details-marker {
    display: none;
}

.containers-toggle-summary::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-right: 1.5px solid #56707d;
    border-bottom: 1.5px solid #56707d;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.containers-toggle-section[open] .containers-toggle-summary::after {
    transform: rotate(225deg);
}

.containers-toggle-summary .manage-section-title,
.containers-toggle-summary h2 {
    margin: 0;
}

.containers-toggle-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--line);
}

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

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

.containers-inline-actions {
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.containers-table-action {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 0.72rem;
}

.containers-status-pill {
    min-width: 74px;
    justify-content: center;
    border-width: 1px;
    font-weight: 700;
}

.containers-status-pill-default {
    color: #2f4c5d;
    background: #e8eff4;
    border-color: #c3d2dc;
}

.containers-status-pill-custom {
    color: #0b5d60;
    background: #d8f1ee;
    border-color: #9dd5d1;
}

.containers-status-pill-active {
    color: #14563b;
    background: #dff2e7;
    border-color: #a8d4b8;
}

.containers-status-pill-inactive {
    color: #8b3340;
    background: #fff0f2;
    border-color: #efc4cb;
}

.containers-actions-menu {
    position: relative;
    display: inline-block;
}

.containers-actions-menu summary {
    list-style: none;
    cursor: pointer;
}

.containers-actions-menu summary::-webkit-details-marker {
    display: none;
}

.containers-actions-menu[open] summary {
    border-color: var(--accent);
    background: #eaf1ff;
}

.containers-actions-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 148px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(17, 35, 47, 0.16);
    display: grid;
    gap: 4px;
}

.containers-actions-menu-link,
.containers-actions-menu-button,
.containers-actions-menu-note {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #234856;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.containers-actions-menu-link:hover,
.containers-actions-menu-button:hover {
    background: #eff4ff;
    color: #1d4fbd;
}

.containers-actions-menu-button {
    cursor: pointer;
}

.containers-actions-menu-button-danger {
    color: #8f2632;
}

.containers-actions-menu-button-danger:hover {
    background: #fff2f4;
    color: #8f2632;
}

.containers-actions-menu-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: transparent;
}

.containers-actions-menu-note {
    color: var(--muted);
    cursor: default;
}

.containers-floating-menu {
    position: absolute;
    z-index: 70;
    min-width: 148px;
}

.containers-floating-menu .containers-actions-menu-list {
    position: static;
}

.containers-table-header {
    align-items: flex-start;
    flex-wrap: wrap;
}

.containers-table-header p {
    margin: 0;
}

.containers-table-header .database-table-header-copy {
    flex: 0 1 380px;
    max-width: 420px;
    min-width: 0;
}

.containers-table-header .database-table-header-copy .muted {
    max-width: 42ch;
}

.containers-filter-form {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.containers-section-heading .containers-filter-form,
.containers-table-header .containers-filter-form {
    margin-left: auto;
    flex: 0 1 640px;
    width: min(100%, 640px);
}

.containers-table-header .database-table-search-form {
    flex: 1 1 760px;
    width: min(100%, 760px);
    grid-template-columns: minmax(220px, 1.7fr) repeat(2, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: 10px 12px;
    justify-items: stretch;
}

.containers-table-header .database-table-search-form .dashboard-cell-input {
    width: 100%;
}

.containers-table-header .database-table-search-form .containers-filter-control {
    min-width: 0;
}

.database-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    align-self: end;
    justify-self: end;
    min-width: max-content;
}

.database-filter-actions .button-link,
.database-filter-actions .button-secondary {
    white-space: nowrap;
}

.database-pagination-actions {
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.database-pagination-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.database-pagination-link {
    min-width: 34px;
    justify-content: center;
}

.database-pagination-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #0c6d6f;
    border-radius: 999px;
    background: var(--sidebar-active);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
}

.database-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: var(--muted);
    font-weight: 700;
}

.database-sort-link {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
}

.database-sort-link:hover {
    color: #1d4fbd;
}

.database-sort-link.is-active {
    color: #1b5af0;
}

.database-line-items-table {
    table-layout: fixed;
}

.database-line-items-col-document {
    width: 17%;
}

.database-line-items-col-supplier {
    width: 12%;
}

.database-line-items-col-linked {
    width: 12%;
}

.database-line-items-col-description {
    width: 27%;
}

.database-line-items-col-quantity {
    width: 6%;
}

.database-line-items-col-unit-price {
    width: 7%;
}

.database-line-items-col-total {
    width: 7%;
}

.database-line-items-col-approved {
    width: 8%;
}

.database-line-items-col-view {
    width: 4%;
}

.containers-detail-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-top: 24px;
    padding: 0 0 1px;
    border-bottom: 1px solid var(--line);
}

.containers-detail-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    color: #4e6976;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.containers-detail-tab:hover {
    color: #1d4fbd;
    background: #eef4ff;
}

.containers-detail-tab.is-active {
    background: var(--surface);
    border-color: var(--line);
    color: #143f9c;
    box-shadow: 0 -1px 0 var(--surface), inset 0 3px 0 var(--accent);
}

.containers-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
    gap: 12px;
}

.containers-overview-grid .stat-card .muted {
    margin: 8px 0 0;
}

.containers-detail-tab.is-active:hover {
    background: var(--surface);
}

.containers-filter-form-dual {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.containers-filter-control {
    display: grid;
    gap: 6px;
}

.containers-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.containers-filter-select {
    min-width: 180px;
}

.containers-filter-search {
    min-width: 180px;
    width: 100%;
}

.containers-modal-panel {
    width: min(100%, 560px);
    padding: 24px;
}

.containers-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.containers-modal-header p {
    margin: 6px 0 0;
}

.containers-modal-form {
    margin-top: 0;
}

.containers-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.containers-submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
}

.button-link-success .containers-submit-spinner {
    border-color: rgba(32, 95, 74, 0.24);
    border-top-color: #205f4a;
}

.containers-modal-form.is-submitting .containers-submit-spinner {
    display: inline-block;
}

.containers-modal-form.is-submitting .containers-submit-button {
    cursor: wait;
}

.containers-delete-alert {
    margin: 0 0 16px;
}

.containers-delete-copy {
    margin: 0;
}

.containers-checkbox-field {
    display: grid;
    gap: 8px;
}

.containers-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink);
}

.containers-checkbox-label input {
    accent-color: var(--accent);
}

@media (max-width: 900px) {
    .containers-form-grid,
    .settings-form-grid,
    .settings-security-grid {
        grid-template-columns: 1fr;
    }

    .auth-name-grid,
    .settings-fields-grid,
    .settings-price-watch-grid {
        grid-template-columns: 1fr;
    }

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

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

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

    .containers-table-header {
        align-items: flex-start;
    }

    .containers-page-actions,
    .containers-modal-header,
    .containers-section-heading {
        justify-content: flex-start;
    }

    .containers-section-heading,
    .containers-table-header {
        flex-direction: column;
    }

    .containers-table-header .database-table-search-form {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .database-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        justify-self: stretch;
        flex-wrap: wrap;
    }

    .containers-section-heading .containers-filter-form,
    .containers-table-header .containers-filter-form {
        margin-left: 0;
        width: 100%;
        flex-basis: auto;
    }

    .containers-toggle-summary {
        align-items: flex-start;
    }

    .containers-filter-form-dual {
        grid-template-columns: 1fr;
    }
}

.settings-security-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
}

.settings-badges {
    margin-top: -2px;
}

.settings-inline-form {
    margin-top: 4px;
}

.user-control-section-header {
    margin-bottom: 12px;
    padding: 0;
    border-bottom: 0;
}

.user-control-tab-panel {
    display: grid;
    gap: 12px;
}

.user-control-section-header h2 {
    margin: 0;
}

.user-control-section-header .muted {
    margin: 6px 0 0;
}

.user-control-search-form {
    flex: 1 1 460px;
    width: min(100%, 460px);
    grid-template-columns: minmax(220px, 1fr) auto;
}

.containers-table-header .user-control-search-form {
    margin-left: 0;
    width: 100%;
    grid-template-columns: minmax(220px, 20rem) auto;
    justify-content: start;
}

.user-control-filter-actions {
    align-self: end;
}

.user-control-filter-actions > .button-link,
.user-control-filter-actions > .button-secondary {
    inline-size: 7.5rem;
    justify-content: center;
}

.user-control-results-summary {
    margin: 0;
}

.user-control-pagination-actions {
    justify-content: space-between;
    margin-top: 4px;
}

.user-control-subsection-header {
    margin-top: 18px;
}

.user-control-create-card,
.user-control-created-panel {
    margin-bottom: 12px;
}

.user-control-create-heading {
    display: grid;
    gap: 4px;
}

.user-control-create-heading h3 {
    margin: 0;
    font-size: 0.94rem;
}

.user-control-create-heading .muted {
    margin: 0;
}

.user-control-create-form {
    display: grid;
    gap: 12px;
}

.user-control-create-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.user-control-create-field {
    display: grid;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--ink);
}

.user-control-create-field input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #c9d7ea;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    font: inherit;
}

.user-control-create-field input:focus-visible {
    outline: 2px solid rgba(36, 107, 254, 0.24);
    outline-offset: 1px;
    border-color: #8aaee0;
}

.user-control-create-submit {
    display: flex;
    align-self: end;
}

.user-control-create-submit .button-link {
    min-height: 38px;
    padding-inline: 16px;
    white-space: nowrap;
}

.user-control-form-errors {
    margin: 0;
}

.user-control-form-errors p {
    margin: 0;
}

.user-control-field-error {
    font-size: 0.7rem;
    font-weight: 500;
    color: #8f2632;
}

.user-control-created-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.user-control-created-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.user-control-created-copy strong,
.user-control-created-copy p {
    margin: 0;
}

.user-control-created-contact {
    font-size: 0.74rem;
    color: var(--ink);
}

.user-control-created-url {
    word-break: break-all;
    font-size: 0.74rem;
    color: #1d4fbd;
}

.user-control-created-actions {
    display: flex;
    flex-shrink: 0;
}

.user-control-table-wrap {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    box-shadow: 0 12px 26px rgba(16, 34, 48, 0.05);
    overflow: visible;
}

.user-control-table-wrap + .user-control-subsection-header {
    margin-top: 16px;
}

.user-control-table {
    table-layout: fixed;
}

.user-control-table th,
.user-control-table td {
    vertical-align: middle;
    padding: 12px 12px;
}

.user-control-table thead th {
    background: #eef4f8;
}

.user-control-row {
    background: rgba(255, 255, 255, 0.9);
}

.user-control-row:hover {
    background: #f9fcff;
}

.user-control-table tbody tr:last-child td {
    border-bottom: 0;
}

.user-control-table {
    font-size: 0.74rem;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
}

.user-control-table th,
.user-control-table td {
    padding: 6px 8px;
    vertical-align: middle;
}

.user-control-table thead th {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.user-control-table thead th:first-child {
    border-top-left-radius: 14px;
}

.user-control-table thead th:last-child {
    border-top-right-radius: 14px;
}

.user-control-col-expand,
.user-control-expand-cell {
    width: 36px;
    text-align: center;
}

.user-control-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 14px;
}

.user-control-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 14px;
}

.user-control-col-user {
    width: 14%;
}

.user-control-table-main .user-control-col-user {
    width: 12%;
}

.user-control-col-role {
    width: 7%;
}

.user-control-col-signin,
.user-control-col-uploaded {
    width: 10%;
}

.user-control-col-uploads {
    width: 7%;
}

.user-control-col-phone {
    width: 11%;
}

.user-control-col-invited-by {
    width: 13%;
}

.user-control-col-link {
    width: 14%;
    text-align: center;
}

.user-control-col-actions {
    width: 13%;
    text-align: center;
}

.user-control-table-link-only .user-control-col-user {
    width: 16%;
}

.user-control-table-link-only .user-control-col-role {
    width: 8%;
}

.user-control-table-link-only .user-control-col-phone {
    width: 12%;
}

.user-control-table-link-only .user-control-col-signin,
.user-control-table-link-only .user-control-col-uploaded {
    width: 11%;
}

.user-control-table-link-only .user-control-col-uploads {
    width: 8%;
}

.user-control-table-link-only .user-control-col-link {
    width: 15%;
}

.user-control-table-link-only .user-control-col-actions {
    width: 13%;
}

.user-control-table-link-only .user-control-actions-cell {
    text-align: center;
}

.user-control-table-link-only .user-control-delete-form {
    display: flex;
    justify-content: center;
}

.user-control-table-invites .user-control-col-user {
    width: 22%;
}

.user-control-table-invites .user-control-col-role {
    width: 10%;
}

.user-control-table-invites .user-control-col-invited-by {
    width: 14%;
}

.user-control-table-invites .user-control-col-signin,
.user-control-table-invites .user-control-col-uploaded {
    width: 14%;
}

.user-control-table-invites .user-control-col-link,
.user-control-table-invites .user-control-col-actions {
    width: 13%;
}

.user-control-table-invites .user-control-link-cell,
.user-control-table-invites .user-control-actions-cell {
    text-align: center;
}

.user-control-table-invites .user-control-link-cell-inner {
    display: flex;
    justify-content: center;
    width: auto;
    margin: 0 auto;
}

.user-control-invite-revoke-form {
    display: flex;
    justify-content: center;
}

.user-control-user-cell {
    min-width: 0;
}

.user-control-user-name {
    display: block;
    font-size: 0.82rem;
    line-height: 1.2;
}

.user-control-user-email {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    line-height: 1.3;
    word-break: break-word;
}

.user-control-link-cell {
    min-width: 0;
}

.user-control-link-cell-inner {
    display: grid;
    grid-template-columns: 124px 58px;
    align-items: center;
    justify-content: center;
    width: 186px;
    max-width: 100%;
    margin: 0 auto;
    gap: 4px;
}

.user-control-link-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    min-width: 58px;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid #d4e0ea;
    border-radius: 999px;
    background: #f8fbff;
    color: #32566d;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.user-control-link-state-active {
    border-color: #cde3d3;
    background: #eefaf0;
    color: #2b6d43;
}

.user-control-link-state-expired {
    border-color: #ead8c0;
    background: #fff7ea;
    color: #8a5c16;
}

.user-control-link-state-idle {
    color: #5a7381;
}

.user-control-link-menu {
    display: inline-flex;
    flex-shrink: 0;
}

.user-control-actions-menu {
    display: inline-flex;
    flex-shrink: 0;
}

.user-control-table .containers-actions-menu[open] {
    z-index: 60;
}

.user-control-link-trigger,
.user-control-role-trigger,
.user-control-actions-trigger {
    display: inline-flex;
    align-items: center;
    width: 124px;
    min-width: 124px;
    min-height: 32px;
    padding: 6px 30px 6px 9px;
    border: 1px solid #c9d7ea;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    background-image:
        linear-gradient(45deg, transparent 50%, #56707d 50%),
        linear-gradient(135deg, #56707d 50%, transparent 50%),
        linear-gradient(to right, #d7e5ea, #d7e5ea);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px),
        calc(100% - 32px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 18px;
    background-repeat: no-repeat;
    color: var(--ink);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.user-control-link-trigger:hover,
.user-control-role-trigger:hover,
.user-control-actions-trigger:hover {
    border-color: #b8cade;
}

.user-control-link-menu[open] .user-control-link-trigger {
    border-color: #8aaee0;
    background-color: #edf4ff;
}

.user-control-role-menu[open] .user-control-role-trigger {
    border-color: #8aaee0;
    background-color: #edf4ff;
}

.user-control-actions-menu[open] .user-control-actions-trigger {
    border-color: #8aaee0;
    background-color: #edf4ff;
}

.user-control-actions-trigger {
    width: 96px;
    min-width: 96px;
}

.user-control-link-menu-list {
    min-width: 210px;
}

.user-control-role-menu-list {
    min-width: 110px;
}

.user-control-actions-menu-list {
    min-width: 210px;
}

.user-control-menu-open-up .containers-actions-menu-list {
    top: auto;
    bottom: calc(100% + 6px);
}

.user-control-menu-floating .containers-actions-menu-list {
    position: fixed;
    z-index: 120;
}

.user-control-link-menu-list form {
    display: flex;
}

.user-control-actions-menu-list form,
.user-control-role-quick-form {
    display: flex;
}

.user-control-upload-documents-row {
    background: #f6fafc;
}

.user-control-upload-documents-row[hidden] {
    display: none;
}

.user-control-upload-documents-cell {
    padding: 0 !important;
}

.user-control-upload-documents-panel {
    display: grid;
    gap: 12px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
}

.user-control-upload-documents-header {
    display: grid;
    gap: 4px;
}

.user-control-upload-documents-header h4,
.user-control-upload-documents-header .muted,
.user-control-upload-documents-empty {
    margin: 0;
}

.user-control-upload-documents-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    table-layout: fixed;
}

.user-control-upload-documents-table th,
.user-control-upload-documents-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #dbe6ee;
    vertical-align: top;
}

.user-control-upload-documents-table th {
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.user-control-upload-documents-table tbody tr:last-child td {
    border-bottom: 0;
}

.user-control-upload-documents-table th:first-child,
.user-control-upload-documents-table td:first-child {
    width: 24%;
}

.user-control-upload-documents-table th:nth-child(2),
.user-control-upload-documents-table td:nth-child(2) {
    width: 12%;
}

.user-control-upload-documents-table th:nth-child(3),
.user-control-upload-documents-table td:nth-child(3) {
    width: 16%;
}

.user-control-upload-documents-table th:nth-child(4),
.user-control-upload-documents-table td:nth-child(4) {
    width: 24%;
}

.user-control-upload-documents-table th:nth-child(5),
.user-control-upload-documents-table td:nth-child(5) {
    width: 16%;
}

.user-control-upload-documents-table th:nth-child(6),
.user-control-upload-documents-table td:nth-child(6) {
    width: 8%;
}

.user-control-upload-documents-filename {
    display: block;
    margin-top: 2px;
    font-size: 0.68rem;
    word-break: break-word;
}

.user-control-upload-documents-table td a {
    color: #1d4fbd;
    text-decoration: none;
}

.user-control-upload-documents-table td a:hover {
    text-decoration: underline;
}

.user-control-meta-cell {
    color: var(--ink);
    font-weight: 500;
    font-size: 0.72rem;
}

.user-control-date-cell {
    white-space: normal;
    line-height: 1.3;
}

.user-control-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid #d4e0ea;
    border-radius: 999px;
    background: #f3f7fb;
    color: #24455b;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-control-actions-cell {
    min-width: 0;
    text-align: center;
}

.user-control-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.user-control-action-stack {
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
    gap: 6px;
}

.user-control-link-form {
    display: flex;
}

.user-control-actions .settings-inline-form {
    margin-top: 0;
    flex-shrink: 0;
}

.user-control-remove-form {
    margin-top: 0;
    flex-shrink: 0;
}

.user-control-role-form {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

.user-control-role-menu {
    display: inline-flex;
    flex-shrink: 0;
}

.user-control-role-option.is-selected {
    background: #eaf1ff;
    color: #1d4fbd;
}

.user-control-remove-form {
    display: flex;
}

.user-control-action-button {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 0.72rem;
    white-space: nowrap;
}

.user-control-action-note {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: center;
}

.user-control-empty-state {
    padding: 22px 14px;
}

.user-control-edit-form {
    display: grid;
    gap: 14px;
}

.user-control-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.user-control-edit-field {
    display: grid;
    gap: 6px;
}

.user-control-edit-field span {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--muted);
}

.user-control-edit-field input {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #c9d7ea;
    border-radius: 10px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
}

.user-control-edit-field select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #c9d7ea;
    border-radius: 10px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
}

.user-control-edit-field input:focus-visible {
    outline: 2px solid rgba(36, 107, 254, 0.24);
    outline-offset: 1px;
    border-color: #8aaee0;
}

.user-control-edit-field select:focus-visible {
    outline: 2px solid rgba(36, 107, 254, 0.24);
    outline-offset: 1px;
    border-color: #8aaee0;
}

.user-control-field-help-list {
    margin: 0;
    padding-left: 16px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.user-control-field-help-list li + li {
    margin-top: 2px;
}

.user-control-invite-help {
    display: grid;
    gap: 10px;
}

.user-control-invite-help-group {
    display: grid;
    gap: 4px;
}

.user-control-invite-help-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
}

.staff-portal-shell {
    width: min(100%, 640px);
}

.staff-portal-card {
    width: 100%;
}

.staff-portal-card-body {
    display: grid;
    gap: 18px;
}

.staff-portal-dropzone {
    min-height: 320px;
}

.settings-pending-copy {
    margin-top: 10px;
}

.legal-shell {
    max-width: 920px;
}

.legal-card {
    padding: 24px;
    border-color: #d3def0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 28px 60px rgba(16, 34, 48, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.legal-card h1 {
    margin: 0;
    font-size: 1.7rem;
}

.legal-meta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

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

.legal-section h2 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.legal-section p,
.legal-section li {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.6;
}

.legal-section ul {
    margin: 0;
    padding-left: 18px;
}

.legal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid #cfdbeb;
    border-radius: 999px;
    background: #ffffff;
    color: #294865;
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
}

.button-secondary:hover {
    background: #f5f9ff;
}

@media (max-width: 980px) {
    .layout-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(68px, auto) auto 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "main";
    }

    .layout-sidebar {
        border-right: 0;
        border-bottom: 1px solid #1e4155;
    }

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

    .layout-header {
        height: auto;
        min-height: 68px;
        padding: 12px 18px;
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    .auth-float {
        flex-wrap: wrap;
        border-radius: 16px;
    }

    .verification-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .verification-banner-actions {
        width: 100%;
    }

    .upload-layout {
        grid-template-columns: 1fr;
    }

    .legal-card {
        padding: 18px;
    }

    .manage-card-body {
        padding: 18px;
    }

    .manage-email-choice {
        align-items: flex-start;
    }

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

    .user-control-create-grid {
        grid-template-columns: 1fr;
    }

    .user-control-search-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .user-control-create-submit,
    .user-control-created-panel {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }

    .user-control-create-submit .button-link {
        width: 100%;
    }

    .user-control-role-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .user-control-link-preview {
        grid-template-columns: 1fr;
    }

    .user-control-date-cell {
        white-space: normal;
    }

    .user-control-role-menu {
        width: 100%;
    }

    .user-control-role-trigger {
        min-width: 0;
        width: 100%;
    }

    .user-control-actions-trigger {
        min-width: 0;
        width: 100%;
    }

    .user-control-actions {
        flex-wrap: wrap;
    }

    .user-control-link-cell-inner {
        flex-wrap: wrap;
        display: flex;
        width: fit-content;
        justify-content: flex-start;
    }

    .user-control-edit-grid {
        grid-template-columns: 1fr;
    }
}