.admin-company-logo {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: var(--radius-md);
    background-color: #fff;
}

.admin-company-logo--placeholder {
    display: flex;
    width: 64px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    background-color: var(--background);
    color: var(--muted-foreground);
    font-size: var(--text-2xs);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

label span.required {
    color:red;
}

.hide-loading {
    display: none !important;
}

.show-loading {
    display: block !important;
}

[data-slot="button"].disabled {
    opacity: 0.5;
    cursor: not-allowed;
	pointer-events: none;
}

button, [data-slot="button"] {
    @apply hover:cursor-pointer
}

.onboarding-shell {
    min-height: 100dvh;
    overflow-y: auto;
    background: var(--muted);
}

.onboarding-shell #scrollable_content {
    padding-top: 0;
}

.onboarding-shell ::selection {
    background: color-mix(in oklab, var(--primary) 24%, transparent);
    color: var(--foreground);
}

.onboarding-brandbar__inner {
    width: min(100%, 70rem);
    margin-inline: auto;
}

/* Product customization: keep the canvas and inspector in the same work view. */
.product-customization-workspace {
    grid-template-columns: minmax(0, 1fr);
}

.product-customization-admin-canvas {
    min-height: 18.75rem;
}

@media (min-width: 40rem) {
    .product-customization-admin-canvas {
        min-height: 25rem;
    }
}

@media (min-width: 64rem) {
    .product-customization-workspace {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    }

    .product-customization-admin-canvas {
        min-height: 30rem;
    }
}

@media (min-width: 96rem) {
    .product-customization-workspace {
        grid-template-columns: minmax(0, 1.45fr) minmax(21.25rem, 0.55fr);
    }
}

.google-address-autocomplete {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--radius-md);
    color-scheme: light;
    font-family: inherit;
    font-size: 0.875rem;
}

.google-address-autocomplete::part(input) {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.875rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
    font: inherit;
}

.google-address-autocomplete::part(focus-ring) {
    outline: 2px solid color-mix(in oklab, var(--primary) 35%, transparent);
    outline-offset: 1px;
}

.google-address-autocomplete::part(prediction-item) {
    color: var(--foreground);
    font-family: inherit;
}

.google-address-autocomplete::part(prediction-item-secondary-text) {
    color: var(--muted-foreground);
}

.route-map-marker {
    background: transparent;
    border: 0;
}

.route-map-marker__pin {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--background);
    border-radius: 0.75rem 0.75rem 0.75rem 0.2rem;
    background: var(--primary);
    box-shadow: 0 6px 14px rgb(15 23 42 / 0.22);
    color: var(--primary-foreground);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    transform: rotate(-45deg);
}

.route-map-marker__pin > * {
    transform: rotate(45deg);
}

.route-map-marker__pin--company {
    background: var(--mono);
    color: var(--mono-foreground);
    font-size: 1rem;
}

.leaflet-container:focus-visible,
[data-map-provider="google"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-color: color-mix(in oklab, var(--primary) 45%, transparent);
    outline-offset: 2px;
}

