/*
 * Global Theme CSS page_theme.css
 * Unified styling for all KPI and dashboard pages
 * This file provides consistent theming across all modules
 */

/* ========================================
   1. CSS VARIABLES & ROOT CONFIGURATION
   ======================================== */
:root {
    /* Primary Module Colors */
    --strategies-primary: #800000;      /* Maroon */
    --strategies-secondary: #993399;    /* Purple */
    --strategies-light: #f5e6e6;       /* Light Maroon */
    --operations-primary: #2e7d32;     /* Green */
    --operations-secondary: #1976d2;   /* Blue */
    --operations-light: #e8f5e9;      /* Light Green */
    --compliance-primary: #2e7d32;     /* Green */
    --compliance-secondary: #1565c0;   /* Blue */
    --compliance-light: #e8f5e9;      /* Light Green */
    --risks-primary: #d32f2f;          /* Red */
    --risks-secondary: #ff6f00;        /* Orange */
    --risks-light: #ffebee;           /* Light Red */
    --policies-primary: #512da8;       /* Deep Purple */
    --policies-secondary: #7b1fa2;     /* Purple */
    --policies-light: #ede7f6;        /* Light Purple */
    --licenses-primary: #00796b;       /* Teal */
    --licenses-secondary: #00897b;     /* Light Teal */
    --licenses-light: #e0f2f1;        /* Light Teal */
    --meetings-primary: #5d4037;       /* Brown */
    --meetings-secondary: #6d4c41;     /* Light Brown */
    --meetings-light: #edddd4;        /* Light Brown */
    --incidents-primary: #e65100;      /* Deep Orange */
    --incidents-secondary: #ef6c00;    /* Orange */
    --incidents-light: #fff3e0;       /* Light Orange */
    --hr-primary: #1e88e5;            /* Blue */
    --hr-secondary: #42a5f5;          /* Light Blue */
    --hr-light: #bed9ed;              /* Light Blue */
    --planning-primary: #3f51b5;       /* Indigo */
    --planning-secondary: #303f9f;     /* Deep Indigo */
    --planning-light: #e8eaf6;         /* Light Indigo */
    --projects-primary: #00acc1;       /* Cyan */
    --projects-secondary: #0097a7;     /* Dark Cyan */
    --projects-light: #e0f7fa;         /* Light Cyan */
    --finances-primary: #ffa000;       /* Amber */
    --finances-secondary: #ff8f00;     /* Dark Amber */
    --finances-light: #fff8e1;         /* Light Amber */
    --dashboard-primary: #667eea;      /* Purple Blue */
    --dashboard-secondary: #764ba2;    /* Purple */
    --dashboard-light: #f0f2ff;        /* Light Purple Blue */
    --accent-dark-default: #2e7d32;    /* Patient dashboard fallback */
    --accent-light-default: #e8f5e9;   /* Patient dashboard fallback */
    
    /* Status Colors */
    --status-success: #1cc88a;
    --status-info: #36b9cc;
    --status-warning: #f6c23e;
    --status-danger: #e74a3b;
    --status-secondary: #858796;
    
    /* Neutral Colors */
    --color-white: #ffffff;
    --color-light-gray: #f8f9fc;
    --color-medium-gray: #d1d3e2;
    --color-dark-gray: #5a5c69;
    --color-text-primary: #212529;
    --color-text-secondary: #858796;
    
    /* Layout Variables */
    --card-border-radius: 0.75rem;
    --card-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    --card-hover-shadow: 0 0.35rem 2rem 0 rgba(58, 59, 69, 0.2);
    --section-gap: 1.5rem;
    --card-gap: 1rem;
    --card-padding: 1.25rem;
    --card-header-padding: 1rem 1.25rem;
    --layout-page-background: #f8f9fa;
    
    /* Typography */
    --font-size-small: 0.875rem;
    --font-size-normal: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;
    --font-size-xxlarge: 2rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
   2. GLOBAL RESETS & BASE STYLES
   ======================================== */
.dashboard-container {
    padding: 0.75rem 1.5rem 3rem;
    max-width: 1920px;
    margin: 0 auto;
    background: var(--layout-page-background);
    min-height: calc(100vh - 60px);
}

/* Dashboard stat cards layout */
.dashboard-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dashboard-stat-cards .col-xl-2 {
    min-width: 200px;
}

/* Dashboard navigation cards */
.dashboard-nav-card {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e3e6f0;
    height: 100%;
}

.dashboard-nav-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.dashboard-nav-card .card-body {
    padding: 1.5rem;
}

.dashboard-nav-card .nav-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.dashboard-nav-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dashboard-nav-card p {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0;
}

/* Module-specific nav card colors */
.nav-card-grc { border-left: 4px solid var(--compliance-primary); }
.nav-card-grc .nav-icon { color: var(--compliance-primary); }

.nav-card-planning { border-left: 4px solid var(--planning-primary); }
.nav-card-planning .nav-icon { color: var(--planning-primary); }

.nav-card-strategies { border-left: 4px solid var(--strategies-primary); }
.nav-card-strategies .nav-icon { color: var(--strategies-primary); }

.nav-card-operations { border-left: 4px solid var(--operations-primary); }
.nav-card-operations .nav-icon { color: var(--operations-primary); }

.nav-card-meetings { border-left: 4px solid var(--meetings-primary); }
.nav-card-meetings .nav-icon { color: var(--meetings-primary); }

.nav-card-hr { border-left: 4px solid var(--hr-primary); }
.nav-card-hr .nav-icon { color: var(--hr-primary); }

.nav-card-compliance { border-left: 4px solid var(--compliance-primary); }
.nav-card-compliance .nav-icon { color: var(--compliance-primary); }

/* Overall health indicator */
.overall-health-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.overall-health-card .card-title {
    color: white;
    opacity: 0.9;
}

.health-score-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    position: relative;
}

.health-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: 700;
}

.health-score-label {
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Recent activities timeline */
.activity-timeline {
    position: relative;
    padding-left: 30px;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e3e6f0;
}

.activity-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.activity-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 3px solid #3b82f6;
}

.activity-item.risk::before { border-color: var(--risks-primary); }
.activity-item.policy::before { border-color: var(--policies-primary); }
.activity-item.incident::before { border-color: var(--incidents-primary); }
.activity-item.meeting::before { border-color: var(--meetings-primary); }
.activity-item.activity::before { border-color: var(--operations-primary); }

.activity-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f2f5;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Quick stats grid */
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.quick-stat-item {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.quick-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    /* Right in LTR, left in RTL */
    text-align: end !important;
    display: block;
}

.quick-stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Mini charts container */
.mini-charts-container {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    margin-bottom: 1.5rem;
}

.mini-chart {
    height: 200px;
    position: relative;
}

/* Key insights section */
.key-insights {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 0.75rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.key-insights h4 {
    color: white;
    margin-bottom: 1.5rem;
}

.insight-item {
    display: flex;
    align-items: start;
    margin-bottom: 1rem;
}

.insight-icon {
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.insight-text {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.95;
}

/* Performance indicators */
.performance-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

.performance-up {
    background: #d4edda;
    color: #155724;
}

.performance-down {
    background: #f8d7da;
    color: #721c24;
}

.performance-neutral {
    background: #fff3cd;
    color: #856404;
}

/* ========================================
   3. CARD COMPONENTS
   ======================================== */
.card {
    border: none;
    border-radius: var(--card-border-radius);
    background-color: var(--color-white);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-normal);
    margin-bottom: var(--card-gap);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-hover-shadow);
}

/* Enhanced spacing for chart cards */
.card.shadow-sm {
    margin-bottom: 1.5rem;
}

/* Consistent row spacing */
.row + .row {
    margin-top: 1rem;
}

/* Equal height cards in flex containers */
.d-flex.flex-column .card.flex-fill {
    display: flex;
    flex-direction: column;
}

.d-flex.flex-column .card.flex-fill .card-body {
    flex: 1 1 auto;
}

