/* ==========================================
   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 {
    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; }
.rig-badge { background: var(--dqdc-primary); color: #fff; padding: 5px 10px; border-radius: 4px; font-weight: bold; font-size: 12px; }

/* ==========================================
   UNIVERSAL BUTTON UI (BLUE & BOLD)
   ========================================== */
.capa-btn-primary, .capa-btn-secondary, .btn-tbl-action, .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;
}

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

/* Active / Inactive Tabs */
.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.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;
}

/* Table Buttons Specific Override */
.btn-tbl-action {
    padding: 6px 12px !important;
    font-size: 11px !important;
    min-width: 70px;
}

/* Secondary Buttons */
.capa-btn-secondary {
    background: #e0e7ff !important;
    color: #1d4ed8 !important;
    border-color: #c7d2fe !important;
}
.capa-btn-secondary:hover {
    background: #c7d2fe !important;
}

/* GRIDS & FORMS */
.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; 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; }
.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 label:has(+ input:required)::after, .form-group label:has(+ select:required)::after, .form-group label:has(+ textarea:required)::after { content: " *"; color: var(--dqdc-critical); }
.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; }
.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; }

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

/* CARDS */
.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); }
.section-ident { border-left: 4px solid var(--dqdc-primary); }
.section-rca { border-left: 4px solid #f59e0b; }
.section-verify { border-left: 4px solid #16a34a; }

/* 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; top: 0; z-index: 10; }
.capa-table td { padding: 10px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; word-wrap: break-word; }

/* ==========================================
   COLOR CODED BADGES (ALL CLEARLY VISIBLE WHITE TEXT)
   ========================================== */
.badge { display: inline-block; min-width: 80px; text-align: center; padding: 6px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; color: #ffffff !important; }

/* PTW Types */
.badge-hot { background-color: #dc2626 !important; border: 1px solid #b91c1c !important;} /* Red */
.badge-cold { background-color: #3b82f6 !important; border: 1px solid #2563eb !important;} /* Blue */

/* Certificates */
.badge-confined { background-color: #f97316 !important; border: 1px solid #ea580c !important;} /* Orange */
.badge-isolation { background-color: #a855f7 !important; border: 1px solid #9333ea !important;} /* Purple */
.badge-lifting { background-color: #3b82f6 !important; border: 1px solid #2563eb !important;} /* Blue */
.badge-height { background-color: #4c1d95 !important; border: 1px solid #3b0764 !important;} /* Dark Purple */
.badge-radio { background-color: #dc2626 !important; border: 1px solid #b91c1c !important;} /* Red */
.badge-excavation { background-color: #64748b !important; border: 1px solid #475569 !important;} /* Grey */
.badge-default { background-color: #475569 !important; border: 1px solid #334155 !important;} /* Default dark grey if empty */

/* Status Badges */
.stat-open { background: #dc2626 !important; border: 1px solid #b91c1c !important;} /* Red */
.stat-closed { background: #10b981 !important; border: 1px solid #059669 !important; } /* Green */
.stat-extended { background: #f59e0b !important; border: 1px solid #d97706 !important; } /* Orange */
.stat-cancelled { background: #64748b !important; border: 1px solid #475569 !important; } /* Grey */ 

/* WIZARD UI & SINGLE PAGE TOGGLE */
.sticky-form-header { position: sticky; top: 0; background: rgba(248, 250, 252, 0.95); 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; }
.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); } }

/* Single Page Form 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,
.single-page-mode .btn-wizard-next,
.single-page-mode .btn-wizard-prev {
    display: none !important;
}

/* ANALYTICS */
.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; border-left: 4px solid var(--dqdc-primary); }
.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-text); }
.kpi-red { border-left-color: var(--dqdc-critical); } .kpi-red p { color: var(--dqdc-critical); }
.capa-chart-wrapper { position: relative; height: 100%; min-height: 280px; max-height: 350px; width: 100%; display: flex; align-items: center; justify-content: center; }

/* TOAST NOTIFICATIONS & POPUP DIALOGS */
#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; }

.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: 500px; 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; }


/* ==========================================
   RTL INTEGRATION (Arabic)
   ========================================== */
[dir="rtl"] .dqdc-capa-wrapper { font-family: 'Tajawal', 'Cairo', sans-serif; text-align: right; direction: rtl; }
[dir="rtl"] .capa-table th { text-align: right; padding-right: 10px; padding-left: 20px; }
[dir="rtl"] .capa-table th::after { right: auto; left: 5px; }
[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; }
[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,
[dir="rtl"] .capa-filter-bar-full button { margin-right: 0 !important; margin-left: auto !important; }
/* ==========================================
   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: #1e40af; } /* Slightly darker blue on hover */
.capa-table th::after { 
    content: '↕'; 
    position: absolute; 
    right: 5px; 
    color: #93c5fd; /* Light blue default arrow */
    font-size: 12px; 
}
.capa-table th.sort-asc::after { content: '▲'; color: #ffffff; }
.capa-table th.sort-desc::after { content: '▼'; color: #ffffff; }

/* Prevent sorting arrows on the checkbox column */
.capa-table th:first-child { cursor: default; padding-right: 10px; }
.capa-table th:first-child::after { content: none; }