:root {
            --sidebar-width: 280px; /* Standard width for desktop sidebar */
            --primary-blue-dark: #0A3D62; /* Slightly adjusted for better contrast */
            --primary-blue-light: #005a9c; /* Lighter blue for gradient */
            --text-color: #333;
            --secondary-text-color: #555;
            --white: #fff;
            --light-bg: #f5f7fa; /* A very light grey for background */
            --accent-green: #28a745;
            --shadow-light: rgba(0, 0, 0, 0.08);
            --shadow-medium: rgba(0, 0, 0, 0.15);
        }
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--light-bg);
            display: flex;
            min-height: 100vh;
            margin: 0;
            overflow-x: hidden; /* Prevents horizontal scroll */
        }

        /* --- Sidebar Styles (Desktop View) --- */
        .sidebar {
            width: var(--sidebar-width) !important;
            background: linear-gradient(to bottom, var(--primary-blue-dark), var(--primary-blue-light));
            color: var(--white);
            flex-shrink: 0; /* Prevents sidebar from shrinking when content grows */
            top: 0;
            height: 100vh; /* Full viewport height */
            padding: 20px;
            box-shadow: 2px 0 10px var(--shadow-light);
            overflow-y: auto; /* Enables scrolling for long menus */
            /* transition: transform 0.3s ease; */
        }
        @media (min-width: 992px) {
            .sidebar {
                position: sticky;
            }
        }
        .sidebar-header {
            text-align: center;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        .sidebar-header img {
            max-width: 90px;
            height: auto;
            margin-bottom: 10px;
            filter: drop-shadow(0 0 5px var(--shadow-medium));
        }
        .sidebar-header h3 {
            font-size: 1.35rem; /* Slightly larger for desktop */
            font-weight: 600;
            color: var(--white);
            line-height: 1.2;
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            height: calc(100vh - 215px);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
        }
        .sidebar-menu .nav-item {
            margin-bottom: 5px;
        }
        .sidebar-menu .nav-link {
            color: rgba(255, 255, 255, 0.85);
            padding: 12px 15px;
            border-radius: 8px;
            font-size: 1.0rem;
            display: flex;
            align-items: center;
            /* transition: background-color 0.3s ease, color 0.3s ease, border-left 0.3s ease; */
        }
        .sidebar-menu .nav-link i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        .sidebar-menu .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: var(--white);
        }
        .sidebar-menu .nav-link.active {
            background-color: rgba(255, 255, 255, 0.25); /* More distinct active state */
            color: var(--white);
            font-weight: 500;
            border-left: 4px solid var(--white);
            padding-left: 11px; /* Adjust padding due to border */
        }

        /* Collapsible sub-menus */
        .sidebar-menu .collapse {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 0 0 8px 8px;
            padding: 5px 0;
            margin-top: -5px; /* Overlap slightly for seamless look */
        }
        .sidebar-menu .collapse .dropdown-item {
            color: rgba(255, 255, 255, 0.75);
            padding: 10px 15px 10px 45px; /* Indent sub-menu items */
            font-size: 0.95rem;
            display: block;
            width: 100%;
            text-align: left;
            /* transition: background-color 0.3s ease, color 0.3s ease; */
        }
        .sidebar-menu .collapse .dropdown-item:hover {
            background-color: rgba(78, 17, 17, 0.1);
            color: var(--white);
        }
        .sidebar-menu .nav-link.dropdown-toggle::after {
            margin-left: auto;
            /* transition: transform 0.2s ease-in-out; */
        }
        .sidebar-menu .nav-link.dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(90deg);
        }
        .sidebar-menu .mt-auto { /* Pushes logout to bottom */
            margin-top: auto !important;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 20px !important; /* Ensure separation */
        }


        /* --- Main Content Area --- */
        .main-content {
            flex-grow: 1; /* Takes up remaining horizontal space */
            padding: 25px; /* Generous padding for desktop */
            background-color: var(--light-bg);
            /* transition: margin-left 0.3s ease; */
            position: relative;
            padding-top: 6rem !important;
        }
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e0e0e0;
            flex-wrap: wrap;
            position: fixed;
            width: calc(100% - var(--sidebar-width));
            left: var(--sidebar-width);
            background: white;
            top: 0;
            padding: 0.5rem 1rem;
            box-shadow: 1px 1px 20px gray;
            z-index: 1000;
        }
        .content-header h2 {
            margin: 0;
            color: var(--primary-blue-dark);
            font-size: 1.8rem; /* Larger heading */
            font-weight: 700;
        }
        .user-info-top {
            color: var(--text-color);
            font-size: 1rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .user-info-top i {
            margin-right: 8px;
            color: #777;
        }
        .btn-logout {
            background-color: #dc3545;
            color: var(--white);
            border: none;
            padding: 8px 18px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
            font-size: 0.95rem;
            margin-left: 20px; /* Spacing from user info */
        }
        .btn-logout:hover {
            background-color: #c82333;
            color: var(--white);
        }

        /* Main content cards */
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 15px var(--shadow-light);
            margin-bottom: 25px;
            background-color: var(--white);
        }
        .card-title {
            color: var(--primary-blue-dark);
            font-weight: 600;
            font-size: 1.3rem;
            margin-bottom: 15px;
        }
        .profile-card .card-body p {
            font-size: 1rem;
            color: var(--secondary-text-color);
            line-height: 1.6;
        }
        .profile-card .card-body strong {
            color: var(--text-color);
        }
        .list-group-item {
            border: none;
            padding: 12px 15px;
            border-radius: 8px;
            margin-bottom: 5px;
            /* transition: background-color 0.2s ease, color 0.2s ease; */
        }
        .list-group-item:hover {
            background-color: var(--light-bg);
            color: var(--primary-blue-dark);
        }
        .list-group-item i {
            color: var(--primary-blue-light);
            margin-right: 10px;
        }

        /* --- Mobile / Offcanvas Specific Styles --- */
        /* Offcanvas for mobile sidebar */
        .offcanvas.sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: var(--sidebar-width);
            transform: translateX(-100%); /* Start off-screen */
            /* transition: transform 0.3s ease-in-out; */
            border-right: 1px solid rgba(0,0,0,0.2);
            background: linear-gradient(to bottom, var(--primary-blue-dark), var(--primary-blue-light)); /* Same background as main sidebar */
            color: var(--white);
            padding: 20px;
        }
        .offcanvas.sidebar.show {
            transform: translateX(0); /* Slide in */
        }
        .offcanvas-header { /* Style for offcanvas header, similar to sidebar-header */
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 20px;
            margin-bottom: 20px;
            justify-content: center; /* Center content in offcanvas header */
            position: relative; /* For positioning close button */
        }
        .offcanvas-header .btn-close {
            filter: invert(1); /* White close button for dark background */
            position: absolute;
            right: 20px; /* Position close button */
            top: 20px;
        }
        .offcanvas-title {
            color: var(--white);
            font-weight: 600;
            font-size: 1.35rem; /* Match sidebar header font size */
            display: flex;
            align-items: center;
        }
        .offcanvas-title img {
             max-width: 90px; /* Match sidebar header image size */
             margin-right: 10px;
        }
        .offcanvas-body {
            /* Inherits sidebar-menu styles */
            height: calc(100% - 120px); /* Adjust for offcanvas header height */
            display: flex;
            flex-direction: column;
        }


        /* Navbar that appears on mobile (fixed at top) */
        .navbar-mobile-toggle {
            display: none; /* Hidden by default, shown by media query */
            width: 100%;
            background: linear-gradient(to right, var(--primary-blue-dark), var(--primary-blue-light));
            color: var(--white);
            padding: 15px 20px;
            box-shadow: 0 2px 5px var(--shadow-light);
            position: sticky; /* Keeps it at the top when scrolling */
            top: 0;
            z-index: 1030; /* Above main content, below offcanvas */
            align-items: center;
            justify-content: space-between;
        }
        .navbar-mobile-toggle .toggler-brand {
            font-weight: 700;
            font-size: 1.25rem; /* Adjusted for mobile navbar */
            color: var(--white);
            display: flex;
            align-items: center;
        }
        .navbar-mobile-toggle .toggler-brand img {
            max-height: 28px; /* Slightly smaller logo for mobile bar */
            margin-right: 10px;
        }
        .navbar-mobile-toggle .navbar-text {
            font-size: 0.9rem; /* Adjusted for mobile navbar */
        }

        /* --- Media Queries for Responsiveness --- */
        /* Desktop: Show sidebar, hide mobile toggle */
        @media (min-width: 992px) { /* On large screens and up (lg breakpoint) */
            .navbar-mobile-toggle {
                display: none !important;
            }
        }

        /* Mobile: Hide sidebar, show mobile toggle, adjust main content */
        @media (max-width: 991.98px) { /* On screens smaller than large (lg breakpoint) */
            body {
                flex-direction: column; /* Stack sidebar (offcanvas) and main content vertically */
            }
            .sidebar-lg-visible {
                display: none; /* Hide standard fixed sidebar */
            }
            .main-content {
                margin-left: 0; /* No margin pushed by desktop sidebar */
                padding: 15px; /* Adjust padding for mobile */
                padding-bottom: calc(75px + 0.5rem) !important;
            }
            .navbar-mobile-toggle {
                display: flex; /* Show fixed mobile toggle bar */
            }
            .content-header {
                flex-wrap: nowrap;
                left: 0;
                width: 100%;
                top: 4rem;
                
            }
            .content-header h2 {
                text-align: center;
                width: 100%;
                font-size: 1.5rem;
                margin-bottom: 10px;
            }
            .user-info-top {
                width: 100%;
                justify-content: center; /* Center user info and logout button */
                margin-top: 10px;
                font-size: 0.9rem;
            }
            .btn-logout {
                margin-left: 10px; /* Keep some spacing in line */
            }
        }

        /* Smaller mobile screens */
        @media (max-width: 767.98px) { /* Medium breakpoint (md) */
            .main-content {
                padding: 10px;
            }
            .content-header h2 {
                font-size: 1.3rem;
            }
            .card-title {
                font-size: 1.1rem;
            }
            .profile-card .card-body p {
                font-size: 0.9rem;
            }
            .list-group-item {
                font-size: 0.9rem;
                padding: 8px 10px;
            }
            .sidebar-header img { max-width: 70px; }
            .sidebar-header h3 { font-size: 1.1rem; }
            .sidebar-menu .nav-link { font-size: 0.9rem; padding: 10px 12px; }
            .sidebar-menu .collapse .dropdown-item { font-size: 0.85rem; padding: 8px 12px 8px 35px; }
            .navbar-mobile-toggle .toggler-brand { font-size: 1.1rem; }
            .navbar-mobile-toggle .toggler-brand img { max-height: 22px; }
            .navbar-mobile-toggle .navbar-text { font-size: 0.8rem; }
            .btn-logout { font-size: 0.85rem; padding: 6px 12px; margin-left: 5px;}
        }

        @media (max-width: 575.98px) { /* Small breakpoint (sm) */
            .main-content {
                padding: 8px;
            }
            .content-header h2 {
                font-size: 1.2rem;
            }
            .card {
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            }
            .card-title {
                font-size: 1rem;
            }
            .profile-card .card-body p {
                font-size: 0.85rem;
            }
            .list-group-item {
                font-size: 0.85rem;
                padding: 6px 8px;
            }
            .btn-logout {
                font-size: 0.8rem;
                padding: 5px 10px;
            }
            .sidebar-header img { max-width: 50px; }
            .sidebar-header h3 { font-size: 1rem; }
        }

        
        :root {
            --primary-color: #002f6c;
            --secondary-color: #00509e;
            --accent-color: #f1c40f;
            --background-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            --card-background: #ffffff;
            --text-color: #2c3e50;
            --light-blue: #3498db;
        }


        .profile-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            max-width: 450px;
            width: 100%;
            background: var(--card-background);
            position: relative;
        }

        /* HEADER BAR */
        .card-header-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            padding: 10px 15px;
            border-bottom: 3px solid var(--accent-color);
        }

        .header-title {
            color: white;
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: 0.5px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
            text-align: center;
            flex-grow: 1;
            margin: 0 10px;
        }

        .header-logo {
            height: 60px;
            width: auto;
            background: white;
            padding: 5px;
            border-radius: 12px;
        }

        /* Main content layout */
        .card-content-wrapper {
            display: flex;
            flex-direction: column;
        }

        /* Left Column: Photo Section */
        .card-photo-bg {
            background: linear-gradient(135deg, var(--light-blue) 0%, #5dade2 100%);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .profile-photo {
            border-radius: 50%;
            border: 3px solid #ffffff;
            width: 120px;
            height: 120px;
            object-fit: cover;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            margin-bottom: 15px;
        }

        .rank-badge {
            background: rgba(0, 0, 0, 0.2);
            color: #ffffff;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-block;
        }

        .rank-badge i {
            font-size: 0.8rem;
        }

        /* Right Column: Details Section */
        .profile-card .card-body {
            padding: 1.5rem;
            flex-grow: 1;
            
        }

        .card-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e0e0e0;
        }

        .profile-details .list-group-item {
            border: none;
            background: transparent;
            padding: 10px 0;
            font-size: 0.9rem;
            display: flex;
/*            align-items: center;*/
        }

        .profile-details .list-group-item i {
            font-size: 1.1rem;
            margin-right: 15px;
            width: 20px;
        }

        .profile-details .list-group-item:nth-child(1) i { color: #e74c3c; }
        .profile-details .list-group-item:nth-child(2) i { color: #f39c12; }
        .profile-details .list-group-item:nth-child(3) i { color: #27ae60; }
        .profile-details .list-group-item:nth-child(4) i { color: #3498db; }

        .profile-details .list-group-item span:first-child {
            color: #7f8c8d;
        }
        
        .profile-details .list-group-item .fw-bold {
            color: var(--text-color);
        }

        /* Responsive design for tablets and mobile */
        @media (min-width: 576px) {
            .card-content-wrapper {
                flex-direction: row;
            }
            
            .card-photo-bg {
                flex: 0 0 35%;
                max-width: 35%;
            }

            .profile-card .card-body {
                flex: 0 0 65%;
                max-width: 65%;
            }
        }
        
        /* New rule for a more rectangular shape on large screens */
        @media (min-width: 992px) {
            /* .profile-card {
                width: 450px;
                height: 280px;
            } */
            
            .card-photo-bg {
                padding: 15px;
            }
            
            .profile-photo {
                width: 100px;
                height: 100px;
                margin-bottom: 10px;
            }

            .card-header-bar, .profile-card .card-body {
                padding: 6px;
            }
            
            .card-title {
                font-size: 1.2rem;
                margin-bottom: 5px;
            }

            .profile-details .list-group-item {
                font-size: 0.7rem;
                padding: 5px 0;
            }
        }

        /* ANIMATIONS */
        .traffic-lights {
            position: absolute;
            top: 76px;
            right: 6px;
            display: flex;
            flex-direction: column;
            background: #333;
            padding: 8px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 10;
        }

        .traffic-light {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin: 3px 0;
            opacity: 0.3;
            transition: all 0.5s ease;
        }

        .red { background: #e74c3c; }
        .yellow { background: #f1c40f; }
        .green { background: #27ae60; }

        /* CSS Animation Replacement */
        .red {
            animation: animateRed 6s linear infinite;
        }
        .yellow {
            animation: animateYellow 6s linear infinite;
        }
        .green {
            animation: animateGreen 6s linear infinite;
        }

        @keyframes animateGreen {
            0%, 33.33% {
                opacity: 1;
                box-shadow: 0 0 15px #27ae60;
            }
            33.34%, 100% {
                opacity: 0.3;
                box-shadow: none;
            }
        }

        @keyframes animateYellow {
            0%, 33.33% {
                opacity: 0.3;
                box-shadow: none;
            }
            33.34%, 66.66% {
                opacity: 1;
                box-shadow: 0 0 15px #f1c40f;
            }
            66.67%, 100% {
                opacity: 0.3;
                box-shadow: none;
            }
        }

        @keyframes animateRed {
            0%, 66.66% {
                opacity: 0.3;
                box-shadow: none;
            }
            66.67%, 100% {
                opacity: 1;
                box-shadow: 0 0 15px #e74c3c;
            }
        }

        .road-stripes {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: repeating-linear-gradient(
                90deg,
                #f39c12 0px,
                #f39c12 30px,
                transparent 30px,
                transparent 60px
            );
            animation: roadMove 3s linear infinite;
            z-index: 1;
        }


        @keyframes roadMove {
            0% { background-position: 0px 0px; }
            100% { background-position: 60px 0px; }
        }

        .emergency-light {
            position: absolute;
            top: 75px;
            left: 20px;
            width: 12px;
            height: 12px;
            background: #e74c3c;
            border-radius: 50%;
            animation: blink 1.5s infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; box-shadow: 0 0 10px #e74c3c; }
            51%, 100% { opacity: 0.3; box-shadow: none; }
        }

        /* Floating Elements */
        .floating-element {
            position: absolute;
            color: rgba(255, 255, 255, 0.39);
            font-size: 2rem;
            animation: float 6s ease-in-out infinite;
        }

        .floating-element:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
        .floating-element:nth-child(2) { top: 60%; left: 80%; animation-delay: 2s; }
        .floating-element:nth-child(3) { top: 80%; left: 20%; animation-delay: 4s; }

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

        @media (max-width: 575px) {
            .header-title {
                font-size: 1rem;
            }
            .header-logo {
                height: 30px;
            }
            .profile-photo {
                width: 100px;
                height: 100px;
            }
            .profile-card .card-body {
                padding: 1rem;
                background: white;
                z-index: 1;
            }
            .card-title {
                font-size: 1.15rem;
            }
            .profile-details .list-group-item {
                padding: 8px 0;
            }
            .traffic-lights {
                top: 60px;
                right: 10px;
            }
            .emergency-light {
                top: 60px;
                left: 10px;
            }
            .h-bar {
                z-index: 1;
                right: 22px !important;
            }
            .profile-card .card-body * {
                font-size: 0.80rem;
            }
        }

        .h-bar {
            height: 100%;
            width: 0.4rem;
            position: absolute;
            background: linear-gradient(to right, #000 0%, #222 20%, #444 50%, #222 80%, #000 100%);
            right: 18px;
            margin-top: 1rem;
            opacity: 0.9;
        }


        /* -------------------- - -bottom nav ------------------ */
            .bottom-nav { 
                display: none;
            }
@media(max-width:992px){

        .bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 15px rgb(0 0 0 / 28%);
    z-index: 1000;
}

.bottom-nav ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}

.bottom-nav li {
  flex-grow: 1;
  text-align: center;
}

.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

.bottom-nav .nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.bottom-nav .nav-item:hover,
.bottom-nav .nav-item.active {
  color: #007bff; /* Highlight color for active/hover state */
}
}

/* -------animated trafic police image ------- */
.animated-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: move-and-flip 20s infinite; /* Increased total duration for very slow, even movement */
  pointer-events: none;
  user-select: none;
}

@keyframes move-and-flip {
  /* Stage 1: Slow Move from left to right */
  0% {
    left: 0;
    transform: translateY(-50%) scaleX(1);
  }
  45% {
    left: calc(100% - 100px); /* Adjust 100px for image width */
    transform: translateY(-50%) scaleX(1);
  }

  /* Stage 2: Quick Flip at the right edge */
  50% {
    left: calc(100% - 100px);
    transform: translateY(-50%) scaleX(-1);
  }

  /* Stage 3: Slow Move from right to left */
  55% {
    left: calc(100% - 100px);
    transform: translateY(-50%) scaleX(-1);
  }
  95% {
    left: 0;
    transform: translateY(-50%) scaleX(-1);
  }

  /* Stage 4: Quick Flip at the left edge */
  100% {
    left: 0;
    transform: translateY(-50%) scaleX(1);
  }
}