/* =================================
                CSS VARIABLES (Your Custom Colors)
                ================================= */
 :root {
     --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
     --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
     --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
     --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--header-bg) 100%);
     --gradient-card: linear-gradient(135deg, var(--card-bg) 0%, #e8f9fdcc 100%);
     /* #e8f9fdcc #f8d4d4cc*/
 }

 [data-theme="dark"] {
     --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
     --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
     --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
     --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--header-bg) 100%);
     --gradient-card: linear-gradient(135deg, var(--header-bg) 0%, rgba(13, 11, 11, 0.8) 100%);
 }

 /* =================================
                BASE STYLES
                ================================= */
 .custom-main {
     margin: 0;
 }

 .logistics-dashboard {
     padding: 24px;
     background: var(--main-bg);
     color: var(--main-text);
     min-height: 100vh;
     transition: var(--transition);
 }

 /* =================================
            ENHANCED HEADER SECTION
            ================================= */
 .dashboard-header {
     margin-bottom: 32px;
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--gradient-primary);
     padding: 28px 32px;
     border-radius: 20px;
     color: var(--header-text);
     box-shadow: var(--shadow-heavy);
     border: 1px solid var(--border-color);
     position: relative;
     overflow: hidden;
 }

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

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

     100% {
         transform: translateX(100%);
     }
 }

 .header-left {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .dashboard-title {
     font-size: 2.8rem;
     font-weight: 800;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 16px;
     color: var(--header-text);
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .breadcrumb {
     font-size: 0.9rem;
     opacity: 0.8;
     font-weight: 400;
 }

 .header-right {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .header-stats {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .current-time {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 1.1rem;
     font-weight: 600;
     background: rgba(255, 255, 255, 0.15);
     padding: 12px 16px;
     border-radius: 12px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .notification-btn,
 .theme-toggle {
     position: relative;
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--header-text);
     width: 44px;
     height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
     backdrop-filter: blur(10px);
 }

 .notification-btn:hover,
 .theme-toggle:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: scale(1.05);
 }

 .notification-badge {
     position: absolute;
     top: -6px;
     right: -6px;
     background: var(--primary);
     color: white;
     font-size: 0.7rem;
     font-weight: 700;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid var(--header-text);
 }

 .user-profile {
     display: flex;
     align-items: center;
     gap: 12px;
     background: rgba(255, 255, 255, 0.15);
     padding: 8px 16px;
     border-radius: 12px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .profile-img {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 2px solid var(--header-text);
 }

 .profile-name {
     font-weight: 600;
     font-size: 0.9rem;
 }

 /* =================================
                ENHANCED WELCOME SECTION
                ================================= */
 .welcome-section {
     margin-bottom: 32px;
 }

 .welcome-card {
     background: var(--gradient-card);
     border-radius: 20px;
     padding: 32px;
     box-shadow: var(--shadow-medium);
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-left: 6px solid var(--primary);
     border: 1px solid var(--border-color);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .welcome-card::after {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
     opacity: 0.1;
 }

 .welcome-content {
     flex: 1;
 }

 .welcome-content h2 {
     color: var(--main-text);
     margin: 0 0 12px 0;
     font-size: 2rem;
     font-weight: 700;
 }

 .welcome-content p {
     color: var(--section-text);
     margin: 0 0 24px 0;
     font-size: 1.1rem;
     line-height: 1.6;
 }

 .welcome-actions {
     display: flex;
     gap: 16px;
 }

 .btn-primary,
 .btn-secondary {
     padding: 12px 24px;
     border-radius: 12px;
     font-weight: 600;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: var(--transition);
     border: none;
     cursor: pointer;
     font-size: 0.9rem;
 }

 .btn-primary {
     background: var(--primary);
     color: white;
     box-shadow: 0 4px 12px rgba(200, 4, 24, 0.3);
 }

 .btn-primary:hover {
     background: #a50315;
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(200, 4, 24, 0.4);
 }

 .btn-secondary {
     background: transparent;
     color: var(--main-text);
     border: 2px solid var(--border-color);
 }

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

 .welcome-right {
     display: flex;
     align-items: center;
     gap: 24px;
 }

 .weather-widget {
     display: flex;
     align-items: center;
     gap: 12px;
     background: var(--active-bg);
     padding: 16px;
     border-radius: 16px;
     box-shadow: var(--shadow-light);
     border: 1px solid var(--border-color);
 }

 .weather-icon {
     font-size: 2rem;
     color: #f39c12;
 }

 .weather-temp {
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--header-text);
 }

 .weather-desc,
 .weather-location {
     font-size: 0.8rem;
     color: var(--header-text);
 }

 .welcome-illustration {
     font-size: 4rem;
     color: var(--primary);
     opacity: 0.6;
 }

 /* =================================
            ENHANCED STATS GRID
            ================================= */
 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 24px;
     margin-bottom: 40px;
 }

 .stat-card {
     background: var(--gradient-card);
     border-radius: 20px;
     padding: 28px;
     box-shadow: var(--shadow-medium);
     display: flex;
     align-items: flex-start;
     gap: 20px;
     border: 1px solid var(--border-color);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .stat-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--gradient-primary);
 }

 .stat-card:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: var(--shadow-heavy);
     background: var(--hover-bg);
 }

 .stat-icon {
     width: 80px;
     height: 80px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2.2rem;
     color: var(--header-text);
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--header-bg), var(--primary));
 }

 .stat-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 8px;
 }

 .stat-content h3 {
     color: var(--section-text);
     font-size: 0.85rem;
     font-weight: 600;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 1.2px;
 }

 .stat-number {
     font-size: 2.4rem;
     font-weight: 800;
     color: var(--main-text);
     line-height: 1;
 }

 .stat-card:hover .stat-content h3,
 .stat-card:hover .stat-number {
     color: var(--header-text);
     cursor: pointer;
 }

 .stat-change {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 0.85rem;
     font-weight: 600;
 }

 .stat-change.positive {
     color: #10b981;
 }

 .stat-change.negative {
     color: var(--primary);
 }

 .stat-change.neutral {
     color: var(--section-text);
 }

 .stat-mini-chart {
     height: 40px;
     margin-top: 8px;
 }

 .mini-chart {
     width: 100% !important;
     height: 100% !important;
 }

 /* Performance Ring */
 .performance-ring {
     position: relative;
     width: 60px;
     height: 60px;
     margin-top: 8px;
 }

 .progress-ring {
     transform: rotate(-90deg);
 }

 .progress-ring-circle {
     fill: none;
     stroke: var(--border-color);
     stroke-width: 4;
 }

 .progress-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 0.7rem;
     font-weight: 700;
     color: var(--main-text);
 }

 /* =================================
                ENHANCED CHARTS SECTION
                ================================= */
 .charts-section {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 32px;
     margin-bottom: 40px;
 }

 .main-chart {
     grid-row: span 2;
 }

 .side-charts {
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .chart-container {
     background: var(--gradient-card);
     border-radius: 20px;
     padding: 28px;
     box-shadow: var(--shadow-medium);
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .chart-container:hover {
     box-shadow: var(--shadow-heavy);
 }

 .chart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
     padding-bottom: 16px;
     border-bottom: 2px solid var(--border-color);
 }

 .chart-header h3 {
     color: var(--main-text);
     font-size: 1.4rem;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .chart-controls {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .chart-tabs {
     display: flex;
     background: var(--main-bg);
     border-radius: 12px;
     padding: 4px;
     border: 1px solid var(--border-color);
 }

 .chart-tab {
     padding: 8px 16px;
     border: none;
     background: transparent;
     color: var(--section-text);
     border-radius: 8px;
     cursor: pointer;
     transition: var(--transition);
     font-weight: 500;
     font-size: 0.85rem;
 }

 .chart-tab.active,
 .chart-tab:hover {
     background: var(--primary);
     color: white;
 }

 .chart-period {
     padding: 10px 16px;
     border: 2px solid var(--border-color);
     border-radius: 12px;
     background: var(--card-bg);
     color: var(--main-text);
     font-size: 0.9rem;
     font-weight: 500;
     transition: var(--transition);
 }

 .chart-period:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(200, 4, 24, 0.1);
 }

 .chart-fullscreen,
 .chart-refresh {
     background: var(--main-bg);
     border: 2px solid var(--border-color);
     color: var(--main-text);
     width: 40px;
     height: 40px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .chart-fullscreen:hover,
 .chart-refresh:hover {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }

 .chart-content {
     height: 320px;
     position: relative;
 }

 .chart-legend {
     margin-top: -70px;
     display: flex;
     flex-direction: column;
     gap: 0px;
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.85rem;
     color: var(--main-text);
 }

 .legend-color {
     width: 12px;
     height: 12px;
     border-radius: 3px;
 }

 /* Shipment Status */
 .shipment-status .status-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .status-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px;
     background: var(--main-bg);
     border-radius: 12px;
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .status-item:hover {
     background: var(--hover-bg);
     transform: translateX(4px);
 }

 .status-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1rem;
     background: linear-gradient(135deg, var(--header-bg), var(--primary));
 }

 .status-info {
     flex: 1;
 }

 .status-label {
     font-weight: 600;
     color: var(--main-text);
     font-size: 0.9rem;
 }

 .status-item:hover .status-label,
 .status-item:hover .status-count {
     color: var(--header-text);
     cursor: pointer;
 }

 .status-count {
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--main-text);
 }

 .status-progress {
     width: 60px;
     height: 6px;
     background: var(--border-color);
     border-radius: 3px;
     overflow: hidden;
 }

 .progress-bar {
     height: 100%;
     background: var(--primary);
     border-radius: 3px;
     transition: width 1s ease;
 }

 /* =================================
        CONTENT GRID
        ================================= */
 .content-grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 32px;
     margin-bottom: 40px;
 }

 /* =================================
                ENHANCED ACTIVITIES SECTION
                ================================= */
 .activities-section {
     background: var(--gradient-card);
     border-radius: 20px;
     padding: 28px;
     box-shadow: var(--shadow-medium);
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .activities-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
     padding-bottom: 16px;
     border-bottom: 2px solid var(--border-color);
 }

 .activities-header h3 {
     color: var(--main-text);
     font-size: 1.4rem;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .activities-controls {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .filter-btn {
     background: var(--main-bg);
     border: 2px solid var(--border-color);
     color: var(--main-text);
     padding: 8px 16px;
     border-radius: 10px;
     cursor: pointer;
     transition: var(--transition);
     font-weight: 500;
     font-size: 0.85rem;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .filter-btn:hover {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }

 .view-all-btn {
     color: var(--primary);
     text-decoration: none;
     font-weight: 600;
     padding: 8px 16px;
     border-radius: 10px;
     transition: var(--transition);
     border: 2px solid transparent;
 }

 .view-all-btn:hover {
     background-color: var(--hover-bg);
     border-color: var(--primary);
     color: var(--header-text);
 }

 .activities-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .activity-item {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 20px;
     background: var(--main-bg);
     border-radius: 16px;
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .activity-item:hover {
     background: var(--hover-bg);
     transform: translateX(6px);
     box-shadow: var(--shadow-light);
 }

 .activity-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.2rem;
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--header-bg), var(--primary));
 }



 .activity-content {
     flex: 1;
 }

 .activity-title {
     font-weight: 700;
     color: var(--main-text);
     margin-bottom: 6px;
     font-size: 1rem;
 }

 .activity-item:hover .activity-title {
     color: var(--header-text);
     cursor: pointer;
 }

 .activity-description {
     color: var(--section-text);
     font-size: 0.9rem;
     margin-bottom: 8px;
     line-height: 1.4;
 }

 .activity-item:hover .activity-description {
     color: var(--header-text);
     cursor: pointer;
 }

 .activity-meta {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .activity-item:hover .activity-meta {
     color: var(--header-text);
     cursor: pointer;
 }

 .activity-time {
     color: var(--section-text);
     font-size: 0.8rem;
     opacity: 0.8;
 }

 .activity-item:hover .activity-time {
     color: var(--header-text);
     cursor: pointer;
 }

 .activity-status {
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .status-new {
     background: rgba(59, 130, 246, 0.1);
     color: #3b82f6;
 }

 .status-success {
     background: rgba(16, 185, 129, 0.1);
     color: #10b981;
 }

 .status-delivered {
     background: rgba(16, 185, 129, 0.1);
     color: #10b981;
 }

 .status-warning {
     background: rgba(245, 158, 11, 0.1);
     color: #f59e0b;
 }

 .activity-actions {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .btn-icon {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     color: var(--main-text);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .btn-icon:hover {
     background: var(--primary);
     color: white;
     border-color: var(--primary);
 }

 /* =================================
            TOP ROUTES SECTION
            ================================= */
 .routes-section {
     background: var(--gradient-card);
     border-radius: 20px;
     padding: 28px;
     box-shadow: var(--shadow-medium);
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
     padding-bottom: 16px;
     border-bottom: 2px solid var(--border-color);
 }

 .section-header h3 {
     color: var(--main-text);
     font-size: 1.4rem;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .btn-sm {
     padding: 8px 16px;
     font-size: 0.85rem;
 }

 .routes-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .route-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px;
     background: var(--main-bg);
     border-radius: 12px;
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .route-item:hover {
     background: var(--hover-bg);
     transform: scale(1.02);
 }

 .route-info {
     flex: 1;
 }

 .route-path {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 8px;
 }

 .route-from,
 .route-to {
     font-weight: 700;
     color: var(--main-text);
     font-size: 1rem;
 }

 .route-item:hover .route-from,
 .route-item:hover .route-to {
     color: var(--header-text);
     cursor: pointer;
 }

 .route-path i {
     color: var(--primary);
     font-size: 0.9rem;
 }

 .route-stats {
     display: flex;
     align-items: center;
     gap: 16px;
     font-size: 0.85rem;
     color: var(--section-text);
 }

 .route-performance {
     display: flex;
     align-items: center;
     gap: 12px;
     min-width: 100px;
 }

 .performance-bar {
     width: 60px;
     height: 8px;
     background: var(--border-color);
     border-radius: 4px;
     overflow: hidden;
 }

 .performance-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--primary), #10b981);
     border-radius: 4px;
     transition: width 1s ease;
 }

 .performance-text {
     font-weight: 700;
     color: var(--main-text);
     font-size: 0.9rem;
 }

 /* =================================
                ENHANCED QUICK ACTIONS
                ================================= */
 .quick-actions {
     background: var(--gradient-card);
     border-radius: 20px;
     padding: 28px;
     box-shadow: var(--shadow-medium);
     border: 1px solid var(--border-color);
     transition: var(--transition);
 }

 .quick-actions .section-header h3 {
     color: var(--main-text);
     font-size: 1.4rem;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .btn-text {
     background: transparent;
     border: none;
     color: var(--primary);
     font-weight: 600;
     cursor: pointer;
     padding: 8px 16px;
     border-radius: 8px;
     transition: var(--transition);
 }

 .btn-text:hover {
     background: var(--hover-bg);
     color: var(--header-text);
 }

 .actions-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 20px;
 }

 .action-btn {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 24px;
     background: var(--main-bg);
     border-radius: 16px;
     text-decoration: none;
     color: var(--main-text);
     border: 1px solid var(--border-color);
     transition: var(--transition);
     position: relative;
     overflow: hidden;
 }

 .action-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s;
 }

 .action-btn:hover::before {
     left: 100%;
 }

 .action-btn:hover {
     background: var(--gradient-primary);
     color: var(--header-text);
     transform: translateY(-4px);
     box-shadow: var(--shadow-heavy);
 }

 .action-btn.priority {
     border-left: 4px solid var(--primary);
 }

 .action-icon {
     width: 56px;
     height: 56px;
     background: var(--gradient-primary);
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--header-text);
     font-size: 1.4rem;
     flex-shrink: 0;
 }

 .action-content {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .action-title {
     font-weight: 700;
     font-size: 1.1rem;
 }

 .action-desc {
     font-size: 0.85rem;
     opacity: 0.8;
 }

 /* =================================
                NOTIFICATION PANEL
                ================================= */
 .notification-panel {
     position: fixed;
     top: 0;
     right: -400px;
     width: 400px;
     height: 100vh;
     background: var(--card-bg);
     box-shadow: var(--shadow-heavy);
     transition: right 0.3s ease;
     z-index: 1000;
     border-left: 1px solid var(--border-color);
 }

 .notification-panel.active {
     right: 0;
 }

 .notification-header {
     padding: 24px;
     border-bottom: 2px solid var(--border-color);
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: var(--gradient-primary);
     color: var(--header-text);
 }

 .notification-header h4 {
     margin: 0;
     font-size: 1.3rem;
     font-weight: 700;
 }

 .close-notifications {
     background: rgba(255, 255, 255, 0.2);
     border: none;
     color: var(--header-text);
     width: 36px;
     height: 36px;
     border-radius: 8px;
     cursor: pointer;
     transition: var(--transition);
 }

 .close-notifications:hover {
     background: rgba(255, 255, 255, 0.3);
 }

 .notification-list {
     padding: 16px;
     height: calc(100vh - 100px);
     overflow-y: auto;
 }

 .notification-item {
     display: flex;
     gap: 12px;
     padding: 16px;
     border-radius: 12px;
     margin-bottom: 12px;
     transition: var(--transition);
     border: 1px solid var(--border-color);
 }

 .notification-item:hover {
     background: var(--hover-bg);
 }

 .notification-item.unread {
     background: rgba(200, 4, 24, 0.05);
     border-color: var(--primary);
 }

 .notification-item .notification-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--gradient-primary);
     color: var(--header-text);
     flex-shrink: 0;
 }

 .notification-content {
     flex: 1;
 }

 .notification-title {
     font-weight: 700;
     color: var(--main-text);
     margin-bottom: 4px;
 }

 .notification-desc {
     color: var(--section-text);
     font-size: 0.9rem;
     margin-bottom: 6px;
 }

 .notification-time {
     color: var(--section-text);
     font-size: 0.8rem;
     opacity: 0.8;
 }

 /* =================================
                RESPONSIVE DESIGN
                ================================= */
 @media (max-width: 1200px) {
     .charts-section {
         grid-template-columns: 1fr;
     }

     .content-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .logistics-dashboard {
         padding: 16px;
     }

     .header-content {
         flex-direction: column;
         text-align: center;
         gap: 20px;
     }

     .header-right {
         width: 100%;
         justify-content: center;
     }

     .dashboard-title {
         font-size: 2.2rem;
     }

     .stats-grid {
         grid-template-columns: 1fr;
     }

     .welcome-card {
         flex-direction: column;
         text-align: center;
         gap: 24px;
     }

     .welcome-actions {
         justify-content: center;
     }

     .actions-grid {
         grid-template-columns: 1fr;
     }

     .notification-panel {
         width: 100%;
         right: -100%;
     }

     .weather-widget {
         order: -1;
     }
 }

 @media (max-width: 480px) {
     .logistics-dashboard {
         padding: 12px;
     }

     .stat-card,
     .chart-container,
     .activities-section,
     .routes-section,
     .quick-actions {
         padding: 20px;
     }

     .dashboard-title {
         font-size: 1.8rem;
     }

     .welcome-content h2 {
         font-size: 1.6rem;
     }

     .stat-number {
         font-size: 2rem;
     }
 }

 /* =================================
    DARK THEME ENHANCEMENTS
    ================================= */


 /* [data-theme="dark"] .moderators-card .stat-icon,[data-theme="dark"] .performance-card .stat-icon,[data-theme="dark"] .admins-card .stat-icon,[data-theme="dark"] .shipments-card .stat-icon,[data-theme="dark"] .revenue-card .stat-icon,
                [data-theme="dark"] .users-card .stat-icon {
                    background: linear-gradient(135deg, #4dd0e1, var(--header-bg));
                }

                [data-theme="dark"] .activity-icon.user,[data-theme="dark"] .activity-icon.alert,[data-theme="dark"] .activity-icon.delivery,[data-theme="dark"] .activity-icon.shipment {
                    background: linear-gradient(135deg, var(--primary), #4dd0e1);
                } */


 [data-theme="dark"] .current-time {
     background: rgba(77, 208, 225, 0.15);
     border-color: rgba(77, 208, 225, 0.3);
 }

 /*
                [data-theme="dark"] .stat-change.positive {
                    color: #4dd0e1;
                }

                [data-theme="dark"] .chart-period:focus {
                    border-color: #4dd0e1;
                    box-shadow: 0 0 0 3px rgba(77, 208, 225, 0.1);
                } */

 [data-theme="dark"] .action-btn:hover {
     background: linear-gradient(135deg, #4dd0e1, var(--primary));
 }

 [data-theme="dark"] .welcome-card:hover,
 [data-theme="dark"] .stat-card:hover,
 [data-theme="dark"] .chart-container:hover,
 [data-theme="dark"] .activities-section:hover,
 [data-theme="dark"] .routes-section:hover,
 [data-theme="dark"] .quick-actions:hover {
     box-shadow: 0 15px 35px rgba(77, 208, 225, 0.1);
 }

 /* =================================
                ANIMATIONS AND EFFECTS
                ================================= */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 .stat-card {
     animation: fadeInUp 0.6s ease forwards;
 }

 .stat-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .stat-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .stat-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .stat-card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .stat-card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .stat-card:nth-child(6) {
     animation-delay: 0.6s;
 }

 .notification-badge {
     animation: pulse 2s infinite;
 }

 /* Custom scrollbar */
 .notification-list::-webkit-scrollbar {
     width: 6px;
 }

 .notification-list::-webkit-scrollbar-track {
     background: var(--main-bg);
     border-radius: 3px;
 }

 .notification-list::-webkit-scrollbar-thumb {
     background: var(--primary);
     border-radius: 3px;
 }

 .notification-list::-webkit-scrollbar-thumb:hover {
     background: var(--hover-bg);
 }

 /* Loading states */
 .chart-content.loading {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--section-text);
     font-style: italic;
 }

 .chart-content.loading::before {
     content: '';
     width: 40px;
     height: 40px;
     border: 4px solid var(--border-color);
     border-top: 4px solid var(--primary);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-right: 12px;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 /* Focus states for accessibility */
 .action-btn:focus,
 .btn-primary:focus,
 .btn-secondary:focus,
 .chart-tab:focus,
 .filter-btn:focus {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
 }

 [data-theme="dark"] .action-btn:focus,
 [data-theme="dark"] .btn-primary:focus,
 [data-theme="dark"] .btn-secondary:focus,
 [data-theme="dark"] .chart-tab:focus,
 [data-theme="dark"] .filter-btn:focus {
     outline-color: #4dd0e1;
 }