/*
 * Import Subscribers page — visual restyle to match the approved mockup.
 * Loaded from Pages/Subscribers/ImportSubscribers.razor.
 *
 * PURE CSS OVERLAY. No razor markup was changed. Every rule below
 * targets classes / DOM structure already emitted by the existing
 * CSVImportSubscriber.razor, PasteFromExcelImportSubscriber.razor
 * and the shared MudBlazor components. Functionality is untouched.
 *
 * Palette from the mockup:
 *   --primary:       #7c3aed
 *   --primary-hover: #6d28d9
 *   --primary-soft:  #F3E8FF
 *   --bg:            #F8FAFC
 *   --card-bg:       #FFFFFF
 *   --text-main:     #1E293B
 *   --text-muted:    #64748B
 *   --border:        #E2E8F0
 *   --radius:        12px
 */

/* ============================================================
   PAGE SHELL — flatten the outer MudCard wrappers
   ============================================================
   The page renders inside two nested MudCards (the outer <MudCard
   Class="import-page"> and an inner <MudCard Elevation="0"
   Class="pa-4">). Both add borders / shadows / padding that don't
   exist in the mockup. Strip them so the mockup step cards sit
   directly on the page background. */

.import-page.mud-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.import-page > .mud-card-content {
    background: transparent !important;
    padding: 0 !important;
}
.import-page .mud-grid > .mud-grid-item > .mud-card.pa-4 {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Right-side "List Import Status" column: MudGrid uses flex-row with
   default `align-items: stretch`, so an almost-empty sidebar column
   stretches down to match the tall main form column and leaves a huge
   white area beneath the single ListImportStatus card. Anchor the
   sidebar column to the top so it hugs its content instead. */
.import-page .mud-grid > .mud-grid-item + .mud-grid-item {
    align-self: flex-start;
}
.import-page .mud-grid > .mud-grid-item + .mud-grid-item .mud-stack {
    background: transparent !important;
    min-height: 0 !important;
}

/* ============================================================
   PAGE SHELL
   ============================================================ */

/* Constrain the whole grid to the same reading width used by the campaign
   wizard (see CreateCampaignStep.razor's .ccs-wrap/.ccs-body), instead of
   letting the two-column layout stretch full-bleed on wide screens. */
.import-page {
    max-width: 1280px;
    margin: 0 auto;
}

/* Give inner cards the mockup's soft bg + tighter padding (width is now
   controlled at the .import-page level above, not per-card). */
.import-page .mud-card {
    border-radius: 12px;
}

.import-page .mud-card-content {
    background-color: #F8FAFC;
}

/* ============================================================
   TABS (File Upload / Copy & Paste)
   ============================================================ */

.import-page .mud-tabs-toolbar {
    background: transparent !important;
    border-bottom: 1px solid #E2E8F0;
    padding: 0 !important;
    margin-bottom: 1.5rem;
}

.import-page .mud-tab {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #64748B !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
    padding: 0.75rem 1.25rem !important;
}

.import-page .mud-tab.mud-tab-active {
    color: #7c3aed !important;
}

.import-page .mud-tabs-tabbar-inner .mud-tab-slider {
    background: #7c3aed !important;
    height: 2px !important;
}

/* ============================================================
   STACKED GRID (Step 1: Upload above, Overwrite Rules below)
   The two side-by-side <MudItem md="6"> cards get force-stacked
   full-width, and CSS `order` puts Upload File on top even
   though the razor still writes Overwrite Rules first. Zero
   markup movement needed — matches mockup layout while keeping
   the two child razor files as similar to their original
   structure as possible.
   ============================================================ */

.import-page .importStackedGrid > .mud-grid-item {
    flex-basis: 100% !important;
    max-width: 100% !important;
}
.import-page .importStackedGrid > .importStackedGrid-upload {
    order: 1;
}
.import-page .importStackedGrid > .importStackedGrid-rules {
    order: 2;
}

/* Step-1 numbered badge on the Upload File card header — matches the
   purple "1" circle in the mockup's Step 1 header. Pure CSS, no
   markup change. Extend to Step 2 / Step 3 with a wrapper class on
   those sections if the client wants the full numbering. */
.import-page .importStackedGrid-upload .mud-card.border .mud-card-header {
    display: flex !important;
    align-items: center !important;
}
.import-page .importStackedGrid-upload .mud-card.border .mud-card-header::before {
    content: '1';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F3E8FF;
    color: #7c3aed;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* ============================================================
   INNER CARDS (Overwrite Rules / Upload File / etc.)
   ============================================================ */

/* The two `<MudCard Elevation="1" Class="border">` boxes in each
   child component — used for overwrite rules and upload file. */
.import-page .mud-card.border {
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    background: #FFFFFF !important;
}

.import-page .mud-card.border .mud-card-header {
    padding: 1rem 1.25rem 0.5rem !important;
}

.import-page .mud-card.border .mud-card-content {
    background: #FFFFFF !important;
    padding: 1rem 1.25rem 1.25rem !important;
}

.import-page .mud-card.border .mud-card-header .mud-typography.font-weight-bold {
    color: #1E293B;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ============================================================
   OVERWRITE RULES RADIO GROUP
   .importRulesGroup on the MudRadioGroup
   ============================================================ */

.import-page .importRulesGroup {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem;
}

/* Each MudRadio -> rendered as a label — style it as a bordered card. */
.import-page .importRulesGroup .mud-radio {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.85rem 0.9rem;
    background: #FFFFFF;
    transition: border-color 0.15s ease, background 0.15s ease;
    align-items: flex-start !important;
    width: 100%;
    margin: 0 !important;
}

.import-page .importRulesGroup .mud-radio:hover {
    border-color: #CBD5E1;
}

/* When selected: purple border + soft fill. Uses MudBlazor's
   internal checked state class. */
.import-page .importRulesGroup .mud-radio input[type="radio"]:checked ~ span,
.import-page .importRulesGroup .mud-radio .mud-checked ~ .mud-typography,
.import-page .importRulesGroup .mud-radio .mud-radio-icon-checked {
    color: #7c3aed !important;
}

/* Make the primary "creates duplicate" chip look like the mockup's
   yellow "CREATES DUPLICATES" badge. */
.import-page .importRulesGroup .mud-chip.mud-chip-color-warning {
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    height: auto !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Kill the visual gap that `<br />` between MudRadios adds now
   that each radio is its own card. */
.import-page .importRulesGroup br {
    display: none;
}

/* Rule-card content (title + optional badge + description) --
   these classes are added to the ChildContent of each MudRadio
   in CSVImportSubscriber.razor and PasteFromExcelImportSubscriber.razor. */
.import-page .importRuleTitle {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: #1E293B;
    line-height: 1.35;
    margin-bottom: 0.15rem;
}

.import-page .importRuleDesc {
    display: block;
    font-size: 0.83rem;
    color: #64748B;
    line-height: 1.4;
    margin-top: 0.2rem;
}

.import-page .importRuleBadge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.import-page .importRuleBadgeRecommended {
    background: #DCFCE7;
    color: #166534;
}

/* ============================================================
   UPLOAD FILE ZONE (MudFileUpload button + hint)
   ============================================================ */

.import-page .mud-file-upload {
    display: block;
    text-align: center;
}

/* Upload trigger button — purple filled per mockup. */
.import-page .mud-file-upload .mud-button-filled-primary,
.import-page .mud-button-filled.mud-button-filled-primary {
    background: #7c3aed !important;
    color: #FFFFFF !important;
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.import-page .mud-button-filled.mud-button-filled-primary:hover {
    background: #6d28d9 !important;
}

.import-page .mud-button-outlined-primary {
    color: #7c3aed !important;
    border-color: #7c3aed !important;
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* ============================================================
   DOI (Double Opt-In) INFO ALERT — style like the mockup's info banner
   ============================================================ */

.import-page .mud-alert-filled-info,
.import-page .mud-alert-outlined-info,
.import-page .mud-alert.mud-alert-info,
.import-page .mud-alert-text-info,
.import-page .mud-alert-standard-info {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    color: #1E40AF !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.import-page .mud-alert-standard-info .mud-alert-icon,
.import-page .mud-alert-standard-info .mud-alert-icon svg {
    color: #1E40AF !important;
    fill: #1E40AF !important;
}

/* ============================================================
   ANTI-SPAM PERMISSION SECTION (bottom of each form)
   The .importRules class is on the MudStack that wraps the list.
   ============================================================ */

.import-page .importRules {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.15rem 1.25rem !important;
    margin-top: 0.75rem !important;
    margin-left: 0 !important;
}

.import-page .importRules > .mud-typography:first-of-type {
    font-weight: 700;
    color: #1E293B;
    font-size: 0.95rem;
    margin-bottom: 0.75rem !important;
}

/* Turn the MudList of red-close icons into the mockup's 2-column grid
   with soft red-X badges. */
.import-page .importRules .mud-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1.5rem;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 640px) {
    .import-page .importRules .mud-list {
        grid-template-columns: 1fr;
    }
}

.import-page .importRules .mud-list-item {
    padding: 0 !important;
    background: transparent !important;
    min-height: auto !important;
    font-size: 0.88rem !important;
    color: #1E293B !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
}

.import-page .importRules .mud-list-item:hover {
    background: transparent !important;
}

.import-page .importRules .mud-list-item .mud-list-item-icon {
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    background: #FEE2E2 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.35rem !important;
    padding: 0 !important;
}

.import-page .importRules .mud-list-item .mud-list-item-icon svg {
    color: #DC2626 !important;
    fill: #DC2626 !important;
    width: 12px !important;
    height: 12px !important;
}

.import-page .importRules > .mud-typography:last-of-type {
    color: #64748B;
    font-size: 0.85rem;
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px dashed #E2E8F0;
    line-height: 1.5;
}

/* ============================================================
   AGREEMENT CHECKBOX ROW
   ============================================================ */

.import-page .mud-checkbox {
    align-items: flex-start !important;
}

.import-page .mud-checkbox .mud-typography {
    color: #1E293B;
    font-weight: 500;
}

.import-page .mud-checkbox .mud-link,
.import-page .mud-link.mud-primary-text {
    color: #7c3aed !important;
    font-weight: 600 !important;
}

/* ============================================================
   NEXT / SUBMIT BUTTON
   ============================================================ */

.import-page .mud-button-filled.mud-button-filled-primary {
    padding: 0.55rem 1.5rem !important;
    border-radius: 10px !important;
}

/* ============================================================
   COMPLETION SCREEN — shown after "Finalize Import" while
   SubscriberImportJob processes in the background. Reuses the same
   purple/soft-bg palette as the rest of this page (see header comment).
   ============================================================ */

.import-page .mockup-success-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px 40px;
    border-radius: 16px;
    background: linear-gradient(180deg, #F3E8FF 0%, #FFFFFF 65%);
    overflow: hidden;
}

/* Soft scattered dots for a subtle celebratory feel — CSS-only, no images/JS. */
.import-page .mockup-success-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, #7c3aed 1.5px, transparent 1.5px),
        radial-gradient(circle, #DCFCE7 2px, transparent 2px);
    background-size: 140px 140px, 90px 90px;
    background-position: 0 0, 45px 60px;
    opacity: 0.3;
    pointer-events: none;
}

.import-page .mockup-success-badge {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
    z-index: 1;
}

.import-page .mockup-success-badge::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid #7c3aed;
    opacity: 0.4;
    animation: mockup-pulse-ring 2.2s ease-out infinite;
}

@keyframes mockup-pulse-ring {
    0%   { transform: scale(0.9); opacity: 0.5; }
    70%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}

.import-page .mockup-success-icon {
    color: #7c3aed !important;
    font-size: 38px !important;
    animation: mockup-fly 2.6s ease-in-out infinite;
}

@keyframes mockup-fly {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(2px, -3px) rotate(-6deg); }
}

.import-page .mockup-success-title {
    margin-top: 22px;
    font-weight: 700 !important;
    color: #1E293B;
    z-index: 1;
}

.import-page .mockup-success-subtitle {
    margin-top: 8px;
    max-width: 420px;
    color: #64748B;
    z-index: 1;
}

.import-page .mockup-success-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    z-index: 1;
}

.import-page .mockup-success-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #94A3B8;
}

.import-page .mockup-success-step .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.import-page .mockup-success-step.done {
    color: #166534;
}

.import-page .mockup-success-step.active {
    color: #7c3aed;
}

.import-page .mockup-success-step.active .dot {
    animation: mockup-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes mockup-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.5); }
}