.calendar-card,
.calendar-card [data-slot="card-content"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.calendar-page,
body:has(.calendar-page) .grow,
body:has(.calendar-page) #scrollable_content,
body:has(.calendar-page) main {
    max-width: 100%;
    min-width: 0;
}

.calendar-card [data-slot="card-content"] {
    overflow: hidden;
}

.calendar-toolbar {
    display: grid;
    width: 100%;
    gap: 1rem;
}

.calendar-titlebar,
.calendar-period,
.calendar-filterbar,
.calendar-filterbar__main,
.calendar-cancelled-filter {
    display: flex;
    min-width: 0;
}

.calendar-titlebar {
    flex-direction: column;
    gap: 0.875rem;
}

.calendar-period {
    align-items: center;
    gap: 0.75rem;
}

.calendar-primary-action,
.calendar-primary-action > div {
    width: 100%;
}

.calendar-filterbar {
    flex-direction: column;
    gap: 0.75rem;
    border-top: 1px solid var(--border);
    padding-top: 0.875rem;
}

.calendar-filterbar__main {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.calendar-cancelled-filter {
    min-height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    border-radius: calc(var(--radius) - 2px);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.calendar-workspace {
    display: grid;
    min-width: 0;
    gap: 1.25rem;
}

.calendar-agenda {
    min-width: 0;
}

.calendar-agenda__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.calendar-agenda__scroll {
    min-width: 0;
    padding-right: 0.25rem;
}

.calendar-agenda__list {
    position: relative;
    display: grid;
    gap: 0.25rem;
}

.calendar-agenda__item {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-bottom: 0.875rem;
}

.calendar-agenda__connector {
    position: absolute;
    top: 2.25rem;
    bottom: 0;
    left: 2.25rem;
    width: 1px;
    background: var(--border);
    transform: translateX(-50%);
}

.calendar-agenda__time {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.25rem;
}

.calendar-booking-card {
    min-width: 0;
}

.calendar-route-panel {
    min-width: 0;
}

.calendar-route-empty {
    min-height: 21rem;
}

.calendar-route-actions {
    display: grid;
    gap: 0.625rem;
    margin-top: 1rem;
}

.calendar-route-actions > div {
    width: 100%;
}

@media (max-width: 39.999rem) {
    .calendar-agenda__item {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.375rem;
    }

    .calendar-agenda__connector {
        display: none;
    }

    .calendar-agenda__time {
        flex-direction: row;
        align-items: baseline;
        gap: 0.375rem;
        padding: 0 0.25rem;
    }

    .calendar-agenda__time > span:last-child {
        display: none;
    }
}

.calendar-period-scroller {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

@media (min-width: 64rem) {
    .calendar-titlebar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .calendar-primary-action,
    .calendar-primary-action > div {
        width: auto;
    }

    .calendar-filterbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .calendar-date-picker {
        width: 12rem;
        flex: 0 0 12rem;
    }

    .calendar-workspace--with-route {
        grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.8fr);
    }

    .calendar-agenda__scroll {
        max-height: clamp(28rem, calc(100dvh - 20rem), 42rem);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .calendar-route-panel {
        position: sticky;
        top: 1rem;
        align-self: start;
        max-height: clamp(31rem, calc(100dvh - 15rem), 45rem);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }

    .calendar-route-panel__header {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .calendar-route-map {
        height: 15rem;
    }

    .calendar-route-empty {
        min-height: clamp(28rem, calc(100dvh - 20rem), 36rem);
    }
}

/* Admin shell and catalogue collection */
.admin-content-surface {
    background: var(--background);
}

.admin-content-surface .rental-page {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.admin-content-surface main h1 {
    margin: 0;
    color: var(--foreground);
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.admin-content-surface main .admin-page-subtitle {
    margin-top: .375rem;
    color: var(--muted-foreground);
    font-size: .875rem;
    line-height: 1.55;
}

.admin-content-surface .rental-head { flex-wrap: wrap; }

@media (max-width: 40rem) {
}

.product-catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.product-catalog-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1rem;
}

.product-card-media {
    aspect-ratio: 16 / 10;
}

.product-card-media img {
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (hover: hover) {
    .product-card-media:hover img {
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-card-media img {
        transition: none;
    }
}

@media (min-width: 64rem) {
    .admin-content-surface {
        margin-block: 15px;
        margin-inline-end: 8px;
        border: 1px solid var(--input);
        border-radius: calc(var(--radius) + 4px);
    }

    .product-catalog-toolbar {
        grid-template-columns: minmax(15rem, 1fr) 13rem auto;
        align-items: end;
    }
}

/* Dashboard cockpit */
.dashboard-shell {
    display: grid;
    min-width: 0;
    gap: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* Company home: daily work first, occasional configuration stays folded. */
.dashboard-daily {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1.5rem;
}
.dashboard-daily__work { flex: 2 1 22rem; min-width: 0; }
.dashboard-daily__agenda { flex: 1 1 15rem; min-width: 0; }
.dashboard-daily__agenda h2,
.dashboard-shortcuts h2,
.dashboard-activity-summary h2 { font-size: 1rem; font-weight: 650; color: var(--foreground); }
.dashboard-daily__agenda p,
.dashboard-daily__empty p,
.dashboard-daily__notice { font-size: .9375rem; color: var(--muted-foreground); line-height: 1.65; }
.dashboard-daily__agenda .dashboard-daily__appointment-count { margin-block: 1rem .5rem; color: var(--foreground); }
.dashboard-daily__appointment-count strong { font-size: 1.75rem; font-weight: 700; margin-right: .3rem; }
.dashboard-daily__agenda [data-slot="button"] { margin-top: 1.25rem; min-height: 44px; }
.dashboard-daily__empty { display: flex; align-items: flex-start; gap: .75rem; padding-block: 1.5rem; }
.dashboard-daily__empty > i { font-size: 1.5rem; color: var(--primary); }
.dashboard-daily__empty strong { font-size: 1.0625rem; font-weight: 650; }
.dashboard-daily__empty p { margin-top: .375rem; max-width: 55ch; }
.dashboard-daily .dashboard-action-list { margin-top: 1rem; }
.dashboard-more-tasks > summary { cursor: pointer; padding-block: .875rem; font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; }
.dashboard-shortcuts > div { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.dashboard-shortcuts [data-slot="button"] { min-height: 44px; white-space: normal; }
.dashboard-page-heading__actions [data-slot="button"] { min-height: 44px; }
.dashboard-activity-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-block: 1px solid var(--border); padding-block: 1.25rem; }
.dashboard-activity-summary p { margin-top: .375rem; color: var(--muted-foreground); font-size: .9375rem; }
.dashboard-activity-summary strong { color: var(--foreground); font-weight: 650; }
.dashboard-activity-summary :is(a, button) { min-height: 44px; }
.dashboard-disclosure { min-width: 0; border-bottom: 1px solid var(--border); }
.dashboard-disclosure > summary { padding-block: 1rem; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--foreground); }
.dashboard-disclosure > summary span { display: block; margin-top: .375rem; font-size: .875rem; font-weight: 400; color: var(--muted-foreground); }
.dashboard-disclosure__content { padding-block: .5rem 1.5rem; min-width: 0; }
.dashboard-setup-note { margin-bottom: 1rem; font-size: .875rem; line-height: 1.65; color: var(--muted-foreground); }
.dashboard-shell :where(a, button, summary):focus-visible,
.sidebar-section summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.sidebar-section { border-top: 1px solid var(--border); margin-top: .5rem; }
.sidebar-section > summary { padding: .875rem .625rem; min-height: 44px; cursor: pointer; color: var(--foreground); font-size: .875rem; font-weight: 600; }
.sidebar-section > summary:hover { background: var(--muted); }
.sidebar-section__items { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .5rem; }
@media (max-width: 600px) {
    .dashboard-daily { padding: 1rem; gap: 1.5rem; }
    .dashboard-shortcuts > div { flex-direction: column; }
    .dashboard-shortcuts [data-slot="button"] { justify-content: flex-start; }
}

/* Modular home: each user orders the widgets; widths are fixed per widget. */
.dashboard-widgets-area {
    min-width: 0;
    container-type: inline-size;
}

.dashboard-widgets {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.dashboard-widget {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-widget__body {
    display: grid;
    flex: 1;
    min-width: 0;
}

.dashboard-widget__body > * {
    min-width: 0;
}

@container (min-width: 36rem) {
    .dashboard-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-widget--medium,
    .dashboard-widget--large,
    .dashboard-widgets__empty {
        grid-column: 1 / -1;
    }
}

@container (min-width: 56rem) {
    .dashboard-widgets {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dashboard-widget--medium {
        grid-column: span 2;
    }
}

.dashboard-widgets.is-editing .dashboard-widget {
    padding: 0.5rem;
    border: 1px dashed var(--input);
    border-radius: calc(var(--radius) + 6px);
    background: color-mix(in oklab, var(--muted) 45%, transparent);
}

.dashboard-widget__bar {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-widget__handle {
    display: inline-flex;
    width: 2.25rem;
    height: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--muted-foreground);
    cursor: grab;
    touch-action: none;
}

.dashboard-widget__handle:hover {
    background: var(--muted);
    color: var(--foreground);
}

.dashboard-widget__handle:active {
    cursor: grabbing;
}

.dashboard-widget__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.125rem;
}

.dashboard-widget.is-drag-ghost {
    opacity: 0.35;
}

.dashboard-widget.is-drag-chosen {
    border-style: solid;
    border-color: var(--primary);
}

.dashboard-widgets-editor {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.dashboard-widgets-editor__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--input);
    border-radius: calc(var(--radius) + 4px);
    background: var(--background);
}

.dashboard-widgets-editor__bar strong {
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 650;
}

.dashboard-widgets-editor__bar p {
    max-width: 60ch;
    margin-top: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
}

.dashboard-widgets-editor__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-widgets-editor__actions [data-slot="button"] {
    min-height: 44px;
}

/* From tablet width the bar stays in view, so the user can finish from anywhere on the page. */
@media (min-width: 48rem) {
    .dashboard-widgets-editor__bar {
        position: sticky;
        top: 0.5rem;
        z-index: 10;
    }
}

.dashboard-page-heading,
.dashboard-section-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
}

.dashboard-page-heading h1,
.dashboard-section-heading h2,
.dashboard-onboarding__intro h2 {
    color: var(--foreground);
    font-weight: 750;
    letter-spacing: -0.025em;
}

.dashboard-page-heading h1 {
    font-size: clamp(23px, 2.1vw, 28px);
    line-height: 1.15;
}

.dashboard-section-heading h2,
.dashboard-onboarding__intro h2 {
    font-size: 1.125rem;
    line-height: 1.25;
}

.dashboard-page-heading p,
.dashboard-section-heading p,
.dashboard-onboarding__intro p {
    max-width: 70ch;
    margin-top: 0.375rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
}

.dashboard-page-heading__actions,
.dashboard-page-heading__actions > a {
    width: 100%;
}

.dashboard-kpi-grid,
.dashboard-domain-grid,
.dashboard-utility-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
    gap: 1rem;
}

.dashboard-kpi-grid--compact {
    grid-template-columns: minmax(0, 30rem);
}

.dashboard-kpi {
    display: flex;
    min-width: 0;
    min-height: 9.5rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.125rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
}

.dashboard-kpi--lead {
    background: color-mix(in oklab, var(--muted) 45%, var(--background));
    border-color: var(--input);
}

.dashboard-kpi__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-kpi__label {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    line-height: 1.35;
    text-transform: uppercase;
}

.dashboard-kpi__icon,
.dashboard-action-row__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--muted);
    color: var(--muted-foreground);
}

.dashboard-kpi__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 18px;
}

.dashboard-kpi__value {
    overflow-wrap: anywhere;
    color: var(--foreground);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 780;
    letter-spacing: -0.035em;
    line-height: 1;
}

.dashboard-kpi__context {
    min-height: 1.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.45;
}

.dashboard-kpi.is-positive .dashboard-kpi__context,
.dashboard-stat-row__value.is-positive {
    color: var(--color-green-700);
}

.dashboard-kpi.is-negative .dashboard-kpi__context,
.dashboard-stat-row__value.is-danger {
    color: var(--destructive);
}

.dashboard-stat-row__value.is-warning {
    color: var(--color-yellow-700);
}

.dashboard-panel,
.dashboard-domain-card,
.dashboard-panel [data-slot="card-content"],
.dashboard-domain-card [data-slot="card-content"] {
    min-width: 0;
}

.dashboard-main-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.dashboard-chart-panel [data-slot="card-content"] {
    overflow: hidden;
    padding-inline: 0.75rem;
}

.dashboard-action-list,
.dashboard-stat-list,
.dashboard-ranking {
    display: grid;
    min-width: 0;
}

.dashboard-action-row {
    display: grid;
    min-width: 0;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
}

.dashboard-action-row:last-child,
.dashboard-stat-row:last-child,
.dashboard-ranking__row:last-child {
    border-bottom: 0;
}

.dashboard-action-row__icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

.dashboard-action-row.is-active .dashboard-action-row__icon {
    background: color-mix(in oklab, var(--primary) 10%, var(--background));
    color: var(--primary);
}

.dashboard-action-row.is-warning .dashboard-action-row__icon {
    background: color-mix(in oklab, var(--color-yellow-700) 10%, var(--background));
    color: var(--color-yellow-700);
}

.dashboard-action-row.is-danger .dashboard-action-row__icon {
    background: color-mix(in oklab, var(--destructive) 9%, var(--background));
    color: var(--destructive);
}

.dashboard-action-row__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-action-row__body strong {
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.35;
}

.dashboard-action-row__body span {
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.4;
}

.dashboard-action-row__count {
    display: inline-flex;
    min-width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--muted);
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 700;
}

.dashboard-action-row__arrow {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.dashboard-section-heading {
    padding-top: 0.25rem;
}

.dashboard-domain-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.dashboard-domain-card [data-slot="card-content"] {
    padding-top: 0.25rem;
}

.dashboard-stat-row {
    display: flex;
    min-width: 0;
    min-height: 2.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.dashboard-stat-row__value {
    flex: 0 0 auto;
    color: var(--foreground);
    font-weight: 700;
    text-align: right;
}

.dashboard-rating-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border);
}

.dashboard-rating-summary strong {
    color: var(--foreground);
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.dashboard-rating-summary span {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    text-align: right;
}

.dashboard-finance-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1.25rem;
}

.history-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 1rem;
    padding-block: 1rem;
}

.history-filters > div {
    min-width: 0;
}

.history-filter-search {
    grid-column: span 2;
}

.history-filter-errors {
    grid-column: 1 / -1;
    color: var(--destructive);
}

.history-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

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

.history-email-filters .history-filter-search {
    grid-column: span 2;
}

@media (max-width: 1100px) {
    .history-filters.history-email-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-email-filters .history-filter-type,
    .history-email-filters .history-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .history-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-filter-type,
    .history-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1440px) {
    .history-filters {
        grid-template-columns: minmax(14rem, 2fr) minmax(13rem, 1fr) repeat(2, minmax(9rem, 0.7fr)) auto;
    }

    .history-filter-search {
        grid-column: auto;
    }
}

.dashboard-finance-split > div {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.dashboard-finance-split span,
.dashboard-finance-split small,
.dashboard-subscription-summary span {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.4;
}

.dashboard-finance-split strong {
    color: var(--foreground);
    font-size: 28px;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.dashboard-ranking__row {
    display: grid;
    min-width: 0;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
}

.dashboard-ranking__index {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-empty-state {
    display: flex;
    min-height: 11rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    text-align: center;
}

.dashboard-empty-state i {
    margin-bottom: 0.25rem;
    font-size: 18px;
}

.dashboard-empty-state strong {
    color: var(--foreground);
}

.dashboard-empty-state span {
    max-width: 46ch;
    font-size: 0.8125rem;
}

.dashboard-upgrade-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.dashboard-upgrade-row p {
    max-width: 68ch;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    line-height: 1.55;
}

.dashboard-utility-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.dashboard-progress-block {
    display: grid;
    gap: 0.75rem;
}

.dashboard-progress-block__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.dashboard-progress-block__header strong {
    color: var(--foreground);
    font-size: 18px;
    font-weight: 750;
}

.dashboard-progress-block__header span {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.dashboard-progress-block progress,
.dashboard-onboarding progress {
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--muted);
    color: var(--primary);
    accent-color: var(--primary);
}

.dashboard-progress-block progress::-webkit-progress-bar,
.dashboard-onboarding progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--muted);
}

.dashboard-progress-block progress::-webkit-progress-value,
.dashboard-onboarding progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--primary);
}

.dashboard-progress-block progress::-moz-progress-bar,
.dashboard-onboarding progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--primary);
}

