/* =========================================================
   🎨 DOS Brand Design System (Dashboard Gradient Theme)
   ========================================================= */
:root {
    /* --- DOS BRAND COLORS --- */
    --brand-blue: #0078D7;       /* DOS Logo Primary Blue */
    --brand-dark: #121212;       /* DOS Logo Black */
    --dashboard-blue-dark: #0B63A8; /* Darker blue from dashboard gradient */
    
    /* --- THEME GRADIENTS (From Dashboard) --- */
    --bg-gradient-light: linear-gradient(135deg, #E6F0F8 0%, var(--dashboard-blue-dark) 100%);
    --bg-gradient-dark: linear-gradient(135deg, #0b1220 0%, #071a2d 100%);

    /* Functional Palette */
    --primary-color: var(--brand-blue);
    --primary-hover: #005a9e;    
    --secondary-color: #767676;  /* DOS Grey */
    
    /* Semantic */
    --success-color: #107c10;
    --danger-color: #d13438;
    --warning-color: #ffb900;
    
    /* LIGHT MODE DEFAULTS */
    --bg-current: var(--bg-gradient-light);
    --card-bg: rgba(255, 255, 255, 0.95); /* High opacity glass */
    --card-border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* HEADER: DOS Logo Blue */
    --header-bg: var(--brand-blue);
    --header-text: #ffffff;
    
    /* Text */
    --text-main: #201f1e;
    --text-muted: #605e5c;
    --border-color: #e1dfdd;
    
    /* UI */
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.1); /* Deeper shadow for floating effect */
}

/* 🌙 DARK MODE */
body.dark-mode {
    --bg-current: var(--bg-gradient-dark);
    --card-bg: rgba(30, 30, 35, 0.85); /* Dark Glass */
    --card-border: 1px solid rgba(255, 255, 255, 0.08);
    
    /* Header blends with dark theme but keeps blue accents */
    --header-bg: rgba(30, 30, 35, 0.95);
    --header-text: #ffffff;
    
    --text-main: #f3f3f3;
    --text-muted: #a19f9d;
    --border-color: #444;
    
    --primary-hover: #4ba6ff;
}

/* =========================================================
   📦 Layout & Typography
   ========================================================= */
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg-current);
    background-attachment: fixed; /* Keeps gradient fixed while scrolling */
    background-size: cover;
    color: var(--text-main);
    margin: 0;
    padding-bottom: 40px;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- HEADER (DOS Blue) --- */
.dashboard-header {
    background-color: var(--header-bg);
    color: var(--header-text);
    padding: 1rem 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.logo-area h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white !important;
}

/* Header Buttons */
.btn-header {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.btn-header:hover {
    background: #fff;
    color: var(--brand-blue);
}

/* --- INFO BAR --- */
.info-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.info-pill {
    background: var(--card-bg);
    border: var(--card-border);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
}

.info-pill i { color: var(--primary-color); }

/* --- MAIN CARD (Glass Effect) --- */
.modern-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    backdrop-filter: blur(12px); /* Strong glass blur */
    -webkit-backdrop-filter: blur(12px);
}

.card-header-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

/* =========================================================
   📊 Data Tables
   ========================================================= */
.table-container {
    overflow-x: auto;
}

.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.custom-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-color);
    font-weight: 700;
}

.custom-table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.custom-table tr:last-child td { border-bottom: none; }

.custom-table tbody tr:hover {
    background-color: rgba(0, 120, 215, 0.05); /* Subtle blue highlight */
}

/* =========================================================
   🔘 Components
   ========================================================= */
/* Search */
.search-wrapper { position: relative; width: 300px; max-width: 100%; }
.search-wrapper i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted);
}
.form-control-search {
    width: 100%;
    padding: 0.6rem 1rem 0.6rem 2.4rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.5); /* Semi-transparent input */
    color: var(--text-main);
    outline: none;
    transition: all 0.2s;
}
.form-control-search:focus {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.15);
}

