/*========================================================
PART 1: SHARED APP STYLES (Sidebar, Topbar, Modals, etc.)
========================================================
        */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #f5f6fa;
            height: 100vh;
            overflow: hidden;
        }

        .app-container {
            display: flex;
            height: 100vh;
        }

        /* --- Sidebar (Shared) --- */
        .sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    background: #0b3d82;
    color: white;
    transition: width 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    
    /* NEW: Ensure footer sticks to bottom */
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom);
}
        .sidebar.collapsed { width: 60px; }
.sidebar-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 80px;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }
        
        .sidebar.collapsed .sidebar-header { 
            padding: 20px 0;
            justify-content: center;
        }

        .logo-section { 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            transition: opacity 0.2s;
        }

        .sidebar.collapsed .logo-section { 
            display: none; 
        }

        .toggle-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            position: absolute;
            right: 15px;
            top: 25px;
            z-index: 10;
        }

        .sidebar.collapsed .toggle-btn {
            right: 50%;
            transform: translateX(50%);
            background: transparent;
        }
        
        .toggle-btn:hover { background: rgba(255,255,255,0.3); }        
.logo-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.logo-icon svg { color: #667eea; width: 24px; height: 24px; }
.sidebar-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
        .logo-text h1 { font-size: 20px; font-weight: 600; margin: 0; }
        .logo-text p { font-size: 11px; opacity: 0.9; margin: 0; }
        
        /* FIX: Smooth Animation for Logo */
        .logo-text {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease-in-out, visibility 0.2s;
            white-space: nowrap;
        }
        .sidebar.collapsed .logo-text { 
            opacity: 0; 
            visibility: hidden;
            transition-delay: 0s;
        }
        .toggle-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            position: absolute;
            right: 15px;
            top: 25px;
        }

        .toggle-btn:hover { background: rgba(255,255,255,0.3); }
        .nav-menu { padding: 20px 0; flex: 1; }
        .nav-section { margin-bottom: 20px; }
        .nav-section-title {
            padding: 0 20px;
            margin-bottom: 10px;
            font-size: 11px;
            text-transform: uppercase;
            opacity: 0.7;
            letter-spacing: 1px;
            /* FIX: Smooth Animation */
            visibility: visible;
            transition: opacity 0.2s ease-in-out, visibility 0.2s;
            white-space: nowrap;
        }
        .sidebar.collapsed .nav-section-title { 
            opacity: 0; 
            visibility: hidden; 
        }
        /* --- NAV ITEM CONTAINER --- */
        .nav-item {
            display: flex;
            align-items: center;
            padding: 12px 20px;
            color: white;
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden; /* Ensure nothing spills out */
        }
        
        /* Center content when collapsed */
        .sidebar.collapsed .nav-item { 
            padding: 12px 0; 
            justify-content: center; 
        }

        .nav-item:hover { background: rgba(255,255,255,0.1); }
        .nav-item.active { background: rgba(255,255,255,0.2); }
        .nav-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: white;
        }

        /* --- ICON (Fix Margin) --- */
        .nav-icon { 
            width: 20px; 
            height: 20px; 
            margin-right: 12px; /* Gap when open */
            flex-shrink: 0; 
            transition: margin-right 0.2s; /* Smoothly remove gap */
        }
        
        /* Remove margin when collapsed so it centers perfectly */
        .sidebar.collapsed .nav-icon { 
            margin-right: 0; 
        }

        /* --- TEXT (Fix Width) --- */
        .nav-text { 
            font-size: 14px;
            opacity: 1;
            width: auto; /* Normal width */
            white-space: nowrap;
            transition: opacity 0.2s, width 0.2s; /* Animate width too */
        }

        /* Shrink text to 0 width so it doesn't push the icon */
        .sidebar.collapsed .nav-text { 
            opacity: 0;
            width: 0;
            visibility: hidden;
        }

	/* --- Sidebar Footer --- */
.sidebar-footer {
    margin-top: auto;
    /* CHANGED: Reduced 20px to 12px. 
       This moves text closer to the bottom line but keeps it safe for laptops. */
    padding: 12px 20px; 
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 11px;
    text-align: left;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
}
        
        .sidebar-footer p { margin: 0; }
        .sidebar-footer strong { color: white; font-weight: 600; }
        .sidebar-footer .copyright-text { margin-top: 4px; font-size: 10px; opacity: 0.8; }

        /* FIX: Smooth Animation for Footer & Nav Text */
        .sidebar-footer, .nav-text {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease-in-out, visibility 0.2s;
            white-space: nowrap;
        }
        .sidebar.collapsed .sidebar-footer, 
        .sidebar.collapsed .nav-text { 
            opacity: 0; 
            visibility: hidden;
        }

        /* --- Main Content (Shared) --- */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .topbar {
    background: white;
    padding: 15px 30px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
    position: sticky; /* Make it stick */
    top: 0; /* Stick to top */
    z-index: 1000; /* Above content but below modals */
}
@media (max-width: 768px) {
    .topbar {
        position: sticky !important;
        top: env(safe-area-inset-top) !important; /* Stick below notch */
        z-index: 1000 !important;
        padding: 10px 15px !important;
    }
}
        .topbar-left { display: flex; align-items: center; gap: 15px; }
        .topbar-title { font-size: 20px; font-weight: 600; color: #333; }
        .refresh-btn {
            background: #f5f6fa;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }
        .refresh-btn:hover { background: #e0e0e0; }
        .refresh-btn svg { width: 18px; height: 18px; color: #666; }

        /* --- REFRESH ANIMATION --- */
        .refresh-btn:active { transform: scale(0.95); background: #d0d0d0; }
        
        .refresh-btn.spinning { cursor: not-allowed; background: #f0f0f0; }
        .refresh-btn.spinning svg {
            animation: spin 0.8s linear infinite;
            color: #667eea;
        }
        .topbar-actions { display: flex; align-items: center; gap: 15px; }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: #f5f6fa;
            border-radius: 8px;
        }
        .user-avatar {
            width: 32px;
            height: 32px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
        }
        .user-details { display: flex; flex-direction: column; }
        .user-name { font-size: 14px; font-weight: 500; color: #333; }
        .user-role { font-size: 11px; color: #666; }
        .content-area {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    padding-bottom: 250px;
}

        /* --- Loading / Hidden (Shared) --- */
        .loading-screen {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f5f6fa;
        }
        .loading-spinner { text-align: center; }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .hidden { display: none !important; }
        
        /* --- General Purpose (Shared) --- */
        .message {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 14px;
            display: none;
        }
        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .message.show { display: block; }
        
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            min-height: 400px;
            width: 100%;
            color: #666;
        }
        .empty-state-icon { text-align: center; }
        .empty-state-icon svg {
            width: 80px;
            height: 80px;
            color: #ccc;
            margin: 0 auto 20px auto;
            display: block;
        }
        .empty-state-text {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        .empty-state-subtext { font-size: 14px; color: #999; }
        
        /* --- Responsive Media Queries (Shared) --- */
        @media (max-width: 768px) {
            .sidebar { width: 60px; }
            .sidebar .logo-text,
            .sidebar .nav-text,
            .sidebar .nav-section-title {
                display: none;
            }
            
            /* FIX: Add huge bottom padding so content scrolls above the nav bar */
            .content-area { 
                padding: 15px !important;
                padding-bottom: 150px !important; /* Extra space for scrolling */
                width: 100%;
                -webkit-overflow-scrolling: touch; /* Smooth scroll */
            }
            
            .topbar { padding: 15px 20px; }
        }

#toast-container {
    position: fixed;
    /* Position it below your 80px topbar */
    top: 95px; 
    right: 30px;
    z-index: 20000; /* <--- UPDATED: Now truly on top of everything */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
        .toast-message {
            background: white;
            padding: 16px 24px;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            /* This border is the color indicator */
            border-left: 6px solid #667eea; /* Default (info) */
            font-size: 14px;
            font-weight: 500;
            color: #333;
            /* Animation */
            animation: toast-slide-in 0.3s ease;
            transition: opacity 0.3s ease;
            opacity: 1;
            cursor: pointer;
        }

        .toast-message.success {
            border-left-color: #4caf50; /* Green */
        }
        
        .toast-message.error {
            border-left-color: #f44336; /* Red */
        }

        /* This class will be added by JS to fade out */
        .toast-message.fade-out {
            opacity: 0;
        }

        @keyframes toast-slide-in {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }


/*=====================================================
PART 2: DASHBOARD PAGE STYLES
=====================================================
        */
        .dashboard-header {
            margin-bottom: 30px;
        }
        .welcome-message {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        .welcome-subtitle {
            font-size: 14px;
            color: #666;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transition: transform 0.2s;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        .stat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .stat-card-title {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }
        .stat-card-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .stat-card-value {
            font-size: 32px;
            font-weight: 700;
            color: #333;
            margin-bottom: 8px;
        }
        .stat-card-footer {
            font-size: 12px;
            color: #888;
        }
        .section-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
        }
/* FIX: Native App Status Bar (The "Notch" Area) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top); 
    background-color: #ffffff;
    z-index: 100;
}
/* FIX: Bottom Safe Area (Home Indicator Area) */
body::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom);
    background-color: transparent; /* Changed from #f5f6fa */
    z-index: 9999;
    pointer-events: none;
}

    /* Push the topbar down so it starts AFTER the white notch strip */
    .topbar {
        margin-top: env(safe-area-inset-top);
        padding-top: 10px !important;
    }
    
    /* Ensure the sidebar stretches to the absolute bottom */
    .sidebar {
        top: env(safe-area-inset-top) !important;
        bottom: 0 !important;       /* Anchor to bottom edge */
        height: auto !important;    /* Let top+bottom define the height */
        padding-bottom: env(safe-area-inset-bottom) !important; /* Add padding so footer text isn't covered by the home bar */
    }

    /* Fix the main container background at the bottom */
.app-container {
    min-height: 100% !important;
    background: #f5f6fa !important;
}

.content-area {
    min-height: 100% !important;
    background: #f5f6fa !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 40px) !important; /* Reduced from 80px */
}
    
    /* Protect sides */
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
}

    /* Fix sidebar bottom too */
    .sidebar {
        padding-bottom: calc(env(safe-area-inset-bottom) + 50px) !important;
    }
        .actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }
        .dashboard-action-btn {
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            color: #333;
        }
        .dashboard-action-btn:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }
        .action-btn-icon {
            width: 40px;
            height: 40px;
            background: #0b3d82;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        .action-btn-text {
            font-size: 14px;
            font-weight: 500;
        }

/* --- TIMELINE SCHEDULE STYLES --- */
.timeline-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.timeline-item {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none; /* Because we might make it a link */
    color: inherit;
}

.timeline-item:hover {
    transform: translateX(4px);
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

/* Left: Date Badge */
.date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 60px;
    background: #eef2ff;
    border-radius: 10px;
    margin-right: 20px;
    color: #0b3d82;
    border: 1px solid #c7d2fe;
}

.date-day {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.date-month {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 4px;
}

/* Middle: Content */
.timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.timeline-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.timeline-subtitle {
    font-size: 13px;
    color: #666;
}

/* Right: Status Pill */
.timeline-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 15px;
}

/* Status Colors */
.status-upcoming { background: #fff8e1; color: #f57c00; border: 1px solid #ffe0b2; } /* Orange/Yellow */
.status-active { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }   /* Green */
.status-overdue { background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }  /* Red */

/* --- LIVE STATUS STYLES (New) --- */
.status-live {
    background: #ffebee;      /* Light Red Background */
    color: #d32f2f;           /* Dark Red Text */
    border: 1px solid #ffcdd2;
    display: inline-flex;     /* Align icon and text */
    align-items: center;
    gap: 6px;                 /* Space between dot and text */
    padding-left: 10px;       
    padding-right: 10px;
}

/* The Red Dot */
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #d32f2f;
    border-radius: 50%;
    display: inline-block;
    animation: live-pulse 1.5s infinite; /* The magic animation */
}

/* The Pulse Animation */
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(211, 47, 47, 0); }
    100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0); }
}