.dashboard-subscription-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: 1rem;
}

.dashboard-subscription-summary > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-subscription-summary strong {
    color: var(--foreground);
    font-size: 0.9375rem;
    font-weight: 700;
}

.dashboard-subscription-link {
    display: inline-flex;
    margin-top: 1.25rem;
}

.dashboard-onboarding {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
}

.dashboard-onboarding > summary {
    display: grid;
    min-width: 0;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 5.5rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

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

.dashboard-onboarding > summary:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--primary) 45%, transparent);
    outline-offset: -3px;
}

.dashboard-onboarding__status {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in oklab, var(--primary) 10%, var(--background));
    color: var(--primary);
    font-size: 1.125rem;
}

.dashboard-onboarding__summary,
.dashboard-onboarding__progress {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-onboarding__summary strong {
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 700;
}

.dashboard-onboarding__summary span,
.dashboard-onboarding__progress span,
.dashboard-onboarding__toggle {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.4;
}

.dashboard-onboarding__progress,
.dashboard-onboarding__toggle {
    grid-column: 2;
}

.dashboard-onboarding__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 650;
}

.dashboard-onboarding[open] .dashboard-onboarding__toggle i {
    transform: rotate(180deg);
}

.dashboard-onboarding__content {
    display: grid;
    gap: 1.25rem;
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.dashboard-onboarding__tasks {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 0 1.25rem;
}

.dashboard-onboarding-task {
    display: grid;
    min-width: 0;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 1rem;
    border-top: 1px solid var(--border);
}

.dashboard-onboarding-task__index {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.72rem;
    font-weight: 700;
}

.dashboard-onboarding-task__body {
    min-width: 0;
}

.dashboard-onboarding-task__body > strong {
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
}

.dashboard-onboarding-task__body > p {
    margin-top: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.5;
}

.dashboard-onboarding-task__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.875rem;
    margin-top: 0.75rem;
}