/* Buttons */
.btn-action {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.btn-action:hover { background: rgba(0,0,0,0.05); color: var(--primary-color); }
.btn-action.delete:hover { background: #fff1f0; color: var(--danger-color); }

.btn-primary-custom {
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0, 120, 215, 0.2);
}
.btn-primary-custom:hover { 
    background-color: var(--primary-hover); 
    color: #fff;
    transform: translateY(-1px);
}

/* Avatar */
.avatar-circle {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700;
    font-size: 1rem;
    /* Gradient Button feel */
    background: linear-gradient(135deg, var(--brand-blue), #005a9e);
    box-shadow: 0 4px 10px rgba(0, 120, 215, 0.3);
}

/* Role Dropdown */
.role-select-wrapper select {
    padding: 0.4rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: rgba(255,255,255,0.5);
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
}

/* Actions Menu */
.dropdown-menu-custom {
    display: none;
    position: absolute;
    right: 0; top: 100%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: var(--radius-md);
    z-index: 100;
    min-width: 180px;
    padding: 0.5rem 0;
}
.dark-mode .dropdown-menu-custom { background: #2a2a2a; }

.dropdown-menu-custom.show { display: block; }
.dropdown-menu-custom a {
    display: block;
    padding: 0.6rem 1.2rem;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.9rem;
}
.dropdown-menu-custom a:hover {
    background: rgba(0, 120, 215, 0.08);
    color: var(--primary-color);
}
/* =========================================================
   🚦 Queue System Specific Styles (Restored & Modernized)
   ========================================================= */

/* Ticket Card Styling */
.ticket {
    width: 100%;
    max-width: 350px;
    margin: 20px auto;
    padding: 25px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(12px);
}

.ticket h2 {
    color: var(--brand-blue);
    font-weight: 800;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.ticket p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* Status Badges for Queue */
.badge-status {
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-pending { background: #e3f2fd; color: #0d6efd; }
.badge-progress { background: #fff3cd; color: #856404; }
.badge-completed { background: #d1e7dd; color: #0f5132; }
.badge-rejected { background: #f8d7da; color: #842029; }

/* Queue Nav Tabs (Glass Style) */
.queue-tabs {
    border-bottom: 1px solid var(--border-color);
    padding: 0 1rem;
    background: rgba(0,0,0,0.02);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.queue-tabs .nav-link {
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    padding: 1rem 1.5rem;
    background: transparent;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.queue-tabs .nav-link:hover {
    color: var(--brand-blue);
    background: rgba(0, 120, 215, 0.05);
}

.queue-tabs .nav-link.active {
    color: var(--brand-blue);
    background: transparent;
    border-bottom: 3px solid var(--brand-blue);
}

/* Modal Bottom Right Fix */
.modal-dialog-bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    margin: 0;
    width: 350px;
    z-index: 1060;
}
/* =========================================================
   📅 Meeting Dashboard Specifics (Standardized Blue Theme)
   ========================================================= */

/* 1. Stats Cards (Matches Standard Card Style) */
.stat-card-glass {
    background: var(--card-bg); /* Uses standard card background */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    height: 100%;
    backdrop-filter: blur(12px);
}
.stat-card-glass:hover { transform: translateY(-3px); }

.stat-content h3 { font-size: 1.8rem; font-weight: 800; margin: 0; color: var(--text-main); }
.stat-content p { margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 2. Live Pulse Animation (Green) */
.status-live {
    width: 10px; height: 10px;
    background-color: #27ae60;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(39, 174, 96, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 174, 96, 0); }
}

/* 3. Status Badges */
.status-badge {
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 5px;
}
.status-badge.success { background: rgba(16, 185, 129, 0.1); color: #059669; }
.status-badge.warning { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.status-badge.danger  { background: rgba(239, 68, 68, 0.1);  color: #dc2626; }
.status-badge.neutral { background: rgba(107, 114, 128, 0.1); color: #4b5563; }
/* =========================================================
   👁️ View Meeting Page Specifics
   ========================================================= */

/* --- Meeting Log / Chat --- */
.log-message {
    margin-bottom: 0.75rem; 
    padding: 0.75rem; 
    border-radius: 8px; 
    background: rgba(255,255,255,0.5); 
    border-left: 4px solid rgba(0,0,0,0.1); 
    transition: all 0.2s; 
    position: relative;
}
.dark-mode .log-message { 
    background: rgba(0,0,0,0.2); 
    border-left-color: rgba(255,255,255,0.1); 
}
.log-message:hover { 
    background: rgba(255,255,255,0.8); 
    transform: translateX(5px); 
}
.dark-mode .log-message:hover { 
    background: rgba(0,0,0,0.4); 
}

/* Create Task Button (Hidden until hover) */
.btn-create-task { 
    font-size: 0.7rem; 
    position: absolute; 
    right: 10px; 
    top: 10px; 
    opacity: 0; 
    transition: 0.2s; 
}
.log-message:hover .btn-create-task { 
    opacity: 1; 
}

/* Scrollable Log Container */
.log-container-scroll {
    max-height: 500px; 
    overflow-y: auto;
}

/* --- Agenda Items --- */
.agenda-item { 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    margin-bottom: 1rem; 
    overflow: hidden; 
    background: var(--card-bg); 
}
.agenda-header { 
    background: rgba(0,0,0,0.03); 
    padding: 0.8rem 1rem; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.agenda-comments { 
    padding: 1rem; 
    max-height: 250px; 
    overflow-y: auto; 
}
.comment { 
    background: rgba(255,255,255,0.6); 
    padding: 0.8rem; 
    border-radius: 8px; 
    margin-bottom: 0.5rem; 
    border-left: 3px solid var(--brand-blue); 
}
.dark-mode .comment { 
    background: rgba(0,0,0,0.2); 
}

/* --- Specific Components --- */
.meeting-description-box {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.5);
    border: 1px dashed var(--border-color);
}
.dark-mode .meeting-description-box { background: rgba(0,0,0,0.2); }

.rsvp-card {
    border-top: 4px solid var(--brand-blue);
    text-align: center;
}

/* Custom Action Buttons (Specific Colors) */
.btn-action-green { background-color: #27ae60; color: white; border: none; }
.btn-action-green:hover { background-color: #219150; color: white; transform: translateY(-2px); }

.btn-action-orange { background-color: #f39c12; color: white; border: none; }
.btn-action-orange:hover { background-color: #d35400; color: white; transform: translateY(-2px); }

.btn-action-red { background-color: #e74c3c; color: white; border: none; }
.btn-action-red:hover { background-color: #c0392b; color: white; transform: translateY(-2px); }

/* Video Player */
.video-wrapper {
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.video-player {
    width: 100%;
    height: 200px;
    background: #000;
}

/* Colleague Select Box */
.select-h-100 { height: 100px; }
/* =========================================================
   🔴 Live Meeting Specifics (Brand Compatible)
   ========================================================= */

/* Chat Window - Matches Glass Theme */
.chat-window {
    height: 450px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
body.dark-mode .chat-window {
    background: rgba(0, 0, 0, 0.2);
}

/* Chat Bubbles */
.log-message {
    padding: 0.75rem;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    position: relative;
    transition: all 0.2s;
}
.log-message:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
body.dark-mode .log-message {
    background: rgba(255, 255, 255, 0.05);
}

/* System Messages (Join/Leave) */
.log-system-wrapper { text-align: center; margin: 0.5rem 0; opacity: 0.7; font-size: 0.8rem; font-style: italic; }
.text-join { color: #27ae60; }
.text-leave { color: #e74c3c; }

/* Pulse Animation for Header */
.badge-live {
    background-color: #e74c3c;
    color: white;
    padding: 5px 12px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1px;
    animation: livePulse 2s infinite;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Video Container */
.video-wrapper-live {
    background: #000;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* =========================================================
   📅 Planning Module Specifics
   ========================================================= */

/* Plan Cards */
.plan-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    background: var(--card-bg); /* Uses standard glass background */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: var(--brand-blue);
}

/* Feed Items (Right Sidebar) */
.feed-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.feed-item:last-child { border-bottom: none; }

.feed-icon {
    width: 32px; height: 32px;
    background: rgba(0, 120, 215, 0.1);
    color: var(--brand-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.feed-content p { margin: 0; font-size: 0.85rem; line-height: 1.3; color: var(--text-main); }
.feed-time { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; display: block; }

/* Thin Progress Bars */
.progress-slim { 
    height: 6px; 
    border-radius: 10px; 
    background: rgba(0,0,0,0.05); 
    margin-top: 10px; 
}
.progress-bar-slim { border-radius: 10px; }

/* Status Badges */
.status-badge { 
    font-size: 0.7rem; 
    padding: 3px 10px; 
    border-radius: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    display: inline-block;
}
.status-active { background: rgba(39, 174, 96, 0.15); color: #27ae60; }
.status-closed { background: rgba(108, 117, 125, 0.15); color: #6c757d; }

/* Action Buttons (Edit/Delete on Card) */
.btn-card-action {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; font-size: 0.8rem; transition: 0.2s;
    background: rgba(255,255,255,0.8);
    position: relative; z-index: 2; /* Clickable above stretched link */
    margin-left: 5px;
    cursor: pointer;
}
.btn-card-action.edit { color: var(--brand-blue); border: 1px solid rgba(0,120,215,0.2); }
.btn-card-action.edit:hover { background: var(--brand-blue); color: white; }

.btn-card-action.delete { color: #dc3545; border: 1px solid rgba(220,53,69,0.2); }
.btn-card-action.delete:hover { background: #dc3545; color: white; }

/* Rejected Task Highlight */
.wbs-rejected {
    border-left: 4px solid #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.05) !important;
}
/* =========================================================
   🏆 Performance Dashboard Specifics
   ========================================================= */

/* Top Performer Card */
.top-performer-card {
    background: linear-gradient(135deg, #4361ee 0%, #7209b7 100%);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(67, 97, 238, 0.3);
}
.top-performer-icon {
    width: 64px; height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    backdrop-filter: blur(5px);
}

/* Evidence Badges & Thumbnails */
.ev-badge {
    display: inline-flex; align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    margin-right: 5px; margin-bottom: 5px;
    transition: 0.2s;
    border: 1px solid transparent;
}
.ev-pdf { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.ev-excel { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.ev-word { background: #dbeafe; color: #2563eb; border-color: #bfdbfe; }
.ev-cad { background: #e0f2fe; color: #0891b2; border-color: #bae6fd; }
.ev-note { background: #fef9c3; color: #ca8a04; border-color: #fde047; display: block; width: 100%; }
.ev-link { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

.ev-thumb-wrapper { display: inline-block; margin-right: 5px; margin-bottom: 5px; }
.ev-thumb {
    width: 40px; height: 40px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.ev-thumb:hover { transform: scale(1.1); z-index: 10; border-color: var(--brand-blue); }

/* AI Button */
.btn-ai {
    background: linear-gradient(135deg, #10a37f 0%, #0d8a6a 100%);
    color: white; border: none;
    box-shadow: 0 2px 5px rgba(16, 163, 127, 0.2);
}
.btn-ai:hover { background: linear-gradient(135deg, #0d8a6a 0%, #0a6e54 100%); color: white; }

/* Thin Progress Bar */
.progress-thin { height: 6px; border-radius: 3px; background-color: rgba(0,0,0,0.05); overflow: hidden; }
/* =========================================================
   🏢 Department View Specifics
   ========================================================= */

/* Large Avatar for Employee Cards */
.avatar-circle-lg {
    width: 56px; height: 56px;
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 700;
    margin-right: 15px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

/* Internal Stat Grid for Employee Cards */
.emp-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.02);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
/* =========================================================
   📊 Analytics / Charts Specifics
   ========================================================= */

/* Chart Containers */
.chart-container { 
    position: relative; 
    height: 300px; 
    width: 100%; 
}

/* Chart Titles */
h5.chart-title { 
    font-weight: 700; 
    color: var(--brand-blue); 
    text-transform: uppercase; 
    font-size: 0.85rem; 
    letter-spacing: 1px; 
    margin-bottom: 1.5rem; 
}
/* =========================================================
   📅 Master Schedule (Gantt) Specifics
   ========================================================= */

/* Gantt Container */
.gantt-container {
    flex-grow: 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: white;
    position: relative;
    min-height: 600px;
}

/* Custom Colors for Gantt Bars (Overrides JSGantt defaults) */
.gplan { background-color: var(--brand-blue) !important; border-color: #2e59d9 !important; }
.gtaskblue { background-color: #36b9cc !important; border-color: #2c9faf !important; }
.gtaskgreen { background-color: #1cc88a !important; border-color: #17a673 !important; }
.gtaskred { background-color: #e74a3b !important; border-color: #be2617 !important; }
.gtaskyellow { background-color: #f6c23e !important; border-color: #dda20a !important; }

/* Gantt Tooltip */
.gantt-tooltip {
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

/* Gantt Toolbar */
.gantt-toolbar {
    background: #f8f9fc;
    border-bottom: 1px solid var(--border-color);
    padding: 0.8rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.btn-toolbar-custom {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    border: 1px solid #d1d3e2;
    background: white;
    color: #6e707e;
    transition: all 0.2s;
    font-weight: 600;
}
.btn-toolbar-custom:hover {
    background: #eaecf4;
    color: var(--brand-blue);
    border-color: #b7b9cc;
}
.btn-toolbar-custom.active {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 10px rgba(78, 115, 223, 0.3);
}

/* Page Header in Card */
.page-header-gantt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
/* =========================================================
   📅 Master Schedule (Gantt) Specifics
   ========================================================= */

/* Gantt Container */
.gantt-container {
    flex-grow: 1;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: white;
    position: relative;
    min-height: 600px;
}

/* Custom Colors for Gantt Bars (Overrides JSGantt defaults) */
.gplan { background-color: var(--brand-blue) !important; border-color: #2e59d9 !important; }
.gtaskblue { background-color: #36b9cc !important; border-color: #2c9faf !important; }
.gtaskgreen { background-color: #1cc88a !important; border-color: #17a673 !important; }
.gtaskred { background-color: #e74a3b !important; border-color: #be2617 !important; }
.gtaskyellow { background-color: #f6c23e !important; border-color: #dda20a !important; }

/* Gantt Tooltip */
.gantt-tooltip {
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

/* Gantt Toolbar */
.gantt-toolbar {
    background: #f8f9fc;
    border-bottom: 1px solid var(--border-color);
    padding: 0.8rem 1.5rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.btn-toolbar-custom {
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    border: 1px solid #d1d3e2;
    background: white;
    color: #6e707e;
    transition: all 0.2s;
    font-weight: 600;
}
.btn-toolbar-custom:hover {
    background: #eaecf4;
    color: var(--brand-blue);
    border-color: #b7b9cc;
}
.btn-toolbar-custom.active {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 10px rgba(78, 115, 223, 0.3);
}

/* Page Header in Card */
.page-header-gantt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
/* =========================================================
   🏗️ Plan View (WBS, Evidence, & Details)
   ========================================================= */

/* --- Layout & Cards --- */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s;
}

.top-bar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 0.8rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.plan-title-badge {
    background: linear-gradient(45deg, #4e73df, #224abe);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 10px;
}

/* --- WBS Sidebar --- */
.wbs-header {
    background: #f8f9fc;
    padding: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-weight: 700;
    color: var(--brand-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wbs-item {
    cursor: pointer;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.02);
    transition: all 0.2s ease;
    border-radius: 6px;
    margin: 2px 8px;
    font-size: 0.9rem;
}
.wbs-item:hover {
    background-color: rgba(78, 115, 223, 0.05);
    transform: translateX(2px);
}
.wbs-item.active {
    background-color: #e8f0fe;
    color: var(--brand-blue);
    font-weight: 600;
    border-left: 3px solid var(--brand-blue);
}

/* Rejected Task Styling */
.wbs-item.wbs-rejected, 
.wbs-item-rejected {
    border-left: 4px solid #dc3545 !important;
    background-color: #fff5f5 !important;
    color: #dc3545 !important;
    font-weight: bold;
}
.wbs-item.wbs-rejected:hover, 
.wbs-item-rejected:hover {
    background-color: #ffe0e0 !important;
}

/* --- Content Area --- */
.content-header {
    background: white;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.task-breadcrumb {
    font-size: 0.8rem;
    color: #858796;
    margin-bottom: 0.5rem;
}
.quick-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: #5a5c69;
    margin-top: 10px;
}
.quick-stat-item i {
    margin-right: 5px;
    color: var(--brand-blue);
}

/* --- Evidence Grid --- */
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px;
}
.evidence-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    transition: transform 0.2s;
    background: #fff;
    aspect-ratio: 1 / 1;
}
.evidence-item:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 2;
}
.evidence-img {
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: pointer;
}
.evidence-file-placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #f8f9fc;
    color: var(--brand-blue);
    text-decoration: none;
}
.evidence-file-placeholder:hover {
    background: #e8f0fe;
}

/* --- Misc Components --- */
.empty-state-icon {
    font-size: 4rem;
    color: #d1d3e2;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.btn-glass {
    border-radius: 50px;
    padding: 5px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e3e6f0;
    background: white;
    color: #555;
    transition: 0.3s;
}
.btn-glass:hover {
    background: #f8f9fc;
    border-color: #d1d3e2;
}

.btn-pulse {
    animation: pulse-green 2s infinite;
}

@keyframes float { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-10px); } 
    100% { transform: translateY(0px); } 
}

@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}