/* Shared panel UI styles (admin + company) */

:root {
    --brand-primary: #1b4f72;
    --brand-primary-soft: #5dade2;
}

.locale-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.5rem;
}

.locale-switcher__link {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-decoration: none;
    outline: none;
    transition: background-color 150ms ease, color 150ms ease;
    color: rgb(55 65 81);
}

.locale-switcher__link:hover {
    background-color: rgb(249 250 251);
}

.locale-switcher__link.is-active {
    background-color: color-mix(in srgb, var(--brand-primary) 10%, transparent);
    color: var(--brand-primary);
}

html.dark .locale-switcher__link, .dark .locale-switcher__link {
    color: rgb(229 231 235);
}

html.dark .locale-switcher__link:hover, .dark .locale-switcher__link:hover {
    background-color: rgb(255 255 255 / 0.05);
}

html.dark .locale-switcher__link.is-active, .dark .locale-switcher__link.is-active {
    color: var(--brand-primary-soft);
}

/*
 * Keep multi-column section layouts, but stop Filament from stretching
 * each grid cell / card to the tallest neighbour (which creates empty gaps).
 * Dashboards keep default stretch for widget alignment.
 */
.fi-page:not(.fi-dashboard-page) .fi-sc {
    align-items: start !important;
}

.fi-page:not(.fi-dashboard-page) .fi-grid-col {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
}

.fi-page:not(.fi-dashboard-page) .fi-grid-col > .fi-sc-component,
.fi-page:not(.fi-dashboard-page) .fi-sc-component {
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
}

.fi-page:not(.fi-dashboard-page) .fi-sc-section,
.fi-page:not(.fi-dashboard-page) .fi-section,
.fi-page:not(.fi-dashboard-page) .fi-section-content-ctn,
.fi-page:not(.fi-dashboard-page) .fi-section-content {
    height: auto !important;
    min-height: 0 !important;
}

/* Section roots that are themselves grid columns */
.fi-page:not(.fi-dashboard-page) .fi-section.fi-grid-col,
.fi-page:not(.fi-dashboard-page) .fi-sc-section.fi-grid-col {
    align-self: start !important;
    height: auto !important;
}

/*
 * Vehicle form: true column stacks. Cards in each column pack tightly
 * under each other (masonry-style), instead of CSS-grid row pairing.
 */
.fi-vehicle-form-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
}

.fi-vehicle-form-stack > * {
    height: auto !important;
    min-height: 0 !important;
}

