.ffr-fieldset-loose { margin-top: 1rem; position: relative; z-index: 0; }
.ffr-fieldset-loose > legend {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    font-weight: 700;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid rgb(0 0 0 / 0.08);
}
.dark .ffr-fieldset-loose > legend { border-color: rgb(255 255 255 / 0.1); }
.ffr-fieldset-loose::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: -0.5rem;
    left: -0.5rem;
    width: 3rem;
    background: linear-gradient(to right, rgb(0 0 0 / 0.05), transparent);
    border-bottom-left-radius: 0.75rem;
}
.dark .ffr-fieldset-loose::before { background: linear-gradient(to right, rgb(255 255 255 / 0.06), transparent); }

.iban-ghost { color: rgba(156, 163, 175, 0.5); -webkit-text-fill-color: rgba(156, 163, 175, 0.5); }
.dark .iban-ghost { color: rgba(156, 163, 175, 0.45); -webkit-text-fill-color: rgba(156, 163, 175, 0.45); }
.iban-input { text-transform: uppercase; letter-spacing: 0.12em; }
.iban-ghost { letter-spacing: 0.12em; }

/* Markdown content styling */
.md-content {
    line-height: 1.7;
}

.md-content h1 {
    font-size: 2em;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(156, 163, 175, 0.3);
}

.md-content h1:first-child {
    margin-top: 0;
}

.md-content h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid rgba(156, 163, 175, 0.2);
}

.md-content h3 {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

.md-content h4 {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.md-content p {
    margin-bottom: 1em;
}

.md-content ul,
.md-content ol {
    margin-bottom: 1em;
    padding-left: 2em;
}

.md-content li {
    margin-bottom: 0.25em;
}

.md-content code {
    background-color: rgba(156, 163, 175, 0.15);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9em;
}

.md-content pre {
    background-color: rgba(156, 163, 175, 0.1);
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1em;
}

.md-content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.md-content blockquote {
    border-left: 4px solid rgba(156, 163, 175, 0.3);
    padding-left: 1em;
    margin-left: 0;
    margin-bottom: 1em;
    font-style: italic;
    color: rgba(107, 114, 128, 1);
}

.dark .md-content blockquote {
    color: rgba(156, 163, 175, 1);
}

.md-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.md-content table th,
.md-content table td {
    border: 1px solid rgba(156, 163, 175, 0.3);
    padding: 0.5em 0.75em;
    text-align: left;
}

.md-content table th {
    background-color: rgba(156, 163, 175, 0.1);
    font-weight: 600;
}

.md-content a {
    color: rgb(59, 130, 246);
    text-decoration: underline;
}

.md-content a:hover {
    color: rgb(37, 99, 235);
}

.md-content hr {
    border: 0;
    border-top: 1px solid rgba(156, 163, 175, 0.3);
    margin: 2em 0;
}

.md-content strong {
    font-weight: 600;
}

.md-content em {
    font-style: italic;
}

/* Period report comparison table (dashboard widget + reporting page) */
.period-report-table-wrap {
    overflow-x: auto;
}

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

.period-report-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    color: rgb(107 114 128);
    white-space: nowrap;
}
.dark .period-report-table th { color: rgb(156 163 175); }

.period-report-table td {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    color: rgb(55 65 81);
}
.dark .period-report-table td { color: rgb(209 213 219); }

.period-report-table tbody td:first-child {
    font-weight: 500;
    color: rgb(3 7 18);
}
.dark .period-report-table tbody td:first-child { color: #fff; }

.period-report-table tbody tr {
    border-top: 1px solid rgb(0 0 0 / 0.06);
}
.dark .period-report-table tbody tr { border-color: rgb(255 255 255 / 0.06); }

/* Quick links widget (dashboard) */
.quick-links-list a {
    color: rgb(55 65 81);
}
.dark .quick-links-list a { color: rgb(209 213 219); }

.quick-links-list a:hover {
    background-color: rgb(249 250 251);
}
.dark .quick-links-list a:hover { background-color: rgb(255 255 255 / 0.05); }

.quick-links-list .quick-links-icon {
    color: rgb(156 163 175);
}
.dark .quick-links-list .quick-links-icon { color: rgb(107 114 128); }

.quick-links-list .quick-links-label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Spacing between two widgets stacked inside a single dashboard grid cell */
.stacked-widget-gap {
    margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   Scan purchase invoice wizard
   There is no Tailwind build in this project, so this page ships its own
   classes. Colours come from the Filament palette variables (--primary-600,
   --gray-500, ...) that the panel injects at runtime, so the wizard follows the
   configured theme in both light and dark mode.
--------------------------------------------------------------------------- */

/* Vertical rhythm */
.scan-panel { margin-top: 1.5rem; }
.scan-stack > * + * { margin-top: 1.5rem; }
.scan-stack-tight > * + * { margin-top: 1rem; }

/* Step indicator */
.scan-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.scan-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background-color: var(--gray-100);
    color: var(--gray-600);
}
.dark .scan-step { background-color: var(--gray-800); color: var(--gray-400); }

.scan-step-current {
    background-color: var(--primary-600);
    color: #fff;
}
.dark .scan-step-current { background-color: var(--primary-600); color: #fff; }

.scan-step-number { font-weight: 600; }

/* Text helpers */
.scan-text { font-size: 0.875rem; }

.scan-muted {
    font-size: 0.875rem;
    color: var(--gray-500);
}
.dark .scan-muted { color: var(--gray-400); }

.scan-hint {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--gray-500);
}
.dark .scan-hint { color: var(--gray-400); }

.scan-error {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--danger-600);
}
.dark .scan-error { color: var(--danger-400); }

.scan-error-note {
    font-size: 0.875rem;
    color: var(--danger-600);
}
.dark .scan-error-note { color: var(--danger-400); }

.scan-success-note {
    font-size: 0.875rem;
    color: var(--success-600);
}
.dark .scan-success-note { color: var(--success-400); }

.scan-slow {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--warning-600);
}
.dark .scan-slow { color: var(--warning-400); }