.dashboard-onboarding-task__waiting {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

@media (hover: hover) {
    .dashboard-action-row:hover {
        color: var(--primary);
    }

    .dashboard-onboarding > summary:hover {
        background: color-mix(in oklab, var(--muted) 45%, var(--background));
    }
}

@media (min-width: 40rem) {
    .dashboard-page-heading,
    .dashboard-section-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .dashboard-page-heading__actions,
    .dashboard-page-heading__actions > a {
        width: auto;
    }

    .dashboard-upgrade-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .dashboard-onboarding > summary {
        grid-template-columns: 2.5rem minmax(12rem, 1fr) minmax(8rem, 12rem) auto;
    }

    .dashboard-onboarding__progress,
    .dashboard-onboarding__toggle {
        grid-column: auto;
    }
}

@media (min-width: 64rem) {
    .dashboard-kpi--lead {
        grid-column: span 2;
    }
}

@media (min-width: 80rem) {
    .dashboard-main-grid {
        grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.85fr);
    }
}

@media (max-width: 39.999rem) {
    .dashboard-action-row {
        grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    }

    .dashboard-action-row__arrow {
        display: none;
    }

    .dashboard-onboarding__progress {
        width: min(100%, 12rem);
    }
}

/* Accounting workspace */
.accounting-shell,
.accounting-connect-shell {
    --accounting-positive: #15803d;
    --accounting-negative: #b91c1c;
    --accounting-warning: #a16207;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.75rem;
    padding-bottom: 2.5rem;
}