/* Accounting Results summary */
.fi-accounting-summary {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

.fi-accounting-empty {
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    box-shadow: 0 0 0 1px rgb(17 24 39 / 0.05);
    padding: 1.25rem 1.5rem;
    font-size: 0.875rem;
    color: rgb(75 85 99);
}

html.dark .fi-accounting-empty, .dark .fi-accounting-empty {
    background: rgb(17 24 39);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
    color: rgb(209 213 219);
}

.fi-accounting-period {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.fi-accounting-period__label {
    color: rgb(107 114 128);
}

html.dark .fi-accounting-period__label, .dark .fi-accounting-period__label {
    color: rgb(156 163 175);
}

.fi-accounting-period__value {
    font-weight: 600;
    color: rgb(17 24 39);
}

html.dark .fi-accounting-period__value, .dark .fi-accounting-period__value {
    color: rgb(255 255 255);
}

.fi-accounting-hero {
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    background: color-mix(in srgb, var(--brand-primary) 12%, rgb(255 255 255));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

html.dark .fi-accounting-hero, .dark .fi-accounting-hero {
    background: color-mix(in srgb, var(--brand-primary) 22%, rgb(17 24 39));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary-soft) 35%, transparent);
}

.fi-accounting-hero.is-profit {
    background: rgb(240 253 244);
    box-shadow: 0 0 0 1px rgb(34 197 94 / 0.35);
}

html.dark .fi-accounting-hero.is-profit, .dark .fi-accounting-hero.is-profit {
    background: rgb(5 46 22);
    box-shadow: 0 0 0 1px rgb(74 222 128 / 0.35);
}

.fi-accounting-hero.is-loss {
    background: rgb(254 242 242);
    box-shadow: 0 0 0 1px rgb(239 68 68 / 0.35);
}

html.dark .fi-accounting-hero.is-loss, .dark .fi-accounting-hero.is-loss {
    background: rgb(69 10 10);
    box-shadow: 0 0 0 1px rgb(248 113 113 / 0.35);
}

.fi-accounting-hero__label {
    font-size: 0.875rem;
    color: rgb(75 85 99);
}

html.dark .fi-accounting-hero__label, .dark .fi-accounting-hero__label {
    color: rgb(209 213 219);
}

.fi-accounting-hero.is-profit .fi-accounting-hero__label {
    color: rgb(21 128 61);
}

html.dark .fi-accounting-hero.is-profit .fi-accounting-hero__label, .dark .fi-accounting-hero.is-profit .fi-accounting-hero__label {
    color: rgb(134 239 172);
}

.fi-accounting-hero.is-loss .fi-accounting-hero__label {
    color: rgb(185 28 28);
}

html.dark .fi-accounting-hero.is-loss .fi-accounting-hero__label, .dark .fi-accounting-hero.is-loss .fi-accounting-hero__label {
    color: rgb(252 165 165);
}

.fi-accounting-hero__value {
    margin-top: 0.35rem;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    color: rgb(17 24 39);
}

html.dark .fi-accounting-hero__value, .dark .fi-accounting-hero__value {
    color: rgb(255 255 255);
}

.fi-accounting-hero.is-profit .fi-accounting-hero__value,
.fi-accounting-card__value.is-profit {
    color: rgb(21 128 61);
}

html.dark .fi-accounting-hero.is-profit .fi-accounting-hero__value, .dark .fi-accounting-hero.is-profit .fi-accounting-hero__value,
html.dark .fi-accounting-card__value.is-profit, .dark .fi-accounting-card__value.is-profit {
    color: rgb(74 222 128);
}

.fi-accounting-hero.is-loss .fi-accounting-hero__value,
.fi-accounting-card__value.is-loss {
    color: rgb(185 28 28);
}

html.dark .fi-accounting-hero.is-loss .fi-accounting-hero__value, .dark .fi-accounting-hero.is-loss .fi-accounting-hero__value,
html.dark .fi-accounting-card__value.is-loss, .dark .fi-accounting-card__value.is-loss {
    color: rgb(248 113 113);
}

.fi-accounting-hero__badge {
    display: inline-flex;
    margin-top: 0.5rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgb(255 255 255 / 0.7);
    color: rgb(55 65 81);
}

html.dark .fi-accounting-hero__badge, .dark .fi-accounting-hero__badge {
    background: rgb(0 0 0 / 0.25);
    color: rgb(229 231 235);
}

.fi-accounting-hero.is-profit .fi-accounting-hero__badge {
    background: rgb(22 163 74);
    color: rgb(255 255 255);
}

html.dark .fi-accounting-hero.is-profit .fi-accounting-hero__badge, .dark .fi-accounting-hero.is-profit .fi-accounting-hero__badge {
    background: rgb(22 163 74);
    color: rgb(255 255 255);
}

.fi-accounting-hero.is-loss .fi-accounting-hero__badge {
    background: rgb(220 38 38);
    color: rgb(255 255 255);
}

html.dark .fi-accounting-hero.is-loss .fi-accounting-hero__badge, .dark .fi-accounting-hero.is-loss .fi-accounting-hero__badge {
    background: rgb(220 38 38);
    color: rgb(255 255 255);
}

.fi-accounting-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .fi-accounting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .fi-accounting-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fi-accounting-card {
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    box-shadow: 0 0 0 1px rgb(17 24 39 / 0.05);
    padding: 1.15rem 1.25rem;
}

html.dark .fi-accounting-card, .dark .fi-accounting-card {
    background: rgb(17 24 39);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.fi-accounting-card__label {
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

html.dark .fi-accounting-card__label, .dark .fi-accounting-card__label {
    color: rgb(156 163 175);
}

.fi-accounting-card__value {
    margin-top: 0.4rem;
    font-size: 1.375rem;
    line-height: 1.25;
    font-weight: 700;
    color: rgb(17 24 39);
}

html.dark .fi-accounting-card__value, .dark .fi-accounting-card__value {
    color: rgb(255 255 255);
}

.fi-accounting-card__meta {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: rgb(75 85 99);
}

html.dark .fi-accounting-card__meta,
.dark .fi-accounting-card__meta {
    color: rgb(156 163 175);
}

/* Vehicle form: profit / loss / result field tones */
.fi-result-tone.is-profit .fi-input,
.fi-result-tone.is-profit .fi-input-wrp-prefix,
.fi-result-tone.is-profit input {
    color: rgb(21 128 61) !important;
    -webkit-text-fill-color: rgb(21 128 61) !important;
    font-weight: 700;
    opacity: 1 !important;
}

html.dark .fi-result-tone.is-profit .fi-input,
html.dark .fi-result-tone.is-profit .fi-input-wrp-prefix,
html.dark .fi-result-tone.is-profit input,
.dark .fi-result-tone.is-profit .fi-input,
.dark .fi-result-tone.is-profit .fi-input-wrp-prefix,
.dark .fi-result-tone.is-profit input {
    color: rgb(74 222 128) !important;
    -webkit-text-fill-color: rgb(74 222 128) !important;
}

.fi-result-tone.is-loss .fi-input,
.fi-result-tone.is-loss .fi-input-wrp-prefix,
.fi-result-tone.is-loss input {
    color: rgb(185 28 28) !important;
    -webkit-text-fill-color: rgb(185 28 28) !important;
    font-weight: 700;
    opacity: 1 !important;
}

html.dark .fi-result-tone.is-loss .fi-input,
html.dark .fi-result-tone.is-loss .fi-input-wrp-prefix,
html.dark .fi-result-tone.is-loss input,
.dark .fi-result-tone.is-loss .fi-input,
.dark .fi-result-tone.is-loss .fi-input-wrp-prefix,
.dark .fi-result-tone.is-loss input {
    color: rgb(248 113 113) !important;
    -webkit-text-fill-color: rgb(248 113 113) !important;
}

.fi-result-tone.is-profit,
.fi-result-tone.is-loss {
    opacity: 1 !important;
}

/* Census results */
.fi-census-results {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

.fi-census-table-wrap {
    overflow-x: auto;
    border-radius: 0.75rem;
    background: rgb(255 255 255);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    box-shadow: 0 0 0 1px rgb(17 24 39 / 0.05);
}

html.dark .fi-census-table-wrap,
.dark .fi-census-table-wrap {
    background: rgb(17 24 39);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.fi-census-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fi-census-table th,
.fi-census-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgb(229 231 235);
}

html.dark .fi-census-table th,
html.dark .fi-census-table td,
.dark .fi-census-table th,
.dark .fi-census-table td {
    border-bottom-color: rgb(55 65 81);
}

.fi-census-table th {
    font-weight: 600;
    color: rgb(75 85 99);
    background: rgb(249 250 251);
}

html.dark .fi-census-table th,
.dark .fi-census-table th {
    color: rgb(209 213 219);
    background: rgb(31 41 55);
}

.fi-census-table tbody tr:last-child td {
    border-bottom: none;
}

.fi-census-table__row.is-clickable {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.fi-census-table__row.is-clickable:hover,
.fi-census-table__row.is-clickable:focus-visible {
    background: rgba(15, 23, 42, 0.04);
    outline: none;
}

html.dark .fi-census-table__row.is-clickable:hover,
html.dark .fi-census-table__row.is-clickable:focus-visible,
.dark .fi-census-table__row.is-clickable:hover,
.dark .fi-census-table__row.is-clickable:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

/* Census vehicle edit: full viewport height, scroll inside the form body only */
.fi-modal:has(.fi-census-vehicle-modal) > .fi-modal-window-ctn {
    overflow: hidden !important;
    align-items: stretch;
    padding: 0 !important;
}

.fi-modal-window.fi-census-vehicle-modal {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

.fi-modal-window.fi-census-vehicle-modal > .fi-modal-header,
.fi-modal-window.fi-census-vehicle-modal > .fi-modal-footer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    flex: 0 0 auto;
}

.fi-modal-window.fi-census-vehicle-modal > .fi-modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.fi-census-table__num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

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

@media (max-width: 640px) {
    .fi-census-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Keep the calendar, but let the date value be typed. */
.fi-fo-date-time-picker-display-text-input {
    cursor: text;
}