.route-progress {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.route-progress.fade-out {
    opacity: 0;
    transform: translateY(-4px);
}
/* Admin duplicates UI */
.overlap-table { width:100%; border-collapse: collapse; margin: .75rem 0; font-size:.85rem; }
.overlap-table th, .overlap-table td { border:1px solid var(--border-color); padding:.4rem .5rem; text-align:left; }
.overlap-table th { background: var(--card-bg); position:sticky; top:0; }
.circuit-badge { display:inline-block; background: var(--accent-bg, #334); color:#fff; padding:.15rem .45rem; border-radius: 12px; margin:0 .15rem .15rem 0; font-size:.65rem; letter-spacing:.5px; }
.whitelist-summary { font-weight:600; margin-bottom:.5rem; }
.whitelist-add-btn { background: var(--primary-btn-bg,#2d6cdf); color:#fff; border:none; padding:.3rem .6rem; border-radius:4px; cursor:pointer; font-size:.7rem; }
.whitelist-add-btn[disabled] { opacity:.5; cursor:default; }
.pending-additions { margin-top:.75rem; font-size:.75rem; color: var(--text-color); }
.empty-msg { font-style:italic; color: var(--text-muted,#666); }
details.current-whitelist { margin-top:1rem; }
details.current-whitelist pre { background: var(--code-bg,#111); color:#eee; padding:.75rem; border-radius:6px; max-height:180px; overflow:auto; font-size:.65rem; }
/* Overlap alert indicator on admin duplicates button */
#adminDuplicatesBtn.alert { position:relative; }
#adminDuplicatesBtn.alert::after {
    content:''; position:absolute; top:-4px; right:-4px; width:14px; height:14px; background:#d93025; border:2px solid var(--card-bg); border-radius:50%; box-shadow:0 0 0 2px rgba(217,48,37,0.4); animation:pulseOverlap 1.4s ease-in-out infinite;
}
@keyframes pulseOverlap { 0%{ transform:scale(.9); box-shadow:0 0 0 2px rgba(217,48,37,0.4);} 50%{ transform:scale(1.15); box-shadow:0 0 0 4px rgba(217,48,37,0.2);} 100%{ transform:scale(.9); box-shadow:0 0 0 2px rgba(217,48,37,0.4);} }
/* CSS Variables */
:root {
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    
    /* New Dark Theme Color Palette */
    --primary-blue: #4A90E2;        /* Action Blue for primary button */
    --accent-blue: #5DADE2;         /* ES - Clear accessible blue */
    --primary-green: #58D68D;       /* HS - Success green */
    --accent-green: #8FBC8F;
    --navy: #2C3E50;
    --red-accent: #E07856;
    --yellow-accent: #F9A825;       /* UV - Rich gold/yellow */
    --orange-accent: #FF6B35;       /* STF - Bright red-orange to differ from UV */
    --light-purple: #AF7AC5;        /* Alternative for UV - purple for distinction */
    --warm-gray: #F5F5F0;
    --medium-gray: #9E9E9E;         /* Secondary text */
    --dark-gray: #6C757D;
    
    /* Typography */
    --base-font-size: 16px;
    
    /* Background and text colors - Default Light Mode */
    --bg-color: #FAFAFA;
    --text-color: #2C3E50;
    --card-bg: #FFFFFF;
    --border-color: #E8EAE6;
    --building-bg: #F0F4F8;
    --shadow: rgba(44, 62, 80, 0.08);
    --z-dropdown: 1000;
}

/* Leaflet map popup styles */
.map-popup { min-width: 200px; }
.map-popup-title { font-size: 1.1rem; }
.map-product-badges { margin-top: 8px; }
.map-product-badge { background: #007bff; color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 0.8rem; margin-right: 4px; display: inline-block; }
/* Number marker icon for Leaflet */
.number-marker div { 
  background: #007bff; 
  color: #fff; 
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 700; 
  border: 2px solid #fff; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Optimized route markers with color coding */
.number-marker-optimized div { 
  color: #fff; 
  width: 30px; 
  height: 30px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-weight: 700; 
  border: 2px solid #fff; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  font-size: 12px;
}

/* Map overlay components */
#circuitMapOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 10000;
  display: flex;
  flex-direction: column;
}

.map-overlay-header {
  background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.map-overlay-title {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.map-overlay-close-btn {
  background: #dc3545;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
}

.map-overlay-close-btn:hover {
  background: #c82333;
}

#circuitMapContainer {
  flex: 1;
  width: 100%;
  position: relative;
}

#mapInfoPanel {
  background: #2c2c2c;
  padding: 1rem;
  color: #fff;
  border-top: 2px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.dark-mode {
    /* Dark Theme Colors */
    --bg-color: #1A1D21;            /* Dark Charcoal - main background */
    --text-color: #F0F0F0;          /* Off-White - primary text */
    --card-bg: #2C2F36;             /* Dark Gray - card background */
    --border-color: #404040;
    --building-bg: #2C2F36;         /* Dark Gray for building headers */
    --shadow: rgba(0, 0, 0, 0.3);
    --warm-gray: #3a3a3a;
    --medium-gray: #9E9E9E;         /* Secondary text color */
    --navy: #4A90E2;                /* Action Blue in dark mode */
    
    /* Product colors optimized for dark theme */
    --accent-blue: #5DADE2;         /* ES */
    --primary-green: #58D68D;       /* HS */
    --orange-accent: #FF6B35;       /* STF */
    --yellow-accent: #F9A825;       /* UV */
}

body.high-contrast {
    /* High Contrast Theme - WCAG AAA Compliant */
    --bg-color: #000000;            /* Pure black background */
    --text-color: #FFFFFF;          /* Pure white text */
    --card-bg: #1A1A1A;             /* Very dark gray cards */
    --border-color: #FFFF00;        /* Yellow borders for visibility */
    --building-bg: #0A0A0A;         /* Almost black for headers */
    --shadow: rgba(255, 255, 255, 0.15);
    --warm-gray: #222222;
    --medium-gray: #CCCCCC;
    --navy: #00BFFF;                /* Bright cyan for links */
    --primary-blue: #00BFFF;
    
    /* High contrast product colors */
    --accent-blue: #00FFFF;         /* ES - Bright cyan */
    --primary-green: #00FF00;       /* HS - Bright lime green */
    --orange-accent: #FF6600;       /* STF - Bright orange */
    --yellow-accent: #FFFF00;       /* UV - Bright yellow */
}

body.high-contrast button,
body.high-contrast .btn {
    border: 2px solid #FFFFFF;
}

body.high-contrast .product-badge {
    border: 2px solid currentColor;
    font-weight: 700;
}

body.sepia {
    /* Sepia Theme - Warm, eye-friendly reading mode */
    --bg-color: #F4ECD8;            /* Warm cream background */
    --text-color: #3E2723;          /* Dark brown text */
    --card-bg: #FFF8E1;             /* Light cream cards */
    --border-color: #D7CCC8;        /* Light brown borders */
    --building-bg: #EFEBE9;         /* Slightly darker cream */
    --shadow: rgba(62, 39, 35, 0.12);
    --warm-gray: #BCAAA4;
    --medium-gray: #8D6E63;
    --navy: #5D4037;                /* Dark brown for actions */
    --primary-blue: #6D4C41;        /* Warm brown for buttons */
    
    /* Sepia product colors - warm tones */
    --accent-blue: #4DB6AC;         /* ES - Warm teal */
    --primary-green: #81C784;       /* HS - Soft green */
    --orange-accent: #FF8A65;       /* STF - Soft coral */
    --yellow-accent: #FFB74D;       /* UV - Soft orange */
}

body.sepia .product-badge {
    opacity: 0.9;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    z-index: 9999;
    width: min(420px, 90%);
    pointer-events: none;
}

.toast {
    background: var(--card-bg);
    color: var(--text-color);
    padding: .85rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    font-size: .95rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.toast-success { border-color: #28a745; }
.toast-error { border-color: #dc3545; }
.toast-info { border-color: var(--primary-blue); }

.toast::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
    pointer-events: none;
}

.toast.enter { animation: toastIn .35s ease; }
.toast.exit { animation: toastOut .25s ease forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(-4px) scale(.98); }
}

/* Toast content & controls */
.toast-content { display:flex; align-items:center; gap:.6rem; }
.toast-icon { width:18px; height:18px; opacity:.9; }
.toast-dismiss { 
    background: transparent; border: none; color: var(--text-color); 
    font-size: 1.1rem; line-height: 1; cursor: pointer; padding: .2rem .3rem; 
    border-radius: 6px; pointer-events: auto; 
}
.toast-dismiss:focus { outline: 2px solid var(--primary-blue); outline-offset: 2px; }
.toast-message { display:inline-block; }

/* Accessible Modal Base Classes */
.modal-overlay-accessible {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.app-modal {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem 2rem 2.4rem 2rem; /* extra bottom padding to avoid actions overlap */
    width: 90%;
    max-width: 440px;
    max-height: 90vh; /* Prevent modal from exceeding viewport height */
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.app-modal h3 { margin: 0 0 1rem 0; font-size: 1.25rem; font-weight: 600; flex-shrink: 0; }

.app-modal .modal-body {
    overflow-y: auto; /* Allow scrolling if content is too tall */
    flex: 1 1 auto;
    margin-bottom: 1rem;
}

.app-modal .modal-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:0.6rem; flex-shrink: 0; }

.route-mgmt-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: .5rem;
}

.route-mgmt-buttons button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.route-mgmt-buttons button:focus-visible {
    outline: 2px solid rgba(74, 144, 226, 0.5);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

.route-mgmt-buttons button:focus {
    outline: none;
}

.route-mgmt-buttons svg {
    flex-shrink: 0;
}

.route-status-actions {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin-top: .25rem;
}

.route-status-actions .modal-btn-secondary,
.route-status-actions .modal-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.1rem;
}

/* Form control spacing inside modal */
.app-modal select,
.app-modal textarea,
.app-modal input[type="text"],
.app-modal input[type="number"],
.app-modal input[type="email"],
.app-modal input[type="password"] {
        margin-top: .35rem;
        margin-bottom: .9rem;
}

@media (max-width: 520px) {
    .app-modal { padding: 1.4rem 1.2rem 2.1rem 1.2rem; }
    .app-modal .modal-actions { flex-wrap: wrap; gap:.6rem; margin-top:1.3rem; }
}

.modal-btn-primary {
    padding:.75rem 1.5rem;
    border:none;
    background: var(--primary-blue);
    color:#fff;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
}
.modal-btn-secondary {
    padding:.75rem 1.5rem;
    border:2px solid var(--border-color);
    background:transparent;
    color:var(--text-color);
    border-radius:8px;
    font-weight:500;
    cursor:pointer;
}
.modal-btn-primary:focus, .modal-btn-secondary:focus, .app-modal select:focus, .app-modal textarea:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
    font-size: var(--base-font-size);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Login Screen - Navy Monochromatic Background with Geometric Pattern */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 50%, #1a2332 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

/* Video Background for Login Screen */
.login-video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    opacity: 0.15; /* Subtle backdrop - doesn't interfere with UI */
    z-index: 0;
    pointer-events: none; /* Ensure video doesn't block clicks */
    filter: blur(2px) grayscale(30%); /* Soft blur for aesthetic */
}

/* Scale video appropriately on mobile/small screens */
@media (max-width: 768px) {
    .login-video-background {
        /* Scale to ensure proper coverage on mobile */
        min-width: 100vw;
        min-height: 100vh;
        width: 100vw;
        height: auto;
        object-fit: cover;
        opacity: 0.1; /* Lighter on mobile */
        filter: blur(3px) grayscale(40%); /* Slightly more blur on mobile */
    }
}

/* Reduce opacity further on tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .login-video-background {
        opacity: 0.1;
    }
}

/* Pulsating background glow - subtle animation */
.login-screen::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.08) 0%, transparent 65%);
    border-radius: 50%;
    animation: pulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.8;
    }
}

/* Diagonal Lines for Added Depth */
.login-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 100px,
            rgba(74, 144, 226, 0.02) 100px,
            rgba(74, 144, 226, 0.02) 101px
        );
    opacity: 0.5;
    pointer-events: none;
}

/* Pulsing Glow Behind Phone - Light Bulb Effect */
.phone-glow-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    width: 280px;
    height: 280px;
    background: radial-gradient(
        circle,
        rgba(74, 144, 226, 0.3) 0%,
        rgba(74, 144, 226, 0.15) 30%,
        rgba(74, 144, 226, 0.08) 50%,
        transparent 70%
    );
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite, hueShift 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1; /* Above video background */
    will-change: transform, opacity, background;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.05);
    }
}

@keyframes hueShift {
    0% {
        background: radial-gradient(
            circle,
            rgba(74, 144, 226, 0.3) 0%,    /* primary-blue */
            rgba(74, 144, 226, 0.15) 30%,
            rgba(74, 144, 226, 0.08) 50%,
            transparent 70%
        );
    }
    20% {
        background: radial-gradient(
            circle,
            rgba(93, 173, 226, 0.3) 0%,    /* accent-blue */
            rgba(93, 173, 226, 0.15) 30%,
            rgba(93, 173, 226, 0.08) 50%,
            transparent 70%
        );
    }
    40% {
        background: radial-gradient(
            circle,
            rgba(88, 214, 141, 0.3) 0%,    /* primary-green */
            rgba(88, 214, 141, 0.15) 30%,
            rgba(88, 214, 141, 0.08) 50%,
            transparent 70%
        );
    }
    60% {
        background: radial-gradient(
            circle,
            rgba(249, 168, 37, 0.3) 0%,    /* yellow-accent */
            rgba(249, 168, 37, 0.15) 30%,
            rgba(249, 168, 37, 0.08) 50%,
            transparent 70%
        );
    }
    80% {
        background: radial-gradient(
            circle,
            rgba(255, 107, 53, 0.3) 0%,    /* orange-accent */
            rgba(255, 107, 53, 0.15) 30%,
            rgba(255, 107, 53, 0.08) 50%,
            transparent 70%
        );
    }
    100% {
        background: radial-gradient(
            circle,
            rgba(74, 144, 226, 0.3) 0%,    /* back to primary-blue */
            rgba(74, 144, 226, 0.15) 30%,
            rgba(74, 144, 226, 0.08) 50%,
            transparent 70%
        );
    }
}

/* Floating Phone Container with Blue Ambient Glow */
.phone-container {
    position: relative;
    perspective: 1000px;
    z-index: 2; /* Above glow and video */
    /* Removed floating animation */
    filter: drop-shadow(0 0 60px rgba(74, 144, 226, 0.4)) 
            drop-shadow(0 0 30px rgba(74, 144, 226, 0.3));
}

/* Removed floatPhone animation */

/* Phone Device */
.phone-device {
    position: relative;
    width: 370px;
    height: 760px;
    transform-style: preserve-3d;
    /* Removed rotation animation */
}

/* Scale down phone on desktop/laptop screens */
@media (min-width: 769px) {
    .phone-device {
        width: 300px;
        height: 615px;
    }
    
    .phone-logo-img {
        max-width: 140px;
    }
    
    .phone-input {
        font-size: 0.95rem;
        padding: 0.85rem 1.1rem;
    }
    
    .phone-login-button {
        font-size: 0.95rem;
        padding: 0.85rem 1.5rem;
    }
}

/* Wiggle animation for wrong password */
@keyframes wiggle {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.phone-device.wiggle {
    animation: wiggle 0.5s ease-in-out;
}

/* Phone Frame with Enhanced Shadow and Glow */
.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
    border-radius: 40px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 8px #1a1a1a,
        0 0 0 10px #2c3e50,
        0 0 40px rgba(74, 144, 226, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Phone Screen */
.phone-screen {
    position: absolute;
    top: 20px;
    left: 12px;
    right: 12px;
    bottom: 20px;
    background: linear-gradient(180deg, #1e2836 0%, #14171f 100%);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Phone Status Bar */
.phone-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    padding-top: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    z-index: 100;
}

.status-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-icon {
    width: 14px;
    height: 14px;
    opacity: 0.9;
}

.status-battery {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.battery-icon {
    width: 16px;
    height: 16px;
}

/* iPhone-style Notification - Compact & Dark Theme - Middle Position */
.iphone-notification {
    position: relative;
    width: calc(100% - 2rem);
    margin: 0 auto 1.5rem;
    background: rgba(30, 40, 54, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 0.5rem 0.6rem;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(74, 144, 226, 0.3);
    animation: notificationSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

@keyframes notificationSlideIn {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    60% {
        transform: translateY(5px);
        opacity: 1;
    }
    80% {
        transform: translateY(-2px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.notification-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.notification-icon {
    width: 14px;
    height: 14px;
    stroke: #6bb6ff;
    flex-shrink: 0;
}

.notification-app {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    flex-grow: 1;
}

.notification-time {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
}

.notification-content {
    padding-left: 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.notification-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.notification-message {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Login Form on Phone Screen */
.phone-login-form {
    width: 100%;
    padding: 2rem 1.5rem;
    padding-top: 3rem; /* Extra padding for status bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    z-index: 10;
}

.phone-header-widgets {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
    gap: 1.5rem;
    padding-left: 0.5rem;
}

/* Logo Text - White with Subtle Blue Hue */
.phone-logo {
    position: relative;
    width: auto;
    height: auto;
    opacity: 0;
    flex: 0 0 auto;
    animation: logoFadeIn 1.5s ease-out 0.5s forwards;
    /* Add subtle blue hue behind logo - reduced intensity */
    filter: drop-shadow(0 0 8px rgba(93, 173, 226, 0.2)) 
            drop-shadow(0 0 15px rgba(93, 173, 226, 0.15));
}

.phone-logo-text {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 
        0 0 8px rgba(93, 173, 226, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
    /* Make it blend like a wallpaper element */
    opacity: 0.95;
}

.phone-logo-img {
    width: 100%;
    height: auto;
    display: block;
    /* Accent blue color tint to match app color scheme */
    filter: brightness(1.3) contrast(1.1) saturate(1.2) 
            hue-rotate(-10deg) drop-shadow(0 0 8px rgba(93, 173, 226, 0.6));
    /* Add slight opacity for wallpaper effect */
    opacity: 0.92;
    /* Blend into phone background like a wallpaper */
    mix-blend-mode: screen;
}

/* Logo Fade In Animation */
@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.phone-widgets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    flex: 1;
    margin-left: auto;
}

/* Weather Widget - Pill Shape */
.weather-widget {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.weather-widget .weather-icon {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
}

.weather-temp {
    line-height: 1;
    white-space: nowrap;
}

/* Input Groups and Labels for Better Touch Targets */
.input-group {
    width: 100%;
    margin-bottom: 0;
}

.input-label {
    display: block;
    width: 100%;
    cursor: text;
    position: relative;
}

/* Phone Input Fields */
.phone-input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    outline: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-height: 48px; /* Ensure touch target is large enough */
}

.phone-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.phone-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: #4A90E2;
    box-shadow: 
        0 0 0 3px rgba(74, 144, 226, 0.3),
        0 0 15px rgba(74, 144, 226, 0.4),
        inset 0 0 10px rgba(74, 144, 226, 0.1);
}

/* Password Container in Phone */
.phone-login-form .password-container {
    position: relative;
    width: 100%;
    display: block;
}

.phone-login-form .password-container input {
    padding-right: 3rem;
}

.phone-login-form .input-label.password-container {
    display: block;
}

.phone-login-form .password-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.75rem; /* Larger touch target */
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-login-form .password-toggle:hover {
    color: #fff;
}

.phone-login-form .eye-icon {
    width: 20px;
    height: 20px;
}

/* Phone Login Button with Enhanced Gradient */
.phone-login-button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #5DADE2 0%, #4A90E2 50%, #2E5F8A 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(74, 144, 226, 0.4),
        0 2px 5px rgba(0, 0, 0, 0.2);
    min-height: 48px; /* Ensure touch target is large enough */
}

.phone-login-button:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(74, 144, 226, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #6BBEF3 0%, #5DADE2 50%, #357ABD 100%);
}

/* Remember Me Toggle - Small and Non-intrusive */
.remember-me-container {
    width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
}

.remember-me-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
    user-select: none;
}

/* replaced by animated flashPulse further down */
.flash-highlight { box-shadow: 0 0 0 3px var(--primary-blue) inset; transition: box-shadow .3s ease; }

/* Skeleton loaders */
.skeleton-card { position: relative; overflow: hidden; }
.skeleton-line { height: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.18), rgba(255,255,255,0.08)); border-radius: 6px; margin: .35rem 0; animation: skeleton-shimmer 1.5s ease-in-out infinite; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w30 { width: 30%; }

@keyframes skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

.spinner-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Loading state for buttons */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

/* Smooth checkbox animations */
input[type="checkbox"].delivery-checkbox {
    position: relative;
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

input[type="checkbox"].delivery-checkbox:checked {
    background: var(--primary-green);
    border-color: var(--primary-green);
    animation: checkbox-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input[type="checkbox"].delivery-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    animation: checkmark-draw 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.1s both;
}

@keyframes checkbox-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes checkmark-draw {
    0% { height: 0; width: 0; }
    50% { height: 12px; width: 0; }
    100% { height: 12px; width: 6px; }
}

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

.progress-ring-circle {
    transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Completion badge with animation */
.completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(88, 214, 141, 0.1);
    border: 1px solid var(--primary-green);
    border-radius: 8px;
    color: var(--primary-green);
    font-weight: 600;
    animation: fade-in-up 0.3s ease;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Highlight in circuit search */
mark { background: rgba(255, 235, 59, 0.5); color: inherit; padding: 0 .1rem; border-radius: 2px; }

.remember-me-label:hover {
    color: rgba(255, 255, 255, 0.9);
}

.remember-me-checkbox {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.remember-me-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.remember-me-checkbox:checked {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.remember-me-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.remember-me-text {
    line-height: 1.2;
}

.phone-login-button:active {
    transform: translateY(0);
    box-shadow: 
        0 2px 10px rgba(74, 144, 226, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Login Error on Phone */
.phone-login-form .login-error {
    width: 100%;
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    color: #ff6b7a;
    font-size: 0.875rem;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .phone-device {
        width: 280px;
        height: 570px;
    }
    
    .phone-logo-img {
        max-width: 160px;
    }
    
    .phone-input {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
}

/* Phone Rise Up Transition Animation */
@keyframes phoneRiseUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-120%) scale(0.8);
        opacity: 0;
    }
}

@keyframes fadeOutBackground {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.login-screen.zoom-transition .phone-device {
    animation: phoneRiseUp 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.login-screen.zoom-transition .phone-container {
    animation: none;
}

.login-screen.zoom-transition {
    animation: fadeOutBackground 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

#mainApp {
    opacity: 0;
    transform: translateY(100%);
}

#mainApp.zoom-in {
    opacity: 1;
    animation: slideUpFromBottom 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes slideUpFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hide old login elements */
.login-bg-video,
.landing-content,
.tap-to-login,
.login-form-container {
    display: none !important;
}

/* Fade and blur background when login form is visible */
.login-screen.form-active .login-bg-video {
    opacity: 0.3;
    filter: blur(8px);
}

/* Landing Page Content */
.landing-content {
    position: absolute;
    bottom: 8rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.landing-content.hide {
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* Swipe Indicator */
/* Tap to Login Indicator */
.tap-to-login {
    position: fixed;
    bottom: 8rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}

.tap-to-login:hover {
    transform: translateX(-50%) scale(1.05);
}

.tap-to-login:active {
    transform: translateX(-50%) scale(0.95);
}

@media (max-width: 768px) {
    .tap-to-login {
        bottom: 6rem;
    }
}

.tap-text {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.3px;
}

/* Login Form Container */
.login-form-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 90%;
    max-width: 320px;
    z-index: 2;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding-bottom: 1.5rem;
}

.login-form-container.show {
    transform: translateX(-50%) translateY(-50vh);
}

/* Mobile: lift form even higher for better visibility */
@media (max-width: 768px) {
    .login-form-container.show {
        transform: translateX(-50%) translateY(-55vh);
    }
}

/* Minimalistic Floating Login Form - No background, just pill shapes */
.login-form {
    background: transparent;
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

body.dark-mode .login-form {
    background: transparent;
}

/* Pill-shaped Input Fields */
.login-form input[type="text"],
.login-form input[type="password"] {
    padding: 0.875rem 1.25rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    font-size: 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: #2C3E50;
    transition: all 0.3s ease;
    outline: none;
}

/* Password field container for toggle button */
.password-container {
    position: relative;
    width: 100%;
}

.password-container input {
    padding-right: 3rem;
    width: 100%;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #2C3E50;
    padding: 0.25rem;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle .eye-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.password-toggle:hover {
    opacity: 1;
}

body.dark-mode .password-toggle {
    color: #e0e0e0;
}

body.dark-mode .login-form input[type="text"],
body.dark-mode .login-form input[type="password"] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.2);
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border-color: var(--primary-blue);
    background-color: white;
    box-shadow: 0 0 0 4px rgba(91, 143, 185, 0.1);
}

body.dark-mode .login-form input[type="text"]:focus,
body.dark-mode .login-form input[type="password"]:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-blue);
}

.login-form input::placeholder {
    color: rgba(44, 62, 80, 0.5);
    font-weight: 400;
}

body.dark-mode .login-form input::placeholder {
    color: rgba(224, 224, 224, 0.5);
}

.login-error {
    padding: 0.75rem;
    background-color: #fee;
    color: #c00;
    border-radius: 20px;
    font-size: 0.9rem;
    text-align: center;
}

body.dark-mode .login-error {
    background-color: #4a2020;
    color: #ff6b6b;
}

.login-button {
    padding: 1rem;
    background: var(--red-accent);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
    margin-top: 0.5rem;
}

.login-button.correct-password {
    background: #28a745;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}

.login-button.correct-password:hover {
    box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
}

.login-button:active {
    transform: translateY(0);
}

/* Header */
header {
    background: var(--card-bg);
    color: var(--navy);
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 8px var(--shadow);
    border-bottom: none;
}

body.dark-mode header {
    background: #2a2a2a;
    border-bottom: 1px solid #404040;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--navy);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Icon Button Base Styles */
.icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-button:hover {
    transform: scale(1.1);
}

.icon-button .icon {
    width: 24px;
    height: 24px;
}

.icon-button .icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Improve SVG icon visibility with thicker strokes */
svg {
    stroke-width: 2.5;
}

/* Quick dial and icon buttons */
.quick-dial {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 0.5rem;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.quick-dial:hover {
    transform: scale(1.1);
}

.quick-dial .icon {
    width: 24px;
    height: 24px;
}

/* Help Button */
.help-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 0.5rem;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.help-button:hover {
    transform: scale(1.1);
}

.help-button .icon {
    width: 24px;
    height: 24px;
}


/* Settings Container */
.settings-container {
    position: relative;
}

/* Logout Button */
.logout-button {
    border-color: var(--red-accent) !important;
    color: var(--red-accent) !important;
}

.logout-button:hover {
    background: rgba(224, 120, 86, 0.1) !important;
    border-color: var(--red-accent) !important;
}

/* Settings Dropdown */
.settings-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 8px 24px var(--shadow);
    min-width: 260px;
    z-index: var(--z-dropdown);
}

.settings-dropdown.show {
    display: block;
}

.settings-section {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--medium-gray);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.theme-selector {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s;
}

.theme-selector:hover {
    border-color: var(--primary-blue);
}

.theme-selector:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.settings-dropdown label {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.75rem 0.5rem;
    border-radius: 6px;
    transition: background 0.2s;
}

.settings-dropdown label:hover {
    background: var(--warm-gray);
}

.settings-dropdown input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Tabs */
.tab-container {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background-color: transparent;
    border-bottom: none;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
}

.tab-button {
    padding: 0.75rem 2rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px var(--shadow);
}

.tab-button:hover {
    background-color: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
}

.tab-button.active {
    background-color: var(--primary-blue);  /* Action Blue for active tab */
    color: white;
    border-color: var(--primary-blue);
    box-shadow: 0 4px 8px var(--shadow);
}

/* Main Content */
main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Circuit Selector */
.circuit-selector-container {
    margin-bottom: 2rem;
    padding: 0 2rem;
}

.circuit-selector-container label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--dark-gray);
}

/* Custom Circuit Selector */
.custom-circuit-select {
    position: relative;
    width: 100%;
}

.circuit-select-display {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.circuit-select-display:hover {
    border-color: var(--primary-blue);
}

.dropdown-arrow {
    transition: transform 0.2s ease;
}

.custom-circuit-select.open .dropdown-arrow {
    transform: rotate(180deg);
}

.circuit-select-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--shadow);
    z-index: 1000;
    max-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.circuit-search {
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1.5px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    font-size: 1rem;
    outline: none;
}

.circuit-search::placeholder {
    color: var(--medium-gray);
}

.circuit-options {
    overflow-y: auto;
    max-height: 350px;
}

.circuit-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
}

.circuit-option:hover {
    background-color: var(--hover-bg);
}

.circuit-option.favorited {
    background-color: rgba(74, 144, 226, 0.1);
}

.favorite-star {
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.15s ease;
    user-select: none;
}

.favorite-star:hover {
    transform: scale(1.2);
}

.favorite-star.active {
    color: #FFD700;
}

.favorite-star.inactive {
    color: var(--medium-gray);
    opacity: 0.5;
}

/* Old select (kept for compatibility) */
#circuitSelect {
    display: none;
}

/* Cover Sheet */
.cover-sheet {
    background-color: var(--card-bg);
    border: 2px solid var(--primary-blue);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px var(--shadow);
}

.cover-sheet h2 {
    color: var(--text-color);         /* Primary text color (Off-White in dark mode) */
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
    font-weight: 600;
}

.date-display {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    color: var(--medium-gray);        /* Secondary text (Medium Gray) */
}

.product-counts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    max-width: 400px;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    min-height: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    gap: 0.35rem;
    flex-direction: column;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

/* Product-specific colors for badges - iOS style with subtle gradients */
.product-badge.product-ES {
    background: linear-gradient(135deg, #5DADE2 0%, #2E86C1 100%);
    color: white;
}

.product-badge.product-UV {
    background: linear-gradient(135deg, #F8C471 0%, #F39C12 100%);
    color: #1A1D21;
}

.product-badge.product-HS {
    background: linear-gradient(135deg, #58D68D 0%, #27AE60 100%);
    color: white;
}

.product-badge.product-STF {
    background: linear-gradient(135deg, #EC7063 0%, #E74C3C 100%);
    color: white;
}

.product-badge.product-JO {
    background: linear-gradient(135deg, #AF7AC5 0%, #8E44AD 100%);
    color: white;
}

.product-badge.product-LU {
    background: linear-gradient(135deg, #EB984E 0%, #E67E22 100%);
    color: white;
}

.product-badge.product-ISA {
    background: linear-gradient(135deg, #F8C471 0%, #F39C12 100%);
    color: #1A1D21;
}

.product-badge.product-PASA {
    background: linear-gradient(135deg, #48C9B0 0%, #16A085 100%);
    color: white;
}

.product-badge.product-YHTS {
    background: linear-gradient(135deg, #CD6155 0%, #C0392B 100%);
    color: white;
}

.product-badge.product-MST {
    background: linear-gradient(135deg, #9B59B6 0%, #7D3C98 100%);
    color: white;
}

.product-badge.product-Muu,
.product-badge.product-RL,
.product-badge.product-PL,
.product-badge.product-LUUM {
    background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 100%);
    color: white;
}

.product-badge .count {
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
}

/* Route Buttons */
.route-button {
    width: 100%;
    padding: 1.15rem;
    font-size: 1.05rem;
    font-weight: 600;
    border: 2px solid var(--primary-blue);    /* Action Blue */
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--primary-blue);          /* Action Blue for "Aloita reitti" */
    color: white;
    margin-top: 0.75rem;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.route-button:hover {
    background: #5DADE2;                      /* Lighter blue on hover */
    border-color: #5DADE2;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4);
}

.route-button:active {
    transform: translateY(0);
}

.route-button.complete {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.route-time {
    margin-top: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    color: var(--primary-blue);
}

body.dark-mode .route-time {
    color: var(--accent-cyan);
}

/* Route Complete Success Animation */
.route-complete-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 29, 33, 0.95);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20vh;
    z-index: 2000;
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.success-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes popIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkmark-circle-only {
    width: 120px;
    height: 120px;
    animation: checkmarkAppear 0.5s ease-out both;
}

@keyframes checkmarkAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkmark-circle-only svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 16px rgba(40, 167, 69, 0.4));
}

.checkmark-circle-only circle {
    animation: circlePulse 0.3s ease-out;
}

@keyframes circlePulse {
    0% {
        r: 0;
    }
    50% {
        r: 28;
    }
    100% {
        r: 25;
    }
}

/* Notification animations */
@keyframes slideInDown {
    from {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes slideOutUp {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
}
.checkmark {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: checkmarkDraw 0.3s ease-out 0.2s forwards;
}

@keyframes checkmarkDraw {
    to {
        stroke-dashoffset: 0;
    }
}


/* Filter Container */
.filter-container {
    background-color: var(--card-bg);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.filter-container label {
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.filter-container input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* Subscriber List */
.building-group {
    margin-bottom: 2rem;
}

.building-header {
    background-color: var(--building-bg);
    padding: 1rem 1.5rem;
    border-radius: 12px 12px 0 0;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-color);         /* Use primary text color */
    letter-spacing: -0.01em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 56px;
    z-index: 2;
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.05);
}

.building-name {
    flex: 1;
    color: #ff8c42; /* Soft orange to differentiate building addresses */
}

.building-delivery-count {
    background: var(--primary-blue);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

body.dark-mode .building-header {
    color: var(--text-color);         /* Off-White in dark mode */
}

/* Cascading animation for subscriber cards */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subscriber-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: max-height 0.5s ease-out, opacity 0.4s ease-out, margin 0.4s ease-out, padding 0.4s ease-out, transform 0.2s ease, box-shadow 0.2s ease;
    max-height: 500px;
    opacity: 1;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y; /* Allow vertical scrolling while handling horizontal swipes */
}

/* Admin-only subtle sequential index badge */
/* Delivery order numbering - top left for all users */
.delivery-order-number {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(52, 152, 219, 0.15);
    color: var(--text-color);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.dark-mode .delivery-order-number {
    background: rgba(52, 152, 219, 0.25);
    color: #3498db;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Old admin badge style - keeping for backwards compatibility */
.delivery-index-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.08);
    color: var(--text-color);
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 10px;
    letter-spacing: .5px;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: .55;
}

body.dark-mode .delivery-index-badge {
    background: rgba(255,255,255,0.12);
    color: #fff;
    opacity: .45;
}

/* Add spacing for new staircase within same building */
.subscriber-card.new-staircase {
    margin-top: 0.75rem;
}

.subscriber-card:active {
    cursor: grabbing;
}

.subscriber-card.hiding {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.subscriber-card:last-child {
    border-radius: 0 0 8px 8px;
}

/* Checkbox visibility control - hidden by default, swipe is primary method */
.subscriber-card input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    display: none; /* Hidden by default */
}

/* Show checkboxes when user enables the setting */
.subscriber-card.show-checkboxes input[type="checkbox"] {
    display: block;
}

.subscriber-info {
    flex: 1;
    padding-left: 2.5rem; /* Add left padding to avoid overlap with delivery number */
}

.subscriber-address {
    font-weight: 700;
    font-size: 1.1rem; /* Increased for better readability */
    margin-bottom: 0.5rem; /* Increased spacing between address and name */
    color: #ff8c42; /* Soft orange to differentiate from name */
}

.subscriber-apartment {
    font-weight: 700;
    font-size: 1.1rem; /* Increased for better readability */
    margin-bottom: 0.5rem; /* Increased spacing between apartment and name */
    color: var(--text-color); /* Default color - apartment is not a street address */
}

.subscriber-name {
    font-size: 1.125rem; /* 25% increase from 0.9rem */
    font-weight: 600;
    color: #000000; /* Black in light mode */
    margin-bottom: 0.5rem;
}

body.dark-mode .subscriber-name {
    color: #ffffff; /* White in dark mode */
}

.subscriber-products {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-right: 4px;
    margin-bottom: 2px;
    white-space: nowrap;
    background: var(--primary-blue);
    color: white;
    position: relative;
}

/* Quantity badge for products (e.g., UV2, ES2, HS2) */
.quantity-badge {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.9;
}

/* Product-specific colors for tags */
.product-tag.product-ES {
    background: #2E86C1;            /* Darker blue for better contrast */
    color: white;
}

.product-tag.product-UV {
    background: #F39C12;            /* Darker gold for better contrast */
    color: #1A1D21;                 /* Dark text for contrast */
}

.product-tag.product-HS {
    background: #27AE60;            /* Darker green for better contrast */
    color: white;
}

.product-tag.product-STF {
    background: #E74C3C;            /* Darker red-orange for better contrast */
    color: white;
}

.product-tag.product-JO {
    background: #8E44AD;            /* Darker purple for better contrast */
    color: white;
}

.product-tag.product-LU {
    background: #E67E22;            /* Darker orange for better contrast */
    color: white;
}

.product-tag.product-ISA {
    background: #F39C12;            /* Darker gold for Itä-Savo */
    color: #1A1D21;                 /* Dark text for contrast */
}

.product-tag.product-PASA {
    background: #16A085;            /* Darker turquoise for Parikkalan Sanomat */
    color: white;
}

.product-tag.product-YHTS {
    background: #C0392B;            /* Darker red for Yhteishyvä */
    color: white;
}

.product-tag.product-MST {
    background: #7D3C98;            /* Darker purple for Maaseudun Tulevaisuus */
    color: white;
}

.product-tag.product-Muu,
.product-tag.product-RL,
.product-tag.product-PL,
.product-tag.product-LUUM {
    background: #7F8C8D;            /* Darker gray for miscellaneous */
    color: white;
}

/* Removed .nav-link styles (per-address navigation eliminated) */

/* Report Button */
.report-button {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    width: 38px;
    height: 38px;
}

.report-button .icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.report-button:hover {
    background: rgba(74, 144, 226, 0.1);
    transform: scale(1.1);
}

/* Key info button (admin only) */
.key-info-button {
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warning-orange);
    width: 38px;
    height: 38px;
}

.key-info-button .icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.key-info-button:hover {
    background: rgba(255, 152, 0, 0.1);
    transform: scale(1.1);
}

/* Key info display in card */
.key-info {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 152, 0, 0.1);
    border-left: 3px solid var(--warning-orange);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.key-info .icon {
    flex-shrink: 0;
    color: var(--warning-orange);
}

/* Circuit Tracker */
.circuit-tracker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.tracker-view {
    width: 100%;
}

.gps-tracking-container {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.circuit-item {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    display: flex;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Status bar on the left - Traffic light system */
.circuit-status-bar {
    width: 8px;
    min-height: 100%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.circuit-status-bar.not-started {
    background: linear-gradient(180deg, #DC3545 0%, #C82333 100%);
}

.circuit-status-bar.in-progress {
    background: linear-gradient(180deg, #FFA726 0%, #FF9800 100%);
}

.circuit-status-bar.completed {
    background: linear-gradient(180deg, #28a745 0%, #218838 100%);
}

.circuit-content {
    flex: 1;
    padding: 1rem;
    transition: all 0.3s ease;
}

/* Add card glows based on status for quick glance */
.circuit-item.not-started-item {
    background: linear-gradient(90deg, rgba(220, 53, 69, 0.08) 0%, var(--card-bg) 15%);
    box-shadow: 0 0 30px rgba(220, 53, 69, 0.5), 0 2px 4px var(--shadow);
}

.circuit-item.in-progress-item {
    background: linear-gradient(90deg, rgba(255, 167, 38, 0.12) 0%, var(--card-bg) 15%);
    box-shadow: 0 0 30px rgba(255, 167, 38, 0.6), 0 2px 4px var(--shadow);
}

.circuit-item.completed-item {
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.08) 0%, var(--card-bg) 15%);
    box-shadow: 0 0 30px rgba(40, 167, 69, 0.5), 0 2px 4px var(--shadow);
}

.circuit-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    justify-content: space-between;
}

.circuit-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-color);
    flex: 1;
}

/* Reset Route Button */
.reset-route-btn {
    background: rgba(255, 159, 64, 0.2);
    border: 1px solid #FF9F40;
    color: #FF9F40;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.reset-route-btn:hover {
    background: rgba(255, 159, 64, 0.3);
    transform: rotate(180deg);
    box-shadow: 0 2px 8px rgba(255, 159, 64, 0.3);
}

.reset-route-btn:active {
    transform: rotate(180deg) scale(0.95);
}

/* Circuit Management Menu Button (3-dot) */
.circuit-menu-btn {
    background: rgba(108, 117, 125, 0.2);
    border: 1px solid #6c757d;
    color: #adb5bd;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    font-weight: bold;
    letter-spacing: -1px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.circuit-menu-btn:hover {
    background: rgba(108, 117, 125, 0.3);
    color: #f8f9fa;
    border-color: #adb5bd;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.circuit-menu-btn:active {
    transform: scale(0.95);
}

/* Circuit Menu (3-dot menu) */
.circuit-menu-container {
    position: relative;
}

.circuit-menu-button {
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.2s;
    color: var(--text-color);
}

.circuit-menu-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .circuit-menu-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.circuit-menu-button .icon {
    width: 18px;
    height: 18px;
}

.circuit-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.circuit-menu-dropdown.show {
    display: block;
}

.circuit-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.95rem;
    color: var(--text-color);
}

.circuit-menu-item:hover {
    background: rgba(74, 144, 226, 0.1);
}

.circuit-menu-item.reset-route {
    color: var(--red-accent);
}

.circuit-menu-item.reset-route:hover {
    background: rgba(224, 120, 86, 0.1);
}

.circuit-menu-item .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.circuit-status {
    font-size: 0.9rem;
    color: var(--medium-gray);
    margin-bottom: 0.75rem;
}

.circuit-progress-bar {
    margin-top: 0.75rem;
}

/* Remove old circuit controls and buttons */
.circuit-controls {
    display: none;
}

.circuit-btn {
    display: none;
}

.route-complete-container {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 4px var(--shadow);
}

/* Responsive Design */
@media (max-width: 768px) {
    .logo {
        font-size: 1.5rem;
    }

    .cover-sheet h2 {
        font-size: 1.3rem;
    }

    .product-counts {
        gap: 0.5rem;
    }

    .product-badge {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }

    .circuit-tracker {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 375px) {
    main {
        padding: 0.75rem;
    }

    .cover-sheet {
        padding: 1rem;
    }

    .subscriber-card {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .product-badge,
    .product-tag {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Route Messages Panel */
.messages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    gap: 2rem;
}

.messages-header h2 {
    margin: 0;
}

.messages-header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.messages-controls {
    margin-bottom: 2rem;
}

.danger-button {
    background: var(--red-accent);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.danger-button:hover {
    background: #d06846;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(224, 120, 86, 0.3);
}

.route-messages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.no-messages {
    text-align: center;
    padding: 3rem;
    color: var(--dark-gray);
    font-size: 1.1rem;
}

.message-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-left: 4px solid var(--red-accent);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.message-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.message-circuit {
    font-weight: 700;
    color: var(--primary-blue);
    font-size: 1.1rem;
    flex: 1;
}

.message-timestamp {
    color: var(--dark-gray);
    font-size: 0.9rem;
}

.message-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.message-badge {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.message-badge.read {
    background: rgba(110, 164, 92, 0.15);
    color: #3a7a32;
}

.message-badge.offline {
    background: rgba(74, 144, 226, 0.15);
    color: #2c6fb9;
}

body.dark-mode .message-badge.read {
    background: rgba(90, 160, 90, 0.25);
    color: #a6e0a0;
}

body.dark-mode .message-badge.offline {
    background: rgba(74, 144, 226, 0.25);
    color: #7ab8ff;
}

.message-card.message-read {
    border-left-color: rgba(90, 160, 90, 0.5);
    opacity: 0.85;
}

.message-card.message-offline {
    border-left-color: var(--primary-blue);
    border-left-style: dashed;
    cursor: default;
}

.message-body > div {
    line-height: 1.6;
}

.message-reason {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--warm-gray);
    border-radius: 6px;
    font-style: italic;
}

/* Message photo display */
.message-photo-container {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: var(--warm-gray);
}

.message-photo {
    max-width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: transform 0.2s;
}

.message-photo:hover {
    transform: scale(1.02);
}

.message-photo-container a {
    display: block;
    text-decoration: none;
}

/* Custom Confirmation Dialog */
.custom-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    /* Remove flex centering - content will be positioned dynamically */
}

.custom-dialog-content {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    /* Position will be set dynamically by JavaScript */
}

/* Ensure form controls inside custom dialogs have spacing */
.custom-dialog-content select,
.custom-dialog-content textarea,
.custom-dialog-content input[type="text"],
.custom-dialog-content input[type="number"],
.custom-dialog-content input[type="email"],
.custom-dialog-content input[type="password"] {
    margin-top: .35rem;
    margin-bottom: .9rem;
}

.custom-dialog-message {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    line-height: 1.5;
}

.custom-dialog-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1rem; /* ensure space above actions so they don't overlap content */
}

.custom-dialog-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

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

.cancel-btn:hover {
    background: var(--warm-gray);
}

.confirm-btn {
    background: var(--primary-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(93, 173, 226, 0.3);
}

.confirm-btn:hover {
    background: #4a9ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(93, 173, 226, 0.4);
}


/* Message swipe animations */
@keyframes checkmarkPopIn {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes circlePulse {
    0% {
        r: 0;
    }
    50% {
        r: 28;
    }
    100% {
        r: 25;
    }
}

/* Tracker and Messages Header with Refresh Button */
.tracker-header,
.messages-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.tracker-header h2,
.messages-header h2 {
    margin: 0;
    flex: 1;
}

.refresh-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.refresh-btn:hover {
    background: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

.refresh-btn:active {
    transform: translateY(0);
}

.refresh-icon {
    font-size: 1.2rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.refresh-btn:hover .refresh-icon {
    transform: rotate(180deg);
}

.refresh-btn.refreshing .refresh-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============= Dashboard Styles ============= */

.dashboard-header {
    margin-bottom: 2rem;
}

.dashboard-header h2 {
    color: var(--text-color);
    margin: 0;
    font-size: 1.8rem;
}

.dashboard-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-section h3 {
    color: var(--text-color);
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
}

.date-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.date-filter-container label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
}

.date-filter-container input[type="date"],
.date-filter-container select {
    padding: 0.6rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.date-filter-container input[type="date"]:focus,
.date-filter-container select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(93, 173, 226, 0.1);
}

.btn-primary,
.btn-success {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--primary-blue);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(93, 173, 226, 0.3);
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.table-container {
    overflow-x: auto;
    border-radius: 8px;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    font-size: 0.9rem;
}

.dashboard-table thead {
    background: var(--primary-blue);
    color: white;
}

.dashboard-table th,
.dashboard-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.dashboard-table tbody tr {
    transition: background 0.2s ease;
}

.dashboard-table tbody tr:hover {
    background: var(--warm-gray);
}

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

.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-not-started {
    background: #dc3545;
    color: white;
}

.status-in-progress {
    background: #ffc107;
    color: #000;
}

.status-completed {
    background: #28a745;
    color: white;
}

.no-data {
    text-align: center;
    padding: 2rem;
    color: var(--secondary-text);
    font-style: italic;
}

/* Dark mode adjustments for dashboard */
body.dark-mode .dashboard-section {
    background: #1a1a1a;
}

body.dark-mode .dashboard-table {
    background: #1a1a1a;
}

body.dark-mode .date-filter-container input[type="date"],
body.dark-mode .date-filter-container select {
    background: #2c2c2c;
    border-color: #444;
    color: #f0f0f0;
}

body.dark-mode .dashboard-table tbody tr:hover {
    background: #2c2c2c;
}

/* Responsive dashboard */
@media (max-width: 768px) {
    .date-filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-filter-container label {
        width: 100%;
    }
    
    .btn-primary,
    .btn-success {
        width: 100%;
        justify-content: center;
    }
    
    .dashboard-table {
        font-size: 0.8rem;
    }
    
    .dashboard-table th,
    .dashboard-table td {
        padding: 0.5rem 0.7rem;
    }
}

/* Delivery Tracker Styles */
.delivery-tracker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.tracker-big-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(93, 173, 226, 0.3);
    width: 100%;
    max-width: 400px;
}

.tracker-big-number span:first-child {
    font-size: 4rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.tracker-label {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    font-weight: 500;
}

/* Section header with toggle */
.section-header-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header-with-toggle h3 {
    margin: 0;
}

/* Toggle switch */
.toggle-switch {
    display: flex;
    gap: 0.5rem;
    background: var(--warm-gray);
    border-radius: 8px;
    padding: 0.3rem;
}

.toggle-switch input[type="radio"] {
    display: none;
}

.toggle-switch label {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
}

.toggle-switch input[type="radio"]:checked + label {
    background: var(--primary-blue);
    color: white;
    box-shadow: 0 2px 8px rgba(93, 173, 226, 0.3);
}

/* Period selector */
.period-selector {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.period-selector label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Circuit selection */
.circuit-multi-select-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-secondary {
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--primary-blue);
    background: transparent;
    color: var(--primary-blue);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
}

.selected-circuits {
    font-size: 0.85rem;
    color: var(--secondary-text);
    font-style: italic;
}

/* Circuit selection dialog */
.circuit-selection-dialog {
    max-width: 500px;
    width: 90%;
}

.circuit-checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--warm-gray);
    border-radius: 8px;
    margin: 1rem 0;
}

.circuit-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.circuit-checkbox-item:hover {
    background: rgba(93, 173, 226, 0.1);
}

.circuit-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.circuit-checkbox-item span {
    font-size: 0.95rem;
    color: var(--text-color);
}

/* Dark mode adjustments */
body.dark-mode .tracker-big-number {
    background: linear-gradient(135deg, #2a5d8a, #1e4d6e);
}

body.dark-mode .toggle-switch {
    background: #2c2c2c;
}

body.dark-mode .circuit-checkbox-list {
    background: #2c2c2c;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tracker-big-number span:first-child {
        font-size: 3rem;
    }
    
    .tracker-label {
        font-size: 1rem;
    }
    
    .section-header-with-toggle {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .period-selector {
        width: 100%;
    }
    
    .period-selector label {
        flex: 1;
        min-width: 140px;
    }
}

/* Add Subscriber Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--card-bg);
    margin: 5% auto;
    padding: 0;
    border-radius: 12px;
    max-width: 500px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

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

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--hover-bg);
    color: var(--text-color);
}

.modal-content form {
    padding: 1.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.product-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-height: 200px;
    overflow-y: auto;
}

.product-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.product-checkbox-item label {
    margin: 0 !important;
    font-weight: normal !important;
    cursor: pointer;
    color: var(--text-color);
}

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background: var(--primary-blue);
    color: white;
}

.btn-primary:hover {
    background: #5DADE2;
    transform: translateY(-1px);
}

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

.btn-secondary:hover {
    background: var(--hover-bg);
}

.settings-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.settings-action-btn .icon {
    width: 18px;
    height: 18px;
}

.settings-action-btn:hover {
    background: #5DADE2;
    transform: translateY(-1px);
}

/* Add subscriber between cards button */
.add-subscriber-between-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0.5rem auto;
    padding: 0;
    background: var(--primary-blue);
    border: 2px dashed var(--primary-blue);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.add-subscriber-between-btn:hover {
    opacity: 1;
    background: #5DADE2;
    border-color: #5DADE2;
    transform: scale(1.1);
}

.add-subscriber-between-btn .icon {
    width: 20px;
    height: 20px;
    stroke: white;
}

/* First button at top of list */
.building-group .add-subscriber-between-btn:first-child {
    margin-top: 0.25rem;
}

/* Last button at bottom of list */
.building-group .add-subscriber-between-btn:last-child {
    margin-bottom: 0.25rem;
}

/* Circuit Selection Dialog (Dashboard Reports) */
.custom-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.custom-dialog {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.custom-dialog h3 {
    margin: 0 0 1rem 0;
    color: var(--text-color);
    font-size: 1.25rem;
}

.circuit-checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
}

.circuit-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 0.5rem;
}

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

.circuit-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.circuit-checkbox-item span {
    color: var(--text-color);
    font-size: 1rem;
}

.custom-dialog-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.custom-dialog-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.custom-dialog-btn.cancel-btn {
    background: var(--border-color);
    color: var(--text-color);
}

.custom-dialog-btn.cancel-btn:hover {
    background: var(--hover-bg);
}

.custom-dialog-btn.confirm-btn {
    background: var(--primary-blue);
    color: white;
}

.custom-dialog-btn.confirm-btn:hover {
    background: #5DADE2;
    transform: translateY(-1px);
}

/* ========================================
   UI/UX ENHANCEMENTS
   ======================================== */

/* Loading States & Spinners */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: inherit;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-small {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

button.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

button.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, var(--border-color) 50%, var(--card-bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    height: 120px;
    margin-bottom: 1rem;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

/* Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--medium-gray);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.4;
    stroke: currentColor;
}

.empty-state h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

.empty-state p {
    margin: 0;
    font-size: 0.95rem;
    max-width: 400px;
}

/* Subscriber Card Enhancements */
.subscriber-card.delivered {
    opacity: 0.65;
    border-left: 4px solid var(--primary-green);
    transition: opacity 0.3s ease, transform .4s ease;
    position: relative;
}

/* Animated delivery check effect */
.subscriber-card.delivered::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-green);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    animation: popIn .4s ease;
    pointer-events: none;
}

@keyframes popIn {
    0% { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}

/* Flash highlight when auto-scrolling to next */
.flash-highlight {
    animation: flashPulse 1.2s ease-out;
}

@keyframes flashPulse {
    0% { box-shadow: 0 0 0 0 rgba(93,173,226,0.7); }
    50% { box-shadow: 0 0 0 10px rgba(93,173,226,0); }
    100% { box-shadow: 0 0 0 0 rgba(93,173,226,0); }
}

.subscriber-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    transition: all 0.2s ease;
}

.building-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--building-bg);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--border-color);
}

/* Route Progress Indicator */
.route-progress {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.progress-bar-container {
    position: relative;
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progress-shimmer 2s infinite;
}

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

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-color);
}

.progress-text strong {
    color: var(--primary-blue);
}

/* Offline Indicator */
.offline-banner {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #FF6B35, #F9A825);
    color: white;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 9998;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideDown 0.3s ease;
    display: none;
}

.offline-banner.show {
    display: block;
}

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

/* Microinteractions */
input[type="checkbox"]:checked {
    animation: checkBounce 0.3s ease;
}

@keyframes checkBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.product-badge {
    transition: transform 0.2s ease;
}

.product-badge:hover {
    transform: scale(1.05);
}

/* Skip Link (Accessibility) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-blue);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-weight: 600;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Mobile Responsive Improvements */
@media (max-width: 768px) {
    .tab-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .tab-container::-webkit-scrollbar {
        display: none;
    }
    
    .subscriber-card {
        padding: 0.75rem;
    }
    
    .product-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }
    
    .app-modal {
        width: 95%;
        max-width: none;
        padding: 1.5rem;
    }
    
    .toast-container {
        width: 95%;
    }
    
    .route-progress {
        padding: 0.75rem;
    }
    
    .empty-state {
        padding: 2rem 1rem;
    }
    
    .empty-state svg {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 0.5rem 0.75rem;
    }
    
    .header-right {
        gap: 0.5rem;
    }
    
    .icon-button {
        padding: 0.4rem;
    }
    
    .delivery-order-number {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
}

/* Toast with Action Button (Undo) */
.toast-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
    padding-left: 1rem;
}

.toast-action-btn {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    pointer-events: auto;
}

.toast-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

/* Visual Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.status-dot.completed {
    background: var(--primary-green);
}

.status-dot.in-progress {
    background: var(--yellow-accent);
}

.status-dot.not-started {
    background: var(--medium-gray);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Improved Circuit Stats */
.circuit-stats {
    display: flex;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--building-bg);
    border-radius: 8px;
    margin: 0.5rem 0;
    font-size: 0.85rem;
}

.circuit-stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.circuit-stat-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* ===== Offline Mode & Sync Styles ===== */

/* Offline Status Indicator */
.offline-status {
    position: fixed;
    top: 70px;
    right: 1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.offline-status.hidden {
    transform: translateX(120%);
}

.offline-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse-slow 3s ease-in-out infinite;
}

.offline-status-dot.online {
    background: var(--primary-green);
}

.offline-status-dot.offline {
    background: var(--danger-color);
    animation: pulse-fast 1s ease-in-out infinite;
}

.offline-status-dot.syncing {
    background: var(--yellow-accent);
    animation: pulse-fast 0.8s ease-in-out infinite;
}

@keyframes pulse-slow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes pulse-fast {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.offline-status-text {
    font-weight: 500;
    color: var(--text-primary);
}

.offline-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-blue);
    color: white;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.offline-status-badge.pending {
    background: var(--yellow-accent);
    color: var(--text-primary);
}

.offline-status-badge.conflicts {
    background: var(--danger-color);
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Conflict Notification Banner */
.conflict-notification {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: 600px;
    width: 90%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(238, 90, 82, 0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.conflict-notification-icon {
    font-size: 1.5rem;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.conflict-notification-text {
    flex: 1;
}

.conflict-notification-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.conflict-notification-description {
    font-size: 0.85rem;
    opacity: 0.95;
}

.conflict-notification-actions {
    display: flex;
    gap: 0.5rem;
}

.conflict-notification-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.conflict-notification-btn.primary {
    background: white;
    color: #ee5a52;
}

.conflict-notification-btn.primary:hover {
    background: #f8f8f8;
    transform: translateY(-1px);
}

.conflict-notification-btn.secondary {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.conflict-notification-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Conflict Resolution Modal */
.conflict-modal-content {
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

.conflict-header {
    margin-bottom: 1.5rem;
}

.conflict-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.conflict-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.conflict-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.conflict-option {
    padding: 1rem;
    background: var(--building-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.conflict-option:hover {
    border-color: var(--primary-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.conflict-option.selected {
    border-color: var(--primary-blue);
    background: rgba(var(--primary-blue-rgb, 0, 123, 255), 0.05);
}

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

.conflict-option-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.conflict-option-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.conflict-option-badge.local {
    background: var(--yellow-accent);
    color: var(--text-primary);
}

.conflict-option-badge.server {
    background: var(--primary-blue);
    color: white;
}

.conflict-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conflict-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    background: var(--card-bg);
    border-radius: 4px;
    font-size: 0.85rem;
}

.conflict-detail-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.conflict-detail-value {
    color: var(--text-primary);
    font-weight: 600;
}

.status-delivered {
    color: var(--primary-green);
}

.status-pending {
    color: var(--yellow-accent);
}

.conflict-timestamp {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    font-style: italic;
}

.conflict-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.conflict-action-btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.conflict-action-btn.resolve {
    background: var(--primary-blue);
    color: white;
}

.conflict-action-btn.resolve:hover {
    background: var(--button-hover);
    transform: translateY(-1px);
}

.conflict-action-btn.resolve:disabled {
    background: var(--medium-gray);
    cursor: not-allowed;
    transform: none;
}

.conflict-action-btn.cancel {
    background: var(--building-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.conflict-action-btn.cancel:hover {
    background: var(--hover-bg);
}

/* Sync Queue Indicator */
.sync-queue-indicator {
    position: relative;
    display: inline-block;
}

.sync-queue-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger-color);
    color: white;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Loading Spinner for Sync */
.sync-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Dark Mode Adjustments for Offline Features */
@media (prefers-color-scheme: dark) {
    .offline-status {
        background: var(--card-bg);
        box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    }
    
    .conflict-option {
        background: var(--building-bg);
    }
    
    .conflict-detail-row {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* ========================================
   FLOATING ACTION BUTTON (FAB)
   ======================================== */
.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9998;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 16px;
}

.fab.hidden {
    display: none;
}

.fab-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, #3a7bc8 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.fab-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

.fab-button:active {
    transform: scale(0.95);
}

.fab-button.active .fab-icon {
    transform: rotate(45deg);
}

.fab-icon {
    width: 24px;
    height: 24px;
    color: white;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-actions.hidden {
    display: none;
}

.fab-actions.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.fab-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    animation: fabActionSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-action:nth-child(1) { animation-delay: 0.05s; }
.fab-action:nth-child(2) { animation-delay: 0.1s; }
.fab-action:nth-child(3) { animation-delay: 0.15s; }

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

.fab-action:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateX(-4px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.fab-action svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.fab-action span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-color);
}

.fab-action:hover span {
    color: white;
}

/* Mobile FAB adjustments */
@media (max-width: 768px) {
    .fab {
        bottom: 16px;
        right: 16px;
    }
    
    .fab-button {
        width: 64px;
        height: 64px;
    }
    
    .fab-actions {
        gap: 8px;
    }
    
    .fab-action {
        padding: 14px 18px;
        font-size: 1rem;
    }
}

/* Hide FAB on desktop when not on delivery tab */
@media (min-width: 769px) {
    .fab {
        display: none;
    }
}

/* ========================================
   PULL-TO-REFRESH
   ======================================== */
.pull-to-refresh-indicator {
    position: fixed;
    top: 60px; /* Below header */
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 4px 12px var(--shadow);
    z-index: 999;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

.pull-to-refresh-indicator.ready .refresh-icon {
    transform: rotate(180deg);
    color: var(--primary-green);
}

.pull-to-refresh-indicator.refreshing .refresh-icon {
    animation: refreshSpin 1s linear infinite;
    color: var(--primary-blue);
}

.refresh-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-blue);
    transition: transform 0.3s ease, color 0.3s ease;
}

@keyframes refreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pull-to-refresh container needs relative positioning */
#deliveryTab,
#circuitCardList {
    position: relative;
}

/* ========================================
   SKELETON LOADING SCREENS
   ======================================== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--building-bg) 0%,
        var(--warm-gray) 50%,
        var(--building-bg) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.skeleton-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-title {
    height: 20px;
    width: 60%;
    margin-bottom: 8px;
}

.skeleton-subtitle {
    height: 16px;
    width: 40%;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 80%;
}

.skeleton-text.long {
    width: 95%;
}

.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 8px;
}

.skeleton-badge {
    height: 24px;
    width: 60px;
    border-radius: 12px;
    display: inline-block;
}

/* Skeleton Circuit Card */
.skeleton-circuit-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.skeleton-circuit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.skeleton-circuit-title {
    height: 24px;
    width: 40%;
}

.skeleton-circuit-status {
    height: 32px;
    width: 100px;
    border-radius: 16px;
}

.skeleton-progress-bar {
    height: 8px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.skeleton-stat {
    height: 16px;
    flex: 1;
}

/* Skeleton Subscriber Card */
.skeleton-subscriber-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.skeleton-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.skeleton-subscriber-content {
    flex: 1;
}

.skeleton-address {
    height: 18px;
    width: 70%;
    margin-bottom: 8px;
}

.skeleton-products {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.skeleton-product-badge {
    height: 20px;
    width: 50px;
    border-radius: 10px;
}

/* Skeleton Table Row */
.skeleton-table-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-table-cell {
    height: 16px;
}

/* Container for skeleton screens */
.skeleton-container {
    padding: 16px;
}

/* Hide skeleton when content loads */
.skeleton-container.loaded {
    display: none;
}

/* Dark mode skeleton adjustments */
body.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
}

/* ========================================
   SUCCESS ANIMATIONS
   ======================================== */

/* Confetti animation for route completion */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

@keyframes confetti-wiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confetti-fall 3s linear forwards;
}

/* Success pulse animation */
@keyframes success-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Checkmark animation */
@keyframes checkmark-draw {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 166;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkmark-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Success checkmark overlay */
.success-checkmark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    animation: checkmark-scale 0.6s ease;
}

.success-checkmark svg {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 4px 12px rgba(40, 167, 69, 0.4));
}

.success-checkmark .checkmark-circle {
    stroke: var(--primary-green);
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: checkmark-circle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-checkmark .checkmark-check {
    stroke: var(--primary-green);
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkmark-draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

/* Button success state */
.btn-success-flash {
    animation: success-pulse 0.6s ease;
}

/* Shimmer success effect */
@keyframes shimmer-success {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.success-shimmer {
    position: relative;
    overflow: hidden;
}

.success-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(40, 167, 69, 0.3),
        transparent
    );
    background-size: 200% 100%;
    animation: shimmer-success 1s ease;
    pointer-events: none;
}

/* Bounce animation for completed items */
@keyframes bounce-in {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bounce-in {
    animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Slide and fade for route completion */
@keyframes slide-fade-up {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-fade-up {
    animation: slide-fade-up 0.5s ease;
}

/* Celebration background flash */
@keyframes celebration-flash {
    0%, 100% {
        background-color: var(--bg-color);
    }
    50% {
        background-color: rgba(40, 167, 69, 0.1);
    }
}

.celebration-flash {
    animation: celebration-flash 0.8s ease;
}

/* Success ripple effect */
@keyframes success-ripple {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.success-ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-green);
    animation: success-ripple 0.8s ease-out;
}

/* ========================================
   GPS TRACKING
   ======================================== */

.gps-tracking-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px var(--shadow);
    overflow: hidden;
}

.gps-section-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1.5rem;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.gps-section-toggle:hover {
    background: var(--hover-bg);
}

.gps-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gps-toggle-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.dropdown-arrow {
    transition: transform 0.3s;
    color: var(--text-secondary);
}

.gps-section-toggle.active .dropdown-arrow {
    transform: rotate(180deg);
}

.gps-dropdown-content {
    padding: 0 1.5rem 1.5rem;
    animation: slideDown 0.3s ease-out;
}

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

.gps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.gps-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
}

/* Tracker header actions */
.tracker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.tracker-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tracker-view-switch {
    position: relative;
}

.menu-button {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
}

.menu-button:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

.menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 220px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px var(--shadow);
    z-index: 1000;
    padding: 6px;
}

.menu-item {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-color);
    border-radius: 8px;
    cursor: pointer;
}

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

.gps-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gps-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.gps-toggle-btn:hover {
    background: #3a7bc8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.gps-toggle-btn.active {
    background: #dc3545;
}

.gps-toggle-btn.active:hover {
    background: #c82333;
}

.gps-status {
    padding: 0.5rem 1rem;
    background: var(--warm-gray);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.gps-status.active {
    background: #d4edda;
    color: #155724;
}

.gps-map {
    width: 100%;
    height: 500px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    position: relative;
    display: none; /* Hidden by default */
}

.gps-map.active {
    display: block; /* Show when active */
}

.map-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--medium-gray);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gps-driver-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.gps-driver-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.2s;
}

.gps-driver-card:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px var(--shadow);
}

.gps-driver-card.active {
    border-color: var(--primary-green);
    background: rgba(88, 214, 141, 0.05);
}

.gps-driver-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.gps-driver-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-color);
}

.gps-driver-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-weight: 500;
}

.gps-driver-status.moving {
    background: #d4edda;
    color: #155724;
}

.gps-driver-status.stopped {
    background: #fff3cd;
    color: #856404;
}

.gps-driver-status.offline {
    background: #f8d7da;
    color: #721c24;
}

.gps-driver-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.gps-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--medium-gray);
}

.gps-info-row svg {
    width: 16px;
    height: 16px;
    color: var(--primary-blue);
}

.gps-info-value {
    color: var(--text-color);
    font-weight: 500;
}

.gps-last-update {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--medium-gray);
    text-align: center;
}

.gps-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .gps-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .gps-map {
        height: 400px;
    }
    
    .gps-driver-list {
        grid-template-columns: 1fr;
    }
}

/* GPS Map Markers */
.gps-marker {
    background: transparent !important;
    border: none !important;
}

.gps-marker-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-blue);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.gps-marker-icon.moving {
    color: var(--primary-green);
}

.gps-marker-icon.stopped {
    color: #ffc107;
}

.gps-marker-icon.offline {
    color: #dc3545;
}

.gps-marker-label {
    background: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    margin-top: -8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    color: #333;
}

.gps-popup {
    font-size: 13px;
    line-height: 1.6;
}

.gps-popup strong {
    font-size: 14px;
    color: var(--primary-blue);
}