/* ============================================================
 * Drone Réunion — Modal & Dialog Styles
 * Version: 1.0.0
 * 
 * Stylise les popups de confirmation et modals EspoCRM
 * pour correspondre au design Aérien de la navbar.
 * ============================================================ */

/* ─── Variables ─── */
:root {
    --modal-radius: 12px;
    --modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
    --modal-bg: #ffffff;
    --modal-border: #e2e8ed;
    --modal-text: #1e293b;
    --modal-text-muted: #64748b;
    --modal-padding: 24px;
    --btn-radius: 8px;
}

/* ================================================================
   1. MODAL BACKDROP
   ================================================================ */

.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(2px);
}

/* ================================================================
   2. MODAL DIALOG CONTAINER
   ================================================================ */

.modal-dialog {
    margin: 100px auto !important;
}

/* ================================================================
   3. MODAL CONTENT (the white box)
   ================================================================ */

.modal-content {
    border: none !important;
    border-radius: var(--modal-radius) !important;
    box-shadow: var(--modal-shadow) !important;
    overflow: hidden !important;
    background: var(--modal-bg) !important;
}

/* ================================================================
   4. MODAL HEADER
   ================================================================ */

.modal-header {
    padding: 20px var(--modal-padding) 16px !important;
    border-bottom: 1px solid var(--modal-border) !important;
    background: var(--modal-bg) !important;
}

.modal-header .modal-title,
.modal-header h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--modal-text) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Close button (X) */
.modal-header .close,
.modal-header button[data-dismiss="modal"] {
    font-size: 24px !important;
    font-weight: 300 !important;
    color: var(--modal-text-muted) !important;
    opacity: 0.6 !important;
    text-shadow: none !important;
    transition: opacity 0.15s ease !important;
    padding: 0 !important;
    margin: -5px -5px -5px auto !important;
    background: none !important;
    border: none !important;
}
.modal-header .close:hover,
.modal-header button[data-dismiss="modal"]:hover {
    opacity: 1 !important;
    color: var(--modal-text) !important;
}

/* ================================================================
   5. MODAL BODY
   ================================================================ */

.modal-body {
    padding: var(--modal-padding) !important;
    color: var(--modal-text) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Confirmation message styling */
.modal-body p,
.modal-body .message {
    margin: 0 !important;
    font-size: 15px !important;
    color: var(--modal-text-muted) !important;
}

/* When modal body only contains confirmation text, center it */
.modal.modal-confirm .modal-body,
.modal[data-name="confirm"] .modal-body {
    text-align: center !important;
    padding: 32px var(--modal-padding) !important;
    font-size: 16px !important;
}

/* ================================================================
   6. MODAL FOOTER (buttons area)
   ================================================================ */

.modal-footer {
    padding: 16px var(--modal-padding) 20px !important;
    border-top: 1px solid var(--modal-border) !important;
    background: #f8fafc !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* Remove default Bootstrap margin on buttons */
.modal-footer .btn + .btn {
    margin-left: 0 !important;
}

/* ================================================================
   7. BUTTONS INSIDE MODALS
   ================================================================ */

.modal .btn {
    border-radius: var(--btn-radius) !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    transition: all 0.15s ease !important;
    min-width: 100px !important;
}

/* Primary button (e.g., "Se déconnecter", "Confirmer") */
.modal .btn-primary,
.modal .btn-danger {
    background-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}
.modal .btn-primary:hover,
.modal .btn-danger:hover {
    background-color: #dc2626 !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Secondary/Cancel button */
.modal .btn-default,
.modal .btn-secondary {
    background-color: #f1f5f9 !important;
    color: var(--modal-text) !important;
    border: 1px solid var(--modal-border) !important;
}
.modal .btn-default:hover,
.modal .btn-secondary:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* Success button variant */
.modal .btn-success {
    background-color: #10b981 !important;
    color: #fff !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3) !important;
}
.modal .btn-success:hover {
    background-color: #059669 !important;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* ================================================================
   8. CONFIRMATION DIALOG SPECIFIC
   ================================================================ */

/* Small confirmation dialogs */
.modal-sm .modal-content,
.modal.modal-confirm .modal-content,
.dialog-confirm .modal-content {
    max-width: 400px !important;
    margin: 0 auto !important;
}

.modal-sm .modal-body,
.modal.modal-confirm .modal-body,
.dialog-confirm .modal-body {
    text-align: center !important;
    padding: 28px 24px !important;
}

.modal-sm .modal-footer,
.modal.modal-confirm .modal-footer,
.dialog-confirm .modal-footer {
    justify-content: center !important;
    background: var(--modal-bg) !important;
    border-top: none !important;
    padding-top: 0 !important;
    padding-bottom: 24px !important;
}

/* ================================================================
   9. ANIMATIONS
   ================================================================ */

.modal.fade .modal-dialog {
    transform: translateY(-20px) scale(0.98) !important;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important;
}

.modal.fade.in .modal-dialog,
.modal.fade.show .modal-dialog {
    transform: translateY(0) scale(1) !important;
}

/* ================================================================
   10. RESPONSIVE
   ================================================================ */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 20px !important;
    }

    .modal-footer {
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .modal .btn {
        width: 100% !important;
    }
}

/* ================================================================
   11. GEOJSON IMPORT — DROPZONE & FILE LIST
   ================================================================ */

.import-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: #f8fafc;
}

.import-dropzone:hover,
.import-dropzone.dragover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.import-dropzone-icon {
    font-size: 28px;
    color: #94a3b8;
    display: block;
    margin-bottom: 8px;
}

.import-dropzone.dragover .import-dropzone-icon {
    color: #3b82f6;
}

.import-dropzone-text {
    font-size: 14px;
    color: #475569;
    margin-bottom: 4px;
}

.import-dropzone-sub {
    font-size: 12px;
    color: #94a3b8;
}

.import-browse-label {
    color: #3b82f6;
    cursor: pointer;
    font-weight: 500;
}

.import-browse-label:hover {
    text-decoration: underline;
}

.import-browse-input {
    display: none;
}

/* File list */
.import-file-list {
    margin-bottom: 8px;
}

.import-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    margin-bottom: 4px;
    font-size: 13px;
}

.import-file-icon {
    color: #64748b;
    flex-shrink: 0;
}

.import-file-name {
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.import-file-info {
    color: #64748b;
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-file-status {
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

.import-file-remove {
    color: #94a3b8 !important;
    padding: 0 4px !important;
    min-width: auto !important;
    flex-shrink: 0;
}

.import-file-remove:hover {
    color: #ef4444 !important;
}

/* Progress bar */
.import-progress {
    margin-top: 12px;
}

.import-progress .progress {
    height: 20px;
    border-radius: 4px;
    margin-bottom: 6px;
}

.import-progress-text {
    font-size: 12px;
    text-align: center;
}