.dark .accounting-shell,
.dark .accounting-connect-shell {
    --accounting-positive: #4ade80;
    --accounting-negative: #f87171;
    --accounting-warning: #fbbf24;
}

.accounting-shell ::selection,
.accounting-connect-shell ::selection {
    background: color-mix(in oklab, var(--primary) 30%, transparent);
    color: var(--foreground);
}

.accounting-shell :is(a, button, input, select, summary):focus-visible,
.accounting-connect-shell :is(a, button, input, select, summary):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
}

.accounting-setup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.875rem 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid color-mix(in oklab, var(--accounting-warning) 28%, var(--border));
    border-radius: 0.875rem;
    background: color-mix(in oklab, var(--accounting-warning) 7%, var(--background));
}

.accounting-setup__icon,
.accounting-bank-identity__mark,
.accounting-bank-option__mark,
.accounting-attention__icon,
.accounting-config-card__heading > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.accounting-setup__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--accounting-warning) 15%, var(--background));
    color: var(--accounting-warning);
    font-size: 1.125rem;
}

.accounting-setup h2,
.accounting-panel__header h2,
.accounting-section__heading h2,
.accounting-connect-explainer h2,
.accounting-config-card h2,
.accounting-bank-picker__heading h2 {
    color: var(--foreground);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
}