.import-page .mockup-success-chevron {
    color: #CBD5E1;
    font-size: 14px;
    z-index: 1;
}

.import-page .mockup-success-actions {
    margin-top: 28px;
    z-index: 1;
}

/* ============================================================
   RIGHT SIDEBAR (LIST IMPORT STATUS) — subtle border card
   ============================================================ */

.import-page > .mud-card > .mud-card-content > .mud-grid > .mud-grid-item:last-child .mud-card {
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: none !important;
}

/* ============================================================
   MOCKUP-EXACT STYLES for the CSV upload tab.
   All classes prefixed `mockup-` so they don't collide with the
   restyled MudBlazor selectors above. These are applied by the
   mockup-based markup inside CSVImportSubscriber.razor.
   ============================================================ */

.import-page .mockup-import-shell {
    /*max-width: 1000px;*/
    margin: 0;              /* left-align, not centered */
    padding: 1.5rem 0;
    color: #1E293B;
}

/* Email list selector bar ---------------------------------------- */
.import-page .mockup-current-list-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #FFFFFF;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid #E2E8F0;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.import-page .mockup-current-list-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1E293B;
    flex-shrink: 0;
}
.import-page .mockup-current-list-select {
    flex: 1 1 240px;
    max-width: 300px;
}

/* Cards column --------------------------------------------------- */
.import-page .mockup-cards-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Each step card ------------------------------------------------- */
.import-page .mockup-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    box-shadow: none;
}

