/* _content/FarreProjekt1/Components/Pages/Upload.razor.rz.scp.css */
/* Force MudBlazor progress loader (linear and circular) to black */
[b-nie7r1qkmw] .mud-progress-linear-bar,
[b-nie7r1qkmw] .mud-progress-linear.mud-progress-linear-primary .mud-progress-linear-bar,
[b-nie7r1qkmw] .mud-progress-circular svg circle,
[b-nie7r1qkmw] .mud-progress-circular.mud-progress-circular-primary svg circle {
    background-color: #111 !important;
    stroke: #111 !important;
}
/* Force MudTextField label (placeholder/floating label) to always be black */
[b-nie7r1qkmw] .mud-shrink~label.mud-input-label.mud-input-label-inputcontrol,
[b-nie7r1qkmw] .mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol {
    color: #111 !important;
}
/* Force MudTextField (input) focus/hover border and label to black, all variants */
[b-nie7r1qkmw] .mud-input-outlined-border,
[b-nie7r1qkmw] .mud-input-outlined-border.mud-focused,
[b-nie7r1qkmw] .mud-input-outlined-border:focus,
[b-nie7r1qkmw] .mud-input-outlined-border:hover {
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-input-label.mud-input-label-focused,
[b-nie7r1qkmw] .mud-input-label:focus,
[b-nie7r1qkmw] .mud-input-label:hover {
    color: #111 !important;
}
/* Force ALL MudBlazor chips to black background and white text, regardless of state */
[b-nie7r1qkmw] .mud-chip,
[b-nie7r1qkmw] .mud-chip.mud-chip-filled,
[b-nie7r1qkmw] .mud-chip.mud-chip-outlined,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-filled,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-outlined,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-filled.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-outlined.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-filled.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-outlined.mud-selected {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-chip .mud-chip-close,
[b-nie7r1qkmw] .mud-chip .mud-chip-close:hover {
    color: #fff !important;
}
/* Force chips and input focus backgrounds to black, including outlined/focus/hover */
[b-nie7r1qkmw] .mud-chip.mud-chip-primary,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-filled,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-filled,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-outlined,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-filled.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-chip-outlined.mud-selected {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-chip.mud-chip-primary .mud-chip-close,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary .mud-chip-close:hover {
    color: #fff !important;
}

[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-outlined-border,
[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-outlined-border.mud-focused,
[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-outlined-border:focus,
[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-outlined-border:hover {
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-focused .mud-input-outlined-border,
[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-focused .mud-input-outlined-border:focus {
    border-color: #111 !important;
    box-shadow: 0 0 0 2px #1112 !important;
}

/* More MudBlazor primary color overrides to black */
[b-nie7r1qkmw] .mud-stepper .mud-stepper-step.mud-stepper-step-active .mud-step-icon,
[b-nie7r1qkmw] .mud-stepper .mud-stepper-step.mud-stepper-step-completed .mud-step-icon {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-radio.mud-radio-checked .mud-radio-icon,
[b-nie7r1qkmw] .mud-radio.mud-radio-checked .mud-radio-background {
    color: #111 !important;
    background-color: #111 !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-checkbox.mud-checkbox-checked .mud-checkbox-background,
[b-nie7r1qkmw] .mud-checkbox.mud-checkbox-checked .mud-checkbox-icon {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-switch.mud-switch-checked .mud-switch-base {
    background-color: #111 !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-switch.mud-switch-checked .mud-switch-thumb {
    background-color: #fff !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-select.mud-select-primary .mud-select-input,
[b-nie7r1qkmw] .mud-select.mud-select-primary .mud-select-arrow {
    color: #111 !important;
}

[b-nie7r1qkmw] .mud-select.mud-select-primary .mud-popover {
    border-color: #111 !important;
}
/* Override MudBlazor primary color (purple/blue) to black everywhere */
[b-nie7r1qkmw] .mud-chip.mud-chip-primary,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-selected,
[b-nie7r1qkmw] .mud-chip.mud-chip-primary.mud-disabled {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-chip.mud-chip-primary .mud-chip-close {
    color: #fff !important;
}

[b-nie7r1qkmw] .mud-tabs .mud-tab.mud-tab-active,
[b-nie7r1qkmw] .mud-tabs .mud-tab.mud-tab-active .mud-tab-text {
    color: #111 !important;
}

[b-nie7r1qkmw] .mud-tabs .mud-tab-slider {
    background-color: #111 !important;
}

[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-outlined-border,
[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-underline:after,
[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-focused .mud-input-outlined-border {
    border-color: #111 !important;
}

[b-nie7r1qkmw] .mud-input-root.mud-input-root-primary .mud-input-focused .mud-input-outlined-border {
    box-shadow: 0 0 0 2px #1112 !important;
}

[b-nie7r1qkmw] .mud-button-root.mud-button-root-primary,
[b-nie7r1qkmw] .mud-button-root.mud-button-root-primary:active,
[b-nie7r1qkmw] .mud-button-root.mud-button-root-primary:focus,
[b-nie7r1qkmw] .mud-button-root.mud-button-root-primary:hover {
    background-color: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}


[b-nie7r1qkmw] .mud-progress-linear.mud-progress-linear-primary .mud-progress-linear-bar {
    background-color: #111 !important;
}

/* Make the MudProgressLinear buffer value indicator dark gray */
[b-nie7r1qkmw] .mud-progress-linear.mud-progress-linear-primary .mud-progress-linear-buffer {
    background-color: #9b9b9b !important;
}

/* Results progress: force buffer (OCR) to light gray even if MudBlazor renders different internal elements */
[b-nie7r1qkmw] .fd-results-progress .mud-progress-linear-buffer,
[b-nie7r1qkmw] .fd-results-progress .mud-progress-linear-buffer-bar,
[b-nie7r1qkmw] .fd-results-progress .mud-progress-linear-background,
[b-nie7r1qkmw] .fd-results-progress .mud-progress-linear-dashed {
    background-color: #9b9b9b !important;
}

[b-nie7r1qkmw] .fd-results-progress .mud-progress-linear-dashed {
    background-image: none !important;
}

/* MudBlazor v7+ uses these selectors for buffered primary; override them explicitly */
[b-nie7r1qkmw] .fd-results-progress.mud-progress-linear.mud-progress-linear-color-primary.mud-progress-linear-buffer
    .mud-progress-linear-bar:first-child {
    background-image: none !important;
    background-color: #9b9b9b !important;
    background: #9b9b9b !important;
}

[b-nie7r1qkmw] .fd-results-progress.mud-progress-linear.mud-progress-linear-color-primary.mud-progress-linear-buffer
    .mud-progress-linear-bar:last-child::before {
    background-color: #9b9b9b !important;
    background: #9b9b9b !important;
    opacity: 1 !important;
}

[b-nie7r1qkmw] .mud-progress-circular.mud-progress-circular-primary svg circle {
    stroke: #111 !important;
}
body[b-nie7r1qkmw] {
    background-color: #F0ECE6;
}

/* MudBlazor tab indicator smooth transition */
[b-nie7r1qkmw] .mud-tabs .mud-tabs-toolbar .mud-tab-slider {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Add large border radius to MudTabs container */
[b-nie7r1qkmw] .mud-tabs.mud-tabs-rounded {
    border-radius: 32px !important;
    overflow: hidden;
}

[b-nie7r1qkmw] .mud-tabs.mud-tabs-rounded .mud-tabs-toolbar {
    border-radius: 32px 32px 0 0 !important;
}

[b-nie7r1qkmw] .mud-tabs.mud-tabs-rounded .mud-tabs-panels {
    border-radius: 0 0 32px 32px !important;
}

/* Very rounded MudButton components */
[b-nie7r1qkmw] .mud-button-root {
    border-radius: 50px !important;
}

.hero-section[b-nie7r1qkmw] {
    padding: 1.25rem 0;
}

.content-grid[b-nie7r1qkmw] {
    display: grid;
    gap: 3rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

@media (max-width: 1024px) {
    .content-grid[b-nie7r1qkmw],
    .feature-grid-2col[b-nie7r1qkmw],
    .feature-grid-2col-small[b-nie7r1qkmw] {
        grid-template-columns: 1fr;
    }

    .grid_3-col[b-nie7r1qkmw],
    .grid_4-col[b-nie7r1qkmw] {
        grid-template-columns: 1fr;
    }

    .hero-text h1[b-nie7r1qkmw] {
        font-size: 2rem;
    }

    .features-heading[b-nie7r1qkmw] {
        font-size: 2rem;
    }

    .feature-content[b-nie7r1qkmw] {
        padding: 2rem;
    }
}

.file-upload-input[b-nie7r1qkmw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto;
}

.upload-drop-zone[b-nie7r1qkmw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fd-fields-title[b-nie7r1qkmw]{
    font-weight: bold;
}

/* Pill-shaped MudTextField (Variant.Outlined)
   border-radius must be applied to MudBlazor's internal outline element, not the wrapper */
[b-nie7r1qkmw] .fd-pill-textfield .mud-input-outlined-border,
[b-nie7r1qkmw] .fd-pill-textfield .mud-input-slot,
[b-nie7r1qkmw] .fd-pill-textfield .mud-input-root,
[b-nie7r1qkmw] .fd-pill-textfield .mud-input-control {
    border-radius: 999px !important;
}

[b-nie7r1qkmw] .fd-pill-textfield .mud-input-outlined {
    border-radius: 999px !important;
    overflow: hidden;
}

/* Make the field-name input shorter (MudTextField Dense + explicit height tweaks) */
[b-nie7r1qkmw] .fd-pill-textfield .mud-input-control {
    min-height: 36px !important;
}

[b-nie7r1qkmw] .fd-pill-textfield .mud-input-outlined-border {
    min-height: 36px !important;
}

.fd-dropzone-title[b-nie7r1qkmw] {
    font-weight: 600;
    color: #333;
}

.fd-dropzone-subtitle[b-nie7r1qkmw] {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.25rem;
}

.header[b-nie7r1qkmw] {
    margin-bottom: 3rem;
}

.header.margin-bottom_none[b-nie7r1qkmw] {
    margin-bottom: 2rem;
}

.subheading[b-nie7r1qkmw] {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 2rem;
    max-width: 800px;
}

.button-group[b-nie7r1qkmw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.button-group.gap-small[b-nie7r1qkmw] {
    gap: 0.75rem;
}

.flex_horizontal[b-nie7r1qkmw] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex_horizontal.is-y-center[b-nie7r1qkmw] {
    align-items: center;
}

.flex_horizontal.gap-xxsmall[b-nie7r1qkmw] {
    gap: 0.5rem;
}

.icon[b-nie7r1qkmw] {
    width: 24px;
    height: 24px;
    color: #333;
    flex-shrink: 0;
}

.button[b-nie7r1qkmw] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.button.is-secondary[b-nie7r1qkmw] {
    background-color: #333;
    color: white;
    border: 1px solid #333;
}

.button.is-secondary:hover[b-nie7r1qkmw] {
    background-color: #555;
    border-color: #555;
}

.two-column-layout[b-nie7r1qkmw] {
    display: flex;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 768px) {
    .two-column-layout[b-nie7r1qkmw] {
        flex-direction: column;
    }
}

.features-column[b-nie7r1qkmw] {
    /* Use animatable properties (flex-basis/max-width) for smooth collapse */
    flex: 0 0 38%;
    max-width: 38%;
    min-width: 0;
    padding: 1rem 0;
    opacity: 1;
    overflow: hidden;
    transform: translateX(0);
    will-change: flex-basis, max-width, opacity, transform, padding;
    transition:
        flex-basis 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease-out,
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-column[b-nie7r1qkmw] {
    flex: 0 0 62%;
    max-width: 62%;
    min-width: 0;
    padding: 1rem 0;
    border-radius: 24px;
    will-change: flex-basis, max-width;
    transition:
        flex-basis 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Result-tab layout: collapse features, expand input */
.two-column-layout.is-results .features-column[b-nie7r1qkmw] {
    flex-basis: 0%;
    max-width: 0%;
    opacity: 0;
    padding: 0;
    transform: translateX(-12px);
    pointer-events: none;
}

.two-column-layout.is-results .input-column[b-nie7r1qkmw] {
    flex-basis: 100%;
    max-width: 100%;
}

/* Mobile: stack columns; animate the features column height instead */
@media (max-width: 768px) {
    .features-column[b-nie7r1qkmw],
    .input-column[b-nie7r1qkmw] {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .features-column[b-nie7r1qkmw] {
        max-height: 520px;
        transition:
            max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease-out,
            transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .two-column-layout.is-results .features-column[b-nie7r1qkmw] {
        max-height: 0;
    }
}

/* Upload Card Styles */
.fd-upload-card[b-nie7r1qkmw] {
    background: white;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Single border around the entire "Ange fältnamn" step (left + right + button) */
.fd-step-border[b-nie7r1qkmw] {
    border: 1px solid #ddd;
    border-radius: 32px;
    padding: 1rem;
}

.fd-step-section[b-nie7r1qkmw] {
    /* keep layout/padding consistent without adding another border */
}

.fd-fields--no-border[b-nie7r1qkmw] {
    border: none !important;
}

.fd-title[b-nie7r1qkmw] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #2e0d0d;
}

.fd-subtitle[b-nie7r1qkmw] {
    font-size: 0.95rem;
    color: #666;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.fd-fields[b-nie7r1qkmw] {
    background: #f8f9fa;
    border-radius: 8px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    color: #333;
}

/* Same border as .fd-fields, but intended for larger content blocks */
.fd-bordered-box[b-nie7r1qkmw] {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.75rem;
}

.fd-dropzone[b-nie7r1qkmw] {
    display: block;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 1rem;
}

.fd-dropzone--processing[b-nie7r1qkmw] {
    cursor: default;
    background: #fafafa;
}

.fd-dropzone:hover[b-nie7r1qkmw] {
    border-color: #999;
    background: #fafafa;
}

.fd-dropzone-inner[b-nie7r1qkmw] {
    color: #666;
}

.fd-dropzone-inner strong[b-nie7r1qkmw] {
    color: #333;
    font-size: 1rem;
}

.fd-dropzone-inner small[b-nie7r1qkmw] {
    color: #999;
    font-size: 0.875rem;
}

.fd-status[b-nie7r1qkmw] {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #666;
    min-height: 2.5rem;
}

.fd-collapse-btn[b-nie7r1qkmw] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    color: #666;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.fd-collapse-btn:hover[b-nie7r1qkmw] {
    color: #333;
}

.fd-icon[b-nie7r1qkmw] {
    font-size: 1.2em;
    font-weight: bold;
}

.fd-btn-text[b-nie7r1qkmw] {
    margin: 0;
}

.fd-file-list-scroll[b-nie7r1qkmw] {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: white;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.fd-file-list-scroll[b-nie7r1qkmw]::-webkit-scrollbar {
    width: 8px;
}

.fd-file-list-scroll[b-nie7r1qkmw]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.fd-file-list-scroll[b-nie7r1qkmw]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.fd-file-list-scroll[b-nie7r1qkmw]::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.fd-file-item[b-nie7r1qkmw] {
    font-size: 0.85rem;
    color: #333;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.fd-file-item:last-child[b-nie7r1qkmw] {
    border-bottom: none;
}

.fd-results-grid-scroll[b-nie7r1qkmw] {
    max-height: 65vh;
    overflow: auto;
}

.fd-button[b-nie7r1qkmw] {
    width: 100%;
    background: #2e0d0d;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.fd-button:hover:not(:disabled)[b-nie7r1qkmw] {
    background: #555;
}

.fd-button:disabled[b-nie7r1qkmw] {
    background: #ccc;
    cursor: not-allowed;
}