.accounting-setup p,
.accounting-panel__header p,
.accounting-section__heading p,
.accounting-connect-explainer p,
.accounting-config-card p,
.accounting-bank-picker__heading p {
    max-width: 72ch;
    margin-top: 0.2rem;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.accounting-setup [data-slot="button"] {
    grid-column: 1 / -1;
    justify-content: center;
}

.accounting-overview {
    display: grid;
    overflow: hidden;
    border-radius: 12px;
    background: var(--mono);
    color: var(--mono-foreground);
    animation: accounting-reveal 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes accounting-reveal {
    from {
        clip-path: inset(0 0 10% 0 round 1rem);
        filter: blur(2px);
        transform: translateY(0.375rem);
    }
    to {
        clip-path: inset(0 round 1rem);
        filter: blur(0);
        transform: translateY(0);
    }
}

.accounting-overview__balance {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
}

.accounting-overview__balance > span,
.accounting-overview__metrics dt {
    color: color-mix(in oklab, var(--mono-foreground) 72%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
}

.accounting-overview__balance strong {
    margin-top: 0.3rem;
    overflow-wrap: anywhere;
    font-size: clamp(34px, 3.2vw, 46px);
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.accounting-overview__balance small,
.accounting-overview__metrics small {
    margin-top: 0.35rem;
    color: color-mix(in oklab, var(--mono-foreground) 62%, transparent);
    font-size: 0.72rem;
    line-height: 1.4;
}

.accounting-overview__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid color-mix(in oklab, var(--mono-foreground) 16%, transparent);
}

.accounting-overview__metrics > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1.1rem;
    border-right: 1px solid color-mix(in oklab, var(--mono-foreground) 12%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--mono-foreground) 12%, transparent);
}

.accounting-overview__metrics > div:nth-child(2n) {
    border-right: 0;
}

.accounting-overview__metrics > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.accounting-overview__metrics dd {
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.accounting-overview__metrics .is-positive {
    color: color-mix(in oklab, var(--accounting-positive) 58%, white);
}

.accounting-overview__metrics .is-negative {
    color: color-mix(in oklab, var(--accounting-negative) 58%, white);
}

.accounting-overview__metrics .is-warning {
    color: color-mix(in oklab, var(--accounting-warning) 58%, white);
}

.accounting-main-grid {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.accounting-panel {
    min-width: 0;
    overflow: hidden;
}

.accounting-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.accounting-panel__content {
    min-width: 0;
    padding: 1rem 1.25rem 1.25rem;
}

.accounting-chart {
    min-height: 18rem;
}

.accounting-attention .accounting-panel__content {
    padding: 0;
}

.accounting-attention__row {
    display: grid;
    width: 100%;
    height: auto;
    min-height: 5rem;
    text-align: left;
    white-space: normal;
    border-radius: 0;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
    transition: background-color 160ms ease, color 160ms ease;
}

.accounting-attention__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: var(--muted);
    color: var(--muted-foreground);
}

.accounting-attention__row.is-warning .accounting-attention__icon {
    background: color-mix(in oklab, var(--accounting-warning) 13%, var(--background));
    color: var(--accounting-warning);
}

.accounting-attention__row strong,
.accounting-attention__row small {
    display: block;
}

.accounting-attention__row strong {
    font-size: 0.8125rem;
    font-weight: 700;
}

.accounting-attention__row small {
    margin-top: 0.2rem;
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.45;
}

.accounting-attention__note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 1rem 1.125rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.5;
}

.accounting-attention__note i {
    margin-top: 0.125rem;
    color: var(--primary);
}

.accounting-section {
    min-width: 0;
    scroll-margin-top: 1.5rem;
}

.accounting-section__heading {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.accounting-currencies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.accounting-currencies span {
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
}

.accounting-connection-list {
    display: grid;
    gap: 0.875rem;
}

.accounting-connection {
    min-width: 0;
    overflow: hidden;
}

.accounting-connection__header,
.accounting-connection__footer {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
}

.accounting-connection__header {
    border-bottom: 1px solid var(--border);
}

.accounting-bank-identity {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.accounting-bank-identity__mark,
.accounting-bank-option__mark {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    background: var(--mono);
    color: var(--mono-foreground);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.accounting-bank-identity h3 {
    overflow: hidden;
    color: var(--foreground);
    font-size: 0.875rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-bank-identity p,
.accounting-account-row span,
.accounting-account-row__balance span,
.accounting-connection__message,
.accounting-connection__meta {
    color: var(--muted-foreground);
    font-size: 0.72rem;
    line-height: 1.45;
}

.accounting-account-rows {
    padding-inline: 1.125rem;
}

.accounting-account-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.accounting-account-row:last-child {
    border-bottom: 0;
}

.accounting-account-row strong,
.accounting-account-row span,
.accounting-account-row__balance span {
    display: block;
}

.accounting-account-row strong {
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 700;
}

.accounting-account-row__balance strong {
    font-variant-numeric: tabular-nums;
}

.accounting-connection__message {
    padding: 1rem 1.125rem;
}

.accounting-connection__footer {
    border-top: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 45%, var(--background));
}

.accounting-connection__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.accounting-connection__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.accounting-connection__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.accounting-connection__actions [data-slot="button"] {
    min-height: 2.4rem;
}

.accounting-danger-action {
    color: var(--accounting-negative);
}

.accounting-inline-error {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.75rem 1.125rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--destructive) 9%, var(--background));
    color: var(--accounting-negative);
    font-size: 0.75rem;
    line-height: 1.5;
}

.accounting-empty {
    display: flex;
    min-height: 14rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    text-align: center;
}

.accounting-empty--compact {
    min-height: 11rem;
    border: 0;
}

.accounting-empty > i {
    margin-bottom: 0.8rem;
    color: var(--primary);
    font-size: 1.75rem;
}

.accounting-empty strong,
.accounting-empty span {
    max-width: 34rem;
}

.accounting-empty strong {
    color: var(--foreground);
    font-size: 0.9rem;
    font-weight: 700;
}

.accounting-empty span {
    margin-top: 0.35rem;
    color: var(--muted-foreground);
    font-size: 0.78rem;
    line-height: 1.55;
}

.accounting-empty [data-slot="button"] {
    margin-top: 1rem;
}

.accounting-filters {
    display: grid;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
    padding: 1rem;
}

.accounting-filters label,
.accounting-bank-picker__heading form label,
.accounting-bank-search,
.accounting-transaction__actions label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
}

.accounting-filters label > span,
.accounting-bank-picker__heading form label > span,
.accounting-bank-search > span,
.accounting-transaction__actions label > span {
    color: var(--foreground);
    font-size: 0.72rem;
    font-weight: 650;
}

.accounting-filters__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.accounting-transactions {
    display: grid;
    gap: 0.625rem;
    overflow: visible;
}

.accounting-transaction {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.accounting-transaction__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.accounting-transaction__date strong {
    color: var(--foreground);
    font-size: 0.875rem;
}

.accounting-transaction__date span {
    font-size: 12px;
    font-weight: 600;
}

.accounting-transaction__identity {
    min-width: 0;
}

.accounting-transaction__identity strong,
.accounting-transaction__identity span,
.accounting-transaction__identity small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-transaction__identity strong {
    color: var(--foreground);
    font-size: 0.8125rem;
    font-weight: 700;
}

.accounting-transaction__identity span,
.accounting-transaction__identity small,
.accounting-transaction__state small,
.accounting-transaction__amount span {
    color: var(--muted-foreground);
    font-size: 12px;
}

.accounting-transaction__identity span {
    margin-top: 0.15rem;
}

.accounting-transaction__identity small {
    margin-top: 0.25rem;
}

.accounting-transaction__state {
    display: flex;
    grid-column: 2;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    text-align: left;
}

.accounting-transaction__state small,
.accounting-transaction__amount span {
    display: block;
}

.accounting-transaction__state small {
    margin-top: 0;
}

.accounting-transaction__amount span {
    margin-top: 0.25rem;
}

.accounting-transaction__amount {
    grid-column: 2;
    font-variant-numeric: tabular-nums;
}

.accounting-transaction__amount strong {
    font-size: 0.8125rem;
    font-weight: 750;
}

.accounting-transaction__amount.is-positive {
    color: var(--accounting-positive);
}

.accounting-transaction__amount.is-negative {
    color: var(--accounting-negative);
}

.accounting-transaction__actions {
    position: relative;
    grid-column: 3;
    grid-row: 1 / span 2;
}

.accounting-transaction__actions summary {
    width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    list-style: none;
}

.accounting-transaction__actions summary::-webkit-details-marker {
    display: none;
}

.accounting-transaction__actions form {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.4rem);
    right: 0;
    display: grid;
    width: min(20rem, calc(100vw - 3rem));
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    background: var(--popover);
    box-shadow: 0 0.75rem 2rem -0.8rem color-mix(in oklab, var(--foreground) 22%, transparent);
}

.accounting-transaction__match {
    display: flex;
    min-width: 0;
    grid-column: 2 / -1;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.8125rem;
}

.accounting-transaction__match > svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.accounting-transaction__match-text {
    min-width: 0;
    flex: 1 1 12rem;
}

.accounting-transaction__piece {
    color: var(--foreground);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.accounting-transaction__match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.accounting-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.accounting-pagination > span {
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.accounting-pagination [aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.45;
}

.accounting-connect-explainer {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--mono);
    color: var(--mono-foreground);
}

.accounting-connect-explainer h2 {
    color: var(--mono-foreground);
    font-size: 1.1rem;
}

.accounting-connect-explainer p {
    color: color-mix(in oklab, var(--mono-foreground) 72%, transparent);
}

.accounting-connect-explainer ol {
    display: grid;
    gap: 0.75rem;
}

.accounting-connect-explainer li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
}

.accounting-connect-explainer li > span {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mono-foreground) 14%, transparent);
    font-size: 12px;
    font-weight: 700;
}

