/* ==========================================
   1. CORE VARIABLES & WRAPPER
   ========================================== */
:root {
    --dqdc-bg: #f8fafc;
    --dqdc-card: #ffffff;
    --dqdc-border: #cbd5e1;
    --dqdc-primary: #1d4ed8;
    --dqdc-critical: #dc2626;
    --dqdc-text: #0f172a;
}

.dqdc-capa-wrapper {
    /* Break out of the WordPress Theme narrow container */
    width: 96vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    
    background: var(--dqdc-bg); 
    padding: 24px; 
    border-radius: 8px;
    border: 1px solid var(--dqdc-border); 
    font-family: -apple-system, sans-serif;
    color: var(--dqdc-text);
}
.capa-header-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
}

.capa-header-bar h2 { margin: 0 0 5px 0; }

.rig-badge { 
    background: var(--dqdc-primary); 
    color: #fff; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 12px; 
}

/* ==========================================
   2. TABS & FILTER BARS
   ========================================== */
.capa-tabs { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px; 
    border-bottom: 2px solid var(--dqdc-border); 
    padding-bottom: 10px; 
    flex-wrap: wrap; 
}

.capa-tab-btn { 
    background: transparent; 
    border: none; 
    font-weight: bold; 
    color: #64748b; 
    cursor: pointer; 
    padding: 8px 16px; 
    border-radius: 4px; 
    transition: 0.2s; 
}