.import-page .mockup-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.import-page .mockup-step-badge {
    background: #F3E8FF;
    color: #7c3aed;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Tabs bar inside Step 1 card ----------------------------------- */
.import-page .mockup-tabs-header {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.6rem;
}
.import-page .mockup-tab-btn {
    background: none;
    border: none;
    padding: 0 0 0.3rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    line-height: 1.4;
    font-family: inherit;
    position: relative;
}
.import-page .mockup-tab-btn:hover {
    color: #7c3aed;
}
.import-page .mockup-tab-btn.active {
    color: #7c3aed;
}
.import-page .mockup-tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.65rem;
    height: 2px;
    background: #7c3aed;
    border-radius: 1px;
}

/* Paste component's tab-wrapper (renders the tab bar above its
   un-mockup-restyled body until Paste gets its own redesign). */
.import-page .mockup-paste-tabs-wrapper {
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}

/* Upload dropzone ------------------------------------------------ */
.import-page .mockup-upload-dropzone {
    border: 2px dashed #E2E8F0;
    border-radius: 12px;
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: #FAFAFA;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.import-page .mockup-upload-dropzone:hover {
    border-color: #7c3aed;
    background: #F8F7FF;
}
.import-page .mockup-upload-btn {
    background: #7c3aed !important;
    color: #FFFFFF !important;
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.4rem 1rem !important;
    box-shadow: none !important;
    margin-bottom: 0.5rem;
}
.import-page .mockup-upload-hint {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0.5rem 0 0;
}
.import-page .mockup-selected-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}
.import-page .mockup-selected-file-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Paste input area (Copy & Paste tab's Step 1 content) ---------- */
.import-page .mockup-paste-input-title {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
}
.import-page .mockup-paste-input-title strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
}
.import-page .mockup-paste-input-hint {
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.4;
}
.import-page .mockup-paste-input {
    margin-bottom: 1.25rem;
}
.import-page .mockup-paste-input .mud-input-outlined-border {
    border-radius: 12px !important;
}
.import-page .mockup-paste-input textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Overwrite Rules section --------------------------------------- */
.import-page .mockup-overwrite-section {
    margin-top: 0.5rem;
}
.import-page .mockup-section-sublabel {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 0.75rem;
}
/* MudRadioGroup with mockup-rules-container class */
.import-page .mockup-rules-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
}
/* Each MudRadio with mockup-rule-card class becomes a bordered card */
.import-page .mockup-rule-card {
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 1rem 1.15rem !important;
    background: #FFFFFF !important;
    margin: 0 !important;
    align-items: flex-start !important;
    transition: border-color 0.15s ease, background 0.15s ease;
    width: 100%;
}
.import-page .mockup-rule-card:hover {
    border-color: #CBD5E1 !important;
}
.import-page .mockup-rule-card.mud-checked,
.import-page .mockup-rule-card:has(input[type="radio"]:checked) {
    border-color: #7c3aed !important;
    background: #F8F5FF !important;
}
.import-page .mockup-rule-header-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.import-page .mockup-rule-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1E293B;
}
.import-page .mockup-rule-desc {
    display: block;
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.4;
}
.import-page .mockup-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}
.import-page .mockup-badge-recommended {
    background: #DCFCE7;
    color: #166534;
}
.import-page .mockup-badge-duplicate {
    background: #FEF3C7;
    color: #92400E;
}