.accounting-connect-explainer strong,
.accounting-connect-explainer small {
    display: block;
}

.accounting-connect-explainer strong {
    font-size: 0.78rem;
}

.accounting-connect-explainer small {
    margin-top: 0.2rem;
    color: color-mix(in oklab, var(--mono-foreground) 65%, transparent);
    font-size: 12px;
    line-height: 1.45;
}

.accounting-config-card,
.accounting-bank-picker {
    padding: 1.1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.accounting-config-card__heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.accounting-config-card__heading > span {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: color-mix(in oklab, var(--accounting-warning) 13%, var(--background));
    color: var(--accounting-warning);
}

.accounting-config-card dl {
    display: grid;
    gap: 0;
    margin-top: 1rem;
    border-top: 1px solid var(--border);
}

.accounting-config-card dl > div {
    display: grid;
    gap: 0.25rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.accounting-config-card dt {
    color: var(--muted-foreground);
    font-size: 12px;
    font-weight: 600;
}

.accounting-config-card dd {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--foreground);
    font-size: 0.75rem;
}

.accounting-config-card code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}

.accounting-config-card__note {
    margin-top: 0.875rem !important;
}

.accounting-bank-picker__heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.accounting-bank-picker__heading form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.accounting-bank-search {
    max-width: 26rem;
    margin-block: 1rem;
}

