/* ==========================================
   1. CORE VARIABLES & WRAPPER
   ========================================== */
:root {
    --dqdc-bg: #f8fafc;
    --dqdc-card: #ffffff;
    --dqdc-border: #cbd5e1;
    --dqdc-primary: #1d4ed8;
    --dqdc-critical: #dc2626;
    --dqdc-text: #0f172a;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px; /* Stops jump-links and validation from hiding under the sticky header */
}
.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: #f1f5f9; 
    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; align-items: end; }
.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: 10px 12px; 
    border: 1px solid var(--dqdc-border); 
    border-radius: 6px; 
    font-size: 14px; 
    background-color: #f8fafc;
    box-sizing: border-box; 
    transition: all 0.2s ease;
}
.form-group input:hover, 
.form-group select:hover, 
.form-group textarea:hover {
    border-color: #94a3b8;
}
.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: 24px; 
    margin-bottom: 24px; 
    border-radius: 10px; 
    border: 1px solid var(--dqdc-border);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.capa-card:hover {
    box-shadow: 0 12px 20px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    transform: translateY(-3px); /* Subtle tactile lift */
}

.capa-card h3 { 
    margin-top: 0; 
    margin-bottom: 20px; 
    font-size: 16px; 
    background: #f8fafc; 
    padding: 10px 15px; 
    border-radius: 6px; 
    border: 1px solid #e2e8f0;
    display: inline-block; 
}

.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 & SCROLLBARS
   ========================================== */
/* Modern, thin scrollbars for the table container */
div[style*="overflow: auto"]::-webkit-scrollbar,
div[style*="overflow-x: auto"]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
div[style*="overflow: auto"]::-webkit-scrollbar-track,
div[style*="overflow-x: auto"]::-webkit-scrollbar-track {
    background: #f1f5f9; 
    border-radius: 4px;
}
div[style*="overflow: auto"]::-webkit-scrollbar-thumb,
div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
div[style*="overflow: auto"]::-webkit-scrollbar-thumb:hover,
div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}


.capa-table { 
    width: max-content; /* CRITICAL: Allows table to grow beyond screen when resizing columns */
    min-width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    background: #fff; 
    font-size: 13px; 
}
/* FIX: Manually paint the borders since collapse is removed */
.capa-table th, .capa-table td {
    padding: 12px 15px; /* Increased breathing room */
    border-right: 1px solid #e2e8f0; /* Softer gray */
    border-bottom: 1px solid #e2e8f0;
}

.capa-table th:first-child, .capa-table td:first-child {
    border-left: 1px solid var(--dqdc-border);
}
.capa-table th { 
    border-top: 1px solid var(--dqdc-border); 
}
.capa-table th { 
    background: rgba(29, 78, 216, 0.95); /* Slight transparency */
    backdrop-filter: blur(4px); /* Glass blur effect */
    color: #ffffff;
    padding: 10px; 
    text-align: left; 
    border-bottom: 2px solid var(--dqdc-border); 
    white-space: nowrap; 
    position: sticky;
    top: 0;
    z-index: 50;
    background-clip: padding-box; 
    outline: 1px solid var(--dqdc-border); /* Fixes transparent borders on sticky elements */
}

.capa-table td { 
    padding: 10px; 
    border-bottom: 1px solid #e2e8f0; 
    vertical-align: top;  
    word-break: break-word; 
    white-space: normal;
    overflow: hidden; 
    font-variant-numeric: tabular-nums; /* Forces perfect vertical number alignment */
}
/* Action Buttons Flexbox for Horizontal Layout */
.action-btn-group {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
}
.action-btn-group .btn-tbl-action {
    flex: 0 0 auto;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    border-radius: 4px !important;
    margin: 0;
}

/* Make Action Column Sticky on the Right */
#main-capa-table th:last-child {
    position: sticky;
    right: 0;
    z-index: 60;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}