/* Toggle rows (Enable Automation, Double Opt-In) ---------------- */
.import-page .mockup-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
}
.import-page .mockup-toggle-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.import-page .mockup-toggle-row-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
}
.import-page .mockup-toggle-row-sub {
    font-size: 0.8rem;
    color: #64748B;
}
.import-page .mockup-toggle-row-link {
    font-size: 0.82rem !important;
    color: #7c3aed !important;
    font-weight: 600 !important;
}
.import-page .mockup-automation-row {
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 0.9rem;
    margin-bottom: 0.5rem;
}

/* DOI panel ------------------------------------------------------ */
.import-page .mockup-doi-container {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 0.75rem;
}
.import-page .mockup-info-banner {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1E40AF;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.import-page .mockup-info-banner code {
    background: rgba(30, 64, 175, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.8rem;
}
.import-page .mockup-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 640px) {
    .import-page .mockup-form-row {
        grid-template-columns: 1fr;
    }
}
.import-page .mockup-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.import-page .mockup-input-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
}
.import-page .mockup-input-group-full {
    margin-bottom: 1rem;
}

/* Step 3 confirm panel ------------------------------------------ */
.import-page .mockup-confirm-desc {
    font-size: 0.9rem;
    color: #64748B;
    margin: -0.5rem 0 1rem;
}
.import-page .mockup-permission-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.import-page .mockup-permission-box-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1E293B;
    margin-bottom: 1rem;
}
.import-page .mockup-permission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 2rem;
}
@media (max-width: 640px) {
    .import-page .mockup-permission-grid { grid-template-columns: 1fr; }
}
.import-page .mockup-permission-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: #1E293B;
}
.import-page .mockup-red-x-badge {
    background: #FEE2E2;
    color: #DC2626;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1;
}
.import-page .mockup-permission-divider {
    border: none;
    border-top: 1px dashed #E2E8F0;
    margin: 1.15rem 0;
}
.import-page .mockup-permission-footer {
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.5;
}
.import-page .mockup-agreement-box {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    background: #FFFFFF;
    margin-top: 0.5rem;
}

