/* ==========================================================================
  Free HD Bikers - Complete Stylesheet
  ========================================================================== */

/* Base & Reset Styles */
/* ========================================================================== */

body {
   background-color: #f8f9fa;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Navigation Styles */
/* ========================================================================== */

.navbar-brand {
   font-weight: bold;
}

.navbar-nav .nav-item {
   position: relative;
   margin-right: 0.5rem;
}

.navbar-nav .nav-item:last-child {
   margin-right: 0;
}

.navbar-nav .badge {
   position: absolute;
   top: 2px;
   right: 2px;
   font-size: 0.7rem;
   padding: 0.25em 0.4em;
   min-width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: translate(25%, -25%);
   z-index: 10;
   border: 2px solid #212529;
}

.nav-link i.fa-bell {
   font-size: 1.1rem;
}

/* Card & Layout Styles */
/* ========================================================================== */

.card {
   border: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s;
}

.card:hover {
   transform: translateY(-2px);
}

.card-body {
   padding: 1.5rem;
}

/* Login Page Styles */
/* ========================================================================== */

.login-container {
   max-width: 400px;
   margin: 50px auto;
}

.login-container .card-header {
   background: linear-gradient(135deg, #ff6b6b, #ee5a24);
   color: white;
   border-radius: 15px 15px 0 0 !important;
   text-align: center;
   padding: 2rem;
}

/* Calendar Specific Styles */
/* ========================================================================== */

.calendar-container {
   background: white;
   border-radius: 15px;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.calendar-header {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
   border-radius: 15px 15px 0 0;
}

.calendar-table {
   table-layout: fixed;
}

.calendar-table td {
   height: 120px;
   vertical-align: top;
   border: 1px solid #e9ecef;
   padding: 8px;
   position: relative;
}

.calendar-table th {
   background-color: #f8f9fa;
   text-align: center;
   font-weight: 600;
   padding: 15px 8px;
   border: 1px solid #e9ecef;
}

.calendar-table td.selected {
   background-color: #e3f2fd;
   border: 2px solid #2196f3;
}

.calendar-table td:hover {
   background-color: #f8f9fa;
}

.calendar-table td.today {
   background-color: #fff3cd;
}

.calendar-table td.today:hover {
   background-color: #fff3cd;
}

.calendar-table td.other-month {
   background-color: #f8f9fa;
   color: #6c757d;
}

.day-number {
   font-weight: bold;
   margin-bottom: 5px;
}

/* Ride Item Styles */
/* ========================================================================== */

.ride-item {
   background: linear-gradient(135deg, #28a745, #20c997);
   color: white;
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 4px;
   margin-bottom: 2px;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
   text-decoration: none;
   transition: all 0.3s;
}

.ride-item:hover {
   background: linear-gradient(135deg, #20c997, #28a745);
   color: white;
   text-decoration: none;
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ride-item.user-ride {
   background: linear-gradient(135deg, #007bff, #6f42c1);
}

.ride-item.user-joined {
   background: linear-gradient(135deg, #fd7e14, #ff6b6b);
}

.ride-card {
   border-left: 4px solid #007bff;
}

.ride-card.cancelled {
   border-left-color: #dc3545;
   background-color: #f8d7da;
}

.ride-card.past {
   border-left-color: #6c757d;
   background-color: #f8f9fa;
}

/* Button Styles */
/* ========================================================================== */

.btn-primary {
   background: linear-gradient(135deg, #667eea, #764ba2);
   border: none;
}

.btn-primary:hover {
   background: linear-gradient(135deg, #764ba2, #667eea);
}

.btn-outline-primary {
   color: #667eea;
   border-color: #667eea;
}

.btn-outline-primary:hover {
   background: #667eea;
   border-color: #667eea;
   color: white;
}

.btn-ride {
   background: linear-gradient(135deg, #ff6b6b, #ee5a24);
   border: none;
   color: white;
}

.btn-ride:hover {
   background: linear-gradient(135deg, #ee5a24, #ff6b6b);
   color: white;
}

.btn-join {
   background: linear-gradient(135deg, #28a745, #20c997);
   border: none;
   color: white;
}

.btn-join:hover {
   background: linear-gradient(135deg, #20c997, #28a745);
   color: white;
}

.btn-leave {
   background: linear-gradient(135deg, #dc3545, #fd7e14);
   border: none;
   color: white;
}

.btn-leave:hover {
   background: linear-gradient(135deg, #fd7e14, #dc3545);
   color: white;
}

.btn-update {
   background: linear-gradient(135deg, #28a745, #20c997);
   border: none;
   color: white;
}

.btn-update:hover {
   background: linear-gradient(135deg, #20c997, #28a745);
   color: white;
}

.btn-danger {
   background: linear-gradient(135deg, #dc3545, #fd7e14);
   border: none;
}

.btn-ios {
   background: linear-gradient(135deg, #007AFF, #5856D6);
   border-color: #007AFF;
   color: white;
}

.btn-ios:hover {
   background: linear-gradient(135deg, #5856D6, #007AFF);
   border-color: #5856D6;
   color: white;
}

.view-toggle {
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: white;
}

.view-toggle.active {
   background: white;
   color: #667eea;
}

/* Specialized Card Styles */
/* ========================================================================== */

.stats-card {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
}

.sidebar-card {
   border: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.upcoming-ride {
   border-left: 4px solid #007bff;
}

.notification-card {
   border-left: 4px solid #28a745;
}

.participant-card {
   border-left: 4px solid #28a745;
}

.stat-card {
   border-left: 4px solid #007bff;
   background: linear-gradient(135deg, #f8f9ff, #ffffff);
}

/* Card Header Specific Styles */
/* ========================================================================== */

.card-header.ride-header {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
}

.card-header.profile-header {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
}

.card-header.calendar-header {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
   border-radius: 15px 15px 0 0;
}

/* Legend & Map Styles */
/* ========================================================================== */

.legend-item {
   display: flex;
   align-items: center;
   margin-bottom: 8px;
}

.legend-color {
   width: 20px;
   height: 12px;
   border-radius: 3px;
   margin-right: 10px;
}

.map-legend {
   background: white;
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #e9ecef;
}

#map {
   height: 500px;
   width: 100%;
   border-radius: 10px;
   border: 2px solid #e9ecef;
   background-color: #f0f0f0;
}

#map-container {
   position: relative;
}

#map-loading {
   position: relative;
   z-index: 10;
}

.map-loading {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 500px;
   background-color: #f8f9fa;
   border: 2px dashed #dee2e6;
   border-radius: 10px;
   flex-direction: column;
   color: #6c757d;
}

.map-instructions {
   background: linear-gradient(135deg, #e3f2fd, #bbdefb);
   border-radius: 10px;
   padding: 15px;
   margin-bottom: 20px;
}

.map-mode {
   padding: 10px;
   margin: 5px;
   border: 2px solid #e9ecef;
   border-radius: 8px;
   cursor: pointer;
   background: white;
   transition: all 0.3s;
   touch-action: manipulation;
}

.map-mode:hover,
.map-mode.active {
   border-color: #007bff;
   background: #f0f8ff;
   transform: translateY(-2px);
   box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Route & Waypoint Styles */
/* ========================================================================== */

.waypoint-item {
   border: 1px solid #dee2e6;
   border-radius: 8px;
   padding: 15px;
   margin-bottom: 10px;
   background: #f8f9fa;
   cursor: move;
   transition: all 0.3s;
}

.waypoint-item:hover {
   background: #e3f2fd;
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.waypoint-item.sortable-ghost {
   opacity: 0.4;
}

.sortable-ghost {
   opacity: 0.4;
}

.waypoint-type-icon {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-size: 14px;
   margin-right: 10px;
}

.type-stop {
   background-color: #3b82f6;
   border-color: #1d4ed8;
}

.type-scenic {
   background-color: #22c55e;
   border-color: #16a34a;
}

.type-fuel {
   background-color: #eab308;
   border-color: #ca8a04;
   color: #000;
}

.type-food {
   background-color: #f97316;
   border-color: #ea580c;
}

.type-checkpoint {
   background-color: #6b7280;
   border-color: #4b5563;
}

.waypoint-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid;
    flex-shrink: 0;
    flex-grow: 0;
}

.route-segment {
   background: #f8f9fa;
   border: 1px solid #e9ecef;
   border-radius: 8px;
   padding: 15px;
   margin-bottom: 15px;
   transition: all 0.3s;
}

.route-segment:hover {
   background: #e3f2fd;
   border-color: #bbdefb;
}

.route-segment-arrow {
   text-align: center;
   margin: 10px 0;
   color: #6c757d;
}

.route-segment-arrow .btn-sm {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
   border-radius: 15px;
}

.route-segment-arrow .btn-outline-primary {
   border-color: #0d6efd;
   color: #0d6efd;
}

.route-segment-arrow .btn-outline-primary:hover {
   background-color: #0d6efd;
   border-color: #0d6efd;
   color: white;
}

.route-segment-arrow .gap-2 {
   gap: 0.5rem !important;
}

.route-summary {
   background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
   border: 1px solid #c3e6c3;
   border-radius: 10px;
   padding: 20px;
   margin-bottom: 20px;
}

.route-info {
   background: #e8f5e8;
   border: 1px solid #c3e6c3;
   border-radius: 5px;
   padding: 8px 12px;
   margin-top: 8px;
   font-size: 0.9em;
}

.route-detail {
   display: inline-block;
   margin-right: 15px;
}

.route-detail i {
   color: #28a745;
   margin-right: 4px;
}

.mixed-route-legend {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 15px;
}

.route-color-indicator {
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 2px;
   margin-right: 8px;
   vertical-align: middle;
}

.highway-route {
   background-color: #dc3545;
}

.scenic-route {
   background-color: #28a745;
}

/* Waypoint Layout Responsive Styles */
.waypoint-controls-col {
    min-width: 80px;
}

.waypoint-number-col {
    min-width: 35px;
}

.waypoint-info-col {
    min-width: 150px;
}

.waypoint-time-col {
    min-width: 120px;
}

.waypoint-actions-col {
    min-width: 160px;
}

.waypoint-basic-info {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.waypoint-basic-info .row {
    width: 100%;
    margin: 0;
    align-items: center;
}

.drag-handle {
    cursor: move;
    color: #6c757d;
    user-select: none;
    font-size: 1rem;
    padding: 5px;
    touch-action: manipulation;
    flex-shrink: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .waypoint-basic-info .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .waypoint-controls-col {
        align-self: stretch;
        min-width: 100%;
        order: 1;
    }
    
    .waypoint-controls-col .d-flex {
        justify-content: space-between;
        width: 100%;
    }
    
    .waypoint-number-col {
        order: 2;
        min-width: auto;
    }
    
    .waypoint-info-col {
        order: 3;
        min-width: 100%;
    }
    
    .waypoint-time-col {
        order: 4;
        min-width: 100%;
        text-align: left !important;
    }
    
    .waypoint-actions-col {
        order: 5;
        min-width: 100%;
    }
    
    .waypoint-actions-col .btn-group {
        width: 100%;
        justify-content: center;
    }
    
    .waypoint-type-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .drag-handle {
        font-size: 1.5rem;
        padding: 10px;
    }
}

@media (max-width: 576px) {
    .waypoint-basic-info {
        padding: 15px 10px;
        min-height: auto;
    }
    
    .waypoint-controls-col .d-flex {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    
    .text-end {
        text-align: left !important;
    }
}

/* Badge Styles */
/* ========================================================================== */

.distance-badge {
   background: #e8f5e8;
   color: #155724;
   border: 1px solid #c3e6c3;
   border-radius: 15px;
   padding: 5px 12px;
   font-size: 0.85em;
   font-weight: 500;
}

.time-badge {
   background: #e3f2fd;
   color: #0d47a1;
   border: 1px solid #bbdefb;
   border-radius: 15px;
   padding: 5px 12px;
   font-size: 0.85em;
   font-weight: 500;
}

.navigate-badge {
   background: #f3e5f5;
   color: #6a1b9a;
   border: 1px solid #ce93d8;
   border-radius: 15px;
   padding: 5px 12px;
   font-size: 0.85em;
   font-weight: 500;
   text-decoration: none;
   display: inline-block;
}

.navigate-badge:hover {
   background: #e1bee7;
   color: #4a148c;
   text-decoration: none;
}

.status-badge {
   font-size: 0.75rem;
   padding: 0.25rem 0.5rem;
}

/* Live tracking pulse */
@keyframes pulse-dot {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
}

/* Form & Input Styles */
/* ========================================================================== */

.location-input-group {
   margin-bottom: 15px;
}

.location-toggle {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 5px;
   padding: 5px;
}

.distance-info {
   background: #e8f5e8;
   border: 1px solid #c3e6c3;
   border-radius: 5px;
   padding: 8px;
   margin-top: 5px;
   font-size: 0.9em;
}

.highway-option {
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 5px;
   padding: 8px;
   margin-top: 5px;
}

.waypoint-controls {
   background: #f8f9fa;
   border: 1px solid #dee2e6;
   border-radius: 8px;
   padding: 15px;
   margin-bottom: 20px;
}

.form-control:invalid {
   border-color: #dc3545;
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control:valid {
   border-color: #28a745;
}

.form-label-sm {
   font-size: 0.875rem;
   font-weight: 500;
}

.form-control-sm,
.form-select-sm {
   min-height: calc(1.5em + 0.5rem + 2px);
   padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
   border-radius: 0.2rem;
}

/* Drag & Drop Styles */
/* ========================================================================== */

.drag-handle {
   cursor: move;
   color: #6c757d;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   touch-action: manipulation;
}

.drag-handle:hover {
   color: #007bff;
}

.drag-handle:active {
   cursor: grabbing;
}

/* Settings Specific Styles */
/* ========================================================================== */

.profile-header {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
}

.settings-nav {
   border-right: 1px solid #e9ecef;
}

.settings-nav .nav-link {
   color: #495057;
   border-radius: 0;
   border: none;
   padding: 1rem 1.5rem;
   border-left: 3px solid transparent;
}

.settings-nav .nav-link:hover {
   background-color: #f8f9fa;
   border-left-color: #dee2e6;
}

.settings-nav .nav-link.active {
   background-color: #e9ecef;
   border-left-color: #667eea;
   color: #667eea;
}

.form-section {
   padding: 2rem;
   border-bottom: 1px solid #e9ecef;
}

.form-section:last-child {
   border-bottom: none;
}

.danger-zone {
   background-color: #fff5f5;
   border: 1px solid #fed7d7;
   border-radius: 10px;
}

.password-field-container {
   position: relative;
}

#password-strength {
   font-size: 0.75rem;
}

/* Notification Styles */
/* ========================================================================== */

.notification-dropdown {
   width: 350px !important;
   max-width: 90vw;
   border: none;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   border-radius: 10px;
   padding: 0;
   overflow: hidden;
   margin-top: 8px !important;
   z-index: 1050;
}

.notification-item {
   padding: 12px 16px !important;
   border-bottom: 1px solid #f1f3f4;
   white-space: normal !important;
   line-height: 1.4;
   transition: background-color 0.2s;
   text-decoration: none !important;
   border-left: 3px solid #28a745;
   background-color: #f8fff9;
}

.notification-item:hover {
   background-color: #f8f9fa !important;
   text-decoration: none !important;
}

.notification-item:last-of-type {
   border-bottom: none;
}

.notification-item.unread {
   border-left-color: #007bff;
   background-color: #f0f8ff;
}

.notification-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
   max-width: 100%;
}

.notification-title {
   font-weight: 600;
   font-size: 0.9rem;
   color: #495057;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.notification-message {
   font-size: 0.85rem;
   color: #6c757d;
   line-height: 1.3;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-wrap: break-word;
}

.notification-time {
   font-size: 0.75rem;
   color: #adb5bd;
   margin-top: 2px;
}

.notification-dropdown .dropdown-item.text-center {
   background-color: #f8f9fa;
   border-top: 1px solid #e9ecef;
   font-weight: 500;
   color: #495057 !important;
   padding: 10px 16px;
}

.notification-dropdown .dropdown-item.text-center:hover {
   background-color: #e9ecef !important;
}

.notification-dropdown .dropdown-item[href="#"] {
   color: #6c757d !important;
   cursor: default;
   text-align: center;
   padding: 20px;
}

.notification-dropdown .dropdown-item[href="#"]:hover {
   background-color: transparent !important;
}

.notification-loading {
   text-align: center;
   padding: 20px;
   color: #6c757d;
}

/* Dropdown Enhancements */
/* ========================================================================== */

.dropdown-toggle::after {
   display: none;
}

.dropdown-menu {
   z-index: 1050 !important;
}

.dropdown-menu-end {
   --bs-position: end;
}

/* Filter & Action Styles */
/* ========================================================================== */

.filter-card {
   background: #fff;
   border-radius: 10px;
}

.action-buttons .btn {
   margin-right: 0.5rem;
   margin-bottom: 0.5rem;
}

.empty-state {
   text-align: center;
   padding: 3rem 1rem;
}

.calendar-buttons .btn {
   margin: 0 5px 10px 0;
}

.share-route-section {
   background: #fff3cd;
   border: 1px solid #ffeaa7;
   border-radius: 8px;
   padding: 15px;
   margin-bottom: 20px;
}

/* Status & State Styles */
/* ========================================================================== */

.status-cancelled {
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
}

.ride-header {
   background: linear-gradient(135deg, #667eea, #764ba2);
   color: white;
}

.participants-info {
   background: linear-gradient(135deg, #d4edda, #c3e6cb);
   border: 1px solid #c3e6cb;
   border-radius: 10px;
   border-left: 4px solid #28a745;
}

.warning-box {
   background: linear-gradient(135deg, #fff3cd, #ffeaa7);
   border: 1px solid #ffeaa7;
   border-radius: 10px;
   border-left: 4px solid #ffc107;
   animation: pulse 2s infinite;
}

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

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

/* Participant Name Styles */
/* ========================================================================== */

.participant-names {
   font-size: 0.75rem;
   line-height: 1.2;
   margin-top: 2px;
   display: block;
   color: #6c757d !important;
   font-variant: small-caps;
   font-weight: bold;
}

.participant-names-truncated {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Loading & Disabled States */
/* ========================================================================== */

.btn:disabled,
.btn-update:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

/* Timeline Styles */
/* ========================================================================== */

.timeline-item {
   position: relative;
   padding-left: 2rem;
}

.timeline-item i {
   position: absolute;
   left: 0;
   top: 0.2rem;
}

/* Mobile Responsive Styles */
/* ========================================================================== */

@media (max-width: 768px) {
   .navbar-nav .badge {
       top: 0px;
       right: 0px;
       transform: translate(30%, -30%);
       font-size: 0.65rem;
       min-width: 16px;
       height: 16px;
   }

   .calendar-table td {
       height: 80px;
       font-size: 12px;
   }

   .ride-item {
       font-size: 10px;
       padding: 1px 4px;
   }

   .day-number {
       font-size: 12px;
   }

   .notification-dropdown {
       width: 300px !important;
       max-height: 70vh;
       overflow-y: auto;
   }

   .notification-item {
       padding: 10px 12px !important;
   }

   .notification-title {
       font-size: 0.85rem;
   }

   .notification-message {
       font-size: 0.8rem;
       -webkit-line-clamp: 3;
   }

   .stats-card .card-body {
       padding: 1.5rem;
   }

   .stats-card h2 {
       font-size: 1.5rem;
   }

   .btn-ride,
   .btn-update {
       width: 100%;
   }

   .card .display-4 {
       font-size: 2.5rem;
   }

   .calendar-buttons .btn {
       display: block;
       width: 100%;
       margin-bottom: 0.5rem;
       margin-right: 0;
   }

   .participant-names {
       font-size: 0.7rem;
   }

   .waypoint-item {
       padding: 10px;
       margin-bottom: 15px;
   }

   .waypoint-item .row {
       flex-direction: column;
   }

   .waypoint-item .col-md-1 {
       flex: 0 0 100%;
       max-width: 100%;
       text-align: left;
       margin-bottom: 10px;
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .waypoint-item .col-md-8,
   .waypoint-item .col-md-3 {
       flex: 0 0 100%;
       max-width: 100%;
   }

   .drag-handle {
       font-size: 1.5rem;
       padding: 10px;
       touch-action: manipulation;
   }

   .waypoint-type-icon {
       width: 35px;
       height: 35px;
       font-size: 16px;
   }

   .btn-group-vertical {
       flex-direction: row !important;
       gap: 5px;
   }

   .btn-group-vertical .btn {
       margin-bottom: 0 !important;
   }

   .form-control-sm,
   .form-select-sm {
       font-size: 16px;
       padding: 8px 12px;
   }

   .map-mode {
       padding: 15px;
       margin: 8px 0;
       font-size: 1.1rem;
       touch-action: manipulation;
   }

   .location-toggle .btn {
       padding: 8px 12px;
       font-size: 0.9rem;
   }

   #map {
       height: 400px;
       touch-action: pan-x pan-y;
   }

   .waypoint-controls .btn {
       padding: 12px;
       font-size: 1.1rem;
   }

   .btn-sm {
       min-height: 44px;
       min-width: 44px;
   }

   .col-md-6.mb-2 {
       margin-bottom: 1rem !important;
   }

   .highway-option {
       margin-top: 10px;
       padding: 12px;
   }

   .highway-option .form-check-input {
       transform: scale(1.2);
       margin-right: 8px;
   }

   .route-segment-arrow .d-flex {
       flex-direction: column;
   }

   .route-segment-arrow .btn-sm {
       width: 100%;
       margin-top: 0.25rem;
   }

   .container-fluid {
       padding: 10px;
   }

   .profile-header .row {
       flex-direction: column;
       text-align: center;
   }

   .profile-header .col-md-4 {
       margin-top: 20px;
   }

   .settings-nav {
       margin-bottom: 20px;
       border-right: none;
       border-bottom: 1px solid #e9ecef;
   }

   .settings-nav .nav-link {
       padding: 0.75rem 1rem;
       border-left: none;
       border-bottom: 3px solid transparent;
       min-height: 44px;
       display: flex;
       align-items: center;
   }

   .settings-nav .nav-link.active {
       border-left: none;
       border-bottom-color: #667eea;
   }

   .card-body {
       padding: 15px;
   }

   .btn:not(.btn-sm):not(.calendar-buttons .btn):not(.nav-link) {
       width: 100%;
       margin-bottom: 10px;
       min-height: 44px;
   }

   .row .col-md-6 {
       margin-bottom: 15px;
   }

   .notification-item {
       margin-bottom: 10px;
   }

   .notification-item .d-flex {
       flex-direction: column;
       gap: 10px;
   }

   .form-check-input {
       transform: scale(1.2);
       margin-right: 8px;
   }

   .nav-link {
       min-height: 44px;
       display: flex;
       align-items: center;
   }
}

@media (max-width: 576px) {
   .navbar-nav .badge {
       transform: translate(35%, -35%);
   }

   .notification-dropdown {
       width: calc(100vw - 40px) !important;
       left: 20px !important;
       right: 20px !important;
       transform: none !important;
       position: fixed !important;
       top: 60px !important;
   }

   .container {
       padding-left: 10px;
       padding-right: 10px;
   }

   .card-body {
       padding: 1rem;
   }

   .stats-card .card-body {
       padding: 1rem;
   }

   .stats-card h2 {
       font-size: 1.25rem;
   }

   .card .display-4 {
       font-size: 2rem;
   }

   .row.justify-content-center .col-lg-12 {
       padding: 0;
   }

   .col-lg-4,
   .col-lg-8 {
       padding-left: 5px;
       padding-right: 5px;
   }

   #map {
       height: 350px;
       border-radius: 5px;
   }

   .map-instructions {
       padding: 10px;
       font-size: 0.9rem;
   }

   .map-instructions ul {
       font-size: 0.85rem;
   }

   .profile-header .display-1 {
       font-size: 3rem;
   }

   .profile-header h2 {
       font-size: 1.5rem;
   }

   .card-header h5 {
       font-size: 1.1rem;
   }

   .form-control,
   .form-select,
   input[type="text"],
   input[type="time"],
   input[type="date"],
   select,
   textarea {
       font-size: 16px !important;
   }
}

/* Touch Enhancement Styles */
/* ========================================================================== */

@media (pointer: coarse) {
   .btn {
       min-height: 44px;
       padding: 0.75rem 1.5rem;
   }
   
   .nav-link {
       min-height: 44px;
       padding: 0.75rem 1rem;
   }
   
   .form-control,
   .form-select {
       min-height: 44px;
       padding: 0.75rem 1rem;
   }
   
   .waypoint-item {
       padding: 1rem;
       margin-bottom: 1rem;
   }
   
   .map-mode {
       padding: 1rem;
       margin: 0.5rem 0;
   }
}

/* Print Styles */
/* ========================================================================== */

@media print {
   .navbar,
   .btn,
   .card-header,
   .notification-dropdown,
   .map-mode,
   .waypoint-controls {
       display: none !important;
   }
   
   .card {
       box-shadow: none;
       border: 1px solid #dee2e6;
   }
   
   .card-body {
       padding: 1rem;
   }
   
   body {
       background: white;
   }
   
   .route-segment {
       break-inside: avoid;
   }
}

/* High Contrast Mode */
/* ========================================================================== */

@media (prefers-contrast: high) {
   .card {
       border: 2px solid #000;
       box-shadow: none;
   }
   
   .btn-primary {
       background: #000;
       border-color: #000;
       color: #fff;
   }
   
   .btn-primary:hover {
       background: #333;
       border-color: #333;
   }
   
   .ride-item {
       background: #000;
       color: #fff;
       border: 1px solid #000;
   }
   
   .waypoint-type-icon {
       border: 2px solid #000;
   }
}

/* Reduced Motion */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
   .card:hover,
   .ride-item:hover,
   .waypoint-item:hover,
   .map-mode:hover {
       transform: none;
   }
   
   .pulse {
       animation: none;
   }
   
   * {
       transition: none !important;
       animation: none !important;
   }
}

/* Dark Mode Support */
/* ========================================================================== */

@media (prefers-color-scheme: dark) {
   body {
       background-color: #1a1a1a;
       color: #e9ecef;
   }
   
   .card {
       background-color: #2d3748;
       color: #e9ecef;
   }
   
   .calendar-table th,
   .calendar-table td {
       background-color: #2d3748;
       border-color: #4a5568;
       color: #e9ecef;
   }
   
   .calendar-table td.today {
       background-color: #744210;
   }
   
   .calendar-table td.other-month {
       background-color: #1a202c;
       color: #a0aec0;
   }
   
   .form-control,
   .form-select {
       background-color: #2d3748;
       border-color: #4a5568;
       color: #e9ecef;
   }
   
   .form-control:focus,
   .form-select:focus {
       background-color: #2d3748;
       border-color: #667eea;
       color: #e9ecef;
   }
   
   .notification-dropdown {
       background-color: #2d3748;
       border-color: #4a5568;
   }
   
   .notification-item {
       background-color: #2d3748;
       border-color: #4a5568;
       color: #e9ecef;
   }
   
   .notification-item:hover {
       background-color: #4a5568 !important;
   }
   
   .map-loading {
       background-color: #2d3748;
       border-color: #4a5568;
       color: #a0aec0;
   }
   
   .route-segment {
       background-color: #2d3748;
       border-color: #4a5568;
   }
   
   .route-segment:hover {
       background-color: #4a5568;
   }
}

/* Focus Styles for Accessibility */
/* ========================================================================== */

.btn:focus,
.nav-link:focus,
.form-control:focus,
.form-select:focus,
.waypoint-item:focus,
.map-mode:focus {
   outline: 2px solid #667eea;
   outline-offset: 2px;
}

.drag-handle:focus {
   outline: 2px solid #007bff;
   outline-offset: 2px;
}

/* Skip to Content Link */
/* ========================================================================== */

.skip-link {
   position: absolute;
   top: -40px;
   left: 6px;
   background: #667eea;
   color: white;
   padding: 8px;
   text-decoration: none;
   border-radius: 4px;
   z-index: 1000;
}

.skip-link:focus {
   top: 6px;
}

/* 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: 0;
}

/* Utility Classes */
/* ========================================================================== */

.text-truncate-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.text-truncate-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.border-gradient {
   border: 2px solid;
   border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

.shadow-hover {
   transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.bg-gradient-primary {
   background: linear-gradient(135deg, #667eea, #764ba2);
}

.bg-gradient-success {
   background: linear-gradient(135deg, #28a745, #20c997);
}

.bg-gradient-danger {
   background: linear-gradient(135deg, #dc3545, #fd7e14);
}

.bg-gradient-warning {
   background: linear-gradient(135deg, #ffc107, #fd7e14);
}

/* Animation Classes */
/* ========================================================================== */

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

@keyframes slideIn {
   from {
       transform: translateX(-100%);
   }
   to {
       transform: translateX(0);
   }
}

.fade-in {
   animation: fadeIn 0.5s ease-in-out;
}

.slide-in {
   animation: slideIn 0.3s ease-in-out;
}

/* Loading Animation */
/* ========================================================================== */

.loading-spinner {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 2px solid #f3f3f3;
   border-top: 2px solid #667eea;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

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

/* Tooltip Enhancement */
/* ========================================================================== */

[data-bs-toggle="tooltip"] {
   cursor: help;
}

/* Custom Scrollbar */
/* ========================================================================== */

.custom-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: #667eea #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar {
   width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
   background: #667eea;
   border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #764ba2;
}

/* Grid System Enhancement */
/* ========================================================================== */

.row-equal-height {
   display: flex;
   flex-wrap: wrap;
}

.row-equal-height > [class*="col-"] {
   display: flex;
   flex-direction: column;
}

.row-equal-height .card {
   flex: 1;
}

/* Form Enhancement */
/* ========================================================================== */

.form-floating .form-control:focus,
.form-floating .form-select:focus {
   border-color: #667eea;
   box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-control.is-valid,
.form-select.is-valid {
   border-color: #28a745;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.94-.94 1.38-1.38L6 2.28 5.28 1.56 3.24 3.61 2.3 2.67l-.94.94z'/%3e%3c/svg%3e");
}

.form-control.is-invalid,
.form-select.is-invalid {
   border-color: #dc3545;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 2.4 2.4M8.2 4.6l-2.4 2.4'/%3e%3c/svg%3e");
}

/* Table Enhancement */
/* ========================================================================== */

.table-hover tbody tr:hover {
   background-color: rgba(102, 126, 234, 0.1);
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
   background-color: rgba(0, 0, 0, 0.02);
}

/* Performance Optimizations */
/* ========================================================================== */

.gpu-accelerated {
   transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000px;
}

.will-change-transform {
   will-change: transform;
}

.will-change-opacity {
   will-change: opacity;
}

/* Container Queries Support */
/* ========================================================================== */

@supports (container-type: inline-size) {
   .card-container {
       container-type: inline-size;
   }
   
   @container (max-width: 400px) {
       .card-body {
           padding: 1rem;
       }
       
       .btn {
           width: 100%;
           margin-bottom: 0.5rem;
       }
   }
}

/* End of Stylesheet */
/* ========================================================================== */

/* Additional Styles - Safe to append */
/* ========================================================================== */

/* Get Groups Page Styles */
/* ========================================================================== */

.get-groups-page table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

.get-groups-page th,
.get-groups-page td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.get-groups-page th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.get-groups-page button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.get-groups-page button:hover {
    background-color: #45a049;
}

/* iOS Calendar Support Enhancement */
/* ========================================================================== */

.calendar-table td.selected {
    background-color: #e3f2fd;
    border: 2px solid #2196f3;
}

/* Additional Button Loading States */
/* ========================================================================== */

.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

/* Enhanced Mobile Tab Navigation */
/* ========================================================================== */

@media (max-width: 768px) {
    .settings-nav .nav-link {
        padding: 0.75rem 1rem;
        border-left: none !important;
        border-bottom: 3px solid transparent;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .settings-nav .nav-link.active {
        border-left: none !important;
        border-bottom-color: #667eea;
    }
}

/* Additional Form Validation States */
/* ========================================================================== */

.form-control.loading {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23007bff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 1.5A6.5 6.5 0 1 0 14.5 8'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    animation: spin 2s linear infinite;
}

/* Enhanced Tooltip Styles */
/* ========================================================================== */

.tooltip-custom {
    position: relative;
    cursor: help;
}

.tooltip-custom::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.tooltip-custom:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Additional Calendar Enhancements */
/* ========================================================================== */

.calendar-month-navigator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-month-navigator .btn {
    min-width: 100px;
}

/* Enhanced Notification States */
/* ========================================================================== */

.notification-item.priority-high {
    border-left-color: #dc3545;
    background-color: #fff5f5;
}

.notification-item.priority-medium {
    border-left-color: #ffc107;
    background-color: #fffbf0;
}

.notification-item.priority-low {
    border-left-color: #6c757d;
    background-color: #f8f9fa;
}

/* Additional Map Controls */
/* ========================================================================== */

.map-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.map-controls .btn {
    margin: 2px;
    padding: 5px 10px;
    font-size: 12px;
}

/* Enhanced Route Planning */
/* ========================================================================== */

.route-planning-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.route-step {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #dee2e6;
}

.route-step:last-child {
    border-bottom: none;
}

.route-step-icon {
    width: 24px;
    height: 24px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 12px;
}

/* Additional Mobile Enhancements */
/* ========================================================================== */

@media (max-width: 576px) {
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        margin-bottom: 0.5rem;
        border-radius: 0.375rem !important;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group .form-control,
    .input-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: 0.375rem !important;
    }
}

/* Enhanced Error States */
/* ========================================================================== */

.error-container {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 1rem 0;
    color: #721c24;
}

.error-container .error-icon {
    color: #dc3545;
    margin-right: 0.5rem;
}

.success-container {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 1rem 0;
    color: #155724;
}

.success-container .success-icon {
    color: #28a745;
    margin-right: 0.5rem;
}

/* Additional Animation Enhancements */
/* ========================================================================== */

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

.slide-down {
    animation: slideDown 0.3s ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.bounce-in {
    animation: bounceIn 0.6s ease;
}


/* Route Type Indicator */
#route-type-indicator {
    font-weight: 600;
    color: #28a745;
}

/* Stop Duration Input */
input[type="number"].form-control-sm {
    min-width: 80px;
}

/* Travel Time Display */
.form-control[readonly] {
    background-color: #f8f9fa;
    opacity: 1;
}

/* Waypoint Timing Display */
.waypoint-timing {
    font-size: 0.85rem;
    background: #f8f9fa;
    padding: 8px;
    border-radius: 4px;
    margin-top: 5px;
}

/* Route Configuration Panel */
.route-config {
    background: #e8f5e8;
    border: 1px solid #c3e6c3;
    border-radius: 5px;
    padding: 10px;
}

/* Mixed Route Polylines */
.route-segment-info {
    font-size: 0.8rem;
    color: #6c757d;
    margin-top: 2px;
}

/* Enhanced Total Distance Display */
#total-distance {
    font-weight: 600;
}

#total-distance span[title] {
    cursor: help;
    text-decoration: underline dotted;
}

/* Modal Enhancements */
.modal-content {
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 10px 10px 0 0;
}

/* Address Search Input */
#waypoint-address-search {
    font-size: 16px; /* Prevent zoom on iOS */
}

/* Stop Duration Number Input */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Collapsible Waypoint Cards */
.waypoint-basic-info {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0;
}

.waypoint-details {
    padding: 0 15px 15px 15px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.waypoint-item {
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    transition: all 0.3s;
}

.waypoint-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.text-small {
    font-size: 0.85rem;
}

/* Route Overview Sections */
.route-section-item {
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.start-section {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
}

.destination-section {
    border-left: 4px solid #dc3545;
    background: linear-gradient(135deg, #ffeaea, #fff0f0);
}

.route-point-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid;
}

.start-icon {
    background: #22c55e;
    border-color: #16a34a;
}

.destination-icon {
    background: #ef4444;
    border-color: #dc2626;
}

#route-overview {
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
}

/* Map mode indicators */
.map-mode {
    transition: all 0.3s ease;
    cursor: pointer;
}

.map-mode:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.map-mode.active {
    border: 2px solid #007bff;
    background-color: #e3f2fd;
}

#map-mode-status {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Make map draggable cursor more obvious */
#map {
    cursor: grab;
}

#map:active {
    cursor: grabbing;
}
/* End of Additional Styles */
/* ========================================================================== */

/* Dashboard enhancements */
.recent-ride-item {
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-counter {
    transition: color 0.3s;
}

.weather-widget {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #90caf9;
}

.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Mobile enhancements */
@media (max-width: 768px) {
    .participant-names {
        font-size: 0.75rem;
    }
    
    .ride-card .btn {
        font-size: 0.875rem;
    }
}

/* Enhanced Settings Mobile Styles */
@media (max-width: 991.98px) {
    .settings-nav .nav {
        display: none !important;
    }
    
    #mobile-tab-selector {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: 44px;
    }
}

/* Notification Cards */
.notification-item-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.notification-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.notification-type-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.notification-meta {
    border-top: 1px solid #e9ecef;
    padding-top: 8px;
    margin-top: 8px;
}

/* Mobile notification improvements */
@media (max-width: 768px) {
    .notification-item-card .col-1 {
        flex: 0 0 auto;
        width: auto;
        padding-right: 0.5rem;
    }
    
    .notification-item-card .col-9 {
        flex: 1;
        max-width: none;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .notification-item-card .col-2 {
        flex: 0 0 auto;
        width: auto;
        min-width: 80px;
    }
    
    .btn-group-vertical .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .notification-meta small {
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .notification-meta .ms-3,
    .notification-meta .ms-md-3 {
        margin-left: 0 !important;
    }
}

/* Filter buttons mobile */
@media (max-width: 576px) {
    .btn-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 0.25rem;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0;
    }
}

/* Toast notifications */
.position-fixed {
    position: fixed !important;
}

/* Loading states */
.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

/* Enhanced Dashboard Styles */
.stats-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.stats-icon {
    opacity: 0.8;
}

.ride-list-card {
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 12px;
}

.recent-ride-item {
    transition: all 0.2s ease;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.recent-ride-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #007bff;
}

/* Enhanced Notification Dropdown */
.notification-dropdown {
    border: none;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border-radius: 12px;
    min-width: 350px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
}

.notification-item {
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
    padding: 12px 16px !important;
    white-space: normal !important;
    line-height: 1.4;
    text-decoration: none !important;
    display: flex !important;
    align-items: start;
    gap: 12px;
}

.notification-item:hover {
    background-color: #f8f9fa !important;
    text-decoration: none !important;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.notification-content {
    flex-grow: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #495057;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-message {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time {
    font-size: 0.75rem;
    color: #adb5bd;
}

.notification-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Weather Widget Enhancement */
.weather-widget {
    background: linear-gradient(135deg, #74b9ff, #0984e3);
    color: white;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.weather-widget:hover {
    transform: scale(1.02);
}

.weather-widget.loading {
    opacity: 0.7;
}

/* Pull-to-refresh indicator */
#pull-refresh-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1060;
    animation: slideDown 0.3s ease;
}

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

/* Mobile responsive enhancements */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .stats-card .card-body {
        padding: 1rem;
    }
    
    .stats-card .display-4 {
        font-size: 2rem;
    }
    
    .notification-dropdown {
        min-width: calc(100vw - 30px);
        left: 15px !important;
        right: 15px !important;
        transform: none !important;
        max-height: 60vh;
    }
    
    .recent-ride-item .row {
        flex-direction: column;
    }
    
    .recent-ride-item .col-md-4 {
        margin-top: 1rem;
        text-align: center;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .btn-ride {
        padding: 12px 24px;
        font-size: 1.1rem;
    }
    
    .notification-item {
        padding: 16px !important;
        flex-direction: row;
        align-items: flex-start;
    }
    
    .notification-actions {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .notification-actions .btn {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
}

@media (max-width: 576px) {
    .notification-dropdown {
        min-width: calc(100vw - 20px);
        left: 10px !important;
        right: 10px !important;
        max-height: 50vh;
    }
    
    .notification-item {
        padding: 12px !important;
        gap: 8px;
    }
    
    .notification-icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .notification-title {
        font-size: 0.85rem;
    }
    
    .notification-message {
        font-size: 0.8rem;
        -webkit-line-clamp: 3;
    }
}

/* Toast notification enhancements */
.alert.position-fixed {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.alert.position-fixed .d-flex {
    align-items: flex-start;
}

@media (max-width: 576px) {
    .alert.position-fixed {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        min-width: auto !important;
        max-width: none !important;
    }
}

/**
 * Free HD Bikers - Map Styles (OpenStreetMap/Leaflet Version)
 * Custom styles for markers, routes, and map UI elements
 */

/* ============================================================================
   CUSTOM MARKER STYLES
   ============================================================================ */

.custom-marker {
    background: transparent !important;
    border: none !important;
}

.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: relative;
    transform: rotate(-45deg);
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.marker-pin::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 6px;
    left: 6px;
}

.marker-pin span {
    transform: rotate(45deg);
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Start marker (green) */
.start-marker .marker-pin {
    background-color: #22c55e;
    border-color: #16a34a;
}

/* Destination marker (red) */
.destination-marker .marker-pin {
    background-color: #ef4444;
    border-color: #dc2626;
}

/* Waypoint markers */
.waypoint-marker.type-stop .marker-pin {
    background-color: #3b82f6;
    border-color: #1d4ed8;
}

.waypoint-marker.type-scenic .marker-pin {
    background-color: #22c55e;
    border-color: #16a34a;
}

.waypoint-marker.type-fuel .marker-pin {
    background-color: #eab308;
    border-color: #ca8a04;
}

.waypoint-marker.type-food .marker-pin {
    background-color: #f97316;
    border-color: #ea580c;
}

.waypoint-marker.type-checkpoint .marker-pin {
    background-color: #6b7280;
    border-color: #4b5563;
}

/* Fuel suggestion marker */
.fuel-suggestion-marker .marker-pin {
    background-color: #ffc107;
    border-color: #e0a800;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

/* ============================================================================
   MAP CONTAINER STYLES
   ============================================================================ */

#map {
    width: 100%;
    height: 400px;
    min-height: 400px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    position: relative;
}

@media (min-width: 992px) {
    #map {
        height: 500px;
        min-height: 500px;
    }
}

/* Map loading overlay */
#map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Map mode status overlay */
#map-mode-status {
    position: absolute;
    top: 10px;
    left: 50px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
}

/* ============================================================================
   MAP CONTROLS AND UI
   ============================================================================ */

.map-mode {
    padding: 10px 15px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.map-mode:hover {
    border-color: #0d6efd;
    background: #f8f9fa;
}

.map-mode.active {
    border-color: #0d6efd;
    background: #e7f1ff;
}

.map-mode i {
    margin-right: 8px;
}

/* Map legend */
.map-legend {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
}

.map-legend small {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
}

.map-legend i {
    margin-right: 5px;
}

/* Route configuration */
.route-config {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 13px;
}

/* ============================================================================
   ROUTE OVERVIEW STYLES
   ============================================================================ */

.route-section-item {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 8px;
    border-left: 4px solid #dee2e6;
}

.route-section-item.start-section {
    border-left-color: #22c55e;
}

.route-section-item.destination-section {
    border-left-color: #ef4444;
}

.route-point-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-weight: bold;
    color: white;
    font-size: 14px;
}

.route-point-icon.start-icon {
    background: #22c55e;
}

.route-point-icon.destination-icon {
    background: #ef4444;
}

/* ============================================================================
   WAYPOINT LIST STYLES
   ============================================================================ */

.waypoint-item {
    padding: 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.waypoint-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.waypoint-item.sortable-ghost {
    opacity: 0.4;
    background: #e7f1ff;
}

.waypoint-item.sortable-drag {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.drag-handle {
    cursor: grab;
    color: #6c757d;
    padding: 5px;
}

.drag-handle:active {
    cursor: grabbing;
}

.waypoint-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.waypoint-type-icon.type-stop {
    background: #3b82f6;
}

.waypoint-type-icon.type-scenic {
    background: #22c55e;
}

.waypoint-type-icon.type-fuel {
    background: #eab308;
}

.waypoint-type-icon.type-food {
    background: #f97316;
}

.waypoint-type-icon.type-checkpoint {
    background: #6b7280;
}

.waypoint-details {
    margin-top: 10px;
    padding-top: 10px;
}

.highway-option {
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
}

/* ============================================================================
   AUTOCOMPLETE DROPDOWN STYLES
   ============================================================================ */

.nominatim-autocomplete-results {
    position: absolute;
    z-index: 1050;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    display: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 4px 4px;
}

.autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.autocomplete-item:hover {
    background-color: #f0f0f0;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

/* ============================================================================
   FUEL SUGGESTIONS PANEL
   ============================================================================ */

.fuel-suggestions-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    padding: 15px;
}

.fuel-suggestion-item {
    transition: all 0.2s ease;
}

.fuel-suggestion-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   LEAFLET POPUP CUSTOMIZATION
   ============================================================================ */

.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.leaflet-popup-content {
    margin: 12px 16px;
    font-size: 14px;
}

.leaflet-popup-content strong {
    font-size: 15px;
    color: #212529;
}

.leaflet-popup-content small {
    color: #6c757d;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    #map {
        height: 300px;
        min-height: 300px;
    }

    .map-mode {
        padding: 8px 12px;
        font-size: 14px;
    }

    .waypoint-item .row {
        flex-wrap: wrap;
    }

    .waypoint-actions-col {
        width: 100%;
        margin-top: 10px;
    }

    .waypoint-actions-col .btn-group {
        width: 100%;
        display: flex;
    }

    .waypoint-actions-col .btn {
        flex: 1;
    }

    .fuel-suggestions-panel {
        left: 10px;
        right: 10px;
        max-width: none;
        bottom: 10px;
    }

    .route-section-item .row {
        flex-wrap: wrap;
    }

    .route-section-item .col-1 {
        width: auto;
    }

    .route-section-item .col-6 {
        width: 100%;
        margin-top: 10px;
    }

    .route-section-item .col-4 {
        width: 100%;
        margin-top: 10px;
        text-align: left !important;
    }
}

@media (max-width: 576px) {
    .waypoint-basic-info {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .waypoint-controls-col,
    .waypoint-number-col,
    .waypoint-info-col,
    .waypoint-time-col,
    .waypoint-actions-col {
        width: 100%;
        padding: 4px 0;
    }

    .waypoint-time-col {
        text-align: left !important;
    }
}

/* ============================================================================
   MAP INSTRUCTIONS
   ============================================================================ */

.map-instructions {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #dee2e6;
}

.map-instructions h6 {
    margin-bottom: 10px;
    color: #495057;
}

.map-instructions ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.map-instructions li {
    margin-bottom: 5px;
    font-size: 13px;
}

/* ============================================================================
   SEGMENT ROUTE COLORS IN LIST
   ============================================================================ */

.segment-item.scenic-route {
    border-left: 4px solid #28a745;
}

.segment-item.highway-route {
    border-left: 4px solid #dc3545;
}

.segment-icon {
    margin-right: 8px;
    font-size: 16px;
}