/* Ensure proper alignment for initiative detail page */
.theme-strategies .row.d-flex.align-items-stretch {
    display: flex;
    flex-wrap: wrap;
}

.theme-strategies .col-lg-8.d-flex.flex-column,
.theme-strategies .col-lg-4.d-flex.flex-column {
    display: flex;
    flex-direction: column;
}

/* Minimum heights for specific card types */
.theme-strategies .card.flex-fill:last-child {
    margin-bottom: 0;
}

.card-header {
    padding: var(--card-header-padding);
    background-color: var(--color-light-gray);
    border-bottom: 1px solid #e3e6f0;
    border-top-left-radius: var(--card-border-radius);
    border-top-right-radius: var(--card-border-radius);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.card-header .card-header-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.card-body {
    padding: var(--card-padding);
}

.card-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-gray);
    margin-bottom: 0;
    font-size: var(--font-size-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.card-header .card-title i.fas,
.card-header .card-title i.far,
.card-header .card-title i.fab {
    margin: 0;
    margin-inline-end: 0.3rem;
}

[dir="rtl"] .card-header .card-title i.fas,
[dir="rtl"] .card-header .card-title i.far,
[dir="rtl"] .card-header .card-title i.fab {
    margin-inline-end: 0;
    margin-inline-start: 0.3rem;
}

.card-header .btn i.fas,
.card-header .btn i.far,
.card-header .btn i.fab {
    margin-right: 0.25rem;
}

[dir="rtl"] .card-header .btn i.fas,
[dir="rtl"] .card-header .btn i.far,
[dir="rtl"] .card-header .btn i.fab {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* Stat Cards */
.stat-card {
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px; /* Ensure consistent height */
    height: 100%; /* Fill the column height */
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    transition: all var(--transition-normal);
}

.stat-card .card-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    color: var(--color-dark-gray);
}

.stat-card .card-icon {
    font-size: 1.5rem;
    margin-right: 0.75rem;
    opacity: 0.8;
}

.stat-card .card-title {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

.stat-card .stat-item {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    border-bottom: 1px dashed #eee;
    padding-bottom: 0.4rem;
}

.stat-card .stat-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.stat-card .stat-label {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.stat-card .stat-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-gray);
    font-size: var(--font-size-large);
    margin-bottom: 0.5rem;
    /* Align values to end edge: right in LTR, left in RTL */
    margin-inline-start: auto;
    text-align: end !important;
    display: block;
}

/* Values with icons should sit at card edge too */
.stat-card .stat-value-with-icon {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* respects RTL via inline-start auto on container */
    gap: 0.35rem;
    font-weight: var(--font-weight-semibold);
}

.stat-card .stat-link {
    align-self: flex-end;
    margin-top: 0.75rem;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    transition: color var(--transition-fast);
}

/* Stat card content area */
.stat-card .stat-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Progress bars in stat cards */
.stat-card .progress {
    margin-top: 0.5rem;
    height: 6px;
}

/* Small text in stat cards */
.stat-card small {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}

/* Dashboard stat cards should never show internal scrollbars */
.stats-card-row > [class*="col-"] {
    overflow: visible !important;
    max-height: none !important;
    padding-bottom: 0;
}

/* Module-specific stat card colors */
.stat-card-strategies { border-left: 4px solid var(--strategies-primary); }
.stat-card-strategies .card-icon { color: var(--strategies-primary); }
.stat-card-strategies .stat-link:hover { color: var(--strategies-primary); }

.stat-card-operations { border-left: 4px solid var(--operations-primary); }
.stat-card-operations .card-icon { color: var(--operations-primary); }
.stat-card-operations .stat-link:hover { color: var(--operations-primary); }

.stat-card-compliance { border-left: 4px solid var(--compliance-primary); }
.stat-card-compliance .card-icon { color: var(--compliance-primary); }
.stat-card-compliance .stat-link:hover { color: var(--compliance-primary); }

.stat-card-risks { border-left: 4px solid var(--risks-primary); }
.stat-card-risks .card-icon { color: var(--risks-primary); }
.stat-card-risks .stat-link:hover { color: var(--risks-primary); }

.stat-card-licenses { border-left: 4px solid var(--licenses-primary); }
.stat-card-licenses .card-icon { color: var(--licenses-primary); }
.stat-card-licenses .stat-link:hover { color: var(--licenses-primary); }

.stat-card-incidents { border-left: 4px solid var(--incidents-primary); }
.stat-card-incidents .card-icon { color: var(--incidents-primary); }
.stat-card-incidents .stat-link:hover { color: var(--incidents-primary); }

.stat-card-policies { border-left: 4px solid var(--policies-primary); }
.stat-card-policies .card-icon { color: var(--policies-primary); }
.stat-card-policies .stat-link:hover { color: var(--policies-primary); }

.stat-card-meetings { border-left: 4px solid var(--meetings-primary); }
.stat-card-meetings .card-icon { color: var(--meetings-primary); }
.stat-card-meetings .stat-link:hover { color: var(--meetings-primary); }

.stat-card-hr { border-left: 4px solid var(--hr-primary); }
.stat-card-hr .card-icon { color: var(--hr-primary); }
.stat-card-hr .stat-link:hover { color: var(--hr-primary); }

.stat-card-planning { border-left: 4px solid var(--planning-primary); }
.stat-card-planning .card-icon { color: var(--planning-primary); }
.stat-card-planning .stat-link:hover { color: var(--planning-primary); }

.stat-card-projects { border-left: 4px solid var(--projects-primary); }
.stat-card-projects .card-icon { color: var(--projects-primary); }
.stat-card-projects .stat-link:hover { color: var(--projects-primary); }

.stat-card-finances { border-left: 4px solid var(--finances-primary); }
.stat-card-finances .card-icon { color: var(--finances-primary); }
.stat-card-finances .stat-link:hover { color: var(--finances-primary); }

/* ========================================
   4. TYPOGRAPHY & HEADINGS
   ======================================== */
.section-heading {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-gray);
    margin: var(--section-gap) 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e3e6f0;
    display: flex;
    align-items: center;
}

.section-heading i {
    margin-right: 0.5rem;
}

.page-title {
    font-size: var(--font-size-xlarge);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark-gray);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-normal);
    margin-bottom: 1.5rem;
}

/* ========================================
   RTL-FRIENDLY PAGE HEADER STRUCTURE
   ======================================== */
/* 
   IMPORTANT: For proper RTL alignment, avoid complex single-row flex layouts
   that combine titles and controls. Instead, use this two-row structure:
   
   Row 1: Simple title and subtitle (automatically RTL-compatible)
   Row 2: Action buttons with float-end (automatically adjusts for RTL)
   
   Example:
   <div class="row mb-3">
       <div class="col-12">
           <h3 class="page-title">Page Title</h3>
           <p class="page-subtitle">Page description</p>
       </div>
   </div>
   <div class="row mb-3">
       <div class="col">
           <div class="btn-toolbar float-end">...</div>
       </div>
   </div>
*/

/* Page header spacing adjustments for two-row structure */
.page-header-row {
    margin-bottom: 1rem;
}

.page-header-row .page-title {
    margin-bottom: 0.25rem;
}

.page-header-row .page-subtitle {
    margin-bottom: 0;
}

/* Action buttons row */
.page-actions-row {
    margin-bottom: 1.5rem;
}

/* Enhanced page header section with built-in RTL/LTR support */
.page-header-section {
    background: white;
    padding: 1rem 1.25rem;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
}

.page-header-section .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.5rem;
}

.page-header-section .page-title {
    color: var(--color-dark-gray);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xlarge);
    margin-bottom: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.page-header-section .page-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-small);
    margin-bottom: 0.75rem;
}

.page-header-section .page-title i {
    margin: 0;
    margin-inline-end: 0.35rem;
}

[dir="rtl"] .page-header-section .page-title i {
    margin-inline-end: 0;
    margin-inline-start: 0.35rem;
}

.page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.page-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: var(--font-weight-semibold);
}