.accounting-bank-grid {
    display: grid;
    gap: 0.625rem;
}

.accounting-bank-option {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    background: var(--background);
    color: var(--foreground);
    text-align: left;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.accounting-bank-option strong,
.accounting-bank-option small {
    display: block;
}

.accounting-bank-option strong {
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-bank-option small {
    margin-top: 0.2rem;
    color: var(--muted-foreground);
    font-size: 12px;
}

.accounting-consent-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: 68rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1.55;
}

.accounting-consent-note i {
    margin-top: 0.1rem;
    color: var(--accounting-positive);
}

@media (hover: hover) {
    .accounting-attention__row:hover {
        background: var(--muted);
        color: var(--primary);
    }

    .accounting-bank-option:hover {
        border-color: color-mix(in oklab, var(--primary) 42%, var(--border));
        background: color-mix(in oklab, var(--primary) 5%, var(--background));
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accounting-overview {
        animation: none;
    }

    .accounting-bank-option,
    .accounting-attention__row {
        transition: none;
    }
}

@media (min-width: 40rem) {
    .accounting-setup {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 1rem 1.25rem;
    }

    .accounting-setup [data-slot="button"] {
        grid-column: auto;
    }

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

    .accounting-overview__metrics > div,
    .accounting-overview__metrics > div:nth-child(2n),
    .accounting-overview__metrics > div:nth-last-child(-n + 2) {
        border-right: 1px solid color-mix(in oklab, var(--mono-foreground) 12%, transparent);
        border-bottom: 0;
    }

    .accounting-overview__metrics > div:last-child {
        border-right: 0;
    }

    .accounting-section__heading,
    .accounting-connection__header,
    .accounting-connection__footer,
    .accounting-account-row,
    .accounting-bank-picker__heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .accounting-account-row__balance {
        text-align: right;
    }

    .accounting-connection__meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .accounting-filters {
        grid-template-columns: minmax(12rem, 1.6fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
        align-items: end;
    }

    .accounting-transaction {
        grid-template-columns: 2.5rem minmax(12rem, 1fr) minmax(7rem, auto) minmax(7rem, auto) 2.25rem;
    }

    .accounting-transaction__state {
        display: block;
        grid-column: 3;
        text-align: right;
    }

    .accounting-transaction__amount {
        grid-column: 4;
        text-align: right;
    }

    .accounting-transaction__actions {
        grid-column: 5;
        grid-row: 1;
    }

    .accounting-connect-explainer {
        grid-template-columns: minmax(14rem, 0.85fr) minmax(20rem, 1.15fr);
        align-items: center;
        padding: 1.5rem;
    }

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

    .accounting-config-card dl > div {
        grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
        align-items: center;
    }

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

@media (min-width: 64rem) {
    .accounting-overview {
        grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1.6fr);
    }

    .accounting-overview__metrics {
        border-top: 0;
        border-left: 1px solid color-mix(in oklab, var(--mono-foreground) 16%, transparent);
    }

    .accounting-main-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.8fr);
    }

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

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