#main-capa-table td:last-child {
    position: sticky;
    right: 0;
    background: #ffffff;
    z-index: 10;
    box-shadow: -2px 0 5px rgba(0,0,0,0.05);
}
/* Zebra Striping & Row Hover for Readability */
.capa-table tbody tr:nth-child(even) td { background-color: #f8fafc; }
.capa-table tbody tr:hover td { background-color: #f1f5f9; }

[data-theme="dark"] .capa-table tbody tr:nth-child(even) td { background-color: #0f172a; }
[data-theme="dark"] .capa-table tbody tr:hover td { background-color: #334155; }
[data-theme="dark"] .capa-table td:last-child { background: var(--dqdc-card); }

/* Ensure the sticky Action column matches the zebra striping */
.capa-table tbody tr:nth-child(even) td:last-child { background-color: #f8fafc; }
[data-theme="dark"] .capa-table tbody tr:nth-child(even) td:last-child { background-color: #0f172a; }

/* ==========================================
   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 (Solid Badges) */
.sev-critical { background: #7f1d1d !important; color: #ffffff !important; border: 1px solid #450a0a !important; } /* Very Dark Red */
.sev-high { background: #dc2626 !important; color: #ffffff !important; border: 1px solid #991b1b !important; } /* Rich Red */
.sev-medium { background: #f59e0b !important; color: #ffffff !important; border: 1px solid #b45309 !important; } /* Orange */
.sev-low { background: #16a34a !important; color: #ffffff !important; border: 1px solid #14532d !important; } /* Green */

/* Status Badges (Modern Soft Badges) */
.stat-open { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fca5a5 !important; } 
.stat-in-progress { background: #dbeafe !important; color: #1e40af !important; border: 1px solid #93c5fd !important; }
.stat-closure-requested { background: #f3e8ff !important; color: #6b21a8 !important; border: 1px solid #d8b4fe !important; }
.stat-closed { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #86efac !important; } 
.stat-reopened { background: #ffe4e6 !important; color: #e11d48 !important; border: 1px solid #fda4af !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"] #main-capa-table th { text-align: right; padding-right: 10px; padding-left: 20px; }
[dir="rtl"] #main-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);
}

/* Distinct styling for disabled or read-only inputs */
.form-group input[disabled],
.form-group input[readonly],
.form-group select[disabled],
.form-group textarea[readonly] {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

[data-theme="dark"] .form-group input[disabled],
[data-theme="dark"] .form-group input[readonly],
[data-theme="dark"] .form-group select[disabled] {
    background-color: #1e293b !important;
    color: #475569 !important;
    border-color: #0f172a !important;
}
/* 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 */
/* Modern Wizard UI */
.wizard-progress { 
    display: flex; 
    background: #f1f5f9; 
    border-radius: 8px; 
    padding: 4px; 
    margin-bottom: 25px; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.wizard-step { 
    flex: 1; 
    padding: 10px 15px; 
    text-align: center; 
    color: #64748b; 
    font-weight: 700; 
    font-size: 13px;
    border-radius: 6px; 
    transition: all 0.3s ease;
    cursor: default;
}
.wizard-step.active { 
    background: #ffffff; 
    color: var(--dqdc-primary); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
[data-theme="dark"] .wizard-progress { background: #0f172a; }
[data-theme="dark"] .wizard-step.active { background: #1e293b; color: #60a5fa; }.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 & Error Shake */
@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.input-error { 
    border-color: var(--dqdc-critical) !important; 
    background-color: #fef2f2 !important; 
    border-width: 2px !important;
    animation: shakeError 0.4s ease-in-out;
}
.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
   ========================================== */
#main-capa-table th { 
    cursor: pointer; 
    padding-right: 20px; 
    user-select: none;
    transition: background 0.2s;
}
#main-capa-table th:hover { background: #e2e8f0; }
#main-capa-table th::after { 
    content: '↕'; 
    position: absolute; 
    right: 5px; 
    color: #94a3b8; 
    font-size: 12px; 
}
#main-capa-table th.sort-asc::after { content: '▲'; color: #1d4ed8; }
#main-capa-table th.sort-desc::after { content: '▼'; color: #1d4ed8; }

[data-theme="dark"] #main-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 (TIMELINE WORKFLOW)
   ========================================== */
.single-page-mode .wizard-panel {
    display: block !important;
    margin-bottom: 0 !important; /* Removed margin to prevent timeline breaks */
    padding: 0 0 40px 45px !important; /* Space for timeline and connects panels seamlessly */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    animation: none;
    position: relative;
}

/* Make the Progress Bar a Sticky Jump Menu */
.single-page-mode .wizard-progress {
    display: flex !important;
    position: sticky;
    top: 66px; 
    z-index: 95;
    background: rgba(241, 245, 249, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #cbd5e1;
    margin: 0 -24px 25px -24px;
    padding: 10px 24px;
    border-radius: 0;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.single-page-mode .wizard-step {
    cursor: pointer;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #64748b;
}

.single-page-mode .wizard-step:hover {
    background: #e2e8f0;
    border-radius: 4px 4px 0 0;
}

/* Hide Next/Prev buttons in single page mode */
.single-page-mode .btn-wizard-next,
.single-page-mode .btn-wizard-prev {
    display: none !important;
}

/* Remove bottom margin from cards so panel padding handles spacing */
.single-page-mode .wizard-panel > .capa-card {
    margin-bottom: 0 !important;
    position: relative;
}

/* -------------------------------------------
   PIXEL-PERFECT VERTICAL TIMELINE ENGINE 
------------------------------------------- */

/* Vertical Timeline Line */
.single-page-mode .wizard-panel::before {
    content: '';
    position: absolute;
    left: 21px; /* Center aligns perfectly with the dot */
    top: 25px; /* Starts precisely at the dot */
    bottom: -25px; /* Bridges the gap exactly to the next panel's dot */
    width: 2px;
    background: #cbd5e1;
    z-index: 1;
}

/* Final panel line extends all the way down behind the save button container */
.single-page-mode #wizard-panel-4::before {
    display: block !important; 
    bottom: 0 !important; /* Docks right behind the sticky bottom bar */
    background: #cbd5e1 !important; /* Solid line, no fading */
}

/* Timeline Nodes (Dots) */
.single-page-mode .wizard-panel > .capa-card::before {
    content: '';
    position: absolute;
    left: -33px; /* Math: perfectly centers over the 21px line */
    top: 25px;
    width: 14px;
    height: 14px;
    background: var(--dqdc-bg); /* Hollow center */
    border: 3px solid var(--dqdc-primary); /* Colored ring */
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 5px var(--dqdc-bg); /* Creates the transparent "cutout" effect over the line */
}

/* Dark Theme Adjustments for Timeline */
[data-theme="dark"] .single-page-mode .wizard-panel { background: transparent !important; }
[data-theme="dark"] .single-page-mode .wizard-progress { background: rgba(15, 23, 42, 0.95); border-color: #334155; }
[data-theme="dark"] .single-page-mode .wizard-panel::before { background: #475569; }
[data-theme="dark"] .single-page-mode #wizard-panel-4::before { background: #475569 !important; }
[data-theme="dark"] .single-page-mode .wizard-panel > .capa-card::before { 
    background: var(--dqdc-bg); 
    border-color: #60a5fa; 
    box-shadow: 0 0 0 5px var(--dqdc-bg); 
}/* --- 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;
}

/* --- SWA GIANT TOGGLE --- */
.swa-toggle-container { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; width: 100%; position: relative; }
.swa-toggle-checkbox { display: none; }
.swa-toggle-label {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 8px 12px; font-size: 13px; font-weight: 800; text-transform: uppercase;
    background: #f1f5f9; color: #475569; border: 2px solid #cbd5e1; border-radius: 6px;
    cursor: pointer; transition: all 0.3s ease; text-align: center; box-sizing: border-box; height: 38px;
}
.swa-toggle-checkbox:checked + .swa-toggle-label {
    background: #dc2626; color: #ffffff; border-color: #991b1b;
    box-shadow: 0 0 15px rgba(220, 38, 38, 0.5); animation: pulseSwa 2s infinite;
}
@keyframes pulseSwa { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }

/* --- TABLE TEXT TRUNCATION --- */
.truncate-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;  
    overflow: hidden; text-overflow: ellipsis; max-height: 4.5em; line-height: 1.5em; cursor: pointer;
    position: relative;
}
.truncate-text.expanded { 
    -webkit-line-clamp: unset; 
    max-height: none; 
    position: absolute; 
    background: #ffffff; 
    border: 1px solid #1d4ed8; 
    padding: 12px; 
    border-radius: 6px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
    z-index: 100; 
    width: 350px; 
    white-space: normal;
}
[data-theme="dark"] .truncate-text.expanded {
    background: #1e293b;
}

/* ==========================================
   22. RESPONSIVE TABLE CLEANUP
   ========================================== */
/* Automatically hide secondary metadata columns to prevent horizontal scrolling */
@media screen and (max-width: 1600px) {
    .capa-table th:nth-child(5), /* Source */
    .capa-table td:nth-child(5),
    .capa-table th:nth-child(7), /* Behavior Type */
    .capa-table td:nth-child(7),
    .capa-table th:nth-child(9), /* Department */
    .capa-table td:nth-child(9),
    .capa-table th:nth-child(12), /* Category/Subdiscipline */
    .capa-table td:nth-child(12) {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .capa-table th:nth-child(6), /* Observer */
    .capa-table td:nth-child(6),
    .capa-table th:nth-child(8), /* Responsible */
    .capa-table td:nth-child(8) {
        display: none;
    }
}
/* --- ANNOTATION COLOR SWATCHES --- */
.color-swatch {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.1); }


/* --- ANALYTICS SUB-TABS & UI ENHANCEMENTS --- */
.chart-desc {
    font-size: 12px;
    color: #64748b;
    margin: 5px 0 15px 0;
    line-height: 1.4;
    border-left: 3px solid #cbd5e1;
    padding-left: 10px;
}
.analytics-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
.analytics-tab-content.active {
    display: block;
}
.analytics-nav {
    display: flex;
    gap: 10px;
    background: #f1f5f9;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}


/* ==========================================
   20. EXCEL-LIKE TABLE RESIZERS
   ========================================== */
.resizer-col {
    position: absolute;
    top: 0; 
    right: -5px; /* FIX: Centers the handle exactly over the border */
    width: 12px; /* FIX: Makes the hit-area wider so it's easy to grab */
    height: 100%;
    cursor: col-resize;    user-select: none;
    background: transparent; 
    z-index: 20;
}
.resizer-col:hover, .resizer-col.resizing {
    background: #8b5cf6; /* Purple highlight on grab */
}

.resizer-row {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 5px;
    cursor: row-resize; 
    user-select: none;
    background: transparent; 
    z-index: 10;
}
.resizer-row:hover, .resizer-row.resizing {
    background: #8b5cf6;
}

/* Ensure relative positioning so absolute resizers snap to the cell */
#main-capa-table td {
    position: relative; 
}

/* ==========================================
   21. DYNAMIC TRIAGE BUTTONS (IMPROVED UI/UX)
   ========================================== */
#dynamic-triage-buttons { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 12px; 
    margin-bottom: 20px; 
}

.triage-btn {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px; /* Clean enterprise shape */
    border: 1px solid #cbd5e1;
    background: #ffffff; 
    color: #475569; 
    font-weight: 600; 
    font-size: 13px; 
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; /* Left aligned for clean reading */
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.triage-btn:hover { 
    background: #f8fafc; 
    border-color: #94a3b8;
    color: #0f172a;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.triage-btn.active {
    font-weight: 700;
    border-width: 2px;
    padding: 11px 13px; /* Compensates for the 2px border so the button doesn't jitter */
}

/* Refined Active Colors with softer borders and stronger glow */
.triage-btn.active.triage-green { border-color: #22c55e; background: #f0fdf4; color: #166534; box-shadow: 0 4px 12px rgba(34,197,94,0.15); }
.triage-btn.active.triage-yellow { border-color: #eab308; background: #fefce8; color: #854d0e; box-shadow: 0 4px 12px rgba(234,179,8,0.15); }
.triage-btn.active.triage-orange { border-color: #f97316; background: #fff7ed; color: #9a3412; box-shadow: 0 4px 12px rgba(249,115,22,0.15); }
.triage-btn.active.triage-red { border-color: #ef4444; background: #fef2f2; color: #991b1b; box-shadow: 0 4px 12px rgba(239,68,68,0.15); }
.triage-btn.active.triage-default { border-color: #3b82f6; background: #eff6ff; color: #1e3a8a; box-shadow: 0 4px 12px rgba(59,130,246,0.15); }

/* Dark Theme overrides for Triage */
[data-theme="dark"] .triage-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-theme="dark"] .triage-btn:hover { background: #334155; color: #f8fafc; }
[data-theme="dark"] .triage-btn.active.triage-green { background: #14532d; color: #4ade80; border-color: #22c55e; }
[data-theme="dark"] .triage-btn.active.triage-yellow { background: #78350f; color: #fbbf24; border-color: #f59e0b; }
[data-theme="dark"] .triage-btn.active.triage-orange { background: #7c2d12; color: #fb923c; border-color: #ea580c; }
[data-theme="dark"] .triage-btn.active.triage-red { background: #7f1d1d; color: #f87171; border-color: #ef4444; }
[data-theme="dark"] .triage-btn.active.triage-default { background: #1e3a8a; color: #60a5fa; border-color: #3b82f6; }
/* ==========================================
   23. ALCOA+ & COMPLIANCE STYLES
   ========================================== */

#capa_sif_potential:checked + .swa-toggle-label {
    background: #7f1d1d !important; 
    color: #ffffff !important; 
    border-color: #450a0a !important;
    box-shadow: 0 0 15px rgba(127, 29, 29, 0.5) !important;
    animation: pulseSif 2s infinite !important;
}

@keyframes pulseSif { 
    0% { box-shadow: 0 0 0 0 rgba(127, 29, 29, 0.7); } 
    70% { box-shadow: 0 0 0 10px rgba(127, 29, 29, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(127, 29, 29, 0); } 
}

#alcoa-signature-modal .capa-modal-content {
    border-top: 4px solid #16a34a;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ==========================================
   24. SAFETY BULLETIN (LESSONS LEARNED) STYLES
   ========================================== */

.safety-bulletin-card {
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.safety-bulletin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px -5px rgba(220, 38, 38, 0.2);
}

/* Ensure the red header prints clearly in PDF exports */
@media print {
    .safety-bulletin-card {
        page-break-inside: avoid;
        box-shadow: none !important;
        border-width: 3px !important;
    }
}

/* ==========================================
   25. MOBILE WIZARD NAVIGATION
   ========================================== */
@media screen and (max-width: 768px) {
    #wizard-panel-1 .capa-btn-primary,
    #wizard-panel-2 .capa-btn-primary,
    #wizard-panel-3 .capa-btn-primary,
    .btn-wizard-prev {
        width: 100%;
        margin-top: 10px;
    }
    
    .wizard-panel > div:last-child {
        position: sticky;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        padding: 15px;
        border-top: 1px solid #e2e8f0;
        z-index: 90;
        margin: 0 -24px -24px -24px;
        backdrop-filter: blur(5px);
    }

    [data-theme="dark"] .wizard-panel > div:last-child {
        background: rgba(15, 23, 42, 0.95);
        border-color: #334155;
    }
}

/* ==========================================
   26. PREMIUM TABLE HOVER TRACKING
   ========================================== */
.capa-table tbody tr {
    transition: all 0.2s ease;
    border-left: 3px solid transparent; /* Placeholder for hover */
}

.capa-table tbody tr:hover {
    background-color: #f1f5f9 !important;
    border-left: 3px solid var(--dqdc-primary);
    box-shadow: inset 1px 0 0 #cbd5e1, inset 0 1px 3px rgba(0,0,0,0.05);
}

[data-theme="dark"] .capa-table tbody tr:hover {
    background-color: #1e293b !important;
    border-left-color: #3b82f6;
}

/* ==========================================
   27. CRITICAL BADGE ATTENTION PULSE
   ========================================== */
@keyframes criticalBreathing {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.sev-critical {
    animation: criticalBreathing 2.5s infinite;
}

/* ==========================================
   28. SKELETON LOADING ANIMATION
   ========================================== */
.skeleton-row td {
    position: relative;
    overflow: hidden;
    background: #ffffff;
}
.skeleton-box {
    height: 16px;
    background: #e2e8f0;
    border-radius: 4px;
}
.skeleton-row td::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: skeletonPulse 1.2s infinite;
}
@keyframes skeletonPulse {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
[data-theme="dark"] .skeleton-row td { background: #1e293b; }
[data-theme="dark"] .skeleton-box { background: #334155; }
[data-theme="dark"] .skeleton-row td::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); }


/* ==========================================
   29. EVIDENCE DROPZONE MAGNETIC EFFECT
   ========================================== */
#evidence-drop-zone {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px dashed #94a3b8;
}
.dragover-active {
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}
[data-theme="dark"] .dragover-active {
    background-color: #1e3a8a !important;
}

/* ==========================================
   30. ENTERPRISE GLOSSARY TOOLTIPS
   ========================================== */
[data-tooltip] {
    position: relative;
    cursor: help;
    border-bottom: 1px dashed #64748b;
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: #0f172a;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2);
}
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    border-width: 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
[data-theme="dark"] [data-tooltip]::before { background: #cbd5e1; color: #0f172a; }
[data-theme="dark"] [data-tooltip]::after { border-color: #cbd5e1 transparent transparent transparent; }

/* ==========================================
   31. ENTERPRISE PRINT OPTIMIZATION
   ========================================== */
@media print {
    /* Hide all web-only UI elements */
    .capa-tabs, .capa-filter-bar, .action-btn-group, .wizard-progress, 
    button, #theme-toggle, #evidence-drop-zone, .sticky-form-header button {
        display: none !important;
    }
    
    /* Flatten the background for ink saving */
    body, .dqdc-capa-wrapper, .capa-card, .form-group input, .form-group textarea, .form-group select {
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Convert web inputs into clean paper-form lines */
    .form-group input, .form-group textarea, .form-group select {
        border: none !important;
        border-bottom: 1px solid #cbd5e1 !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        box-shadow: none !important;
    }

    /* Prevent page breaks in the middle of important cards */
    .capa-card, tr {
        page-break-inside: avoid;
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
    }

    /* Ensure table headers print their background colors */
    .capa-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        background-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
}

/* ==========================================
   32. BUTTON SPINNER MICRO-INTERACTION
   ========================================== */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btnSpinner 0.8s linear infinite;
}
@keyframes btnSpinner {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}


/* ==========================================
   33. FLOATING BACK TO TOP BUTTON
   ========================================== */
#dqdc-fab-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--dqdc-primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(29, 78, 216, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}
#dqdc-fab-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#dqdc-fab-top:hover {
    background: #1e3a8a;
    transform: translateY(-5px);
}
@media print { #dqdc-fab-top { display: none !important; } }

/* ==========================================
   34. FORM FIELD COMPLETION GAMIFICATION
   ========================================== */
/* Subtle green left-border when a required field is successfully filled */
.form-group input:required:valid, 
.form-group select:required:valid, 
.form-group textarea:required:valid {
    border-left: 4px solid #10b981;
    background-color: #f8fafc;
    transition: all 0.3s ease;
}

/* Strip the green border if the field is locked/read-only */
.form-group input[readonly]:valid,
.form-group input[disabled]:valid {
    border-left: 1px solid #cbd5e1 !important;
}

[data-theme="dark"] .form-group input:required:valid, 
[data-theme="dark"] .form-group select:required:valid, 
[data-theme="dark"] .form-group textarea:required:valid {
    border-left-color: #059669;
    background-color: #0f172a;
}


/* ==========================================
   35. STICKY BOTTOM SAVE BAR (SINGLE PAGE)
   ========================================== */
/* Locks the final save bar to the bottom of the viewport so it's always accessible */
.single-page-mode #wizard-panel-4 > div:last-child {
    position: sticky;
    bottom: 0;
    border-top: 3px solid var(--dqdc-primary);
    box-shadow: 0 -10px 15px -3px rgba(0,0,0,0.05);
    border-radius: 0 0 8px 8px;
}

/* ==========================================
   36. LIVE PROGRESS BAR
   ========================================== */
#capa-live-progress {
    position: absolute;
    bottom: -2px; left: 0;
    height: 4px;
    background: #10b981;
    width: 0%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 4px 4px 0;
    z-index: 101;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}
.progress-text {
    font-size: 11px;
    color: #64748b;
    font-weight: 800;
    margin-left: 15px;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 12px;
}
[data-theme="dark"] .progress-text { background: #334155; color: #94a3b8; }


/* ==========================================
   37. COLLAPSIBLE ACCORDION CARDS
   ========================================== */
.capa-card.collapsed .capa-grid-2,
.capa-card.collapsed .capa-grid-3,
.capa-card.collapsed .capa-grid-4,
.capa-card.collapsed .form-group,
.capa-card.collapsed table,
.capa-card.collapsed p.chart-desc,
.capa-card.collapsed #advanced-investigation-wrapper {
    display: none !important;
}

/* Redesign H3 to act as a full-width clickable bar */
#dqdc-capa-form .capa-card h3 {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}
#dqdc-capa-form .capa-card h3:hover {
    background: #e2e8f0;
}
[data-theme="dark"] #dqdc-capa-form .capa-card h3:hover { background: #334155; }

.card-collapse-btn {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #cbd5e1;
}
.capa-card.collapsed .card-collapse-btn {
    transform: rotate(-90deg);
}
[data-theme="dark"] .card-collapse-btn { background: #0f172a; border-color: #475569; }


/* ==========================================
   38. CINEMATIC FORM FOCUS
   ========================================== */
.single-page-mode.focus-active .capa-card:not(.focused-card) {
    opacity: 0.5;
    transform: scale(0.98);
    filter: grayscale(30%);
}
.single-page-mode .capa-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.single-page-mode .capa-card.focused-card {
    border-color: var(--dqdc-primary);
    box-shadow: 0 15px 30px -5px rgba(29, 78, 216, 0.15) !important;
    z-index: 10;
}
[data-theme="dark"] .single-page-mode.focus-active .capa-card:not(.focused-card) { opacity: 0.3; }


/* ==========================================
   39. STICKY CARD HEADERS
   ========================================== */
.single-page-mode .capa-card h3 {
    position: sticky;
    top: 108px; /* Sits perfectly below your jump menu */
    z-index: 50;
    box-shadow: 0 4px 6px -4px rgba(0,0,0,0.1);
}