/* Button rows */
.scan-actions {
    display: flex;
    gap: 0.75rem;
}

/* Camera button — a label wrapping a native file input, because FilePond hides
   the input that `capture` needs. Styled to match a Filament primary button. */
.scan-camera-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--primary-600);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.scan-camera-button:hover { background-color: var(--primary-500); }

.scan-camera-button-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.scan-camera-input { display: none; }

.scan-camera-chosen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scan-camera-chosen-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary-600);
}

/* Processing step */
.scan-processing {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.scan-spinner {
    width: 2rem;
    height: 2rem;
    color: var(--primary-600);
}

.scan-processing-title { font-weight: 500; }

.scan-warning-list {
    list-style: disc inside;
    font-size: 0.875rem;
    color: var(--warning-700);
    margin: 0;
    padding: 0;
}
.dark .scan-warning-list { color: var(--warning-400); }

.scan-warning-list > li + li { margin-top: 0.25rem; }

/* Review step: document on the left, form on the right */
.scan-review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1280px) {
    .scan-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The document stays in view while the form below it scrolls. */
    .scan-review-document {
        position: sticky;
        top: 6rem;
        align-self: start;
    }
}

.scan-document-frame {
    width: 100%;
    height: 70vh;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
}
.dark .scan-document-frame { border-color: var(--gray-700); }

.scan-document-image {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-200);
}
.dark .scan-document-image { border-color: var(--gray-700); }

/* Supplier suggestions */
.scan-suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scan-suggestions > li + li { margin-top: 0.5rem; }

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

.scan-suggestion-name { font-weight: 500; }

.scan-suggestion-reason { color: var(--gray-500); }
.dark .scan-suggestion-reason { color: var(--gray-400); }

.scan-suggestions-footer { margin-top: 1rem; }

/* Per-field origin badges */
.scan-origins {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}