.capa-tab-btn:hover { background: #e2e8f0; }
.capa-tab-btn.active { background: var(--dqdc-primary); color: #fff; }

.capa-section-container { display: none; }
.capa-section-container.active { display: block; }

.capa-filter-bar { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 10px; 
    margin-bottom: 15px; 
    background: #fff; 
    padding: 15px; 
    border-radius: 6px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    align-items: end;
}
.capa-filter-bar-full {
    grid-column: 1 / -1; /* Spans full width for buttons */
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
    margin-top: 5px;
}

.capa-input { 
    width: 100%;
    padding: 8px; 
    border: 1px solid var(--dqdc-border); 
    border-radius: 4px; 
    font-size: 14px; 
    box-sizing: border-box;
}
/* ==========================================
   3. GRIDS & FORMS
   ========================================== */
.capa-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
.capa-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; }
.capa-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.form-group label { 
    display: block; 
    font-size: 12px; 
    font-weight: bold; 
    margin-bottom: 5px; 
    color: #475569; 
}

.form-group input, 
.form-group select, 
.form-group textarea { 
    width: 100%; 
    padding: 8px; 
    border: 1px solid var(--dqdc-border); 
    border-radius: 4px; 
    font-size: 14px; 
    box-sizing: border-box; 
}

.risk-matrix-container { 
    background: #f1f5f9; 
    padding: 15px; 
    border-radius: 6px; 
    margin: 15px 0; 
    border: 1px solid #cbd5e1; 
}

/* ==========================================
   4. BUTTONS
   ========================================== */
.capa-btn-primary { 
    background: var(--dqdc-primary); 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: background 0.2s;
}
.capa-btn-primary:hover { background: #1e3a8a; }

.capa-btn-secondary { 
    background: #e0e7ff; 
    color: var(--dqdc-primary); 
    border: 1px solid #c7d2fe; 
    padding: 8px 16px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    transition: background 0.2s;
}
.capa-btn-secondary:hover { background: #c7d2fe; }

.capa-btn-danger { 
    background: #fee2e2; 
    color: #dc2626; 
    border: 1px solid #fca5a5; 
    padding: 8px 16px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
}

/* ==========================================
   5. CARDS & SECTIONS
   ========================================== */
.capa-card { 
    background: var(--dqdc-card); 
    padding: 20px; 
    margin-bottom: 20px; 
    border-radius: 6px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}

.capa-card h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; }

.section-ident { border-left: 4px solid var(--dqdc-primary); }
.section-contain { border-left: 4px solid #0ea5e9; }
.section-rca { border-left: 4px solid #f59e0b; }
.section-action { border-left: 4px solid #8b5cf6; }
.section-evidence { border-left: 4px solid #64748b; }
.section-verify { border-left: 4px solid #16a34a; }

/* ==========================================
   6. TABLES
   ========================================== */
.capa-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #fff; 
    font-size: 13px; 
}

.capa-table th { 
    background: var(--dqdc-primary); 
    color: #ffffff; 
    padding: 10px; 
    text-align: left; 
    border-bottom: 2px solid var(--dqdc-border); 
    white-space: nowrap; 
    position: sticky;     /* NEW: Keeps header visible while scrolling down */
    top: 0;               /* NEW: Pins to top */
    z-index: 10;          /* NEW: Ensures it stays above rows */
}

.capa-table td { 
    padding: 10px; 
    border-bottom: 1px solid #e2e8f0; 
    vertical-align: top;  /* NEW: Keeps text aligned nicely when wrapping */
    word-wrap: break-word;/* NEW: Allows long text to wrap instead of scrolling */
}
/* ==========================================
   7. BADGES & THUMBNAILS (EQUAL SIZING)
   ========================================== */
.badge { 
    display: inline-block;
    min-width: 80px; /* Forces equal width */
    text-align: center;
    padding: 6px 10px; 
    border-radius: 4px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #ffffff !important;
}

/* User Requested Colors */
.sev-critical { background: #7f1d1d !important; }
.sev-high { background: #b91c1c !important; border: 1px solid #991b1b !important; } /* Rich Red */
.sev-medium { background: #f97316 !important; border: 1px solid #ea580c !important; } /* Orange */
.sev-low { background: #16a34a !important; border: 1px solid #15803d !important; } /* Green */

/* Status Badges */
.stat-open { background: #dc2626 !important; color: #ffffff !important; border: 1px solid #b91c1c !important;} /* Red */
.stat-in-progress { background: #3b82f6 !important; border: 1px solid #2563eb !important; }
.stat-closure-requested { background: #8b5cf6 !important; border: 1px solid #7c3aed !important; }
.stat-closed { background: #10b981 !important; border: 1px solid #059669 !important; } /* Green */
.stat-reopened { background: #f43f5e !important; border: 1px solid #e11d48 !important; }


.evidence-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.evidence-thumb { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 10px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.evidence-thumb a { color: var(--dqdc-primary); text-decoration: none; }

/* ==========================================
   8. ANALYTICS DASHBOARD
   ========================================== */
.kpi-container { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.kpi-box { 
    flex: 1; 
    min-width: 150px; 
    background: #fff; 
    padding: 20px; 
    border-radius: 5px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); 
    text-align: center; 
}
.kpi-box h3 { margin: 0; color: #64748b; font-size: 12px; text-transform: uppercase; }
.kpi-box p { font-size: 28px; font-weight: bold; margin: 10px 0 0 0; color: var(--dqdc-primary); }
.kpi-critical p { color: #dc2626; }

.capa-heatmap { width: 100%; border-collapse: collapse; text-align: center; background: #fff;}
.capa-heatmap th, .capa-heatmap td { padding: 10px; border: 1px solid var(--dqdc-border); }
.capa-heatmap td:hover { filter: brightness(0.9); }

/* ==========================================
   9. MODALS & POPUPS
   ========================================== */
.capa-modal { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.5); 
    align-items: center; 
    justify-content: center; 
    z-index: 9999; 
}
.capa-modal-content { 
    background: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    width: 80%; 
    max-width: 700px; 
    max-height: 80vh; 
    overflow-y: auto; 
}
.close-modal { float: right; font-size: 24px; cursor: pointer; color: #dc2626; }

.dqdc-dialog-overlay { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(4px); 
    display: flex; align-items: center; justify-content: center; 
    z-index: 999999; opacity: 0; visibility: hidden; transition: 0.2s; 
}
.dqdc-dialog-overlay.active { opacity: 1; visibility: visible; }
.dqdc-dialog-box { 
    background: #ffffff; border-radius: 8px; width: 100%; 
    max-width: 400px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); 
}
.dqdc-dialog-title { font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 15px 0; }

#dqdc-toast-container { 
    position: fixed; bottom: 20px; right: 20px; z-index: 9999999; 
    display: flex; flex-direction: column; gap: 10px; pointer-events: none; 
}
.dqdc-toast { 
    background: #ffffff; padding: 12px 18px; border-radius: 6px; 
    color: #0f172a; font-size: 13px; font-weight: 600; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); display: flex; 
    align-items: center; gap: 10px; transform: translateX(120%); 
    opacity: 0; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    border-left: 4px solid #cbd5e1; pointer-events: auto; 
}
.dqdc-toast.show { transform: translateX(0); opacity: 1; }
.dqdc-toast-success { border-left-color: #16a34a; }
.dqdc-toast-error { border-left-color: #dc2626; }
.dqdc-toast-info { border-left-color: #0ea5e9; }

/* ==========================================
   10. RTL INTEGRATION (Arabic)
   ========================================== */
[dir="rtl"] .dqdc-capa-wrapper { font-family: 'Tajawal', 'Cairo', sans-serif; text-align: right; direction: rtl; }
[dir="rtl"] .capa-card { border-left: none; border-right: 4px solid var(--dqdc-primary); }
[dir="rtl"] .section-ident { border-right-color: var(--dqdc-primary); }
[dir="rtl"] .section-contain { border-right-color: #0ea5e9; }
[dir="rtl"] .section-rca { border-right-color: #f59e0b; }
[dir="rtl"] .section-action { border-right-color: #8b5cf6; }
[dir="rtl"] .section-evidence { border-right-color: #64748b; }
[dir="rtl"] .section-verify { border-right-color: #16a34a; }

/* Flip Table Sorting Arrows & Padding */
[dir="rtl"] .capa-table th { text-align: right; padding-right: 10px; padding-left: 20px; }
[dir="rtl"] .capa-table th::after { right: auto; left: 5px; }

/* Flip Toast Notifications */
[dir="rtl"] .dqdc-toast { transform: translateX(-120%); border-left: none; border-right: 4px solid #cbd5e1; }
[dir="rtl"] .dqdc-toast-success { border-right-color: #16a34a; }
[dir="rtl"] .dqdc-toast-error { border-right-color: #dc2626; }
[dir="rtl"] .dqdc-toast-info { border-right-color: #0ea5e9; }

/* Fix Modals, Floats, and Auto-Margins for RTL */
[dir="rtl"] .close-modal { float: left; }
[dir="rtl"] #lb-close { right: auto !important; left: 35px !important; }
[dir="rtl"] .capa-filter-bar-full label, 
[dir="rtl"] .capa-filter-bar-full img { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] #btn-main-bulk-pdf { margin-left: 0 !important; margin-right: auto !important; }
/* Container to stop Chart.js infinite expansion */
.capa-chart-wrapper {
    position: relative;
    height: 100%;
    min-height: 280px; 
    max-height: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Photo Annotation Drawing Engine */
.markup-tool.active { 
    background: var(--dqdc-primary); 
    color: #fff; 
    border-color: var(--dqdc-primary); 
}
#markup-canvas { 
    touch-action: none; /* Prevents mobile page scrolling while drawing */
    max-width: 100%; 
    height: auto; 
}

/* ==========================================
   11. ENHANCED FORM UI (USER FRIENDLY)
   ========================================== */

/* Sticky action bar so users don't have to scroll to save */
.sticky-form-header {
    position: sticky;
    top: 0;
    background: rgba(248, 250, 252, 0.95); /* Matches --dqdc-bg */
    backdrop-filter: blur(8px);
    padding: 15px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--dqdc-border);
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Beautiful focus rings for inputs */
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--dqdc-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
    transition: all 0.2s ease-in-out;
}

/* Automatically add red asterisks to required fields */
.form-group label:has(+ input:required)::after,
.form-group label:has(+ select:required)::after,
.form-group label:has(+ textarea:required)::after {
    content: " *";
    color: var(--dqdc-critical);
}

/* Dark Mode Variables & Application */
[data-theme="dark"] {
    --dqdc-bg: #0f172a;
    --dqdc-card: #1e293b;
    --dqdc-border: #334155;
    --dqdc-text: #f8fafc;
}
[data-theme="dark"] .capa-input, [data-theme="dark"] .capa-table, [data-theme="dark"] .capa-filter-bar {
    background: var(--dqdc-card); color: var(--dqdc-text); border-color: var(--dqdc-border);
}
[data-theme="dark"] .capa-table th, [data-theme="dark"] .evidence-thumb { background: #334155; color: #f8fafc; }

/* Accessible Typography for Badges (WCAG AA) */
.sev-medium { background: #fef08a; color: #573303; border: 1px solid #eab308; } /* Darkened text */
.stat-open { background: #fef08a; color: #573303; border: 1px solid #eab308; }

/* Touch Targets for Field Workers */
.capa-tab-btn, .markup-tool {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Wizard UI */
.wizard-progress { display: flex; border-bottom: 2px solid var(--dqdc-border); margin-bottom: 20px; }
.wizard-step { flex: 1; padding: 10px; text-align: center; color: #64748b; font-weight: bold; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.wizard-step.active { color: var(--dqdc-primary); border-bottom-color: var(--dqdc-primary); }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Inline Validation */
.input-error { border-color: var(--dqdc-critical) !important; background-color: #fef2f2 !important; }
.error-text { color: var(--dqdc-critical); font-size: 11px; font-weight: bold; margin-top: 4px; display: block; }

/* ==========================================
   12. UNIVERSAL BUTTON UI (BLUE & BOLD)
   ========================================== */
.capa-btn-primary, .capa-btn-secondary, .btn-tbl-action, .markup-tool, .capa-tab-btn {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1px solid #1e40af !important;
    border-radius: 6px !important;
    padding: 8px 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

/* Beautiful Hover Effect */
.capa-btn-primary:hover, .capa-btn-secondary:hover, .btn-tbl-action:hover, .markup-tool:hover, .capa-tab-btn:hover {
    background: #2563eb !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(29,78,216,0.3) !important;
}

/* Table Button Specific Sizing to prevent overflow */
.btn-tbl-action {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-width: 90px; /* Keeps text centered without squishing */
}

/* Active Tabs */
.capa-tab-btn.active {
    background: #1e40af !important;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.2) !important;
}
.capa-tab-btn:not(.active) {
    background: #3b82f6 !important;
    opacity: 0.8;
}

/* Force the Table "Remove Action X" to stay red text */
table.capa-table button[onclick^="removeActionRow"] {
    background: transparent !important;
    color: #dc2626 !important;
    box-shadow: none !important;
    font-size: 16px;
}


/* ==========================================
   13. TABLE HEADER SORTING
   ========================================== */
.capa-table th { 
    cursor: pointer; 
    position: relative; 
    padding-right: 20px; 
    user-select: none;
    transition: background 0.2s;
}
.capa-table th:hover { background: #e2e8f0; }
.capa-table th::after { 
    content: '↕'; 
    position: absolute; 
    right: 5px; 
    color: #94a3b8; 
    font-size: 12px; 
}
.capa-table th.sort-asc::after { content: '▲'; color: #1d4ed8; }
.capa-table th.sort-desc::after { content: '▼'; color: #1d4ed8; }

[data-theme="dark"] .capa-table th:hover { background: #475569; }

/* ==========================================
   14. GOOGLE TRANSLATE INTEGRATION
   ========================================== */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }
.goog-te-gadget { 
    color: transparent !important; 
    font-size: 0px; 
    display: flex;
    align-items: center;
}
.goog-te-gadget .goog-te-combo { 
    padding: 8px 12px; 
    border: 1px solid var(--dqdc-border); 
    border-radius: 6px; 
    font-size: 14px; 
    background: #ffffff; 
    color: var(--dqdc-text);
    font-weight: bold;
    cursor: pointer;
    margin: 0;
    direction: ltr !important; /* Force Left-To-Right specifically for this dropdown so the arrow stays on the right */
    text-align: left !important;
}

/* Force Google Translate iframe menu to behave */
iframe.goog-te-menu-frame {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border-radius: 6px !important;
    border: 1px solid var(--dqdc-border) !important;
}


/* ==========================================
   15. HISTORICAL PATTERN RECOGNITION CHIPS
   ========================================== */
.suggestion-chip {
    background: #ffffff !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.suggestion-chip:hover {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.25) !important;
}

.suggestion-chip .badge-count {
    background: #dcfce7;
    color: #166534;
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 10px;
}

.suggestion-chip:hover .badge-count {
    background: #ffffff;
    color: #16a34a;
}

/* ==========================================
   16. QUICK STATUS PILL BUTTONS
   ========================================== */
.capa-pill-btn {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    padding: 8px 18px !important;
    border-radius: 6px !important; /* Changed to match system square buttons */
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    text-decoration: none !important;
    outline: none !important;
}

.capa-pill-btn.active {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    border-color: #1e40af !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.capa-pill-btn:hover:not(.active) {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
[data-theme="dark"] .capa-pill-btn { background: #334155; border-color: #475569; color: #f8fafc; }
[data-theme="dark"] .capa-pill-btn.active { background: #3b82f6; border-color: #2563eb; }


/* ==========================================
   17. SELECT2 PROFESSIONAL UI CUSTOMIZATION
   ========================================== */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--dqdc-border) !important;
    border-radius: 4px !important;
    height: 36px !important;
    padding: 4px !important;
    background-color: var(--dqdc-card) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dqdc-text) !important;
    font-size: 14px !important;
    line-height: 26px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
}
.select2-container--default .select2-dropdown {
    border-color: var(--dqdc-primary) !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    overflow: hidden;
}
.select2-search__field {
    border-radius: 4px !important;
    border: 1px solid var(--dqdc-border) !important;
    outline: none !important;
    font-size: 13px !important;
}
.select2-search__field:focus {
    border-color: var(--dqdc-primary) !important;
}
.select2-results__option--highlighted[aria-selected] {
    background-color: var(--dqdc-primary) !important;
    color: #ffffff !important;
}

/* Dark Mode Overrides for Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--dqdc-card) !important;
    border-color: var(--dqdc-border) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--dqdc-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: var(--dqdc-card) !important;
}
[data-theme="dark"] .select2-search__field {
    background-color: var(--dqdc-bg) !important;
    color: var(--dqdc-text) !important;
}
[data-theme="dark"] .select2-results__option {
    color: var(--dqdc-text) !important;
}
[data-theme="dark"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dqdc-primary) !important;
    color: #ffffff !important;
}

/* ==========================================
   18. INTERACTIVE LIGHTBOX OVERLAY
   ========================================== */
.lb-nav-btn {
    position: absolute;
    color: #ffffff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, transform 0.2s;
}

.lb-nav-btn:hover {
    background: rgba(29, 78, 216, 0.8);
    transform: scale(1.1);
}

#lb-close:hover {
    color: #ef4444;
    transform: scale(1.2);
}

/* ==========================================
   19. SINGLE PAGE MODE
   ========================================== */
.single-page-mode .wizard-panel {
    display: block !important;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px dashed var(--dqdc-border);
    animation: none;
}
.single-page-mode .wizard-progress {
    display: none !important;
}
.single-page-mode .btn-wizard-next,
.single-page-mode .btn-wizard-prev {
    display: none !important;
}



/* --- Missing Dark Mode Overrides --- */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background-color: var(--dqdc-card) !important;
    color: var(--dqdc-text) !important;
    border-color: var(--dqdc-border) !important;
}

[data-theme="dark"] .form-group label {
    color: #94a3b8 !important;
}

[data-theme="dark"] .sticky-form-header {
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom-color: var(--dqdc-border) !important;
}

[data-theme="dark"] .kpi-box,
[data-theme="dark"] .capa-card,
[data-theme="dark"] .risk-matrix-container {
    background: var(--dqdc-card) !important;
    color: var(--dqdc-text) !important;
    border-color: var(--dqdc-border) !important;
}

[data-theme="dark"] #rm-total,
[data-theme="dark"] .kpi-box h3 {
    color: #f8fafc !important;
}

[data-theme="dark"] .capa-filter-bar {
    background: #1e293b !important;
    border-color: #334155 !important;
}