/* --- DASHBOARD SPLIT LAYOUT --- */
.dashboard-split {
    display: grid;
    grid-template-columns: 2fr 3fr; /* 40% Left (Activity), 60% Right (Schedule) */
    gap: 24px;
    margin-top: 30px;
    align-items: start;
}

@media (max-width: 1024px) {
    .dashboard-split {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
    }
}

/* --- ACTIVITY FEED STYLES --- */
.activity-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    height: 100%;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-item {
    display: flex;
    gap: 15px;
    position: relative;
    padding-bottom: 24px;
}

/* Connector Line */
.activity-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: #f0f0f0;
}

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    font-size: 14px;
}

.icon-audit { background: #e3f2fd; color: #1976d2; }
.icon-user { background: #e8f5e9; color: #2e7d32; }

.activity-content {
    flex: 1;
    margin-top: 4px;
}

.activity-text {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 4px;
}

.activity-text strong {
    font-weight: 600;
    color: #0b3d82;
}

.activity-time {
    font-size: 11px;
    color: #999;
}
        
/*=====================================================
PART 3: MY AUDITS PAGE STYLES
=====================================================
        */
        .btn-new-audit {
            background: #0b3d82;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s;
        }
        .btn-new-audit:hover {
            background: #082f63;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(11, 61, 130, 0.3);
        }
        .tabs-container {
            background: transparent; 
            box-shadow: none;
            border: none;
            overflow: visible;
            min-height: 500px;
            display: flex;
            flex-direction: column;
        }
        .tabs-header {
    display: flex;
    justify-content: space-between; /* Pushes Left group to start, Right group to end */
    align-items: center;            /* Vertically centers everything */
    border-bottom: 2px solid #e2e8f0;
    background: transparent;
    margin-bottom: 24px;
    padding: 0 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Left Side: The Tabs */
.tabs-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Right Side: Controls (Search + Filter + Button) */
.tabs-right {
    display: flex;
    flex-direction: row;    /* Force horizontal direction */
    align-items: center;    /* Center items vertically */
    gap: 8px;               /* Space between items */
    flex-wrap: nowrap;      /* CRITICAL: Prevents items from dropping to next line */
}

/* Compact Search Bar for Toolbar */
.compact-search {
    width: 200px;
    position: relative;
}
.compact-search input {
    width: 100%;
    padding: 0 35px 0 12px; /* Top/Bottom padding 0 to let height control sizing */
    font-size: 13px;
    height: 36px;           /* Fixed Height */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: none;
}
.compact-search .search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #94a3b8;
    pointer-events: none;
}

/* Compact Select Dropdown */
.compact-select {
    height: 36px !important;
    padding: 0 32px 0 12px !important; 
    line-height: 34px;
    font-size: 13px !important;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: white;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Button override to fit toolbar */
.toolbar-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;    /* Prevent text wrapping */
    display: flex;
    align-items: center;
    gap: 6px;
}
        .tab-btn {
    flex: none;
    padding: 16px 4px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
        .tab-btn:hover {
    color: #334155;
    background: transparent;
}
        .tab-btn.active {
    color: #667eea;
    background: transparent;
}
        .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #667eea;
    border-radius: 3px 3px 0 0;
}
        .tab-badge {
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s;
}
        .tab-btn.active .tab-badge {
    background: #eef2ff;
    color: #667eea;
}
        .tab-content {
            display: none;
            padding: 0;
            flex: 1;
        }
        .tab-content.active { display: flex; flex-direction: column; }
        .audits-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .audit-card {
            background: white;
            border: 2px solid #f0f0f0;
            border-left: 4px solid #ccc;
            border-radius: 12px;
            padding: 20px 24px;
            transition: all 0.3s;
            width: 100%;
        }
        .audit-card:hover {
            border-color: #667eea;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        }
        .audit-card.pending { border-left-color: #f57c00; }
        .audit-card.active { border-left-color: #4caf50; }
        .audit-card.completed { border-left-color: #2196f3; }
        .audit-card.rejected { border-left-color: #f44336; }
        .rejection-info {
            background: #ffebee;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 12px;
            border-left: 3px solid #f44336;
        }
        .rejection-info-text {
            font-size: 13px;
            color: #d32f2f;
            font-weight: 600;
        }
        .audit-card-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 0;
            flex-wrap: wrap;
        }
        .audit-card-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .audit-card-id { font-size: 12px; color: #999; }
        
        .audit-card-info {
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #f0f0f0;
        } 

        .info-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 13px;
            color: #666;
            line-height: 1.5;
        }

.info-row svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #667eea;
    margin-top: 3px; /* CRITICAL FIX: Aligns icon with first line of text */
}

.info-label {
    font-weight: 600;
    color: #333;
    width: 110px;       
    min-width: 110px;    /* CRITICAL FIX: Prevents label squishing */
    text-align: left;    
    position: relative; 
    line-height: 1.5;    /* Matches value text height */
}

.info-label::after {
    content: ':';
    position: absolute;   
    right: 0;             
}

.info-value {
    color: #666;
    flex: 1;             /* CRITICAL FIX: Ensures text wraps correctly */
    word-break: break-word; 
}

.audit-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- FIXED BUTTON STYLES (Scoped to Audit Cards) --- */

/* 1. Base Style */
.audit-card .action-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    justify-content: center;
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
    transform: translateY(0);
    will-change: transform;
}

.audit-card .action-btn svg {
    width: 16px;
    height: 16px;
}

.audit-card .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.audit-card .action-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* 2. COLOR HIERARCHY */

/* Primary (Solid Blue) */
.audit-card .btn-primary {
    background: #0b3d82;
    color: white;
    border-color: #0b3d82;
}
.audit-card .btn-primary:hover {
    background: #082f63;
    border-color: #082f63;
}

/* Danger (Light Red background for safety) */
.audit-card .btn-danger {
    background: #ffebee;
    color: #d32f2f;
    border-color: #ffcdd2;
}
.audit-card .btn-danger:hover {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

/* Success (Solid Green) - The Main Action */
.audit-card .btn-success {
    background: #4caf50;
    color: white;
    border-color: #4caf50;
}
.audit-card .btn-success:hover {
    background: #45a049;
    border-color: #45a049;
}

/* Secondary (Ghost/Gray) - Less prominent for "Edit" */
.audit-card .btn-secondary {
    background: transparent;
    color: #888;
    border-color: #e0e0e0;
}
.audit-card .btn-secondary:hover {
    background: white;
    color: #333;
    border-color: #bbb;
}

        /* --- New Audit Modal Styles --- */
        .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    
    /* NEW: Respect notch area on mobile */
    padding-top: max(env(safe-area-inset-top), 20px);
}
        .modal.show { display: flex; }
        .modal-content {
            background: white;
            border-radius: 16px;
            width: 100%;
            max-width: 1200px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        .modal-header {
            padding: 24px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
        }
        .modal-title { font-size: 20px; font-weight: 600; color: #333; }
        .modal-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.2s;
        }
        .modal-close:hover { background: #f0f0f0; }
        .modal-body {
            padding: 24px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
        .form-section { display: flex; flex-direction: column; gap: 24px; }
        .form-group { display: flex; flex-direction: column; gap: 0px; }
        .form-label { font-size: 14px; font-weight: 600; color: #333; }
        .required { color: #f44336; }
        .form-input,
        .form-select,
        .form-textarea {
            padding: 10px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
            font-family: inherit;
        }
        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: #667eea;
        }
        .form-textarea { resize: vertical; min-height: 80px; }
.info-box {
            background: #f8f9fa;
            padding: 13px 20px;
            border-radius: 10px;
            border: 1px solid #dee2e6; /* Make sure it's not border-left */
            line-height: 1.6;
        }
        .info-box-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .info-box-text { 
            font-size: 13px; 
            color: #555; 
            line-height: 1.5; 
        }

/* --- New Info Box Colors --- */
        .info-box.info-location {
            background: #eef2ff; /* Light blue */
            border-color: #c7d2fe;
        }
        .info-box.info-checklist {
            background: #f0fdf4; /* Light green */
            border-color: #bbf7d0;
        }
        .info-box.info-auditee {
            background: #f5f3ff; /* Light purple */
            border-color: #ddd6fe;
        }
        .info-box.info-team {
            background: #fffbeb; /* Light yellow/orange */
            border-color: #fde68a;
        }

        .search-box { position: relative; }
.search-input {
            width: 100%;
            /* * CHANGED: 
             * Old: padding: 10px 16px 10px 40px;
             * New: padding: 10px 40px 10px 16px; (top, right, bottom, left)
             */
            padding: 10px 40px 10px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
        }
        .search-icon {
            position: absolute;
            /* * CHANGED: 
             * Old: left: 12px;
             * New: right: 12px;
             */
            right: 12px; 
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 18px;
            color: #999;
        }        .team-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }
        .team-table thead { background: #f8f9fa; }
        .team-table th {
            padding: 10px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            border-bottom: 2px solid #e0e0e0;
        }
        .team-table td {
            padding: 12px 10px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 14px;
        }
        .team-table tbody tr:hover { background: #f8f9fa; }
        .checkbox-cell,
        .radio-cell {
            width: 80px;
            text-align: center;
        }
        .checkbox-cell input,
        .radio-cell input {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .checklist-options {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 12px;
        }
        .checklist-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .checklist-option:hover {
            border-color: #667eea;
            background: #f8f9ff;
        }
        .checklist-option input {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        .checklist-label {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            flex: 1;
        }
        .auditee-toggle {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        .toggle-option {
            flex: 1;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .toggle-option.active {
            border-color: #667eea;
            background: #f8f9ff;
            color: #667eea;
        }
        .auditee-select-box {
            width: 100%;
            min-height: 150px;
            max-height: 200px;
            padding: 8px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            overflow-y: auto;
        }
        .auditee-select-box:focus {
            outline: none;
            border-color: #667eea;
        }
        .auditee-select-box option {
            padding: 8px;
            cursor: pointer;
        }
        .modal-footer {
    padding: 16px 24px; /* Reduced from 20px to 16px */
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    background: white;
}
        .btn-modal {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-modal-cancel {
            background: white;
            color: #64748b;
            border: 2px solid #64748b;
        }
        .btn-modal-cancel:hover { background: #f8f9fa; }
        .btn-modal-submit { background: #0b3d82; color: white; }
        .btn-modal-submit:hover {
            background: #082f63;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(11, 61, 130, 0.3);
        }
        @media (max-width: 1024px) {
            .modal-body {
                grid-template-columns: 1fr;
            }
        }


/*=====================================================
PART 4: MANAGE AUDITS PAGE STYLES
=====================================================
        */
        
        /* Note: This page re-uses .tabs-container, .tab-btn, .audits-grid, 
           .audit-card, .info-row, etc. from the "My Audits" styles.
           We only add styles that are *unique* to this page. */
           
        .audit-checkbox {
            width: 20px;
            height: 20px;
            cursor: pointer;
            margin-right: 12px;
        }
        .select-all-container {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }
        .select-all-container input { width: 20px; height: 20px; cursor: pointer; }
        
        .floating-action-bar {
            position: fixed;
            bottom: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            padding: 16px 32px;
            border-radius: 12px;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
            display: flex;
            gap: 12px;
            align-items: center;
            transition: bottom 0.3s ease;
            z-index: 1000;
        }
        .floating-action-bar.show { bottom: 30px; }
        .bulk-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .bulk-btn-approve { background: #4caf50; color: white; }
        .bulk-btn-approve:hover { background: #45a049; transform: translateY(-2px); }
        .bulk-btn-reject { background: #f44336; color: white; }
        .bulk-btn-reject:hover { background: #da190b; transform: translateY(-2px); }
        .bulk-btn-cancel { background: #e0e0e0; color: #333; }
        .bulk-btn-cancel:hover { background: #d0d0d0; }

        /* Specific buttons for this page */
        .btn-approve { background: #4caf50; color: white; }
        .btn-approve:hover { background: #45a049; }
        .btn-reject { background: #f44336; color: white; }
        .btn-reject:hover { background: #da190b; }
        .btn-view { background: #667eea; color: white; }
        .btn-view:hover { background: #5568d3; }

        /* --- Delete Modal Styles --- */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            animation: fadeIn 0.2s;
        }
        .modal-overlay.show { display: block; }
        .delete-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            z-index: 9999;
            width: 90%;
            max-width: 500px;
            animation: slideUp 0.3s;
        }
        .delete-modal.show { display: block; }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideUp {
            from { transform: translate(-50%, -40%); opacity: 0; }
            to { transform: translate(-50%, -50%); opacity: 1; }
        }
        .modal-header {
            padding: 24px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .modal-icon {
            width: 48px;
            height: 48px;
            background: #ffebee;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .modal-icon svg { width: 24px; height: 24px; color: #f44336; }
        /* .modal-title is already defined in My Audits */
        .modal-body { padding: 24px; }
        .modal-warning {
            background: #fff3e0;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            gap: 12px;
            border: 1px solid #ffe0b2;
        }
        .modal-warning-icon { font-size: 24px; flex-shrink: 0; }
        .modal-warning-text {
            font-size: 14px;
            color: #e65100;
            line-height: 1.5;
        }
        .modal-warning-text strong { display: block; margin-bottom: 4px; }
        .audit-details {
            background: #f5f6fa;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .audit-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            font-size: 14px;
        }
        .audit-detail-label { color: #666; font-weight: 500; }
        .audit-detail-value { color: #333; font-weight: 600; }
        /* .modal-footer is already defined in My Audits */
        .modal-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }
        .modal-btn-cancel { background: #e0e0e0; color: #333; }
        .modal-btn-cancel:hover { background: #d0d0d0; }
        .modal-btn-delete { background: #f44336; color: white; }
        .modal-btn-delete:hover {
            background: #da190b;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
        }
        .modal-btn-delete:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }


/*=====================================================
PART 5: MANAGE USERS PAGE STYLES
=====================================================
        */
        /* Re-uses tabs styles from My Audits */
        .section-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .search-box {
            position: relative;
            flex: 1;
            min-width: 250px;
        }
        .search-box input {
            width: 100%;
            padding: 10px 40px 10px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }
        .search-box input:focus {
            outline: none;
            border-color: #667eea;
        }
        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
            width: 18px;
            height: 18px;
        }
        .filter-select {
            padding: 10px 40px 10px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 12px;
        }
        .filter-select:focus {
            outline: none;
            border-color: #667eea;
        }
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-primary { /* Shared, but used here */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        .btn-success { /* Shared, but used here */
            background: #4caf50;
            color: white;
        }
        .btn-success:hover { background: #45a049; }
        .btn-danger { /* Shared, but used here */
            background: #f44336;
            color: white;
        }
        .btn-danger:hover { background: #da190b; }
        .btn-secondary { /* Shared, but used here */
            background: #e0e0e0;
            color: #333;
        }
        .btn-secondary:hover { background: #d0d0d0; }
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        .bulk-actions {
            display: none; /* Hidden by default */
            gap: 10px;
            margin-bottom: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            align-items: center;
        }
        .bulk-actions.show { display: flex; } /* Shown via JS */
        .bulk-actions-text {
            font-size: 14px;
            color: #666;
            margin-right: auto;
        }
        .users-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed; /* Helps with consistent column widths */
        }
        .users-table thead { background: #f8f9fa; }
        .users-table th {
            padding: 12px 16px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            text-transform: uppercase;
            border-bottom: 2px solid #e0e0e0;
            white-space: nowrap;
        }
        .users-table td {
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 14px;
            color: #333;
            word-wrap: break-word; /* Prevent long text overflowing */
        }
        .users-table tbody tr:hover { background: #f8f9fa; }

        .sub-tabs-container {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f0f0f0;
            overflow-x: auto;
        }
        .sub-tab-pill {
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            border: 1px solid #e0e0e0;
            background: white;
            color: #666;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .sub-tab-pill:hover {
            background: #f8f9fa;
            border-color: #ccc;
            color: #333;
        }
        .sub-tab-pill.active {
            background: #eef2ff;
            color: #667eea;
            border-color: #667eea;
        }	

        .checkbox-cell { width: 40px; }
        .user-checkbox { width: 18px; height: 18px; cursor: pointer; }
        .user-info-cell { display: flex; align-items: center; gap: 12px; }
        .user-avatar-small {
            width: 40px;
            height: 40px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            flex-shrink: 0;
        }
.user-info-text { 
        display: flex; 
        flex-direction: column; 
        min-width: 0; /* Allows text to shrink */
    }
    .user-info-name { 
        font-weight: 600; 
        color: #333; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Adds "..." if name is too long */
    }
    .user-info-email { 
        font-size: 12px; 
        color: #666; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Adds "..." if email is too long */
    }
        .status-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
            display: inline-block;
            white-space: nowrap;
        }
        .status-pending { background: #fff3e0; color: #f57c00; }
        .status-active { background: #e8f5e9; color: #388e3c; }
        .status-rejected { background: #ffebee; color: #d32f2f; }
        .status-inactive { background: #f5f5f5; color: #757575; }
        .role-select {
            padding: 6px 32px 6px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            font-size: 13px;
            background: white;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 10px;
            max-width: 150px; /* Prevent it getting too wide */
        }

.action-buttons-icon-row {
        display: flex;
        gap: 8px;
        justify-content: flex-start; /* Aligns them to the left of the cell */
    }
    .action-btn-icon {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .action-btn-icon svg { width: 16px; height: 16px; }

    /* Color styles (re-using old names) */
    .action-btn-view { background: #e3f2fd; color: #1976d2; }
    .action-btn-view:hover { background: #bbdefb; }
    .action-btn-approve { background: #e8f5e9; color: #388e3c; }
    .action-btn-approve:hover { background: #c8e6c9; }
    .action-btn-reject { background: #ffebee; color: #d32f2f; }
    .action-btn-reject:hover { background: #ffcdd2; }

    .action-btn-deactivate { background: #fff3e0; color: #f57c00; }
    .action-btn-deactivate:hover { background: #ffe0b2; }
    .action-btn-delete { background: #ffebee; color: #d32f2f; }
    .action-btn-delete:hover { background: #ffcdd2; }
    .action-btn-reactivate { background: #e8f5e9; color: #388e3c; }
    .action-btn-reactivate:hover { background: #c8e6c9; }

        .users-table .action-btn-view { background: #e3f2fd; color: #1976d2; }
        .users-table .action-btn-view:hover { background: #bbdefb; }
        .users-table .action-btn-approve { background: #e8f5e9; color: #388e3c; }
        .users-table .action-btn-approve:hover { background: #c8e6c9; }
        .users-table .users-table .action-btn-reject { background: #ffebee; color: #d32f2f; }
        .users-table .users-table .action-btn-reject:hover { background: #ffcdd2; }
        .users-table .users-table .users-table .action-btn-deactivate { background: #fff3e0; color: #f57c00; }
        .users-table .users-table .users-table .action-btn-deactivate:hover { background: #ffe0b2; }
        .users-table .action-btn-delete { background: #ffebee; color: #d32f2f; }
        .users-table .action-btn-delete:hover { background: #ffcdd2; }
        .users-table .action-btn-reactivate { background: #e8f5e9; color: #388e3c; }
        .users-table .action-btn-reactivate:hover { background: #c8e6c9; }
        
        /* --- User Detail Modal Styles --- */
        /* .modal, .modal-content, .modal-header, .modal-title, .modal-close already defined */
        /* .modal-body also defined, but maybe needs adjustments if structure differs */
.detail-grid { /* Changed from detail-row */
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two equal columns */
            gap: 20px 30px; /* row-gap column-gap */
            padding: 0; /* Remove padding from grid */
        }
        .detail-item { /* New style for each item */
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5; /* Lighter border */
}
        /* Remove border from last two items */
        .detail-item:nth-last-child(-n+2) {
             border-bottom: none;
        }

        .detail-label {
            display: block; /* Make label take full line */
            font-size: 11px; /* Smaller label */
            font-weight: 600;
            color: #888; /* Lighter color */
            text-transform: uppercase; /* Uppercase */
            margin-bottom: 4px; /* Space below label */
            letter-spacing: 0.5px;
        }
        .detail-value {
            color: #333;
            font-size: 14px;
            font-weight: 500; /* Slightly bolder value */
            /* Status badge styling handled separately */
        }
        /* Style for the status badge inside the value */
        .detail-value .status-badge {
             margin-top: -2px; /* Align badge vertically */
        }
        @media (max-width: 768px) {
            .search-box { width: 100%; min-width: 100%; }
            .section-actions { flex-direction: column; width: 100%; }
            .filter-select { width: 100%; }
            .users-table { font-size: 12px; }
            .users-table th, .users-table td { padding: 8px; }
            /* Hide less important columns on small screens */
            .users-table th:nth-child(5), .users-table td:nth-child(5), /* District */
            .users-table th:nth-child(6), .users-table td:nth-child(6)  /* Facility */
             { display: none; }
            .users-table th:nth-child(7), .users-table td:nth-child(7)  /* Registered */
             { display: none; }
             
        }

.pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            margin-top: 10px;
            border-top: 1px solid #f0f0f0;
        }

        .pagination-info {
            font-size: 13px;
            color: #666;
        }

	.pagination-buttons {
            display: flex;
            align-items: center; 
            gap: 6px;
        }

	.page-btn {
            padding: 6px 12px; 
            border: 1px solid #e0e0e0;
            background: white;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }

        .page-btn:hover {
            background: #f5f6fa;
            border-color: #667eea;
            color: #667eea;
        }

        .page-btn.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .page-btn:disabled {
            background: #f5f6fa;
            color: #ccc;
            cursor: not-allowed;
            border-color: #f0f0f0;
        }

	.pagination-buttons span {
            padding: 0 4px; 
            color: #999; 
            font-size: 13px;
        }

/*=====================================================
PART 6: MY ACCOUNT PAGE STYLES
=====================================================
        */
        .account-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            max-width: 1400px; /* Limit width for better readability */
            margin: 0 auto; /* Center the grid */
        }
        .account-card {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 2px solid #f0f0f0;
        }
        .card-icon {
            width: 40px;
            height: 40px;
            background: #f8f9ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-icon svg {
            width: 20px;
            height: 20px;
            color: #667eea;
        }
        .card-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        .form-group { /* Re-used from My Audits Modal */
            margin-bottom: 20px;
        }
        .form-label { /* Re-used from My Audits Modal */
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        .form-input,
.form-select { /* Re-used from My Audits Modal */
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
    font-family: inherit;
    background: white;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
}
        .form-input:focus,
        .form-select:focus {
            outline: none;
            border-color: #667eea;
        }
        .form-input:disabled,
        .form-select:disabled {
            background: #f5f6fa;
            cursor: not-allowed;
            color: #999;
            border-color: #e0e0e0; /* Ensure border doesn't change color */
        }
        .password-wrapper { /* Copied from login.html */
            position: relative;
        }
        .password-toggle { /* Copied from login.html */
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #888;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .password-toggle svg { width: 20px; height: 20px; }
        .account-card .info-box { /* Re-used from My Audits Modal */
            background: #f8f9ff;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            gap: 12px;
            border: 1px solid #e0e0e0;
        }
        .info-box.warning {
            background: #fff8e6;
            border: 1px solid #ffe0b2;
            color: #e65100; /* Text color for warning */
        }
        .info-box.warning .info-box-text strong {
            color: #bf360c; /* Darker warning color for strong text */
        }
        .info-box.danger { /* Style not used in HTML, but defined */
            background: #ffebee;
            border: 1px solid #ffcdd2;
        }
        .info-box-icon { flex-shrink: 0; font-size: 18px; }
        .info-box-text { font-size: 12px; color: #666; line-height: 1.5; }
        .info-box-text strong { color: #333; }
        .password-strength {
            margin-top: 8px;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
        }
        .password-strength-bar {
            height: 100%;
            transition: all 0.3s;
            border-radius: 2px;
        }
        .strength-weak { width: 33%; background: #f44336; }
        .strength-medium { width: 66%; background: #ff9800; }
        .strength-strong { width: 100%; background: #4caf50; }
        .password-strength-text {
            font-size: 12px;
            margin-top: 4px;
            font-weight: 600;
        }
        .account-card .btn-primary { /* Re-used button style */
            background: #4caf50;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }
        .btn-primary:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }
        .btn-primary:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none; /* Remove shadow when disabled */
        }
        .status-badge { /* Re-used from Manage Users */
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        /* Status badge colors already defined */

        @media (max-width: 1024px) {
            .account-grid {
                grid-template-columns: 1fr;
            }
        }

/*=====================================================
PART 7: AUDIT WORKSPACE PAGE STYLES
=====================================================
        */
        .back-btn { /* Style for the 'Back' button in topbar */
            background: #f5f6fa;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            display: inline-flex; /* Use inline-flex */
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            transition: all 0.3s;
            text-decoration: none; /* Add this */
        }
        .back-btn:hover { background: #e0e0e0; }
        .back-btn svg { width: 16px; height: 16px; }

/* Inline collaboration warning inside checklists section */
/* Inline collaboration warning inside checklists section */
.collaboration-warning-inline {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 3px solid #ef4444;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #991b1b;
    line-height: 1.5;
}

.collaboration-warning-inline svg {
    color: #ef4444;
}
        .collaboration-info { display: flex; align-items: center; gap: 12px; }
        .collaboration-text h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
        .collaboration-text p { font-size: 13px; opacity: 0.9; }

        .audit-header {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
        .audit-header-top {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f0f0;
        }
        .audit-title-section h1 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
        .audit-id { font-size: 14px; color: #666; font-weight: 500; }

        .audit-status-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    /* Colors set dynamically by JS */
}
        .audit-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px 20px; /* row-gap column-gap */
        }
        .detail-item { display: flex; flex-direction: column; gap: 4px; }
        .detail-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.detail-value { font-size: 15px; color: #333; font-weight: 500; }

        .detail-value { font-size: 15px; color: #333; font-weight: 500; }

        .score-section {
            background: white;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        .score-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .score-title { font-size: 18px; font-weight: 600; color: #333; }
        .score-display { display: flex; align-items: center; gap: 30px; flex-wrap: wrap;}
        .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            flex-shrink: 0;
        }
        .score-value { font-size: 36px; font-weight: 700; }
        .score-label { font-size: 12px; opacity: 0.9; }
        .score-breakdown { flex: 1; min-width: 200px;}
        .score-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
        .score-row:last-child { border-bottom: none; }
        .score-row-label { font-size: 14px; color: #666; }
        .score-row-value { font-size: 16px; font-weight: 600; color: #333; }
        .progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; margin-top: 16px; }
        .progress-fill { height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); transition: width 0.5s ease; }

        .action-buttons { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
        
        .btn { 
            padding: 10px 20px; 
            border-radius: 8px; 
            font-size: 14px; 
            font-weight: 600; 
            cursor: pointer; 
            /* FIX 1: Specific Transition (No 'all') */
            transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
            display: inline-flex; 
            align-items: center; 
            gap: 8px; 
            text-decoration: none;
            /* FIX 2: Solid Border structure */
            border: 2px solid transparent;
            transform: translateY(0);
            will-change: transform;
        }
        
        .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
        .btn svg { width: 18px; height: 18px; }

        /* FIX 3: Solid Blue (Matches your new theme) */
        .btn-primary { background: #0b3d82; color: white; border-color: #0b3d82; }
        .btn-primary:hover:not(:disabled) { background: #082f63; border-color: #082f63; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(11, 61, 130, 0.3); }

        /* Solid Green */
        .btn-success { background: #4caf50; color: white; border-color: #4caf50; }
        .btn-success:hover:not(:disabled) { background: #45a049; border-color: #45a049; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); }

        /* Standard Outline (Gray) for Exit */
        .btn-outline { background: white; border-color: #e0e0e0; color: #333; }
        .btn-outline:hover:not(:disabled) { background: #fff; border-color: #999; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

        .checklists-section {
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 24px; /* Add margin if needed */
        }
        .section-header-with-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;}
        /* --- SECTION TITLE (Matches Rumusan Markah) --- */
.section-title {
    font-size: 18px;
    font-weight: 700;
    color: #0b3d82; /* Dark Blue */
    margin: 0;      /* Flexbox handles the spacing */
    display: flex;
    align-items: center;
    gap: 12px;      /* Space between line and text */
}

/* The Blue Accent Line */
.section-title::before {
    content: '';
    display: block;
    width: 6px;
    height: 24px;
    background: #667eea; /* Accent Blue */
    border-radius: 4px;
}
        .bulk-actions-bar {
            display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;
        }
        .bulk-actions-bar.hidden { display: none; }
        .selected-count { font-size: 14px; font-weight: 600; color: #667eea; margin-right: 10px; }
        .bulk-btn {
            padding: 6px 16px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s;
        }
        .bulk-approve { background: #d4edda; color: #155724; }
        .bulk-approve:hover { background: #c3e6cb; }
        .bulk-reject { background: #f8d7da; color: #721c24; }
        .bulk-reject:hover { background: #f5c6cb; }
        .table-container { 
            overflow-x: auto; 
            border-radius: 8px; 
            border: 1px solid #e0e0e0;
        }
        
        .checklists-table { 
            width: 100%; 
            border-collapse: collapse;
            background: white;
            font-size: 13px;
        }
        
        .checklists-table thead { 
            background: #f9f9f9;
        }
        
        .checklists-table th {
            padding: 12px 8px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #222;
            border-bottom: 1px solid #ddd;
            white-space: normal;
            vertical-align: bottom;
        }
        
        .checklists-table th.checkbox-col,
        .checklists-table th.num-col {
            text-align: center;
        }
        
        .checklists-table th.name-col {
            text-align: left;
        }
        
        .checklists-table th.status-col,
        .checklists-table th.score-col,
        .checklists-table th.action-col {
            text-align: center;
        }
        
        .checklists-table tbody tr {
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.2s;
        }
        
        .checklists-table tbody tr:hover {
            background: #fafafa;
        }
	/* Special styling for fixed form rows (Pengenalan & Penemuan) */
.checklists-table tbody tr.fixed-form-row {
    background: #eef2ff;
    border-left: 3px solid #667eea;
}

.checklists-table tbody tr.fixed-form-row:hover {
    background: #e0e7ff;
}

.checklists-table tbody tr.fixed-form-row .checklist-name-cell {
    font-weight: 700;
    color: #4338ca;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklists-table tbody tr.fixed-form-row .form-icon {
    font-size: 16px;
    flex-shrink: 0;
}        
        .checklists-table td {
            padding: 10px 8px;
            border-bottom: 1px solid #f0f0f0;
            color: #333;
            vertical-align: middle;
        }
	.checklists-table td {
            padding: 10px 8px;
            border-bottom: 1px solid #f0f0f0;
            color: #333;
            vertical-align: middle;
        }
        
        .checklists-table td.checkbox-col,
        .checklists-table td.num-col {
            text-align: center;
        }
        
        .checklists-table td.name-col {
            text-align: left;
        }
        
        .checklists-table td.status-col,
        .checklists-table td.score-col {
            text-align: center;
        }
        
        .checklists-table td.action-col {
            text-align: center;
        }
        .checkbox-col { width: 50px; text-align: center; }
        .num-col { width: 40px; text-align: center; }
        .name-col { width: 35%; text-align: left; }
        .status-col { width: 150px; text-align: center; }
        .score-col { width: 150px; text-align: center; }
        .action-col { width: 150px; text-align: center; }
        .table-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: #0b3d82; }
        .checklist-name-cell { font-weight: 600; color: #333; }
.action-buttons-cell {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center; /* Center the buttons */
}
.checklists-table .action-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    min-width: 90px;
}
        /* --- TABLE ACTION BUTTON COLORS --- */
        
        /* Primary (Start/Edit) - Blue */
        .checklists-table .action-btn-primary { 
            background: #0b3d82; 
            color: white; 
            border: 2px solid #0b3d82;
        }
        .checklists-table .action-btn-primary:hover { 
            background: #082f63; 
            border-color: #082f63;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(11, 61, 130, 0.2);
        }

        /* Success (Approve) - Green */
        .checklists-table .action-btn-success { 
            background: #4caf50; 
            color: white; 
            border: 2px solid #4caf50;
        }
        .checklists-table .action-btn-success:hover { 
            background: #45a049; 
            border-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
        }

        /* Danger (Reject) - Red */
        .checklists-table .action-btn-danger { 
            background: #f44336; 
            color: white; 
            border: 2px solid #f44336;
        }
        .checklists-table .action-btn-danger:hover { 
            background: #d32f2f; 
            border-color: #d32f2f;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(244, 67, 54, 0.2);
        }

        /* Secondary (View) - Ghost Gray */
        .checklists-table .action-btn-secondary { 
            background: white; 
            color: #555; 
            border: 2px solid #e0e0e0;
        }
        .checklists-table .action-btn-secondary:hover { 
            background: #f8f9fa; 
            border-color: #b0b0b0;
            color: #333;
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        /* Badges - Simple and compact */
        .badge { 
            display: inline-block; 
            padding: 4px 10px; 
            border-radius: 12px; 
            font-size: 11px; 
            font-weight: 600;
        }
        .badge-success { 
            background: #e8f5e9;
            color: #2e7d32;
        }
        .badge-warning { 
            background: #fff3e0;
            color: #e65100;
        }
        .badge-info { 
            background: #e3f2fd;
            color: #1565c0;
        }
        .badge-error { 
            background: #ffebee;
            color: #c62828;
        }
        .badge-pending { 
            background: #fffbeb;
            color: #92400e;
        }

        /* Modals (Pengenalan, Penemuan, Bulk Confirm) */
        .modal { /* Shared modal base from My Audits/Manage Users */
            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); animation: fadeIn 0.3s;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .modal.show { display: flex; justify-content: center; align-items: center; }
        .modal-content { /* Shared */
            background: white; border-radius: 12px; width: 90%; max-width: 700px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); animation: slideUp 0.3s;
        }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-small { max-width: 500px; }

.audit-modal-large {
    max-width: 1000px !important;
    width: 95% !important;
}

.audit-modal-large .modal-header {
    padding: 32px 40px;
}

.audit-modal-large .modal-header h2,
.audit-modal-large .modal-header .modal-title {
    font-size: 24px;
}

.audit-modal-large .modal-body {
    padding: 40px;
}

.audit-modal-large .modal-footer {
    padding: 20px 40px;
    gap: 16px;
}

.audit-modal-large .form-section {
    gap: 32px;
    margin-bottom: 40px;
}

.audit-modal-large .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #0b3d82;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 24px;
}

.audit-modal-large .form-input,
.audit-modal-large .form-select,
.audit-modal-large .form-textarea {
    padding: 14px 16px;
    min-height: 48px;
}

.audit-modal-large .form-group {
    margin-bottom: 20px;
}

.modal-header { /* Shared */

            display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; background: white; z-index: 10;
        }
         .modal-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: #333; }
        .modal-close { /* Shared */
            background: none; border: none; font-size: 28px; color: #999; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: all 0.3s;
        }
        .modal-close:hover { background: #f0f0f0; color: #333; }
        .modal-body { /* Shared */ padding: 24px; }
        .modal-footer { /* Shared */
            display: flex; justify-content: flex-end; gap: 12px; padding: 24px; border-top: 1px solid #e0e0e0; position: sticky; bottom: 0; background: white; z-index: 10;
        }
        /* Form group styles reused */
        .form-group textarea {
             width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 80px; transition: border-color 0.3s;
        }
        .form-group textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
        .char-count { text-align: right; font-size: 12px; color: #999; margin-top: 4px; }
        .penemuan-item { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-start; }
        .penemuan-item textarea { flex: 1; }
        .btn-remove-item {
            padding: 8px 16px; background: #ef4444; color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s; white-space: nowrap; margin-top: 5px; /* Align better with textarea */
        }
        .btn-remove-item:hover { background: #dc2626; }
.btn-add-item {
    padding: 8px 16px;
    background: #2196f3;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    align-self: flex-start;
}
        .btn-add-item:hover { background: #1976d2; }
        .btn-add-item:disabled { background: #ccc; cursor: not-allowed; }
        .btn-cancel { /* Shared modal button */
            padding: 10px 24px; background: white; color: #64748b; border: 2px solid #64748b; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s;
        }
        .btn-cancel:hover { background: #f8f9fa; border-color: #475569; }
        .btn-save { /* Shared modal button */
            padding: 10px 24px; background: #0b3d82; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s;
        }
        .btn-save:hover { background: #082f63; }
        /* New Draft Button Style */
.btn-draft {
    padding: 10px 24px; 
    background: #ffffff; 
    color: #0b3d82; 
    border: 2px solid #0b3d82; 
    border-radius: 8px; 
    font-size: 14px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s;
}
.btn-draft:hover { background: #eef2ff; }
        
        @media (max-width: 768px) {
             .audit-details-grid { grid-template-columns: 1fr; }
             .score-display { flex-direction: column; gap: 20px; align-items: stretch; }
             .action-buttons { flex-direction: column; }
             .btn { width: 100%; justify-content: center; }
             .checklists-grid { grid-template-columns: 1fr; } /* If using grid, otherwise ignore */
             .section-header-with-actions { flex-direction: column; align-items: flex-start; }
             .bulk-actions-bar { width: 100%; margin-top: 10px; }
             /* Table responsiveness: Hide less critical columns */
             .checklists-table th:nth-child(4), /* Score */
             .checklists-table td:nth-child(4) { display: none; }
        }

/* --- Adjust Pengenalan Modal Layout --- */
#pengenalanModal .modal-content {
    max-width: 800px; /* Slightly wider modal if needed */
}

#pengenalanModal .modal-body {
    display: block; /* Override any potential grid/flex layout */
}

#pengenalanModal .modal-body .form-group {
    width: 100%; /* Ensure form groups take full width */
    margin-bottom: 15px; /* Ensure vertical spacing */
}

#pengenalanModal .modal-body .form-group:last-child {
    margin-bottom: 0; /* Remove margin below the last item */
}

#pengenalanModal .form-group textarea {
    min-height: 120px; /* Ensure textareas have enough height */
}
#penemuanModal .modal-content {
    max-width: 800px;
}

#penemuanModal .modal-body {
    display: block;
}

#penemuanModal .modal-body .form-group {
    width: 100%;
    margin-bottom: 24px;
}

#penemuanModal .modal-body .form-group:last-child {
    margin-bottom: 0;
}

#penemuanModal .penemuan-item textarea,
#penemuanModal #rumusanKesimpulan {
    min-height: 120px;
}

#penemuanModal .penemuan-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
}

#penemuanModal .penemuan-item textarea {
    flex-grow: 1;
}

/* --- WORKSPACE SPLIT HEADER --- */
.workspace-top-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .workspace-top-grid {
        grid-template-columns: 1fr;
    }
}

/* Adjust cards to fit the grid */
.workspace-top-grid .audit-header,
.workspace-top-grid .score-section {
    margin-bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-icon-wrapper {
    width: 48px;
    height: 48px;
    background: #eef2ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    margin-right: 16px;
    flex-shrink: 0;
}

/* --- SUMMARY TABLE STYLES (Report Style) --- */
.summary-section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 24px;
    overflow-x: auto;
    border: 1px solid #e0e0e0;
}

.summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header */
.summary-table thead th {
    background-color: #f9f9f9;
    color: #222;
    font-weight: 600;
    padding: 12px 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    white-space: normal;
    vertical-align: bottom;
}
.summary-table thead th.col-name { text-align: left; }

/* Body Rows */
.summary-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

/* Group Header Row */
.summary-table .row-group-header td {
    background-color: #fff;
    font-weight: 700;
    color: #000;
    padding: 12px 8px;
    text-align: left;
    border-top: 1px solid #e0e0e0;
}

/* Active Data Row (Cream Color) */
.summary-table .row-active td {
    background-color: #fffbea; /* Light Cream */
    color: #333;
    padding: 10px 8px;
    vertical-align: middle;
}

/* Inactive/Empty Row (Grey & Italic) */
.summary-table .row-inactive td {
    background-color: #fff;
    color: #999;
    font-style: italic;
    padding: 10px 8px;
    vertical-align: middle;
}

/* Specific Column Tweaks */
.summary-table .col-num { width: 40px; text-align: center; }
.summary-table .col-name { width: 35%; text-align: left; } /* Reduced from default */
.summary-table .col-data { width: 150px; text-align: center; } /* Increased from 120px */

/* Bold Values */
.summary-table .val-bold { font-weight: 700; color: #000; }

/* Footer Row (Total) */
.summary-table tfoot td {
    background-color: #fff5f5; /* Light Pinkish bg */
    color: #000;
    font-weight: 700;
    padding: 16px 8px;
    border-top: 2px solid #ffcdd2;
    font-size: 14px;
    text-transform: uppercase;
}

/* Final Score Red */
#totalWeightedScore {
    color: #d32f2f;
    font-size: 16px;
}

/*=====================================================
PART 8: CHECKLIST EXECUTION PAGE STYLES (ISOLATED)
=====================================================*/

/* --- Header Row with Buttons --- */
.execution-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
/* FIX: Show ALL Table Columns (Enable Scrolling) */
    .users-table th:nth-child(n), 
    .users-table td:nth-child(n) {
        display: table-cell !important; /* Force all columns to show */
    }

/* --- New Title Area Styles --- */
.execution-title-area {
    flex-grow: 1; /* Allow it to take up space */
    padding-right: 20px; /* Space before action buttons */
}
.execution-title {
    font-size: 20px; /* Adjust size */
    font-weight: 600;
    color: #212529;
    margin: 0 0 4px 0;
    line-height: 1.3;
}
.execution-subtitle {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
    line-height: 1.3;
}

.execution-header-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0; /* Prevent buttons shrinking too much */
}

/* --- Action Buttons (Save, Submit, Back) --- */
.btn-execution {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none; /* For back button */
}

/* Hide Save/Submit buttons by default to prevent flash */
#executionSaveBtn,
#executionSubmitBtn {
    display: none !important;
}

/* Only show if explicitly enabled by JavaScript */
#executionSaveBtn.show-btn,
#executionSubmitBtn.show-btn {
    display: inline-flex !important;
}
.btn-execution svg {
    width: 18px;
    height: 18px;
}
.btn-execution:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Specific button colors */
.btn-save-blue { background: #2196f3; }
.btn-save-blue:hover:not(:disabled) { background: #1976d2; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3); }
.btn-submit-green { background: #0b3d82; }
.btn-submit-green:hover:not(:disabled) { background: #082f63; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(11, 61, 130, 0.3); }
.btn-back { background: #f1f3f5; color: #495057; border: 1px solid #dee2e6; }
.btn-back:hover { background: #e9ecef; border-color: #ced4da; }

/* --- New Score Summary Card Styles --- */
.score-summary-card {
    background: #fff; /* White background */
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 10px; /* Remove margin, details sit below */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer; /* Make the whole card clickable */
    transition: box-shadow 0.2s;
    border: 1px solid #e9ecef; /* Subtle border */
}
.score-summary-card.bg-needs-improvement {
    background: #ffebee;
    border-color: #f5c6cb;
}
.score-summary-card.bg-satisfactory {
    background: #fff8e1;
    border-color: #ffecb3;
}
.score-summary-card.bg-excellent {
    background: #e8f5e9;
    border-color: #c8e6c9;
}

.score-summary-card.bg-needs-improvement .score-status,
.score-summary-card.bg-satisfactory .score-status,
.score-summary-card.bg-excellent .score-status {
    color: #333;
}

.score-summary-card.bg-needs-improvement .score-points,
.score-summary-card.bg-satisfactory .score-points,
.score-summary-card.bg-excellent .score-points {
    color: #555;
}

.score-summary-card.bg-needs-improvement .score-toggle-area,
.score-summary-card.bg-satisfactory .score-toggle-area,
.score-summary-card.bg-excellent .score-toggle-area {
    color: #444;
}
.score-summary-card.bg-needs-improvement .score-toggle-icon,
.score-summary-card.bg-satisfactory .score-toggle-icon,
.score-summary-card.bg-excellent .score-toggle-icon {
     color: #444;
}
.score-summary-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.score-summary-line {
    display: flex;
    align-items: baseline; /* Align text baselines */
    gap: 12px;
    flex-wrap: wrap; /* Allow wrapping if needed */
}

.score-percentage {
    font-size: 26px; /* Adjust size */
    font-weight: 700;
    line-height: 1;
    /* Color set by JS */
}
/* Color classes for score */
.score-color-red { color: #e03131; }
.score-color-orange { color: #f59f00; }
.score-color-green { color: #2f9e44; }

.score-status {
    font-size: 16px; /* Adjust size */
    font-weight: 500;
    color: #495057;
}

.score-points {
    font-size: 13px;
    color: #868e96;
}

.score-toggle-area {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6c757d;
    font-size: 13px;
    font-weight: 500;
}
.score-toggle-icon {
    width: 16px;
    height: 16px;
    color: #6c757d;
    transition: transform 0.3s;
}
.score-toggle-icon.expanded {
     transform: rotate(180deg);
}

/* --- Style Expanded Details --- */
.score-details-expanded {
    background: #f8f9fa; /* Light grey background */
    border: 1px solid #e9ecef;
    border-top: none; /* Remove top border, connects to card */
    padding: 20px 24px;
    border-bottom-left-radius: 8px; /* Match card radius */
    border-bottom-right-radius: 8px;
    margin-top: 0; /* Remove top margin */
    margin-bottom: 20px; /* Space below expanded details */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) inset; /* Subtle inner shadow */
}
.score-details-expanded.hidden {
    display: none;
}
.score-details-header-simple { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.score-details-title-simple { font-size: 15px; font-weight: 600; margin: 0; color: #333; }

/* Section Breakdown Grid */
.section-breakdown-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.section-card { background: white; padding: 16px; border-radius: 8px; border-left: 5px solid; transition: all 0.3s; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.section-card:hover { transform: none; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.section-card.red-border { border-left-color: #ff6b6b; }
.section-card.orange-border { border-left-color: #ffa500; }
.section-card.green-border { border-left-color: #51cf66; }
.section-name { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 8px; line-height: 1.4; }
.section-percentage { font-size: 28px; font-weight: 700; margin-bottom: 6px; line-height: 1; }
.section-percentage.red-text { color: #ff6b6b; }
.section-percentage.orange-text { color: #ffa500; }
.section-percentage.green-text { color: #51cf66; }
.section-points { font-size: 12px; color: #666; margin-bottom: 2px; }
.section-questions { font-size: 11px; color: #999; }

/* --- Section Tabs --- */
.execution-tabs-container { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; margin-bottom: 0; /* Tabs touch Mark All bar */ }
.execution-tabs-wrap { display: flex; flex-wrap: wrap; background: #f8f9fa; padding: 6px; gap: 4px; border-bottom: 1px solid #dee2e6; }
.execution-tab { padding: 8px 14px; border: 1px solid #dee2e6; background: #ffffff; font-size: 12px; font-weight: 500; color: #495057; cursor: pointer; transition: all 0.2s ease-in-out; border-radius: 6px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.execution-tab:hover { background: #e9ecef; border-color: #ced4da; color: #212529; }
.execution-tab.active-execution-tab { background: #0b3d82; color: white; border-color: #0b3d82; font-weight: 600; box-shadow: 0 2px 4px rgba(11, 61, 130, 0.2); }

/* --- Mark All Bar --- */
.mark-all-bar { background: #f8f9fa; padding: 10px 16px; border-radius: 0; /* Remove radius */ margin-top: 0; /* Touch tabs */ margin-bottom: 12px; display: flex; align-items: center; gap: 8px; box-shadow: none; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; flex-wrap: wrap; }
.mark-all-label { font-size: 13px; font-weight: 600; color: #495057; margin-right: 6px; }
.mark-all-btn { padding: 6px 14px; border: 1px solid #ced4da; background: white; border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; min-width: auto; color: #495057; line-height: 1; }
.mark-all-btn:hover { border-color: #adb5bd; background: #e9ecef; }
.mark-all-btn.reset-btn { background: #f44336; color: white; border-color: #f44336; }
.mark-all-btn.reset-btn:hover { background: #d32f2f; border-color: #d32f2f; }

/* --- Content Area --- */
.execution-content { padding: 0; /* Remove padding, question cards have margin */ min-height: 400px; }
/* --- NEW: Hybrid Navigation Styles --- */
.level-1-tabs {
    display: flex;
    overflow-x: auto;
    background: white;
    /* Sticky positioning to keep locations visible while scrolling */
    position: sticky;
    top: 0;
    z-index: 5; 
}

.level-1-tabs .execution-tab {
    background: white;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font-weight: 700;
    color: #555;
    font-size: 14px;
    padding: 12px 20px;
    margin-right: 0;
    transition: all 0.2s;
    white-space: nowrap;
}

.level-1-tabs .execution-tab:hover {
    background: #f8f9fa;
    color: #0b3d82;
}

.level-1-tabs .execution-tab.active-execution-tab {
    background: transparent;
    color: #0b3d82;
    border-bottom-color: #0b3d82;
    box-shadow: none;
}

/* Adjust the sub-tabs (Sections) to look like pills below the main tabs */
.level-2-tabs {
    padding: 10px 0 15px 0;
    background: #f5f6fa; /* Match body background */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.level-2-tabs .execution-tab {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px; /* Pill shape */
    color: #666;
    font-weight: 500;
    font-size: 12px !important;
    padding: 6px 16px !important;
    margin-bottom: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.level-2-tabs .execution-tab.active-execution-tab {
    background: #0b3d82;
    color: white;
    border-color: #0b3d82;
    box-shadow: 0 2px 5px rgba(11, 61, 130, 0.2);
}
.execution-section { display: none; }
.execution-section.active-execution-section { display: block; }

/* --- Question Card (3-Column Layout 45/20/35 with Lines) --- */
.execution-question { background: #f8f9fa; border: 1px solid #e0e0e0; border-left: 5px solid #6c757d; border-radius: 8px; padding: 20px; margin-bottom: 6px; /* Reduced gap between cards */ transition: background-color 0.3s, border-color 0.3s; display: grid; grid-template-columns: 45% 20% 35%; align-items: start; min-height: 150px; /* Adjusted minimum height */ }
/* Score Background & Border Colors */
.execution-question.score-null { background: #f8f9fa; border-left-color: #6c757d; }
.execution-question.score-0 { background: #ffebee; border-left-color: #f44336; }
.execution-question.score-1 { background: #fff8e1; border-left-color: #ffb300; }
.execution-question.score-2 { background: #e8f5e9; border-left-color: #4caf50; }
.execution-question.score-tb { background: #f5f5f5; border-left-color: #9e9e9e; }
/* Column Styles */
.question-column-1, .question-column-2, .question-column-3 { display: flex; flex-direction: column; gap: 16px; padding-right: 16px; padding-left: 16px; height: 100%; }
.question-column-1 { padding-left: 0; }
.question-column-3 { padding-right: 0; }
/* Vertical Lines */
.question-column-1, .question-column-2 { border-right: 1px solid #dee2e6; }
/* Align Score Area to Bottom */
.question-column-1 .score-area { margin-top: auto; }
/* Column 1 Content */
.question-header-inline { display: flex; align-items: start; gap: 12px; }
.question-number { background: #6c757d; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.execution-question.score-0 .question-number { background: #f44336; }
.execution-question.score-1 .question-number { background: #ffb300; }
.execution-question.score-2 .question-number { background: #4caf50; }
.execution-question.score-tb .question-number { background: #9e9e9e; }
.question-text-with-help { flex: 1; padding-top: 6px; }
.question-text { font-size: 14px; font-weight: 600; color: #333; line-height: 1.5; margin-bottom: 0; }
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #6c757d; color: white; border-radius: 50%; font-size: 12px; font-weight: 700; cursor: pointer; margin-left: 6px; transition: all 0.3s; vertical-align: middle; }
.help-icon:hover { background: #5a6268; transform: scale(1.1); }
.score-area-label { display: block; font-size: 13px; font-weight: 600; color: #495057; margin-bottom: 8px; }
.score-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.score-button { padding: 8px 16px; border: 1px solid #ced4da; background: white; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; min-width: 40px; text-align: center; color: #495057; }
.score-button:hover:not(.selected) { border-color: #adb5bd; background: #e9ecef; }
.score-button.selected { background: #0b3d82; border-color: #0b3d82; color: white; }
/* Column 2 Content */
.upload-btn { padding: 10px 16px; border: none; background: #0b3d82; border-radius: 6px; font-size: 13px; font-weight: 600; color: white; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; align-self: flex-start; }
.upload-btn:hover:not(:disabled) { background: #082f63; }
.upload-btn:disabled { background: #adb5bd; cursor: not-allowed; opacity: 0.7; }
.upload-note { font-size: 11px; color: #6c757d; margin-top: -8px; }
.image-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.image-preview-item { position: relative; width: 80px; height: 80px; border-radius: 6px; overflow: hidden; border: 2px solid #e0e0e0; cursor: pointer; transition: all 0.3s; }
.image-preview-item:hover { border-color: #667eea; box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); }
.image-preview-img { width: 100%; height: 100%; object-fit: cover; }
.image-delete-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; background: rgba(244, 67, 54, 0.9); color: white; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.3s; }
.image-delete-btn:hover { background: #d32f2f; transform: scale(1.1); }
/* Column 3 Content */
.finding-textarea { width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 6px; font-size: 12px; font-family: inherit; resize: vertical; min-height: 120px; transition: all 0.3s; background: white; }
.finding-textarea:focus { outline: none; border-color: #667eea; }
.char-counter { text-align: right; font-size: 11px; color: #999; margin-top: 4px; }

/* --- Responsive Adjustments for Question Card --- */
@media (max-width: 992px) {
    .execution-question { grid-template-columns: 1fr; gap: 20px; padding-left: 15px; padding-right: 15px; min-height: auto; /* Reset min-height */ }
    .question-column-1, .question-column-2, .question-column-3 { padding-left: 0; padding-right: 0; }
    .question-column-1, .question-column-2 { border-right: none; }
    .question-column-1 .score-area { margin-top: 0; /* Don't force bottom align when stacked */ }
}

/* --- Help Tooltip Modal --- */
.help-tooltip-modal { position: fixed; z-index: 10000; left: 50%; top: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; padding: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); max-width: 400px; width: 90%; }
.help-tooltip-content { position: relative; }
.help-tooltip-close { position: absolute; top: -10px; right: -10px; background: #ff6b6b; color: white; border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.help-tooltip-close:hover { background: #ff5252; transform: scale(1.1); }
.help-tooltip-modal p { margin: 0; font-size: 14px; color: #333; line-height: 1.6; }

/* --- Modal for Image Preview --- */
.modal-execution { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); align-items: center; justify-content: center; }
.modal-execution.show { display: flex; }
.modal-execution-content { background: white; border-radius: 12px; max-width: 90%; max-height: 90%; position: relative; padding: 20px; }
.modal-execution-content img { max-width: 100%; max-height: 80vh; display: block; border-radius: 8px; }
.modal-execution-close { position: absolute; top: -40px; right: 0; background: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.modal-execution-close:hover { background: #f44336; color: white; }

/* --- Warning Modal --- */
.modal-execution-small { max-width: 500px; padding: 0; }
.modal-execution-header { padding: 24px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 12px; }
.modal-icon-warning { font-size: 32px; }
.modal-execution-header h3 { margin: 0; font-size: 20px; color: #333; }
.modal-execution-body { padding: 24px; }
.modal-execution-body p { margin: 0 0 12px 0; font-size: 14px; color: #666; line-height: 1.6; }
.modal-execution-body p:last-child { margin-bottom: 0; }
.modal-execution-footer { padding: 20px 24px; border-top: 1px solid #e0e0e0; display: flex; justify-content: flex-end; gap: 12px; }
.btn-modal-cancel { padding: 10px 20px; background: #e0e0e0; color: #333; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.btn-modal-cancel:hover { background: #d0d0d0; }
.btn-modal-secondary { padding: 10px 20px; background: white; color: #f44336; border: 2px solid #f44336; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.btn-modal-secondary:hover { background: #ffebee; }
.btn-modal-primary { padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.btn-modal-primary:hover { background: #5568d3; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); }

/* --- Empty State (if needed) --- */
.execution-empty-state { text-align: center; padding: 60px 20px; color: #999; }
.execution-empty-state h3 { font-size: 18px; color: #666; margin-bottom: 8px; }
.execution-empty-state p { font-size: 14px; }


/*=====================================================
PART 9: CAPA PAGE STYLES
=====================================================*/

.capa-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.capa-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column; /* Stack header and body */
    overflow: hidden;
    border-top: 4px solid #0b3d82;
    transition: all 0.2s ease;
}

/* Accordion Header */
.capa-accordion-header {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    cursor: pointer;
    background: white;
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s;
}
.capa-accordion-header:hover {
    background-color: #f8f9fa;
}
.capa-card.expanded .capa-accordion-header {
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

/* Header Content Styling */
.acc-id { 
    font-weight: 700; 
    color: #0b3d82; 
    width: 60px; 
    flex-shrink: 0; 
}
.acc-info { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 2px;
    min-width: 0; /* Allows truncation */
    margin-right: 20px;
}
.acc-checklist { 
    font-size: 11px; 
    color: #888; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    font-weight: 600;
}
.acc-criterion { 
    font-size: 14px; 
    color: #333; 
    font-weight: 500;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.acc-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}
.acc-chevron {
    color: #999;
    transition: transform 0.3s ease;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.capa-card.expanded .acc-chevron {
    transform: rotate(180deg);
}

/* Accordion Body (The Split View) */
.capa-accordion-body {
    display: none; /* Hidden by default */
    grid-template-columns: 1fr 1fr; /* Equal width split as requested */
}
.capa-card.expanded .capa-accordion-body {
    display: grid;
}

/* Mobile Fix for Accordion */
@media (max-width: 900px) {
    .capa-card.expanded .capa-accordion-body {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .acc-criterion {
        white-space: normal; /* Allow wrap on mobile */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .acc-meta {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
}

/* --- Status Colors --- */
.capa-card.status-pending-verification { border-top-color: #f57c00; } /* Orange */
.capa-card.status-rejected { border-top-color: #f44336; } /* Red */
.capa-card.status-closed { border-top-color: #4caf50; } /* Green */


.capa-finding-section {
    padding: 24px;
    background: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.capa-response-section {
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.capa-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 12px;
}

.finding-info-item {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}
.finding-info-label {
    font-weight: 600;
    color: #111;
    display: block;
    margin-bottom: 2px;
}
.finding-info-text {
    background: #ebeef2;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    word-wrap: break-word;
    
    /* FIX: Prevent Mobile Font Boosting */
    max-height: 99999px; /* Trick to prevent font boosting on some browsers */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.finding-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
}
.finding-evidence-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #ddd;
    cursor: pointer;
}
.finding-evidence-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.finding-evidence-item.no-evidence {
    background: #f0f0f0;
    color: #999;
    font-size: 11px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
}

.response-status-badge {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
.response-status-badge.status-open { background: #eef2ff; color: #0b3d82; border: 1px solid #c7d2fe; }
.response-status-badge.status-pending-verification { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.response-status-badge.status-rejected { background: #ffebee; color: #d32f2f; border: 1px solid #f5c6cb; }
.response-status-badge.status-closed { background: #f0fdf4; color: #155724; border: 1px solid #bbf7d0; }

.response-info-item {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 12px;
}
.response-info-label {
    font-weight: 600;
    color: #111;
    display: block;
    margin-bottom: 4px;
}
.response-info-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    
    /* FIX: Prevent Mobile Font Boosting */
    max-height: 99999px;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
.response-info-date {
    font-style: italic;
    color: #0b3d82;
    font-weight: 500;
}
.rejection-notes-box {
    background: #ffebee;
    border: 1px solid #f5c6cb;
    border-left: 4px solid #f44336;
    padding: 12px 16px;
    border-radius: 6px;
}
.rejection-notes-box .response-info-label { color: #d32f2f; }
.rejection-notes-box .response-info-text { color: #721c24; }

.capa-actions {
    margin-top: auto; /* Pushes to bottom */
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 12px;
}

/* --- CAPA Modals --- */
/* We can re-use .modal, .modal-content, .modal-header, .modal-body, .modal-footer */
/* We will make a new large variant */
.modal-content.capa-modal-large {
    max-width: 900px;
}

.capa-modal-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0;
    padding: 0;
}

.capa-modal-finding-preview {
    background: #f8f9fa;
    padding: 24px;
    border-right: 1px solid #e0e0e0;
    max-height: 75vh;
    overflow-y: auto;
}

.capa-modal-form {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

.capa-modal-form .form-group {
    margin-bottom: 16px;
}
.capa-modal-form .form-label {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.capa-modal-form .form-textarea {
    min-height: 100px;
}

.capa-upload-btn {
    padding: 24px 16px;
    border: 2px dashed #2196f3;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2196f3;
    cursor: pointer;
    transition: all 0.3s;
    display: flex; /* Changed from inline-flex */
    flex-direction: column; /* Stack icon and text */
    align-items: center;
    justify-content: center;
    gap: 12px; /* Space between icon and text */
    width: 100%;
    min-height: 150px; /* Give it a set minimum height */
}
.capa-upload-btn svg {
    width: 24px; /* Reduced to standard icon size */
    height: 24px;
    stroke-width: 2;
    margin-bottom: 4px; /* Optional: adds a little space between icon and text */
}
.capa-upload-btn:hover { background: #bbdefb; border-style: solid; }
.capa-upload-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.capa-image-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.capa-image-preview-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #e0e0e0;
}
.capa-image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.capa-image-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(244, 67, 54, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s;
}
.capa-image-delete-btn:hover { background: #d32f2f; }

/* Responsive */
@media (max-width: 900px) {
    /* 1. Dashboard Card Stack */
    .capa-card {
        grid-template-columns: 1fr;
    }
    .capa-finding-section {
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    /* 2. CAPA Modal - Single Scroll View Fix */
    .capa-modal-body {
        display: block !important; /* Stack vertically */
        height: auto !important;
        overflow-y: auto !important; /* Allow this container to scroll */
        -webkit-overflow-scrolling: touch; /* Smooth scroll */
        flex: 1; /* Take remaining space in modal */
    }

    /* 3. Unlock Finding Preview (Top Section) */
    .capa-modal-finding-preview {
        max-height: none !important; /* Remove height limit */
        height: auto !important;
        overflow: visible !important; /* Remove internal scrollbar */
        border-right: none !important;
        
        /* Visual separation */
        border-bottom: 8px solid #f0f2f5 !important; 
        padding-bottom: 20px !important;
    }

    /* 4. Unlock Form (Bottom Section) */
    .capa-modal-form {
        max-height: none !important; /* Remove height limit */
        height: auto !important;
        overflow: visible !important; /* Remove internal scrollbar */
        padding-top: 20px !important;
        padding-bottom: 40px !important; /* Extra space at bottom */
    }
}

/*=====================================================
PART 10: CAPA DASHBOARD STYLES
=====================================================*/

.capa-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.capa-audit-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
    border-top: 4px solid #0b3d82; /* Blue border */
}

.capa-audit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.capa-audit-card-body {
    padding: 24px;
    flex-grow: 1;
}

.capa-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.capa-card-subtitle {
    font-size: 13px;
    color: #777;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 16px;
}
.capa-card-subtitle strong {
    color: #333;
}

.capa-card-stats {
    display: flex;
    justify-content: space-around;
    gap: 16px;
    margin-bottom: 24px;
}

.capa-stat-item {
    text-align: center;
}

.capa-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #0b3d82;
}
.capa-stat-value.danger {
    color: #d32f2f;
}
.capa-stat-value.warning {
    color: #f57c00;
}
.capa-stat-value.success {
    color: #388e3c;
}

.capa-stat-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    text-transform: uppercase;
}

.capa-audit-card-footer {
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #e0e0e0;
}

.capa-card-link {
    background: #0b3d82;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s;
    width: 100%;
}
.capa-card-link:hover {
    background: #082f63;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 61, 130, 0.2);
}



/* =========================================================
   FIX: ALIGN ACTION BUTTONS LEFT (AUDIT WORKSPACE)
   ========================================================= */

/* 1. Align the table cell and header to the left */
.checklists-table th.action-col,
.checklists-table td.action-col {
    text-align: left !important;
    padding-left: 16px; /* Add some spacing from the vertical line */
}

/* 2. Align the flex container holding the buttons to the start */
.action-buttons-cell {
    justify-content: flex-start !important;
}

/* Mobile Menu Button Styles */
.mobile-menu-btn {
    display: none; /* Hidden on desktop by default */
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 0;
    margin-right: 15px;
}

/* Show it ONLY on mobile */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block; /* Visible on mobile */
    }
}

/* ========================================================
   FIX: Sidebar Header Spacing
   ======================================================== */
.logo-text {
    display: flex;
    flex-direction: column; /* Ensure they stack vertically */
    justify-content: center;
}

.logo-text h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2; /* Increases space inside the title line */
}

.logo-text p {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 4px; /* Adds physical space between Title and Version */
    font-weight: 500;
    line-height: 1;
}

/* ========================================================
   MOBILE OPTIMIZATION
   ======================================================== */
@media (max-width: 768px) {

    /* 1. LAYOUT & SIDEBAR - Turn sidebar into an overlay menu */
    .app-container {
        position: relative; /* Establish context for absolute positioning */
    }

    .sidebar {
    position: fixed;
    top: 0 !important;
    left: 0;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 99999;
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.sidebar .sidebar-footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
    margin-top: auto !important;
}

    /* Class to slide sidebar in */
    .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* Force show logo and text on mobile sidebar */
    .sidebar .logo-text,
    .sidebar .nav-text, 
    .sidebar .logo-section {
        display: flex !important;
    }

    /* 2. TOPBAR ADJUSTMENTS */
    .topbar {
        padding: 10px 15px;
        min-height: 60px;
        gap: 10px;
    }
    
    .topbar-title {
        font-size: 16px; /* Smaller font */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    .user-info {
        padding: 4px; /* Save space */
    }
    .user-details {
        display: none; /* Hide Name/Role on mobile to save space */
    }

    /* 3. CONTENT AREA */
.content-area {
    padding: 15px !important;
    padding-bottom: 280px !important;
    width: 100%;
}

    /* 4. DASHBOARD STATS */
    .stats-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 15px;
    }

    .dashboard-split {
        grid-template-columns: 1fr; /* Stack Activity and Schedule */
    }

    /* 5. TABLES (Allow horizontal scrolling) */
    .table-container, 
    #pendingUsersContainer, 
    #activeUsersContainer, 
    #inactiveUsersContainer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        display: block;
        width: 100%;
    }

    /* Ensure tables don't squish */
    .checklists-table, .users-table {
        min-width: 600px; /* Force minimum width so scroll triggers */
    }

    /* 6. MODALS - Strict Lock & Compact UI (Combined Fix) */
    
    /* 1. Lock the Background Overlay */
    .modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;   /* Prevent background scrolling */
        overscroll-behavior: none;     /* Stop rubber-banding */
        padding: 0 !important;
        margin: 0 !important;
        align-items: flex-end !important; /* Align to bottom */
        z-index: 9999 !important;
    }

    /* 2. Lock the Content Box to Screen Size */
    .modal-content, 
    .audit-modal-large,
    .capa-modal-large {
        width: 100vw !important;       /* Force exact Viewport Width */
        height: 100% !important;       /* Force Full Height */
        max-width: 100vw !important;   /* Do not exceed screen width */
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex;
        flex-direction: column;
        overflow: hidden !important;   /* Hide outer overflow */
    }

    /* 3. Header Styling */
    .modal-header {
        padding: 12px 16px !important;
        flex-shrink: 0;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 4. Body Locking (The most important part) */
    .modal-body {
        padding: 16px !important;
        
        /* Layout */
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr !important; /* Force stack */
        gap: 12px !important;
        
        /* Scroll Locking */
        overflow-y: auto !important;   /* Scroll Vertically */
        overflow-x: hidden !important; /* CRITICAL: Cut off horizontal overflow */
        overscroll-behavior: contain;  /* Keep scroll inside modal */
        flex-grow: 1;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. Fix the "Audit Team" table causing the wobble */
    /* This targets the scrollable div inside the modal body */
    .modal-body div[style*="overflow-y: auto"] {
        max-width: 100% !important;
        overflow-x: auto !important; /* Allow table to scroll internally */
        border: 1px solid #eee !important;
    }

    /* 6. Footer Styling */
.modal-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #eee;
}

    /* 7. Compact Form Spacing */
    .form-section {
        gap: 15px !important;
        margin-bottom: 0 !important;
    }
    .audit-modal-large .form-section {
        margin-bottom: 20px !important;
    }
    .info-box {
        margin-bottom: 12px !important;
        padding: 10px !important;
    }
    .section-title {
        margin-bottom: 10px !important;
        font-size: 16px !important;
    }

    /* 7. AUDIT WORKSPACE & CARDS */
    .workspace-top-grid {
        grid-template-columns: 1fr; /* Stack Header and Score */
    }

    .score-display {
        flex-direction: column;
        text-align: center;
    }

    .audit-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .audit-card-actions {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }
    
    .audit-card .action-btn {
        flex: 1; /* Make buttons expand to fill width */
    }

    /* 8. EXECUTION PAGE (Questions) */
    .execution-question {
        grid-template-columns: 1fr; /* Stack columns */
        padding: 15px;
    }
    
    .question-column-1, 
    .question-column-2 {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .score-buttons {
        justify-content: center; /* Center score buttons */
    }
    
    .finding-textarea {
        min-height: 100px;
    }
    
    /* 9. TABS */
    .tabs-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .tabs-left {
        width: 100%;
        overflow-x: auto; /* Scrollable tabs */
        padding-bottom: 5px;
    }
    
    .tabs-right {
        width: 100%;
        flex-direction: column;
        align-items: stretch; /* Stretch inputs */
    }
    
    .compact-search, .compact-select {
        width: 100% !important;
    }
}

/* ========================================================
   MOBILE TWEAKS: Hide Grey Scrollbars (Tables & Tabs)
   ======================================================== */
@media (max-width: 768px) {
    /* Target EVERY scrollable element on mobile */
    * {
        /* Hide scrollbar for Firefox */
        scrollbar-width: none !important;  
        
        /* Hide scrollbar for IE, Edge */
        -ms-overflow-style: none !important;  
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* ========================================================
   MOBILE TWEAKS: Compact UI (Fix Gaps & Padding)
   ======================================================== */
@media (max-width: 768px) {

    /* 1. Tighten the main screen edges & GLOBAL LIFT FIX */
    .content-area {
        /* Lock the Top and Sides to 10px */
        padding-top: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        
        /* THE MAGIC FIX: 
           Calculates the device's safe area (notch/home bar) 
           + 120px of raw clearance space. 
           This pushes ALL content on ALL pages up above the nav bar. */
        padding-bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
        
        /* Ensure smooth scrolling behavior */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Reduce gap between cards in grids */
    .stats-grid,
    .dashboard-split,
    .audits-grid,
    .capa-dashboard-grid,
    .capa-grid {
        gap: 10px !important; /* Bring cards closer together */
        margin-top: 15px !important;
    }

    /* 3. Dashboard Stats Cards: Slim down */
    .stat-card {
        padding: 16px !important; /* Reduce internal padding from 24px */
    }
    .stat-card-value {
        font-size: 26px !important; /* Slightly smaller text to fit better */
    }

    /* 4. Audit, CAPA & Account Cards: Slim down */
    .audit-card,
    .capa-audit-card,
    .account-card, /* <-- Added this */
    .checklists-section,
    .score-section,
    .audit-header {
        padding: 16px !important;
        margin-bottom: 12px !important;
    }

    /* 5. CHECKLIST EXECUTION SPECIFIC FIXES */
    .execution-question {
        padding: 12px !important; /* Tighter card padding */
        gap: 10px !important;     /* Reduce gap between internal sections */
    }

    /* Remove the huge spaces between Question -> Upload -> Comment sections */
    .question-column-1, 
    .question-column-2, 
    .question-column-3 {
        padding: 0 !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid #eee; /* Add subtle separator line */
        border-right: none !important; /* Kill the desktop vertical line */
    }

    /* Remove border/spacing from the last column (Comments) */
    .question-column-3 {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Fix the "Mark All" bar spacing */
    .mark-all-bar {
        padding: 8px !important;
        gap: 5px !important;
    }
    
    /* Make buttons full width on mobile for easier tapping */
    .action-buttons .btn,
    .audit-card-actions .action-btn {
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
    }

    /* FIX: Stop iPhone Auto-Zoom on inputs */
    input, select, textarea, .form-group input, .search-input {
        font-size: 16px !important;
    }

    /* FIX: Audit Card Label Alignment (Even gaps) */
    .info-row {
        align-items: flex-start !important; /* Align to top */
    }

    .info-label {
        width: 100px !important;     /* Fixed width */
        min-width: 100px !important; /* Prevent shrinking */
        flex-shrink: 0 !important;   /* CRITICAL: Stops the squishing */
        margin-right: 5px !important;
    }

    .info-value {
        flex: 1; /* Allow value to wrap */
        word-break: break-word; /* Prevent long words breaking layout */
    }

    /* FIX: Checklist Execution Header & Buttons (Stack them) */
    .execution-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .execution-header-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important; /* Stack buttons vertically */
        gap: 10px !important;
    }

    .execution-header-actions .btn-execution {
        width: 100% !important; /* Full width buttons */
        justify-content: center !important;
    }
}

/* ========================================================
   FINAL POLISH: Native App Feel (Global)
   ======================================================== */

/* 1. Remove the blue tap highlight on mobile (Android/iOS) */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 2. Prevent accidental text selection on UI elements */
.sidebar, 
.topbar, 
.btn, 
.nav-item, 
.card-title, 
.stat-card-title,
.header,
.mobile-menu-btn {
    user-select: none;
    -webkit-user-select: none; /* Safari */
}

/* 3. Add "Tactile" feedback when tapping buttons/cards */
/* This makes buttons shrink slightly when pressed, like a real app */
.btn:active, 
.action-btn:active, 
.nav-item:active, 
.stat-card:active,
.mobile-menu-btn:active {
    transform: scale(0.97);
    opacity: 0.8;
    transition: transform 0.1s;
}

/* 4. iPhone Notch Support (Safe Areas) */
/* Ensures the top bar doesn't go under the camera on newer iPhones */
.topbar {
    padding-top: env(safe-area-inset-top);
    height: auto; 
    min-height: 70px; /* Ensure enough height with the notch */
}

/* Ensure sidebar starts below the notch too */
.sidebar {
    padding-top: env(safe-area-inset-top);
}

/* 5. Smooth Scrolling Momentum */
body, .content-area, .sidebar {
    -webkit-overflow-scrolling: touch;
}

/* ========================================================
   CRITICAL FIX: Stop Screen Sliding & Fix Table Scroll
   ======================================================== */

/* 1. LOCK SCREEN: Stop Swipe-Back & Bounce */
html, body {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; 
    overscroll-behavior: none !important; 
    touch-action: pan-y !important; /* ✅ Allow vertical scrolling */
    position: fixed !important; 
}

/* 🔧 FIX: Allow content-area to scroll freely on mobile */
@media (max-width: 768px) {
    .content-area {
        touch-action: auto !important; /* ✅ Override the pan-y restriction */
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        position: relative !important; /* ✅ Not fixed */
    }
    
    .main-content {
        touch-action: auto !important; /* ✅ Allow all touch gestures */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* 2. BOTTOM SAFE AREA FIX FOR PWA */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .content-area {
        padding-bottom: calc(env(safe-area-inset-bottom) + 120px) !important;
    }
    
    .sidebar {
        padding-bottom: calc(env(safe-area-inset-bottom) + 40px) !important;
    }
}
/* 2. BUT allow specific Table Containers to slide internally */
@media (max-width: 768px) {
    
    /* Force these specific containers to handle the wide tables */
    #pendingUsersContainer, 
    #activeUsersContainer, 
    #inactiveUsersContainer,
    .table-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important; /* Forces it to fit screen width */
        overflow-x: auto !important; /* Enables internal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iPhone */
    }

    /* Ensure the table itself is allowed to be wide */
    /* FIX: Table Overlap & Scrolling */
    .users-table, 
    .checklists-table {
        min-width: 900px !important; /* Force it WIDER so columns don't overlap */
        width: auto !important;
    }

    /* Prevent text wrapping inside cells */
    .users-table th, .users-table td {
        white-space: nowrap !important;
        padding: 12px 15px !important; /* More breathing room */
    }
}

    /* FIX: Remove Blue Focus Glow on Mobile Inputs */
    input:focus, 
    select:focus, 
    textarea:focus, 
    button:focus {
        outline: none !important;
        /* Your CSS already handles border-color, so this just cleans up the glow */
    }

    /* FIX 2: Session Timeout Modal Specific Styles */
    #sessionTimeoutModal,
    #sessionErrorModal {
        /* Extremely high Z-Index to ensure it covers other open modals */
        z-index: 99999 !important; 
        background: rgba(0,0,0,0.85); /* Darker backdrop for emphasis */
    }

    #sessionCountdown {
        font-variant-numeric: tabular-nums; /* Prevents numbers from jumping while ticking */
        letter-spacing: 2px;
    }

/* --- FIX: Mobile PTT Button Stability --- */
.voice-btn {
    /* Critical: Stops browser from trying to scroll/zoom while holding */
    touch-action: none !important; 
    /* Critical: Prevents "Select Text" / Copy menu from popping up */
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important; /* iOS Context Menu disable */
}


/* --- AI Auto-Scorer Bubble --- */
.ai-suggestion-box {
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 12px;
    display: none; /* Hidden by default */
    animation: slideDown 0.3s ease-out;
    border-left: 4px solid; /* Status bar */
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* 🟢 Green: Praise (Good) */
.ai-suggestion-box.success {
    background: #f0fdf4;
    border-color: #4caf50;
    color: #15803d;
}

/* 🟡 Yellow: Nudge (Okay) */
.ai-suggestion-box.warning {
    background: #fefce8;
    border-color: #fbbf24;
    color: #854d0e;
}

/* 🔴 Red: Critical (Bad) */
.ai-suggestion-box.error {
    background: #fef2f2;
    border-color: #ef4444;
    color: #991b1b;
}

/* ⚫ Grey: TB (Not Applicable) */
.ai-suggestion-box.neutral {
    background: #f3f4f6; /* Light Grey Bg */
    border-color: #6b7280; /* Dark Grey Border */
    color: #1f2937; /* Dark Text */
}
.ai-suggestion-box.neutral .ai-apply-btn {
    background: #4b5563; /* Grey Button */
}

.ai-suggestion-box.show {
    display: block;
}

.ai-suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-weight: 700;
}

.ai-reason {
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 500;
}

.ai-apply-btn {
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.2s;
    margin-top: 4px;
}
.ai-apply-btn:hover { opacity: 0.9; }

/* Button Colors */

/* 🟢 Green: Success (Score 2) */
.ai-suggestion-box.success .ai-apply-btn { 
    background: #4caf50; 
    color: white;
}

/* 🟡 Yellow: Warning (Partial/Grammar check) */
.ai-suggestion-box.warning .ai-apply-btn { 
    background: #f59e0b; 
    color: white;
}

/* 🔴 Red: Error (Score 0) - FORCE SHOW & RED */
.ai-suggestion-box.error .ai-apply-btn { 
    display: block !important; /* Override the default hide */
    background: #ef4444; 
    color: white;
}
.ai-suggestion-box.error .ai-apply-btn:hover { 
    background: #dc2626; 
}

/* ⚫ Grey: Neutral (Score TB) */
.ai-suggestion-box.neutral .ai-apply-btn { 
    display: block !important;
    background: #6b7280; 
    color: white;
}
.ai-suggestion-box.neutral .ai-apply-btn:hover { 
    background: #4b5563; 
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- NEW GMAIL-STYLE CHIPS UI --- */
.chip-input-container {
    position: relative;
    margin-bottom: 15px;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 0 0 8px 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
}
.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid #f5f6fa;
    transition: background 0.2s;
}
.autocomplete-item:hover {
    background: #f0f7ff;
    color: #0b3d82;
}
.chips-area {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
}
.user-chip {
    display: inline-flex;
    align-items: center;
    background: #f0f2f5;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
    color: #333;
    transition: all 0.2s;
}
.user-chip.is-lead {
    background: #e3f2fd;
    border-color: #667eea;
    color: #0b3d82;
    font-weight: 600;
    padding-left: 8px;
}
.chip-avatar {
    width: 20px;
    height: 20px;
    background: #ccc;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-right: 8px;
    font-weight: bold;
}
.is-lead .chip-avatar {
    background: #667eea;
}
.chip-actions {
    display: flex;
    align-items: center;
    margin-left: 8px;
    gap: 4px;
}
.chip-btn {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    border: none;
    background: none;
    padding: 2px;
    display: flex;
}
.chip-btn:hover { opacity: 1; }
.chip-crown { color: #f59e0b; } /* Gold crown */
.chip-crown.inactive { color: #ccc; filter: grayscale(100%); }
.chip-remove { color: #ff4d4f; }