/* =========================================================================
   RDF Live Multi-Peilingen Kaart - Database Monitor v8.9.3
   ========================================================================= */

/* Overschrijf stijl.css (die bedoeld is voor de vaste kaart) zodat we hier kunnen scrollen! */
html, body {
    overflow-y: auto !important;
    height: auto !important;
    color: #f1f5f9;
}

body {
    background-color: #0f172a;
    padding: 20px !important;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.monitor-container {
    max-width: 1100px;
    margin: 0 auto;
    background: #1e293b;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #334155;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Header & Titels */
.header-block { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3b82f6; padding-bottom: 15px; margin-bottom: 20px; }
.header-block h1 { margin: 0; font-size: 22px; color: #3b82f6; }
.version-badge { background: #334155; color: #94a3b8; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; }

/* Formulier & Jagers selectieboxen */
.jager-checkbox-container { display: flex; flex-wrap: wrap; gap: 12px; background: #0f172a; padding: 15px; border-radius: 6px; border: 1px solid #334155; margin-bottom: 20px; }
.jager-control-wrapper { display: inline-flex; align-items: center; background: #1e293b; border-radius: 4px; border: 1px solid #4b5563; overflow: hidden; transition: border-color 0.2s; }
.jager-control-wrapper:hover { border-color: #3b82f6; }
.jager-checkbox-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 12px; font-size: 13px; font-weight: bold; text-transform: uppercase; user-select: none; }
.btn-delete-db { background: #3a1e1e; color: #fca5a5; border: none; border-left: 1px solid #4b5563; padding: 6px 10px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.btn-delete-db:hover { background: #7f1d1d; color: #ffffff; }
.jager-checkbox-label.plain { background: transparent; border: none; padding: 0; }
.form-subtitle { margin: 0 0 10px 0; font-size: 14px; color: #94a3b8; }
.form-actions-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }

/* Gestylede Peilingtabel */
.data-table { width: 100%; border-collapse: collapse; margin-top: 15px; background-color: #0f172a; }
.data-table th, .data-table td { border: 1px solid #334155; padding: 10px 12px; font-size: 13px; text-align: left; vertical-align: middle; }
.data-table th { background-color: #1e293b; color: #f8fafc; font-weight: bold; border-bottom: 2px solid #3b82f6; }
.data-table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.02); }
.data-table tr:hover { background-color: rgba(59, 130, 246, 0.08); }
.btn-delete-row { background: transparent; color: #ef4444; border: none; cursor: pointer; font-size: 16px; padding: 4px; border-radius: 4px; transition: transform 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-delete-row:hover { transform: scale(1.1); background: rgba(239, 68, 68, 0.2); }

/* Paginering / Navigatie */
.pagination-container { display: flex; justify-content: space-between; align-items: center; background: #0f172a; padding: 12px 15px; border-radius: 6px; border: 1px solid #334155; margin-top: 15px; }
.btn-page { background: #334155; color: #f1f5f9; padding: 6px 14px; border-radius: 4px; text-decoration: none; font-size: 13px; font-weight: bold; border: 1px solid #4b5563; transition: background 0.2s; }
.btn-page:hover:not(.disabled) { background: #4b5563; }
.btn-page.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.page-info { font-size: 13px; color: #94a3b8; font-weight: bold; }

/* Badges, Linkjes & Knoppen */
.jager-badge { background: #3b82f6; color: white; padding: 2px 6px; border-radius: 4px; font-weight: bold; font-size: 11px; }
.btn-submit { background-color: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 13px; transition: background 0.2s; }
.btn-submit:hover { background-color: #2563eb; }
.btn-back { display: inline-block; background-color: #334155; color: #f1f5f9; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: bold; transition: background 0.2s; border: 1px solid #4b5563; }
.btn-back:hover { background-color: #4b5563; }
.map-link { color: #f97316; font-weight: bold; text-decoration: none; cursor: pointer; }
.map-link:hover { text-decoration: underline; }
.text-muted { color: #94a3b8; }
.text-error { color: #ef4444; font-size: 13px; }

/* Foutmeldingen & Lege Statussen */
.alert-error { background: #451a1a; border: 1px solid #7f1d1d; color: #fca5a5; padding: 12px; border-radius: 4px; margin-bottom: 15px; font-size: 13px; }
.alert-success { background: #14532d; border: 1px solid #16a34a; color: #bbf7d0; padding: 12px; border-radius: 4px; margin-bottom: 15px; font-size: 13px; font-weight: bold; }
.no-data { text-align: center; padding: 30px; color: #94a3b8; font-style: italic; }
.no-data-placeholder { background: #0f172a; border-radius: 6px; border: 1px dashed #334155; }

/* Export Actiebalk & Statistieken */
.monitor-actions-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.monitor-buttons-group { display: flex; gap: 8px; align-items: center; }
.monitor-stats-group { display: flex; gap: 15px; font-size: 13px; font-weight: bold; }
.monitor-stats-group span { padding: 6px 12px; border-radius: 4px; }
.badge-shown { background: #1e3a8a; color: #93c5fd; border: 1px solid #2563eb; }
.badge-hidden { background: #334155; color: #94a3b8; border: 1px solid #4b5563; }
.badge-hidden.has-warnings { background: rgba(222, 92, 44, 0.17); color: #f97316; border: 1px solid #ea580c; }
.badge-total { background: #064e3b; color: #6ee7b7; border: 1px solid #059669; }
.btn-export { display: inline-flex; align-items: center; background: #1e293b; color: #f1f5f9; border: 1px solid #475569; padding: 6px 12px; border-radius: 4px; text-decoration: none; font-size: 13px; font-weight: bold; transition: all 0.15s ease; }
.btn-export:hover { background: #334155; border-color: #64748b; }
.btn-export.disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; }

/* Kaart in pop-up */
#popup-map { flex: 1; width: 100%; border-radius: 6px; border: 1px solid #334155; }

/* =========================================================================
   Specifieke CSS voor het Verwijder / Backup Modaal
   ========================================================================= */
.delete-modal-box { height: auto !important; max-width: 450px !important; padding: 25px; text-align: center; border: 1px solid #7f1d1d !important; }
.delete-title { color: #ef4444; margin-top: 0; font-size: 20px; }
.delete-text { font-size: 14px; color: #f8fafc; margin-bottom: 20px; line-height: 1.5; }
.delete-jager-highlight { color: #3b82f6; font-weight: bold; font-size: 18px; padding: 6px; display: inline-block; }
.backup-recommendation { background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; padding: 15px; border-radius: 6px; margin-bottom: 20px; }
.backup-title { margin: 0 0 10px 0; font-size: 13px; font-weight: bold; color: #fca5a5; }
.btn-backup-download { width: 100%; justify-content: center; background: #064e3b; border-color: #059669; color: #6ee7b7; font-size: 14px; padding: 10px; }
.btn-backup-download:hover { background: #047857; color: #a7f3d0; }
.modal-actions-row { display: flex; justify-content: space-between; gap: 10px; }
.btn-cancel-delete { flex: 1; text-align: center; background: #334155; border: 1px solid #4b5563; color: #f1f5f9; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer; transition: background 0.2s; }
.btn-cancel-delete:hover { background: #4b5563; }
.btn-confirm-delete { flex: 1; justify-content: center; background: #7f1d1d; color: #fca5a5; border: none; border-radius: 4px; font-size: 13px; font-weight: bold; cursor: pointer; padding: 8px 16px; transition: background 0.2s, color 0.2s; }
.btn-confirm-delete:hover { background: #991b1b; color: #ffffff; }
.loading-title { color: #6ee7b7; text-align: center; margin-top: 20px; font-size: 18px; }
.loading-text { color: #94a3b8; text-align: center; }