/*
 * import-modal.css — self-contained styling for the import + bank-request
 * modals.
 *
 * The import fields use raw Tailwind utilities, but the Tailwind Play CDN (on
 * buchhaltung pages) does not reliably generate utilities for content injected
 * dynamically into the UnifiedModal after page load — so the modal rendered
 * unstyled (sections not hidden, tiles not boxed). These rules are static
 * (loaded via <link> on every page) and scoped to the modal container, so the
 * modal renders correctly regardless of the page's Tailwind setup.
 */

/* ── Critical: visibility toggles + visually-hidden inputs ── */
#unified-modal-container .hidden { display: none !important; }
#unified-modal-container .sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ── Scope wrapper ── */
#unified-modal-container #import-form,
#unified-modal-container #bank-not-listed-form { color: #374151; }

#unified-modal-container #import-form p,
#unified-modal-container #bank-not-listed-form p { margin: 0; }

/* Guidance / helper text */
#unified-modal-container #import-form .text-sm { font-size: .875rem; line-height: 1.5; }
#unified-modal-container #import-form .text-xs,
#unified-modal-container #bank-not-listed-form .text-xs { font-size: .75rem; line-height: 1.4; }
#unified-modal-container .text-gray-600 { color: #4b5563; }
#unified-modal-container .text-gray-500 { color: #6b7280; }
#unified-modal-container .text-gray-700 { color: #374151; }
#unified-modal-container .text-gray-800 { color: #1f2937; }
#unified-modal-container .text-red-600 { color: #dc2626; }
#unified-modal-container .text-blue-700,
#unified-modal-container a.font-medium { color: #1d4ed8; }
#unified-modal-container .font-medium { font-weight: 500; }
#unified-modal-container .font-semibold { font-weight: 600; }

/* Section spacing */
#unified-modal-container #keyword-field,
#unified-modal-container #format-chip { margin-top: 1rem; }
#unified-modal-container #excel-fields {
    margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb;
}
#unified-modal-container #excel-fields > * + * { margin-top: 1.25rem; }
#unified-modal-container #import-form label.block,
#unified-modal-container #bank-not-listed-form label { display: block; margin-bottom: .375rem; }

/* ── Dropzone ── */
#unified-modal-container #import-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; border: 2px dashed #d1d5db; border-radius: .5rem;
    background: #f9fafb; padding: 2rem 1.5rem; text-align: center; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
#unified-modal-container #import-dropzone:hover { background: #f3f4f6; }
#unified-modal-container #import-dropzone.is-drag {
    border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px #3b82f6;
}
#unified-modal-container #dz-default,
#unified-modal-container #dz-selected { display: flex; flex-direction: column; align-items: center; }
#unified-modal-container #dz-default.hidden,
#unified-modal-container #dz-selected.hidden { display: none !important; }
#unified-modal-container #import-dropzone i { font-size: 2rem; color: #9ca3af; margin-bottom: .5rem; }
#unified-modal-container #import-dropzone .text-success-600 { color: #16a34a; }

/* ── Text inputs ── */
#unified-modal-container #import-form input[type="text"],
#unified-modal-container #import-form input[type="number"],
#unified-modal-container #bank-not-listed-form input[type="text"],
#unified-modal-container #bank-not-listed-form textarea,
#unified-modal-container #import-form select {
    display: block; width: 100%;
    border: 1px solid #d1d5db; border-radius: .375rem; background: #fff;
    padding: .5rem .75rem; color: #111827; font-size: .875rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
#unified-modal-container #import-form input[type="number"]#id_skip_rows { width: 8rem; }
#unified-modal-container #import-form input:focus,
#unified-modal-container #import-form select:focus,
#unified-modal-container #bank-not-listed-form input:focus,
#unified-modal-container #bank-not-listed-form textarea:focus {
    outline: none; border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6;
}

/* ── Source tiles ── */
#unified-modal-container #source-group > p:first-child { font-size: .875rem; font-weight: 500; }
#unified-modal-container #source-group .grid {
    display: grid; grid-template-columns: 1fr; gap: .5rem;
}
@media (min-width: 640px) {
    #unified-modal-container #source-group .grid { grid-template-columns: 1fr 1fr; }
}
#unified-modal-container #source-group label.cursor-pointer { cursor: pointer; display: block; margin: 0; }
#unified-modal-container .source-radio + span {
    display: flex; align-items: center; gap: .75rem; width: 100%;
    border: 1px solid #d1d5db; border-radius: .5rem; background: #fff;
    padding: .625rem .75rem; transition: border-color .15s ease, background .15s ease;
}
#unified-modal-container .source-radio + span:hover { border-color: #9ca3af; }
#unified-modal-container .source-radio:checked + span {
    border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb;
}
#unified-modal-container .source-radio + span i { font-size: 1.125rem; color: #6b7280; }
#unified-modal-container #source-group .uppercase {
    text-transform: uppercase; letter-spacing: .05em; font-size: .75rem;
    font-weight: 600; color: #9ca3af; margin: .75rem 0 .375rem;
}

/* ── Format chip + hint ── */
#unified-modal-container #format-chip > span {
    display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px;
    background: #eff6ff; border: 1px solid #dbeafe; color: #1d4ed8;
    padding: .25rem .75rem; font-size: .875rem; font-weight: 500;
}
#unified-modal-container #source-hint {
    margin-top: .75rem; border: 1px solid #dbeafe; background: #eff6ff; color: #1e40af;
    border-radius: .375rem; padding: .5rem .75rem; font-size: .75rem;
}

/* ── Bank-not-listed modal ── */
#unified-modal-container .bnl-intro {
    border: 1px solid #dbeafe; background: #eff6ff; color: #1e40af;
    border-radius: .5rem; padding: .75rem; font-size: .875rem; line-height: 1.5;
    margin-bottom: 1rem;
}
#unified-modal-container #bank-not-listed-form > * + * { margin-top: 1rem; }
#unified-modal-container #bank-not-listed-form input[type="file"] { font-size: .875rem; }