.page-actions .btn-sm {
    padding: 0.4rem 0.9rem;
}

.booking-search-page {
    background: transparent;
}

.booking-search-page .booking-section {
    width: 100%;
    margin-bottom: 1.5rem;
}

.booking-search-page .booking-section:last-child {
    margin-bottom: 0;
}

/* RTL Support for page header */
[dir="rtl"] .page-header-section .page-actions {
    direction: rtl;
}

[dir="rtl"] .page-header-section .btn i.fas,
[dir="rtl"] .page-header-section .btn i.far,
[dir="rtl"] .page-header-section .btn i.fab {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* LTR Support (default) */
[dir="ltr"] .page-header-section .btn i.fas,
[dir="ltr"] .page-header-section .btn i.far,
[dir="ltr"] .page-header-section .btn i.fab,
.page-header-section .btn i.fas,
.page-header-section .btn i.far,
.page-header-section .btn i.fab {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* Responsive behavior for page header */
@media (max-width: 576px) {
    .page-header-section {
        padding: 0.75rem 1rem;
    }
    
    .page-header-section .page-title {
        font-size: 1.25rem;
    }
    
    .page-header-section .page-actions .btn {
        font-size: 0.875rem;
        padding: 0.25rem 0.75rem;
    }
}

/* Legacy action buttons row */
.page-actions-row {
    margin-bottom: 1.5rem;
}

/* Footer spacing and styling */
footer {
    background: white;
    border-top: 1px solid #e3e6f0;
    margin-top: 2rem;
    padding: 1.5rem !important;
    position: relative;
    z-index: 10;
}

/* Ensure content doesn't overlap footer */
.main-content {
    padding-bottom: 2rem;
    background-color: var(--layout-page-background);
}

/* Last card in any container should have bottom margin */
.card:last-child {
    margin-bottom: 1.5rem !important;
}

/* Ensure float-end works properly in RTL */
[dir="rtl"] .float-end {
    float: left !important;
}

[dir="ltr"] .float-end {
    float: right !important;
}

/* Button spacing for RTL */
.btn-toolbar .btn {
    margin-inline-end: 0.25rem;
}

[dir="rtl"] .btn-toolbar .btn {
    margin-inline-start: 0.25rem;
    margin-inline-end: 0;
}

/* Badge and status positioning in RTL */
.page-subtitle .badge {
    margin-inline-start: 0.5rem;
}

/* Icon positioning in RTL */
[dir="rtl"] .fas {
    margin-inline-end: 0.25rem;
    margin-inline-start: 0;
}

/* Text direction handling */
[dir="ltr"] .page-title {
    text-align: left;
}

[dir="rtl"] .page-title {
    text-align: right;
}

[dir="rtl"] .page-subtitle {
    direction: rtl;
    text-align: right;
}

/* Avoid these problematic patterns for RTL:
   - d-flex justify-content-between with mixed content types
   - Complex flex layouts combining titles and buttons
   - Manual text-align properties that override RTL
   
   These patterns cause alignment issues in RTL mode.
*/

/* ========================================
   5. TABLES
   ======================================== */
.table-responsive {
    border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
    overflow: hidden;
}

.table {
    margin-bottom: 0;
}

.table th {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: var(--color-light-gray);
    color: var(--color-text-secondary);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
    font-size: var(--font-size-small);
    color: var(--color-dark-gray);
}

.table-hover tbody tr:hover {
    background-color: #f0f3f5;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: rgba(0,0,0,.02);
}

/* ========================================
   6. BADGES & STATUS INDICATORS
   ======================================== */
.badge {
    padding: 0.5em 0.75em !important; /* Increased height with more padding */
    border-radius: 0.25rem !important; /* Reduced rounded edges from default 0.375rem */
    font-weight: var(--font-weight-semibold);
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Progress Badges */
.progress-badge {
    padding: 0.35em 0.65em;
    border-radius: 0.25rem;
    font-weight: var(--font-weight-semibold);
    display: inline-block;
    font-size: 0.75em;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}

.progress-excellent { background-color: #1e7e34; color: white; }
.progress-good { background-color: #28a745; color: white; }
.progress-average { background-color: #17a2b8; color: white; }
.progress-low { background-color: #ffc107; color: #212529; }
.progress-limited { background-color: #dc3545; color: white; }

/* Health Badges */
.health-excellent { background-color: #1cc88a; color: white; }
.health-good { background-color: #36b9cc; color: white; }
.health-fair { background-color: #f6c23e; color: #212529; }
.health-poor { background-color: #e74a3b; color: white; }

/* Risk Level Badges */
.risk-critical { background-color: #721c24; color: white; }
.risk-high { background-color: #dc3545; color: white; }
.risk-medium { background-color: #ffc107; color: #212529; }
.risk-low { background-color: #28a745; color: white; }

/* Status Badges */
.status-not-started { background-color: #ffc107; color: #212529; }
.status-in-progress { background-color: #17a2b8; color: white; }
.status-completed { background-color: #28a745; color: white; }
.status-on-hold { background-color: #fd7e14; color: white; }
.status-cancelled { background-color: #6c757d; color: white; }

/* ========================================
   7. PROGRESS BARS
   ======================================== */
.progress {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
}

/* ========================================
   8. CHARTS
   ======================================== */
.chart-container {
    position: relative;
    height: 350px;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Ensure canvas elements respect container bounds */
.chart-container canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* ========================================
   9. BUTTONS & CONTROLS
   ======================================== */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.btn-outline-secondary {
    color: var(--color-text-secondary);
    border-color: var(--color-medium-gray);
}

.btn-outline-secondary:hover {
    background-color: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

/* Action Button Toolbar */
.btn-toolbar {
    gap: 0.5rem;
}

.btn-toolbar .btn-group {
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .btn-toolbar {
        justify-content: center !important;
    }

    .btn-toolbar.float-end {
        float: none !important;
    }
}

/* Enhanced Button Groups for Page Headers */
.page-actions .btn-group {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
}

.page-actions .btn-group .btn {
    border-radius: 0;
}

.page-actions .btn-group .btn:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.page-actions .btn-group .btn:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* RTL support for button groups */
[dir="rtl"] .page-actions .btn-group .btn:first-child {
    border-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

[dir="rtl"] .page-actions .btn-group .btn:last-child {
    border-radius: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

/* Universal Page Styles */
.filter-card {
    margin-bottom: 1.5rem;
    border-radius: 0.35rem;
}

/* Progress Bar Variants */
.progress-bar-danger {
    background-color: #e74a3b;
}

.progress-bar-warning {
    background-color: #f6c23e;
}

.progress-bar-success {
    background-color: #1cc88a;
}

/* Badge Variants */
.badge-operational {
    background-color: #4e73df;
    color: white;
}

.badge-project {
    background-color: #36b9cc;
    color: white;
}

/* Small Info Text */
.small-info {
    font-size: 0.8rem;
    color: #858796;
}

/* Card Hover Effect */
.card {
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

/* Table Hover Effect */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Program Info Card */
.program-info-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ========================================
   10. UTILITIES
   ======================================== */
.big-number {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    /* Right in LTR, left in RTL */
    text-align: end !important;
}

.trend-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.trend-up { color: var(--status-success); }
.trend-down { color: var(--status-danger); }
.trend-neutral { color: var(--status-warning); }

.text-truncate-custom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    display: inline-block;
}

/* ========================================
   11. DATATABLES STYLING
   ======================================== */
/* DataTables Base Styling */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_length,
.dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_info,
.dataTables_paginate {
    margin-top: 1rem;
}

/* Make DataTables responsive */
.table-responsive .dataTables_wrapper {
    overflow: visible;
}

/* DataTables search input styling */
.dataTables_filter input {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    margin-left: 0.5rem;
}

/* Basic DataTable styling (tables without 'datatable' class) */
table:not(.datatable) {
    width: 100% !important;
}

/* Ensure proper styling for DataTable controls */
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    margin: 0 0.5rem;
}

/* Clean pagination styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.25rem 0.5rem;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    background: white;
    color: var(--text-primary);
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Advanced DataTable with filters (tables with 'datatable' class) */
.datatable thead tr.filters th input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
    margin-bottom: 5px;
}

/* Export buttons styling for advanced tables */
.dt-buttons {
    margin-bottom: 1rem;
}

.dt-button {
    margin-right: 0.25rem;
}

/* ========================================
   12. RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 991.98px) {
    .chart-container {
        height: 320px;
    }
    
    .dashboard-container {
        padding: 0.75rem 0.875rem 3rem;
    }

    .main-content {
        padding-top: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .chart-container {
        height: 300px;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .big-number {
        font-size: 2rem;
    }
    
    .card-header .card-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 575.98px) {
    .dashboard-container {
        padding: 0.5rem 0.75rem 3rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
    
    .stat-card .stat-value {
        font-size: 0.95rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    .section-heading {
        font-size: 1.1rem;
    }
}

/* ========================================
   12. ANIMATIONS
   ======================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-slideInLeft {
    animation: slideInLeft 0.5s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* Flash animation for highlighting */
.animate__flash {
    animation: flash 1s;
}

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.5; background-color: rgba(255, 193, 7, 0.3); }
}

/* ========================================
   13. STATUS DISTRIBUTION BAR
   ======================================== */
.status-bar-container {
    width: 100%;
    height: 20px;
    background-color: #f8f9fa;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.status-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    transition: width 0.3s ease;
}

/* Status bar colors - can be customized per module */
.status-bar-valid { background-color: #33FF33; }
.status-bar-processing { background-color: #1E90FF; }
.status-bar-pending { background-color: #FFFF00; color: #333; }
.status-bar-expired { background-color: #FFA500; }
.status-bar-withdrawn { background-color: #FF0000; }
.status-bar-suspended { background-color: #993333; }
.status-bar-other { background-color: #999999; }
.status-bar-canceled { background-color: #696969; }
.status-bar-completed { background-color: #33FF33; }
.status-bar-in-progress { background-color: #1E90FF; }
.status-bar-not-started { background-color: #CCCCCC; }

/* ========================================
   14. RENEWAL ALERT BADGE
   ======================================== */
.renewal-alert {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    animation: pulse 2s infinite;
}

/* ========================================
   15. MATRIX TABLE STYLING
   ======================================== */
.matrix-table th {
    background-color: var(--color-light-gray);
    font-weight: 600;
    text-align: center;
    vertical-align: bottom;
    height: auto;
    padding: 8px;
}

.matrix-table th:not(:first-child) {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    min-width: 40px;
    max-width: 60px;
}

.matrix-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Module-specific matrix table headers */
.theme-licenses .matrix-table th {
    background-color: var(--licenses-light);
    color: var(--licenses-primary);
}
.theme-operations .matrix-table th {
    background-color: var(--operations-light);
    color: var(--operations-primary);
}
.theme-risks .matrix-table th {
    background-color: var(--risks-light);
    color: var(--risks-primary);
}

/* ========================================
   16. MODULE-SPECIFIC THEME CLASSES
   ======================================== */
.theme-strategies {
    --module-primary: var(--strategies-primary);
    --module-secondary: var(--strategies-secondary);
}

.theme-operations {
    --module-primary: var(--operations-primary);
    --module-secondary: var(--operations-secondary);
}

.theme-compliance {
    --module-primary: var(--compliance-primary);
    --module-secondary: var(--compliance-secondary);
}

.theme-risks {
    --module-primary: var(--risks-primary);
    --module-secondary: var(--risks-secondary);
}

.theme-licenses {
    --module-primary: var(--licenses-primary);
    --module-secondary: var(--licenses-secondary);
}

.theme-hr {
    --module-primary: var(--hr-primary);
    --module-secondary: var(--hr-secondary);
}

.theme-planning {
    --module-primary: var(--planning-primary);
    --module-secondary: var(--planning-secondary);
}

.theme-projects {
    --module-primary: var(--projects-primary);
    --module-secondary: var(--projects-secondary);
}

.theme-finances {
    --module-primary: var(--finances-primary);
    --module-secondary: var(--finances-secondary);
}

.theme-dashboard {
    --module-primary: var(--dashboard-primary);
    --module-secondary: var(--dashboard-secondary);
}

/* Module-specific section headings */
.theme-strategies .section-heading i { color: var(--strategies-primary); }
.theme-operations .section-heading i { color: var(--operations-primary); }
.theme-compliance .section-heading i { color: var(--compliance-primary); }
.theme-risks .section-heading i { color: var(--risks-primary); }
.theme-licenses .section-heading i { color: var(--licenses-primary); }
.theme-hr .section-heading i { color: var(--hr-primary); }
.theme-planning .section-heading i { color: var(--planning-primary); }
.theme-projects .section-heading i { color: var(--projects-primary); }
.theme-finances .section-heading i { color: var(--finances-primary); }
.theme-dashboard .section-heading i { color: var(--dashboard-primary); }

/* Module-specific themed card headers */
.card-header-themed {
    color: white;
}
.theme-strategies .card-header-themed { background-color: var(--strategies-primary); }
.theme-operations .card-header-themed { background-color: var(--operations-primary); }
.theme-compliance .card-header-themed { background-color: var(--compliance-primary); }
.theme-risks .card-header-themed { background-color: var(--risks-primary); }
.theme-licenses .card-header-themed { background-color: var(--licenses-primary); }
.theme-policies .card-header-themed { background-color: var(--policies-primary); }
.theme-meetings .card-header-themed { background-color: var(--meetings-primary); }
.theme-incidents .card-header-themed { background-color: var(--incidents-primary); }
.theme-hr .card-header-themed { background-color: var(--hr-primary); }
.theme-planning .card-header-themed { background-color: var(--planning-primary); }
.theme-projects .card-header-themed { background-color: var(--projects-primary); }
.theme-finances .card-header-themed { background-color: var(--finances-primary); }
.theme-dashboard .card-header-themed { background-color: var(--dashboard-primary); }

.card-header-themed .card-title,
.card-header-themed h5,
.card-header-themed .small,
.card-header-themed span {
    color: white !important;
}
.card-header-themed .small,
.card-header-themed span.small {
    opacity: 0.9;
}
.card-header-themed .btn {
    background-color: white;
    color: var(--color-text-primary);
    border-color: white;
}
.card-header-themed .btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}

/* Light themed card headers */
.card-header-themed-light {
    border-bottom: 2px solid;
}
.theme-strategies .card-header-themed-light { 
    background-color: var(--strategies-light); 
    border-bottom-color: var(--strategies-primary);
    color: var(--strategies-primary);
}
.theme-operations .card-header-themed-light { 
    background-color: var(--operations-light); 
    border-bottom-color: var(--operations-primary);
    color: var(--operations-primary);
}
.theme-compliance .card-header-themed-light { 
    background-color: var(--compliance-light); 
    border-bottom-color: var(--compliance-primary);
    color: var(--compliance-primary);
}
.theme-risks .card-header-themed-light { 
    background-color: var(--risks-light); 
    border-bottom-color: var(--risks-primary);
    color: var(--risks-primary);
}
.theme-licenses .card-header-themed-light { 
    background-color: var(--licenses-light); 
    border-bottom-color: var(--licenses-primary);
    color: var(--licenses-primary);
}
.theme-policies .card-header-themed-light { 
    background-color: var(--policies-light); 
    border-bottom-color: var(--policies-primary);
    color: var(--policies-primary);
}
.theme-meetings .card-header-themed-light { 
    background-color: var(--meetings-light); 
    border-bottom-color: var(--meetings-primary);
    color: var(--meetings-primary);
}
.theme-incidents .card-header-themed-light { 
    background-color: var(--incidents-light); 
    border-bottom-color: var(--incidents-primary);
    color: var(--incidents-primary);
}
.theme-hr .card-header-themed-light { 
    background-color: var(--hr-light); 
    border-bottom-color: var(--hr-primary);
    color: var(--hr-primary);
}
.theme-planning .card-header-themed-light { 
    background-color: var(--planning-light); 
    border-bottom-color: var(--planning-primary);
    color: var(--planning-primary);
}
.theme-projects .card-header-themed-light { 
    background-color: var(--projects-light); 
    border-bottom-color: var(--projects-primary);
    color: var(--projects-primary);
}
.theme-finances .card-header-themed-light { 
    background-color: var(--finances-light); 
    border-bottom-color: var(--finances-primary);
    color: var(--finances-primary);
}
.theme-dashboard .card-header-themed-light { 
    background-color: var(--dashboard-light); 
    border-bottom-color: var(--dashboard-primary);
    color: var(--dashboard-primary);
}

.card-header-themed-light .card-title,
.card-header-themed-light h5 {
    color: inherit !important;
    font-weight: var(--font-weight-semibold);
}
.card-header-themed-light .small,
.card-header-themed-light span.small {
    color: var(--color-text-secondary) !important;
    opacity: 1;
}
.card-header-themed-light .btn {
    background-color: transparent;
    border-color: var(--color-medium-gray);
    color: var(--color-text-secondary);
}
.card-header-themed-light .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--color-text-secondary);
}

/* Ensure themed light headers have proper module colors */
.theme-operations .card-header-themed-light .card-title i,
.theme-strategies .card-header-themed-light .card-title i,
.theme-compliance .card-header-themed-light .card-title i,
.theme-risks .card-header-themed-light .card-title i,
.theme-licenses .card-header-themed-light .card-title i,
.theme-policies .card-header-themed-light .card-title i,
.theme-meetings .card-header-themed-light .card-title i,
.theme-incidents .card-header-themed-light .card-title i,
.theme-hr .card-header-themed-light .card-title i,
.theme-planning .card-header-themed-light .card-title i,
.theme-projects .card-header-themed-light .card-title i,
.theme-finances .card-header-themed-light .card-title i,
.theme-dashboard .card-header-themed-light .card-title i {
    color: inherit;
}

/* ========================================
   15. PRINT STYLES
   ======================================== */
@media print {
    .dashboard-container {
        background-color: white;
    }
    
    .card {
        box-shadow: none;
        page-break-inside: avoid;
    }
    
    .btn, .dropdown {
        display: none !important;
    }
}

/* ========================================
   16. STATUS DISTRIBUTION IMPROVEMENTS
   ======================================== */
/* Status Distribution Bar */
.status-distribution-cell {
    min-width: 150px;
}

.status-bar-container {
    display: flex;
    width: 100%;
    height: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.status-bar-container:hover {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
}

.status-bar {
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
}

.status-bar.status-completed {
    background-color: #28a745;
    background-image: linear-gradient(135deg, #28a745 0%, #20863b 100%);
}

.status-bar.status-in-progress {
    background-color: #007bff;
    background-image: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}

.status-bar.status-not-started {
    background-color: #ffc107;
    background-image: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.status-bar.status-on-hold {
    background-color: #dc3545;
    background-image: linear-gradient(135deg, #dc3545 0%, #bd2130 100%);
}

.status-bar.status-cancelled {
    background-color: #6c757d;
    background-image: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}

.status-summary {
    text-align: center;
    font-size: 0.75rem;
}

.status-summary span {
    display: inline-block;
}

/* Improved chart containers */
.chart-container {
    position: relative;
    height: 350px;
    padding: 10px;
}

@media (max-width: 1200px) {
    .chart-container {
        height: 300px;
    }
}

/* Better spacing for button toolbar on mobile */
@media (max-width: 768px) {
    .btn-toolbar {
        justify-content: center !important;
    }
    
    .btn-toolbar .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
}

/* ========================================
   17. GENERIC STATUS COLORS
   ======================================== */
/* Generic status colors for table cells and badges */
.status-valid,
.license-status-valid { 
    background-color: #adff2f !important;
    font-weight: bold;
    text-align: center;
}

.status-expired,
.license-status-expired { 
    background-color: #F08080 !important;
    font-weight: bold;
    text-align: center;
}

.status-withdrawn,
.license-status-withdrawn { 
    background-color: #F08080 !important;
    font-weight: bold;
    text-align: center;
}

.status-suspended,
.license-status-suspended { 
    background-color: #F08080 !important;
    font-weight: bold;
    text-align: center;
}

.status-na,
.license-status-na { 
    background-color: #E0E0E0 !important;
    text-align: center;
}

.status-processing,
.license-status-processing { 
    background-color: #87CEEB !important;
    text-align: center;
}

.status-pending,
.license-status-pending { 
    background-color: #FFE4B5 !important;
    text-align: center;
}

.status-canceled,
.license-status-canceled { 
    background-color: #696969 !important;
    color: white;
    text-align: center;
}

.status-other,
.license-status-other { 
    background-color: #FFFF99 !important;
    text-align: center;
}

/* ========================================
   18. GENERIC ENTITY LINKS
   ======================================== */
/* Entity links that adapt to module theme */
.entity-link,
.department-link {
    color: var(--module-primary);
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s ease;
}

.entity-link:hover,
.department-link:hover {
    color: var(--module-secondary);
    text-decoration: underline;
}

/* Module-specific entity link colors */
.theme-strategies .entity-link { color: var(--strategies-primary); }
.theme-strategies .entity-link:hover { color: var(--strategies-secondary); }

.theme-operations .entity-link { color: var(--operations-primary); }
.theme-operations .entity-link:hover { color: var(--operations-secondary); }

.theme-compliance .entity-link { color: var(--compliance-primary); }
.theme-compliance .entity-link:hover { color: var(--compliance-secondary); }

.theme-risks .entity-link { color: var(--risks-primary); }
.theme-risks .entity-link:hover { color: var(--risks-secondary); }

.theme-licenses .entity-link { color: var(--licenses-primary); }
.theme-licenses .entity-link:hover { color: var(--licenses-secondary); }

.theme-policies .entity-link { color: var(--policies-primary); }
.theme-policies .entity-link:hover { color: var(--policies-secondary); }

.theme-incidents .entity-link { color: var(--incidents-primary); }
.theme-incidents .entity-link:hover { color: var(--incidents-secondary); }

.theme-meetings .entity-link { color: var(--meetings-primary); }
.theme-meetings .entity-link:hover { color: var(--meetings-secondary); }

.theme-hr .entity-link { color: var(--hr-primary); }
.theme-hr .entity-link:hover { color: var(--hr-secondary); }

.theme-planning .entity-link { color: var(--planning-primary); }
.theme-planning .entity-link:hover { color: var(--planning-secondary); }

.theme-projects .entity-link { color: var(--projects-primary); }
.theme-projects .entity-link:hover { color: var(--projects-secondary); }

.theme-finances .entity-link { color: var(--finances-primary); }
.theme-finances .entity-link:hover { color: var(--finances-secondary); }

/* ========================================
   19. IMPORTANCE/PRIORITY BADGES
   ======================================== */
/* Generic importance and priority badges */
.importance-badge,
.priority-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.importance-critical,
.priority-critical {
    background-color: #ffdddd;
    color: #cc0000;
}

.importance-high,
.priority-high {
    background-color: #fff0d5;
    color: #ff6600;
}

.importance-average,
.priority-average,
.importance-medium,
.priority-medium {
    background-color: #ffffd5;
    color: #cccc00;
}

.importance-low,
.priority-low {
    background-color: #ddffff;
    color: #009999;
}

.importance-minimal,
.priority-minimal {
    background-color: #ddffed;
    color: #009966;
}

/* ========================================
   20. PROGRESS RINGS (SVG)
   ======================================== */
/* Progress ring styling */
.progress-ring {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.progress-ring-circle {
    fill: none;
    stroke-width: 8;
    transition: stroke-dashoffset 0.35s;
}

.progress-ring-bg {
    stroke: #e0e0e0;
}

.progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
}

/* ========================================
   21. SWOT QUADRANT COLORS
   ======================================== */
/* SWOT quadrant colors */
.swot-strength { background-color: #90EE90; }
.swot-weakness { background-color: #FFC0CB; }
.swot-opportunity { background-color: #ADD8E6; }
.swot-threat { background-color: #FFA500; }

/* ========================================
   22. MODERN TABLE STYLING
   ======================================== */
/* Modern Table Styling */
.modern-table {
    border: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.modern-table thead th {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057;
    border: none;
    font-weight: 600;
    padding: 12px 8px;
    vertical-align: middle;
    border-bottom: 2px solid #dee2e6;
}

.modern-table tbody tr {
    border: none;
    transition: all 0.3s ease;
}

.modern-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Module-specific hover colors */
.theme-strategies .modern-table tbody tr:hover { background-color: rgba(128, 0, 0, 0.05); }
.theme-operations .modern-table tbody tr:hover { background-color: rgba(46, 125, 50, 0.05); }
.theme-compliance .modern-table tbody tr:hover { background-color: rgba(46, 125, 50, 0.05); }
.theme-risks .modern-table tbody tr:hover { background-color: rgba(211, 47, 47, 0.05); }
.theme-licenses .modern-table tbody tr:hover { background-color: rgba(0, 121, 107, 0.05); }
.theme-policies .modern-table tbody tr:hover { background-color: rgba(81, 45, 168, 0.05); }
.theme-meetings .modern-table tbody tr:hover { background-color: rgba(93, 64, 55, 0.05); }
.theme-incidents .modern-table tbody tr:hover { background-color: rgba(230, 81, 0, 0.05); }
.theme-hr .modern-table tbody tr:hover { background-color: rgba(30, 136, 229, 0.05); }
.theme-planning .modern-table tbody tr:hover { background-color: rgba(63, 81, 181, 0.05); }
.theme-projects .modern-table tbody tr:hover { background-color: rgba(0, 172, 193, 0.05); }
.theme-finances .modern-table tbody tr:hover { background-color: rgba(255, 160, 0, 0.05); }

.modern-table tbody td {
    border: none;
    border-bottom: 1px solid #eee;
    padding: 16px 8px;
    vertical-align: middle;
}

/* ========================================
   23. MODERN PROGRESS BARS
   ======================================== */
/* Modern Progress Bars with Shimmer Effect */
.progress-container {
    min-width: 200px;
}

.modern-progress {
    position: relative;
}

.progress-modern {
    border-radius: 10px;
    background-color: rgb(226, 227, 227);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.progress-modern .progress-bar {
    border-radius: 10px;
    transition: width 0.6s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.progress-modern .progress-bar.bg-danger {
    background: linear-gradient(90deg, #dc3545 0%, #e74c3c 100%);
}

.progress-modern .progress-bar.bg-warning {
    background: linear-gradient(90deg, #ffc107 0%, #f39c12 100%);
}

.progress-modern .progress-bar.bg-info {
    background: linear-gradient(90deg, #17a2b8 0%, #3498db 100%);
}

.progress-modern .progress-bar.bg-success {
    background: linear-gradient(90deg, #28a745 0%, #27ae60 100%);
}

.progress-modern .progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
    animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
    0% { 
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% { 
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ========================================
   24. MILESTONE INDICATORS
   ======================================== */
/* Milestone Indicators */
.milestone-indicators {
    margin-top: 8px;
    padding: 0 2px;
}

.milestone {
    text-align: center;
    position: relative;
}

.milestone-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dee2e6;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin: 0 auto 2px;
    transition: all 0.3s ease;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.milestone.completed .milestone-icon {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
}

.milestone small {
    font-size: 9px;
    color: #6c757d;
    font-weight: 500;
}

.milestone.completed small {
    color: #28a745;
    font-weight: 600;
}

/* ========================================
   25. COMPONENT GRID
   ======================================== */
/* Components Grid */
.components-grid {
    min-width: 150px;
}

.component-item {
    padding: 4px 0;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.component-item:hover {
    background-color: rgba(0,0,0,0.02);
}

.component-icon {
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.component-text {
    flex-grow: 1;
    font-weight: 500;
}

/* ========================================
   26. TIMELINE BARS
   ======================================== */
/* Timeline styling */
.timeline-bar {
    height: 40px;
    background: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.timeline-progress {
    background: var(--module-primary, #800000);
    height: 100%;
    border-radius: 20px;
    position: relative;
    min-width: 20px;
    transition: width 0.6s ease;
}

/* Module-specific timeline colors */
.theme-strategies .timeline-progress { background: linear-gradient(90deg, var(--strategies-primary) 0%, #990000 100%); }
.theme-operations .timeline-progress { background: linear-gradient(90deg, var(--operations-primary) 0%, #1e5e23 100%); }
.theme-compliance .timeline-progress { background: linear-gradient(90deg, var(--compliance-primary) 0%, #1e5e23 100%); }
.theme-risks .timeline-progress { background: linear-gradient(90deg, var(--risks-primary) 0%, #a91e1e 100%); }
.theme-licenses .timeline-progress { background: linear-gradient(90deg, var(--licenses-primary) 0%, #005a4f 100%); }
.theme-policies .timeline-progress { background: linear-gradient(90deg, var(--policies-primary) 0%, #3e2186 100%); }
.theme-meetings .timeline-progress { background: linear-gradient(90deg, var(--meetings-primary) 0%, #4a332a 100%); }
.theme-incidents .timeline-progress { background: linear-gradient(90deg, var(--incidents-primary) 0%, #b33f00 100%); }
.theme-hr .timeline-progress { background: linear-gradient(90deg, var(--hr-primary) 0%, #1565c0 100%); }
.theme-planning .timeline-progress { background: linear-gradient(90deg, var(--planning-primary) 0%, #283593 100%); }
.theme-projects .timeline-progress { background: linear-gradient(90deg, var(--projects-primary) 0%, #007888 100%); }
.theme-finances .timeline-progress { background: linear-gradient(90deg, var(--finances-primary) 0%, #cc8000 100%); }

.timeline-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.timeline-info {
    min-width: 120px;
}

.timeline-bar.small {
    height: 20px;
    border-radius: 10px;
}

.timeline-bar.small .timeline-text {
    font-size: 10px;
    font-weight: 600;
}

/* Timeline details styling */
.timeline-details small {
    display: block;
}

/* ========================================
   27. ENHANCED STATUS BADGE CONTAINERS
   ======================================== */
/* Status container for badges in tables */
.status-container {
    text-align: center;
}

.status-container .badge {
    min-width: 100px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-container .badge i {
    margin-right: 4px;
}

/* ========================================
   28. DEPARTMENT/PLAN INFO CELLS
   ======================================== */
/* Department info styling */
.department-info .entity-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.department-info .entity-link:hover {
    color: var(--module-primary);
}

.department-info .entity-link i {
    margin-right: 0.5rem;
}

/* Plan/Entity info styling */
.plan-info h6,
.entity-info h6 {
    color: #2c3e50;
    margin: 0 0 0.25rem 0;
    font-weight: 600;
}

.plan-meta,
.entity-meta {
    flex-wrap: wrap;
    gap: 1rem;
}

.plan-meta small i,
.entity-meta small i {
    opacity: 0.7;
}

/* ========================================
   29. ACTION BUTTONS IN TABLES
   ======================================== */
/* Action Buttons in tables */
.action-buttons {
    text-align: center;
}

.action-buttons .btn {
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.action-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.action-buttons .btn-group-vertical {
    gap: 2px;
}

.action-buttons .btn-group-vertical .btn {
    margin-bottom: 2px;
}

/* ========================================
   30. HIGHLIGHT ROW ANIMATION
   ======================================== */
/* Highlight effect for filtered rows */
.highlight-row {
    animation: highlightPulse 2s ease-in-out;
}

@keyframes highlightPulse {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 193, 7, 0.2); }
}

/* ========================================
   31. TABLE ROW HIGHLIGHTS
   ======================================== */
/* Conditional row highlighting */
.table-warning {
    background-color: rgba(255, 193, 7, 0.1) !important;
}

.table-danger {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

.table-success {
    background-color: rgba(40, 167, 69, 0.1) !important;
}

.table-info {
    background-color: rgba(23, 162, 184, 0.1) !important;
}

/* ========================================
   32. INCIDENT-SPECIFIC STATUS BARS
   ======================================== */
/* Incident Status Bar Colors */
.status-bar-created {
    background-color: #999999;
    background-image: linear-gradient(135deg, #999999 0%, #626262 100%);
}

.status-bar-pending {
    background-color: #FFFF00;
    background-image: linear-gradient(135deg, #FFFF00 0%, #A3A300 100%);
}

.status-bar-investigating {
    background-color: #9900FF;
    background-image: linear-gradient(135deg, #9900FF 0%, #6200A3 100%);
}

.status-bar-progressing {
    background-color: #FFA500;
    background-image: linear-gradient(135deg, #FFA500 0%, #A36A00 100%);
}

.status-bar-regressing {
    background-color: #FF0000;
    background-image: linear-gradient(135deg, #FF0000 0%, #A30000 100%);
}

.status-bar-solved {
    background-color: #33FF99;
    background-image: linear-gradient(135deg, #33FF99 0%, #00A352 100%);
}

.status-bar-closed {
    background-color: #33FF33;
    background-image: linear-gradient(135deg, #33FF33 0%, #00A300 100%);
}

/* Renewal Alert Badge - Enhanced for Incidents */
.renewal-alert {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--incidents-primary);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: pulseAlert 2s infinite;
    z-index: 10;
}

@keyframes pulseAlert {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 5px rgba(230, 81, 0, 0.2);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 2px 10px rgba(230, 81, 0, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 5px rgba(230, 81, 0, 0.2);
    }
}

/* ========================================
   UNIVERSAL SCROLLABLE CONTENT SOLUTION
   Prevents cards from extending beyond footer
   ======================================== */

/* 1. Main content wrapper with proper constraints */
.content-wrapper {
    max-height: calc(100vh - 200px); /* Adjust based on header+footer height */
    overflow-y: auto;
    overflow-x: hidden;
}

.content-wrapper--dashboard {
    max-height: none;
    overflow: visible;
}

/* 2. Scrollable sidebar cards - Universal for all form sidebars */
/* IMPORTANT: This prevents cards from extending beyond footer */
.sidebar-scrollable,
.col-lg-4 .card,
.col-md-4 .card {
    max-height: 400px !important; /* Standard height for sidebar cards */
}

.sidebar-scrollable .card-body,
.col-lg-4 .card .card-body,
.col-md-4 .card .card-body {
    max-height: 340px !important; /* Account for card header */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin; /* Firefox */
}

/* Make the entire sidebar column scrollable when needed */
.col-lg-4, .col-md-4 {
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 20px;
}

/* 3. Specific fix for help/info sidebars in forms */
.form-sidebar-card,
.help-sidebar-card {
    max-height: 350px;
}

.form-sidebar-card .card-body,
.help-sidebar-card .card-body {
    max-height: 290px;
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}

/* 4. Long content areas in main sections */
.scrollable-content {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

/* 5. Detail page sidebars (like in handover details) */
.detail-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
}

/* 6. Category and item lists with many entries */
.long-list-container {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 7. Modal-like cards that shouldn't extend full height */
.limited-height-card {
    max-height: 80vh;
    overflow-y: auto;
}

/* 8. Form pages with multiple sidebar cards */
.form-page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-page-sidebar .card {
    flex-shrink: 0;
    max-height: 300px;
}

.form-page-sidebar .card .card-body {
    overflow-y: auto;
    max-height: 240px;
}

/* 9. Custom scrollbar styling for better UX */
.sidebar-scrollable .card-body::-webkit-scrollbar,
.form-sidebar-card .card-body::-webkit-scrollbar,
.help-sidebar-card .card-body::-webkit-scrollbar,
.scrollable-content::-webkit-scrollbar,
.long-list-container::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scrollable .card-body::-webkit-scrollbar-track,
.form-sidebar-card .card-body::-webkit-scrollbar-track,
.help-sidebar-card .card-body::-webkit-scrollbar-track,
.scrollable-content::-webkit-scrollbar-track,
.long-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sidebar-scrollable .card-body::-webkit-scrollbar-thumb,
.form-sidebar-card .card-body::-webkit-scrollbar-thumb,
.help-sidebar-card .card-body::-webkit-scrollbar-thumb,
.scrollable-content::-webkit-scrollbar-thumb,
.long-list-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.sidebar-scrollable .card-body::-webkit-scrollbar-thumb:hover,
.form-sidebar-card .card-body::-webkit-scrollbar-thumb:hover,
.help-sidebar-card .card-body::-webkit-scrollbar-thumb:hover,
.scrollable-content::-webkit-scrollbar-thumb:hover,
.long-list-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 10. Responsive adjustments */
@media (max-width: 992px) {
    .sidebar-scrollable,
    .col-lg-4 .card,
    .col-md-4 .card,
    .form-sidebar-card,
    .help-sidebar-card {
        max-height: none !important; /* Remove height restrictions on mobile */
    }
    
    .sidebar-scrollable .card-body,
    .col-lg-4 .card .card-body,
    .col-md-4 .card .card-body,
    .form-sidebar-card .card-body,
    .help-sidebar-card .card-body {
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    /* Reset column height on mobile */
    .col-lg-4, .col-md-4 {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

/* 11. Utility classes for manual control */
.scroll-y-auto {
    overflow-y: auto !important;
}

.scroll-y-hidden {
    overflow-y: hidden !important;
}

.max-height-300 {
    max-height: 300px !important;
}

.max-height-400 {
    max-height: 400px !important;
}

.max-height-500 {
    max-height: 500px !important;
}

.max-height-viewport {
    max-height: calc(100vh - 200px) !important;
}

/* 12. Footer clearance - ensures content doesn't overlap footer */
.main-content {
    padding-top: 0.75rem;
    padding-bottom: 80px; /* Space for footer */
    min-height: calc(100vh - 140px); /* Full height minus header/footer */
    background-color: var(--layout-page-background);
}

/* 13. Sticky elements that shouldn't push content */
.sticky-top-offset {
    position: sticky;
    top: 80px; /* Offset from top */
    z-index: 10;
}

/* End of Universal Scrollable Content Solution */

/* ========================================
   33. UNIVERSAL DETAIL PAGE COMPONENTS
   ======================================== */

/* Detail Row Component - For key-value pairs in detail pages */
.detail-row {
    display: flex;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0.5rem 0;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-weight: 600;
    flex: 0 0 40%;
    color: var(--color-dark-gray);
}

.detail-value {
    flex: 1;
}

/* Info Card Component - Enhanced card with header styling */
.info-card {
    background-color: #fff;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.info-card .card-header {
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Changed from space-between to flex-start */
    background-color: #F6EDF6;
}

.info-card .card-header i {
    margin-right: 0.5rem;
    opacity: 0.8;
}

/* RTL support for info-card icons */
[dir="rtl"] .info-card .card-header i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* When card-header has action buttons, push them to the end */
.info-card .card-header > div:last-child {
    margin-left: auto;
}

[dir="rtl"] .info-card .card-header > div:last-child {
    margin-left: 0;
    margin-right: auto;
}

/* Ensure icon color is visible when card-header has custom background color */
.info-card .card-header[style*="background-color"] i {
    color: inherit; /* Inherit the text color from parent */
    opacity: 1; /* Override the default opacity */
}

.info-card .card-body {
    padding: 1rem;
}

/* Formula Box - For displaying calculations and formulas */
.formula-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-family: 'Courier New', monospace;
    text-align: center;
    margin: 0.5rem 0;
}

/* Metric Card - Enhanced version with gradients */
.metric-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    height: 100%;
    color: white;
}

.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.metric-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 1px;
}

/* Impact/Assessment Factor Cards */
.impact-factor-card,
.assessment-factor-card {
    background-color: #fff;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
}

.impact-factor-card:hover,
.assessment-factor-card:hover {
    box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.2);
    transform: translateY(-3px);
    border-color: var(--secondary-color);
}

.impact-factor-header,
.assessment-factor-header {
    padding: 1rem;
    background-color: #f8f9fc;
    border-bottom: 2px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.impact-factor-body,
.assessment-factor-body {
    padding: 1rem;
}

.impact-factor-score,
.assessment-factor-score {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.factor-icon {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    opacity: 0.8;
}

.impact-progress,
.assessment-progress {
    height: 8px;
    margin-top: 0.75rem;
    background-color: rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}

.impact-progress-bar,
.assessment-progress-bar {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* Info Box Component - For contextual information */
.risk-tolerance-info,
.context-info-box {
    background-color: #f8f9fc;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

/* Severity and Status Badges - Universal styling */
.severity-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    display: inline-block;
    font-weight: 600;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    display: inline-block;
    font-weight: 600;
}

/* Score-based color classes (1-5 scale) */
.score-1-bg { background-color: #2e7d32; color: white; }
.score-2-bg { background-color: #689f38; color: white; }
.score-3-bg { background-color: #fbc02d; color: #212529; }
.score-4-bg { background-color: #f57c00; color: white; }
.score-5-bg { background-color: #d32f2f; color: white; }

.score-1-badge { background-color: #c8e6c9; color: #2e7d32; }
.score-2-badge { background-color: #dcedc8; color: #689f38; }
.score-3-badge { background-color: #fff9c4; color: #f9a825; }
.score-4-badge { background-color: #ffccbc; color: #e64a19; }
.score-5-badge { background-color: #ffcdd2; color: #c62828; }

/* Impact level colors */
.impact-limited { background-color: #c8e6c9; color: #2e7d32; }
.impact-low { background-color: #fff9c4; color: #f57f17; }
.impact-average { background-color: #ffcc80; color: #e65100; }
.impact-high { background-color: #ef9a9a; color: #c62828; }
.impact-critical { background-color: #b71c1c; color: #ffffff; }

/* ========================================
   34. BREADCRUMB ENHANCEMENTS
   ======================================== */

/* FontAwesome breadcrumb separators */
.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054";
    font-size: 0.7rem;
}

/* RTL breadcrumb support */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\f053";
}

/* ========================================
   35. PATIENT DASHBOARD COMPONENTS
   (Color variables --accent-dark and --accent-light
   are defined per-page in template stylesheets)
   ======================================== */

/* Dashboard Container */
.dashboard-container {
    padding: 1rem 1.5rem;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #f8f9fc;
}

/* Dashboard Page - Scopes button color overrides */
.dashboard-page .btn-primary {
    background-color: var(--accent-dark, var(--accent-dark-default)) !important;
    border-color: var(--accent-dark, var(--accent-dark-default)) !important;
}
.dashboard-page .btn-primary:hover {
    filter: brightness(0.85);
}
.dashboard-page .btn-outline-primary {
    color: var(--accent-dark, var(--accent-dark-default)) !important;
    border-color: var(--accent-dark, var(--accent-dark-default)) !important;
}
.dashboard-page .btn-outline-primary:hover {
    background-color: var(--accent-dark, var(--accent-dark-default)) !important;
    color: #fff !important;
}

/* Consolidated Stat Card */
.consolidated-stat-card {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff !important;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow);
}
.consolidated-stat-card .card-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: #5a5c69;
}
.consolidated-stat-card .stat-icon-container {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background-color: var(--accent-light, var(--accent-light-default)) !important;
}
.consolidated-stat-card .stat-icon-container i {
    color: var(--accent-dark, var(--accent-dark-default)) !important;
}
.consolidated-stat-card .card-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    color: #5a5c69;
}
.consolidated-stat-card .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    border-bottom: 1px dashed #eee;
    padding-bottom: 0.5rem;
}
.consolidated-stat-card .stat-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.consolidated-stat-card .stat-label {
    color: #858796;
    font-size: 0.85rem;
}
.consolidated-stat-card .stat-value {
    font-weight: 600;
    color: var(--accent-dark, var(--accent-dark-default)) !important;
    font-size: 1rem;
}
.consolidated-stat-card .stat-link {
    align-self: flex-end;
    margin-top: 1rem;
    color: #858796 !important;
    font-size: 0.8rem;
    transition: color 0.2s ease;
}
.consolidated-stat-card .stat-link:hover {
    color: var(--accent-dark, var(--accent-dark-default)) !important;
}

/* Stat Card Theme Variants (no top border) */
.theme-appointments,
.theme-medications,
.theme-insurance,
.theme-careteam {
    background-color: var(--color-white) !important;
    border-top: none !important;
}

/* Card Header Accent */
.card-header-accent {
    background-color: var(--accent-light, var(--accent-light-default)) !important;
    border-left: 4px solid var(--accent-dark, var(--accent-dark-default)) !important;
    border-right: none !important;
}
[dir="rtl"] .card-header-accent {
    border-right: 4px solid var(--accent-dark, var(--accent-dark-default)) !important;
    border-left: none !important;
}
.card-header-accent .card-title i {
    color: var(--accent-dark, var(--accent-dark-default)) !important;
}

/* Section Headings */
.section-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #5a5c69;
    margin: 1.5rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e3e6f0;
    display: flex;
    align-items: center;
}
.dashboard-page .section-heading i {
    margin-right: 0.75rem;
    margin-left: 0;
    color: var(--accent-dark, var(--accent-dark-default));
}
[dir="rtl"] .dashboard-page .section-heading i {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Card Title with Icon */
.card-title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}
.dashboard-page .card-title-with-icon i {
    margin-right: 0.25rem;
    margin-left: 0;
    color: var(--accent-dark, var(--accent-dark-default)) !important;
}
[dir="rtl"] .dashboard-page .card-title-with-icon i {
    margin-right: 0;
    margin-left: 0.25rem;
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 320px;
    margin-bottom: 0;
}
.chart-container--sm {
    height: 270px;
}
.chart-container--md {
    height: 280px;
}

/* Dashboard Scroll Override */
.dashboard-no-scroll,
.dashboard-no-scroll .card,
.dashboard-no-scroll .card .card-body {
    max-height: none !important;
    overflow: visible !important;
}

/* Active Medications Card */
.active-medications-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.active-medications-list {
    max-height: 280px;
    overflow-y: auto;
    padding-inline-end: 0.25rem;
}

/* Dashboard Status Badges */
.status-pending { background-color: #ffc107; color: #000; }
.status-confirmed { background-color: #17a2b8; color: #fff; }
.status-done { background-color: #28a745; color: #fff; }
.status-cancelled { background-color: #dc3545; color: #fff; }
.status-no-show { background-color: #6c757d; color: #fff; }

/* Dashboard Severity Badges */
.severity-mild { background-color: #28a745; color: #fff; }
.severity-moderate { background-color: #ffc107; color: #000; }
.severity-severe { background-color: #fd7e14; color: #fff; }
.severity-critical { background-color: #dc3545; color: #fff; }

/* Dashboard Table Styling */
.dashboard-page .table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f8f9fc;
    color: #858796;
    border-bottom-width: 1px;
    padding: 0.75rem 1rem;
}
.dashboard-page .table td {
    vertical-align: middle;
    font-size: 0.875rem;
    color: #5a5c69;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(0,0,0,.05);
}
.dashboard-page .table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.02);
}

/* Dashboard Responsive */
@media (max-width: 767.98px) {
    .dashboard-container {
        padding: 1.25rem 1rem;
    }
    .chart-container {
        height: 260px;
    }
    .section-heading {
        font-size: 1.15rem;
    }
}