/* ══════════════════════════════════════════════════════════════
   Notespark — OneNote import page, light theme
   Isolated file. Load after the other nota-*.css files.

   This page was never converted when the app moved to the light
   theme, so it kept a dark purple canvas with near-white text —
   headings and body copy rendered white-on-white once the shell
   around it turned light, leaving only the buttons legible.
   ══════════════════════════════════════════════════════════════ */

/* ── Canvas ──
   The dark backdrop came from a decorative layer behind the page.
   Kill it and let the page sit on the same white as everywhere else. */
.nota.theme-light .import-page {
    background: #ffffff !important;
}

.nota.theme-light .prospect-static-bg {
    display: none !important;
}

.nota.theme-light .import-body {
    background: #ffffff !important;
    padding: 24px 28px 40px;
}

.nota.compact.theme-light .import-body {
    padding: 18px 16px calc(120px + env(safe-area-inset-bottom));
}

/* ── Drop zone ── */
.nota.theme-light .import-dropzone {
    background: var(--n-surface) !important;
    border: 2px dashed var(--n-border-light) !important;
    border-radius: 16px;
    padding: 34px 24px;
    text-align: center;
    color: var(--n-text-2) !important;
    transition: border-color var(--n-transition), background var(--n-transition);
}

    .nota.theme-light .import-dropzone.drag-over {
        border-color: var(--n-accent) !important;
        background: var(--n-accent-dim) !important;
    }

.nota.theme-light .import-dropzone-icon {
    color: var(--n-text-4) !important;
    margin-bottom: 10px;
}

.nota.theme-light .import-dropzone h3,
.nota.theme-light .import-dropzone strong {
    color: var(--n-text) !important;
}

.nota.theme-light .import-dropzone p {
    color: var(--n-text-3) !important;
}

/* ── "How to export" helper text ── */
.nota.theme-light .import-how {
    color: var(--n-text-3) !important;
    font-size: 13px;
    line-height: 1.6;
}

    .nota.theme-light .import-how strong {
        color: var(--n-text-2) !important;
    }

/* ── Preview list ── */
.nota.theme-light .import-preview {
    background: #ffffff !important;
    color: var(--n-text) !important;
}

.nota.theme-light .import-preview-header {
    color: var(--n-text) !important;
    border-bottom: 1px solid var(--n-border-light);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.nota.theme-light .import-reset {
    color: var(--n-text-3) !important;
    background: none !important;
}

    .nota.theme-light .import-reset:hover {
        color: var(--n-accent-text) !important;
    }

.nota.theme-light .import-nb-name,
.nota.theme-light .import-option-label {
    color: var(--n-text-2) !important;
}

/* Each page row. Selected state uses the accent tint rather than a
   dark fill, matching the note cards. */
.nota.theme-light .import-page-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    margin-bottom: 7px;
    background: #fff !important;
    border: 1px solid var(--n-border-light) !important;
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .nota.theme-light .import-page-item:hover {
        border-color: var(--n-card-border-hover) !important;
    }

    .nota.theme-light .import-page-item.selected {
        background: var(--n-accent-dim) !important;
        border-color: rgba(108,92,231,0.35) !important;
    }

.nota.theme-light .import-page-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--n-text) !important;
}

.nota.theme-light .import-page-preview {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--n-text-3) !important;
    margin-top: 2px;
}

/* ── Status ── */
.nota.theme-light .import-error {
    color: var(--n-danger) !important;
    background: var(--n-danger-bg);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13.5px;
}

.nota.theme-light .import-success {
    color: #2f7a4f !important;
}

.nota.theme-light .import-goto {
    color: var(--n-accent-text) !important;
}

/* ── Checkboxes ──
   accent-color was set to the old #7C3AED; align it with the app accent. */
.nota.theme-light .onenote-nb-checkall,
.nota.theme-light .import-page-check input,
.nota.theme-light .prsp-checkbox {
    accent-color: var(--n-accent);
}

/* ── The spinner borrowed the login page's class, which is white-on-dark ── */
.nota.theme-light .login-spinner {
    border-color: var(--n-border-light) !important;
    border-top-color: var(--n-accent) !important;
}