/* Vertically center the checkbox with its label text.
   MudCheckBox defaults to `align-items: flex-start` which pushes the
   checkbox to the top of the row when the label wraps or is taller
   than the box glyph. */
.import-page .mockup-agreement-box .mud-checkbox {
    align-items: center !important;
    margin: 0 !important;
}
.import-page .mockup-agreement-box .mud-checkbox .mud-typography,
.import-page .mockup-agreement-box .mud-checkbox > label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    line-height: 1.4;
}
.import-page .mockup-agreement-box .mud-checkbox .mud-icon-button {
    /* MudBlazor wraps the checkbox icon in an icon-button; drop its
       ripple padding so the glyph aligns tightly with the text baseline. */
    padding: 4px !important;
}

/* Complete Import button ---------------------------------------- */
.import-page .mockup-footer-action {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
.import-page .mockup-btn-primary {
    background: #7c3aed !important;
    color: #FFFFFF !important;
    padding: 0.7rem 1.75rem !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: none !important;
    font-size: 0.95rem !important;
}
.import-page .mockup-btn-primary:hover {
    background: #6d28d9 !important;
}

/* ============================================================
   DARK MODE — full override set for every hard-coded light
   color above so the redesign works under MudBlazor's dark
   theme (`mud-theme-dark` on <body>).

   Colors come from the VaakioTheme dark palette via MudBlazor's
   CSS variables so this page always matches the rest of the app:
     card bg:  var(--mud-palette-surface)        #2B2E31
     page bg:  var(--mud-palette-background)     #252729
     text:     var(--mud-palette-text-primary)   rgba(255,255,255,0.7)
     muted:    var(--mud-palette-text-secondary) rgba(255,255,255,0.5)
     border:   var(--mud-palette-lines-default)  #4c2975
     primary:  var(--mud-palette-primary)        #845ADF
   ============================================================ */

/* --- page shell ------------------------------------------------ */
.mud-theme-dark .import-page .mud-card-content {
    background-color: transparent;
}

/* --- legacy (non-mockup) selectors ----------------------------- */
.mud-theme-dark .import-page .mud-card.border,
.mud-theme-dark .import-page .importRulesGroup .mud-radio,
.mud-theme-dark .import-page .mud-card.border .mud-card-content {
    background: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .import-page .mud-tabs-toolbar {
    border-bottom-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mud-tab {
    color: var(--mud-palette-text-secondary) !important;
}

.mud-theme-dark .import-page .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary) !important;
}

.mud-theme-dark .import-page .mud-card.border .mud-card-header .mud-typography.font-weight-bold,
.mud-theme-dark .import-page .importRuleTitle {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .import-page .importRuleDesc {
    color: var(--mud-palette-text-secondary);
}

.mud-theme-dark .import-page .importRulesGroup .mud-radio:hover {
    border-color: rgba(132, 90, 223, 0.6);
}

.mud-theme-dark .import-page .importRules {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .importRules > .mud-typography:first-of-type {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .import-page .importRules > .mud-typography:last-of-type {
    color: var(--mud-palette-text-secondary);
    border-top-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .importRules .mud-list-item {
    color: var(--mud-palette-text-primary) !important;
}

.mud-theme-dark .import-page .importRules .mud-list-item .mud-list-item-icon {
    background: rgba(230, 83, 60, 0.15) !important;
}

.mud-theme-dark .import-page .importRules .mud-list-item .mud-list-item-icon svg {
    color: var(--mud-palette-error) !important;
    fill: var(--mud-palette-error) !important;
}

.mud-theme-dark .import-page .mud-checkbox .mud-typography {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .import-page .mud-alert-filled-info,
.mud-theme-dark .import-page .mud-alert-outlined-info,
.mud-theme-dark .import-page .mud-alert.mud-alert-info,
.mud-theme-dark .import-page .mud-alert-text-info,
.mud-theme-dark .import-page .mud-alert-standard-info {
    background: rgba(73, 182, 245, 0.12) !important;
    border-color: rgba(73, 182, 245, 0.35) !important;
    color: var(--mud-palette-info) !important;
}

.mud-theme-dark .import-page .mud-alert-standard-info .mud-alert-icon,
.mud-theme-dark .import-page .mud-alert-standard-info .mud-alert-icon svg {
    color: var(--mud-palette-info) !important;
    fill: var(--mud-palette-info) !important;
}

.mud-theme-dark .import-page .importRulesGroup .mud-chip.mud-chip-color-warning {
    background: rgba(245, 184, 73, 0.15) !important;
    color: var(--mud-palette-warning) !important;
}

.mud-theme-dark .import-page .importStackedGrid-upload .mud-card.border .mud-card-header::before {
    background: rgba(132, 90, 223, 0.2);
    color: var(--mud-palette-primary);
}

.mud-theme-dark .import-page > .mud-card > .mud-card-content > .mud-grid > .mud-grid-item:last-child .mud-card {
    border-color: var(--mud-palette-lines-default) !important;
}

/* --- mockup shell / list selector bar -------------------------- */
.mud-theme-dark .import-page .mockup-import-shell {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .import-page .mockup-current-list-wrapper,
.mud-theme-dark .import-page .mockup-card,
.mud-theme-dark .import-page .mockup-selected-file,
.mud-theme-dark .import-page .mockup-agreement-box {
    background: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-current-list-label,
.mud-theme-dark .import-page .mockup-card-title,
.mud-theme-dark .import-page .mockup-section-sublabel,
.mud-theme-dark .import-page .mockup-paste-input-title strong,
.mud-theme-dark .import-page .mockup-toggle-row-title,
.mud-theme-dark .import-page .mockup-input-group-label,
.mud-theme-dark .import-page .mockup-permission-box-title,
.mud-theme-dark .import-page .mockup-permission-item,
.mud-theme-dark .import-page .mockup-rule-title {
    color: var(--mud-palette-text-primary);
}

.mud-theme-dark .import-page .mockup-upload-hint,
.mud-theme-dark .import-page .mockup-paste-input-hint,
.mud-theme-dark .import-page .mockup-toggle-row-sub,
.mud-theme-dark .import-page .mockup-confirm-desc,
.mud-theme-dark .import-page .mockup-permission-footer,
.mud-theme-dark .import-page .mockup-rule-desc {
    color: var(--mud-palette-text-secondary);
}

.mud-theme-dark .import-page .mockup-step-badge {
    background: rgba(132, 90, 223, 0.2);
    color: var(--mud-palette-primary);
}

/* --- tabs ------------------------------------------------------ */
.mud-theme-dark .import-page .mockup-tabs-header {
    border-bottom-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-tab-btn {
    color: var(--mud-palette-text-secondary);
}

.mud-theme-dark .import-page .mockup-tab-btn:hover,
.mud-theme-dark .import-page .mockup-tab-btn.active {
    color: var(--mud-palette-primary);
}

/* --- upload dropzone ------------------------------------------- */
.mud-theme-dark .import-page .mockup-upload-dropzone {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-upload-dropzone:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(132, 90, 223, 0.08);
}

/* --- overwrite-rule cards -------------------------------------- */
.mud-theme-dark .import-page .mockup-rule-card {
    background: var(--mud-palette-surface) !important;
    border-color: var(--mud-palette-lines-default) !important;
}

.mud-theme-dark .import-page .mockup-rule-card:hover {
    border-color: rgba(132, 90, 223, 0.6) !important;
}

.mud-theme-dark .import-page .mockup-rule-card.mud-checked,
.mud-theme-dark .import-page .mockup-rule-card:has(input[type="radio"]:checked) {
    border-color: var(--mud-palette-primary) !important;
    background: rgba(132, 90, 223, 0.15) !important;
}

/* --- badges ---------------------------------------------------- */
.mud-theme-dark .import-page .mockup-badge-recommended,
.mud-theme-dark .import-page .importRuleBadgeRecommended {
    background: rgba(38, 191, 148, 0.15);
    color: var(--mud-palette-success);
}

.mud-theme-dark .import-page .mockup-badge-duplicate {
    background: rgba(245, 184, 73, 0.15);
    color: var(--mud-palette-warning);
}

/* --- toggle rows / DOI panel ----------------------------------- */
.mud-theme-dark .import-page .mockup-automation-row {
    border-bottom-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-doi-container {
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-info-banner {
    background: rgba(73, 182, 245, 0.12);
    border-color: rgba(73, 182, 245, 0.35);
    color: var(--mud-palette-info);
}

.mud-theme-dark .import-page .mockup-info-banner code {
    background: rgba(73, 182, 245, 0.15);
}

/* --- step 3 confirm panel -------------------------------------- */
.mud-theme-dark .import-page .mockup-permission-box {
    background: var(--mud-palette-background);
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-red-x-badge {
    background: rgba(230, 83, 60, 0.15);
    color: var(--mud-palette-error);
}

.mud-theme-dark .import-page .mockup-permission-divider {
    border-top-color: var(--mud-palette-lines-default);
}

/* --- primary buttons / links / tab accents --------------------- */
/* The light-mode mockup hard-codes #7c3aed; in dark mode use the
   VaakioTheme primary (#845ADF) so buttons match the rest of the app. */
.mud-theme-dark .import-page .mud-file-upload .mud-button-filled-primary,
.mud-theme-dark .import-page .mud-button-filled.mud-button-filled-primary,
.mud-theme-dark .import-page .mockup-upload-btn,
.mud-theme-dark .import-page .mockup-btn-primary {
    background: var(--mud-palette-primary) !important;
}

.mud-theme-dark .import-page .mud-button-filled.mud-button-filled-primary:hover,
.mud-theme-dark .import-page .mockup-btn-primary:hover {
    background: #6f48c2 !important;
}

.mud-theme-dark .import-page .mud-button-outlined-primary {
    color: var(--mud-palette-primary) !important;
    border-color: var(--mud-palette-primary) !important;
}

.mud-theme-dark .import-page .mud-checkbox .mud-link,
.mud-theme-dark .import-page .mud-link.mud-primary-text,
.mud-theme-dark .import-page .mockup-toggle-row-link {
    color: var(--mud-palette-primary) !important;
}

.mud-theme-dark .import-page .mockup-tab-btn.active::after,
.mud-theme-dark .import-page .mud-tabs-tabbar-inner .mud-tab-slider {
    background: var(--mud-palette-primary) !important;
}

/* --- completion screen ----------------------------------------- */
.mud-theme-dark .import-page .mockup-success-shell {
    background: linear-gradient(180deg, rgba(132, 90, 223, 0.16) 0%, var(--mud-palette-surface) 70%);
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-theme-dark .import-page .mockup-success-shell::before {
    background-image:
        radial-gradient(circle, var(--mud-palette-primary) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(38, 191, 148, 0.5) 2px, transparent 2px);
    opacity: 0.25;
}

.mud-theme-dark .import-page .mockup-success-badge {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 24px rgba(132, 90, 223, 0.3);
}

.mud-theme-dark .import-page .mockup-success-badge::after {
    border-color: var(--mud-palette-primary);
    opacity: 0.5;
}

.mud-theme-dark .import-page .mockup-success-icon {
    color: var(--mud-palette-primary) !important;
}

.mud-theme-dark .import-page .mockup-success-title {
    color: var(--mud-palette-text-primary) !important;
}

.mud-theme-dark .import-page .mockup-success-subtitle {
    color: var(--mud-palette-text-secondary) !important;
}

.mud-theme-dark .import-page .mockup-success-step {
    color: var(--mud-palette-text-secondary);
}

.mud-theme-dark .import-page .mockup-success-step.done {
    color: #26BF94;
}

.mud-theme-dark .import-page .mockup-success-step.active {
    color: var(--mud-palette-primary);
}

.mud-theme-dark .import-page .mockup-success-chevron {
    color: var(--mud-palette-lines-default);
}