/* =========================================================================
   BUYPASS — css/app.css   |   CSS FOR ALL PAGES (SINGLE FILE)
   -------------------------------------------------------------------------
   This one file holds the CSS for the whole UI. There used to be 30+ separate files
   (css/dashboard.css, css/pickups.css, rider/css/rider-dashboard.css, ...).
   Every page loads only this single file:  <link rel="stylesheet" href="css/app.css">

   ▶ CHANGING ANYTHING HERE AFFECTS EVERY PAGE.
   ▶ Each part is separated by a comment, in this order:
        1) Page-specific CSS (page-1)  2) style.css  3) material-theme.css
        4) Page-specific CSS (page-2/3) + Rider app CSS
   ▶ Where two pages had conflicting CSS, the rule is prefixed with
     :where(body:has(#page-id)) so that it only applies to that page.
     The rider html{} rule is scoped the same way.
   ========================================================================= */

/* Font imports (previously repeated inside each page block) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');


/* ####################################################################
   1) PAGE-SPECIFIC CSS (first block, one part per page)
   #################################################################### */

/* ==================== add-internal.css  |  page: add-internal.html ==================== */
/* add-internal.css — page-specific CSS for add-internal.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .tab-btn { transition: all 0.2s ease-in-out; }
    :where(body:has(#es-id)) .tab-active { background-color: #d946ef; color: white; border-color: #d946ef; box-shadow: 0 4px 6px -1px rgba(217, 70, 239, 0.2); }
    .tab-inactive { background-color: white; color: #64748b; border-color: #e2e8f0; }

/* ==================== add-tv.css  |  page: add-tv.html ==================== */
/* add-tv.css — page-specific CSS for add-tv.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    :where(body:has(#dispatch-form-container)) .tab-active { background-color: #10b981; color: white; border-color: #10b981; box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2); }
    .tab-inactive { background-color: white; color: #64748b; border-color: #e2e8f0; }

/* ==================== api-keys.css  |  page: api-keys.html ==================== */
/* api-keys.css — page-specific CSS for api-keys.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== auto-tracking.css  |  page: auto-tracking.html ==================== */
/* auto-tracking.css — page-specific CSS for auto-tracking.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    
    /* 🟢 80% Zoom CSS hack for iframe */
    .zoomed-iframe {
        width: 125%; /* 100 / 0.8 = 125% */
        height: 125%;
        transform: scale(0.8);
        transform-origin: top left;
        border: none;
    }

/* ==================== cities.css  |  page: cities.html ==================== */
/* cities.css — page-specific CSS for cities.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== dashboard.css  |  page: dashboard.html ==================== */
/* dashboard.css — page-specific CSS for dashboard.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f0f4f8; }
    
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#val-tv), body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

    .stat-card { transition: all 0.3s ease; }
    .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.08); }
    
    /* Calendar Specific Styles */
    .cal-day { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600; margin: auto; }
    .cal-day:hover:not(.active-date):not(.empty) { background-color: #e2e8f0; }
    .cal-day.active-date { background-color: #0f172a; color: white; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3); transform: scale(1.1); }
    .cal-day.today-marker:not(.active-date) { border: 2px solid #6366f1; color: #6366f1; }
    .cal-day.empty { cursor: default; }

    /* Entry Animations */
    @keyframes slideUpFade { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
    .animate-up { animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
    
    .glass-card { background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid rgba(226, 232, 240, 0.8); }

/* ==================== dayendreport.css  |  page: dayendreport.html ==================== */
/* dayendreport.css — page-specific CSS for dayendreport.html (previously inline in the HTML <style>, now a separate file) */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
        body { font-family: 'Inter', sans-serif !important; }
        
        :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
        :where(body:has(#day-end-page)) .custom-scrollbar::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.5); }
        :where(body:has(#day-end-page)) .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.8); border-radius: 4px; }
        :where(body:has(#day-end-page)) .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.8); }

        :where(body:has(#day-end-page)) .glass-panel { border: 1px solid var(--report-border); }
        
        .progress-circle {
            position: relative; width: 140px; height: 140px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            transition: background 1s ease-out;
        }
        .progress-circle-inner {
            position: absolute; width: 115px; height: 115px; background-color: var(--report-surface);
            border-radius: 50%; display: flex; flex-direction: column; align-items: center;
            justify-content: center;
        }

/* ==================== emails.css  |  page: emails.html ==================== */
/* emails.css — page-specific CSS for emails.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== history-internal.css  |  page: history-internal.html ==================== */
/* history-internal.css — page-specific CSS for history-internal.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== history-pickups.css  |  page: history-pickups.html ==================== */
/* history-pickups.css — page-specific CSS for history-pickups.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#val-tv), body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    :where(body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    :where(body:has(#filter-recorded)) .loader { border: 3px solid #f3f3f3; border-top: 3px solid #0ea5e9; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==================== history-returns.css  |  page: history-returns.html ==================== */
/* history-returns.css — page-specific CSS for history-returns.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#val-tv), body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    :where(body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    :where(body:has(#pending-count)) .loader { border: 3px solid #f3f3f3; border-top: 3px solid #e11d48; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==================== history-tv.css  |  page: history-tv.html ==================== */
/* history-tv.css — page-specific CSS for history-tv.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== loadsheet.css  |  page: loadsheet.html ==================== */
/* loadsheet.css — page-specific CSS for loadsheet.html (previously inline in the HTML <style>, now a separate file) */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
        body { font-family: 'Inter', sans-serif; background: #f4f7fb; }
        :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        
        @media print {
            :where(body:has(#app-container)) body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .no-print { display: none !important; }
            #sidebar-container { display: none !important; }
            #setup-ui { display: none !important; }
            #print-ui { margin: 0; padding: 0; display: block !important; }
        }

/* ==================== manage-riders.css  |  page: manage-riders.html ==================== */
/* manage-riders.css — page-specific CSS for manage-riders.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== manage-roles.css  |  page: manage-roles.html ==================== */
/* manage-roles.css — page-specific CSS for manage-roles.html (previously inline in the HTML <style>, now a separate file) */

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; }
        
        /* Custom Scrollbar for sleek look */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: rgba(30, 41, 59, 0.5); border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.8); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.8); }

        :where(body:has(#roles-page)) .glass-panel { background: var(--roles-panel); }
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }

/* ==================== manage-sellers.css  |  page: manage-sellers.html ==================== */
/* manage-sellers.css — page-specific CSS for manage-sellers.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== not-scanned.css  |  page: not-scanned.html ==================== */
/* not-scanned.css — page-specific CSS for not-scanned.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== pickups.css  |  page: pickups.html ==================== */
/* pickups.css — page-specific CSS for pickups.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#p-seller), body:has(#r-rider)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; border-left: 1px solid #e2e8f0; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    
    :where(body:has(#p-seller)) .custom-loader {
        position: absolute; top: calc(50% - 2.5rem); left: calc(50% - 2.5rem);
        width: 5rem; height: 5rem; border: 5px solid lightGreen; border-radius: 50%;
        animation: spinCircle-pickups 1s linear infinite; overflow: hidden; transition: 0.3s;
        background: lightGreen; box-shadow: 0rem 0rem 0.6rem rgba(0,0,0,0.3);
    }
    :where(body:has(#p-seller)) .custom-loader .line-long {
        height: 7px; width: 2.5rem; position: absolute; top: 65%; left: 44%;
        background-color: green; transform: rotate(-45deg); transform-origin: 0% 50%;
        border-radius: 5px; animation: baseGrow 1s forwards;
    }
    :where(body:has(#p-seller)) .custom-loader .line-short {
        height: 7px; width: 1.5rem; position: absolute; top: 65%; left: 50%;
        background-color: green; transform: rotate(-135deg); transform-origin: 0% 50%;
        border-radius: 5px; animation: tipGrow 1s forwards;
    }
    /* ---- Duplicate Order ID alerts + wrong-image removal ---- */
    .bp-dup-alert { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 8px 10px; border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1.55; }
    .bp-dup-alert.hidden { display: none !important; }
    .bp-dup-hard { background: #fff1f2; border: 1px solid #fda4af; color: #9f1239; }
    .bp-dup-soft { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
    .bp-card-dup { box-shadow: 0 0 0 2px #f43f5e, 0 10px 20px -8px rgba(244, 63, 94, .45) !important; }
    .bp-oid-dup { border-color: #f43f5e !important; background: #fff1f2 !important; color: #9f1239 !important; }
    .bp-remove-btn { line-height: 1; }
    .bp-remove-btn:hover { transform: scale(1.12); }
    @keyframes spinCircle-pickups { 0% { transform: rotate(0deg); border-top: 5px solid darkGreen; } 100% { transform: rotate(360deg); border-top: 5px solid darkGreen; } }
    @keyframes popCheck { 0%, 80% { transform: scale(1); } 100% { transform: scale(1.1); } }

/* ==================== returns.css  |  page: returns.html ==================== */
/* returns.css — page-specific CSS for returns.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#p-seller), body:has(#r-rider)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; border-left: 1px solid #e2e8f0; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    
    :where(body:has(#r-rider)) .custom-loader {
        position: absolute; top: calc(50% - 2.5rem); left: calc(50% - 2.5rem);
        width: 5rem; height: 5rem; border: 5px solid lightPink; border-radius: 50%;
        animation: spinCircle-returns 1s linear infinite; overflow: hidden; transition: 0.3s;
        background: lightPink; box-shadow: 0rem 0rem 0.6rem rgba(0,0,0,0.3);
    }
    :where(body:has(#r-rider)) .custom-loader .line-long {
        height: 7px; width: 2.5rem; position: absolute; top: 65%; left: 44%;
        background-color: crimson; transform: rotate(-45deg); transform-origin: 0% 50%;
        border-radius: 5px; animation: baseGrow 1s forwards;
    }
    :where(body:has(#r-rider)) .custom-loader .line-short {
        height: 7px; width: 1.5rem; position: absolute; top: 65%; left: 50%;
        background-color: crimson; transform: rotate(-135deg); transform-origin: 0% 50%;
        border-radius: 5px; animation: tipGrow 1s forwards;
    }
    @keyframes spinCircle-returns { 0% { transform: rotate(0deg); border-top: 5px solid darkRed; } 100% { transform: rotate(360deg); border-top: 5px solid darkRed; } }
    @keyframes tipGrow { 0%, 25% { width: 0px; left: 0; top: 0; } 50% { top: 0%; left: 0%; width: 0; } 75% { top: 0%; left: 0%; width: 0rem; } 100% { top: 65%; left: 50%; width: 1.5rem; } }
    @keyframes baseGrow { 0%, 90% { width: 0; } 100% { width: 2.5rem; } }
    @keyframes popCheck { 0%, 80% { transform: scale(1); } 100% { transform: scale(1.1); } }

/* ==================== rider-fuel.css  |  page: rider-fuel.html ==================== */
/* rider-fuel.css — page-specific CSS for rider-fuel.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#day-end-page), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container)) .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== rider-route.css  |  page: rider-route.html ==================== */
/* rider-route.css — page-specific CSS for rider-route.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    .upload-zone { border: 2px dashed #cbd5e1; transition: all 0.3s ease; }
    .upload-zone:hover, .upload-zone.dragover { border-color: #6366f1; background-color: #eef2ff; transform: translateY(-2px); }
    .hub-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
    .hub-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
    .avail-scroll::-webkit-scrollbar, .route-scroll::-webkit-scrollbar { width: 4px; }
    .avail-scroll::-webkit-scrollbar-thumb, .route-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    #map { height: 100%; min-height: 400px; z-index: 1;}
    .modal-backdrop { backdrop-filter: blur(4px); z-index: 9999;}
    @keyframes subtle-pulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }
    .ai-suggest { animation: subtle-pulse 2s infinite; }

/* ==================== settings.css  |  page: settings.html ==================== */
/* settings.css — page-specific CSS for settings.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .hover-card { transition: all 0.2s ease-in-out; }
    .hover-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1); }

/* ==================== users.css  |  page: users.html ==================== */
/* users.css — page-specific CSS for users.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    body { font-family: 'Inter', sans-serif !important; background-color: #f4f7fb; }
    [hidden] { display:none !important; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#add-email-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#new-city)) .custom-scrollbar::-webkit-scrollbar-track { background: #f8fafc; border-radius: 4px; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

/* ==================== utilities.css  |  page: utilities.html ==================== */
/* utilities.css — page-specific CSS for utilities.html (previously inline in the HTML <style>, now a separate file) */

    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');
    body { font-family: 'Inter', sans-serif; background-color: #f4f7fb; }
    .font-mono { font-family: 'JetBrains Mono', monospace; }
    
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    :where(body:has(#val-tv), body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    :where(body:has(#es-id), body:has(#dispatch-form-container), body:has(#add-key-container), body:has(#sync-btn), body:has(#add-city-container), body:has(#val-tv), body:has(#add-email-container), body:has(#sender-date-badge), body:has(#filter-recorded), body:has(#pending-count), body:has(#app-container), body:has(#add-rider-container), body:has(#sellers-page-content), body:has(#entry-container), body:has(#p-seller), body:has(#r-rider), body:has(#fuel-form-container), body:has(#new-city), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    :where(body:has(#filter-recorded), body:has(#pending-count), body:has(#ls_dropZone)) .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    @media print {
      @page { size: A4 portrait; margin: 12mm 15mm; }
      :where(body:has(#ls_dropZone)) body { background: #ffffff !important; color: #000000 !important; padding: 0 !important; overflow: visible !important; }
      .no-print { display: none !important; }
      .print-page { box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; page-break-after: always; width: 100% !important; max-width: 100% !important; }
      #ls_sheetsContainer { display: block !important; }
    }


/* ####################################################################
   2) SHARED: style.css
   #################################################################### */

/* ==================== style.css  |  page: add-internal.html, add-tv.html, api-keys.html, auto-tracking.html, cities.html, dashboard.html, dayendreport.html, emails.html, history-internal.html, history-pickups.html, history-returns.html, history-tv.html, index.html, loadsheet.html, manage-riders.html, manage-roles.html, manage-sellers.html, not-scanned.html, pickups.html, returns.html, rider-fuel.html, rider-route.html, settings.html, users.html, utilities.html ==================== */
/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
body { font-family: 'Inter', sans-serif; background-color: #f4f7fb; }

.loader { border: 2px solid white; border-top-color: transparent; border-radius: 50%; width: 14px; height: 14px; animation: spin 1s linear infinite; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-fade { animation: fadeInUp 0.5s ease-out forwards; }

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

@media print {
      body * { visibility: hidden; }
      #printable-area, #printable-area * { visibility: visible; }
      #printable-area { 
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 100%; 
        background: white !important; 
        color: black !important; 
        padding: 5px !important; 
        margin: 0 !important; 
      }
      .no-print { display: none !important; }
      
      /* Repeat both the main header and the table header on every printed page */
      .print\:flex { display: flex !important; }
      .print\:table-header-group { display: table-header-group !important; }
      
      thead { display: table-header-group !important; }
      tr { page-break-inside: avoid; break-inside: avoid; height: 28px !important; }
      td, th { padding: 4px 6px !important; font-size: 10px !important; }
      
      @page { size: landscape; margin: 5mm; }
    }

    /* Print Specific Styling */
        @media print {
            @page {
                size: A4 portrait;
                margin: 10mm;
            }
            
            /* This rule is essential for page breaks to work */
            html, body, .h-screen, .h-full, .overflow-hidden, .overflow-y-auto, .flex-1 {
                height: auto !important;
                min-height: auto !important;
                overflow: visible !important;
                display: block !important;
                position: static !important;
            }

            body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .no-print { display: none !important; }
            #sidebar-container { display: none !important; }
            #setup-ui { display: none !important; }
            
            #print-ui { 
                display: block !important; 
                padding: 0 !important; 
                margin: 0 !important;
                background: white !important;
            }

            /* Table Header & Footer Repeating Magic */
            table { 
                width: 100%; 
                border-collapse: collapse; 
                page-break-inside: auto; 
            }
            thead { display: table-header-group; }
            tfoot { display: table-footer-group; }
            tr { 
                page-break-inside: avoid; 
                page-break-after: auto; 
            }
            
            .print-container { 
                box-shadow: none !important; 
                border: none !important; 
                max-width: 100% !important; 
                margin: 0 !important; 
                padding: 0 !important; 
            }
        }
/* Add your full Print CSS here from the previous code */


/* ####################################################################
   3) SHARED: material-theme.css (the rider app uses the same file)
   #################################################################### */

/* ==================== material-theme.css  |  page: add-internal.html, add-tv.html, api-keys.html, auto-tracking.html, cities.html, dashboard.html, dayendreport.html, emails.html, history-internal.html, history-pickups.html, history-returns.html, history-tv.html, index.html, loadsheet.html, manage-riders.html, manage-roles.html, manage-sellers.html, not-scanned.html, pickups.html, returns.html, rider/dashboard.html, rider/day-summary.html, rider/duty-location.html, rider/history.html, rider/map.html, rider/pickup-confirmation.html, rider/profile.html, rider/task-details.html, rider/tasks.html, rider-fuel.html, rider-route.html, settings.html, users.html, utilities.html ==================== */
/* =====================================================================
   BUYPASS — MATERIAL DASHBOARD THEME (Creative Tim Material Dashboard 3 style)
   Tokens extracted from the official material-dashboard.css:
   primary #e91e63 | info #1A73E8 | success #4CAF50 | warning #fb8c00
   danger #F44335 | dark #262626 | body #737373 | surface #f0f2f5
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,700;1,900&display=swap');

:root{
  --md-primary:#e91e63; --md-primary-2:#d81557; --md-primary-soft:#EC407A;
  --md-info:#1A73E8; --md-success:#4CAF50; --md-warning:#fb8c00; --md-danger:#F44335;
  --md-dark:#262626; --md-heading:#344767; --md-text:#737373; --md-muted:#7b809a;
  --md-bg:#f0f2f5; --md-line:#e5e5e5;
  --md-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  --md-card:0 20px 27px 0 rgba(0,0,0,.05),0 4px 6px -1px rgba(0,0,0,.08);
}

/* ---------- BASE SURFACE ---------- */
html,body{background:var(--md-bg) !important;}
body{font-family:'Roboto',Inter,Helvetica,Arial,sans-serif !important;color:var(--md-text);}
h1,h2,h3,h4,h5,h6{color:var(--md-heading);}

/* dark shells -> light material surfaces */
.bg-\[\#0b1120\],.bg-\[\#0f172a\],.bg-\[\#0b101e\],.bg-\[\#13192b\],
.bg-slate-800,.bg-slate-800\/80,.bg-slate-800\/50{background-color:#ffffff !important;}
.bg-slate-700{background-color:#f5f5f5 !important;}

/* dark-on-light text remap */
.text-slate-100,.text-slate-200,.text-slate-300{color:var(--md-heading) !important;}
.text-slate-400,.text-slate-500{color:var(--md-muted) !important;}
.text-white:not(button):not(a):not([class*="bg-indigo"]):not([class*="bg-emerald"]):not([class*="bg-rose"]):not([class*="bg-fuchsia"]):not([class*="bg-purple"]):not([class*="bg-cyan"]):not([class*="bg-amber"]):not([class*="bg-yellow"]):not([class*="bg-blue"]){color:var(--md-dark) !important;text-shadow:none !important;}
.text-rose-500{color:var(--md-danger) !important;}
.text-emerald-400,.text-emerald-600{color:var(--md-success) !important;}
.text-indigo-400,.text-indigo-600{color:var(--md-info) !important;}
.text-amber-500,.text-amber-600{color:var(--md-warning) !important;}

/* borders */
.border-slate-600,.border-slate-700,.border-slate-800,.border-slate-800\/60,.border-slate-700\/50{border-color:var(--md-line) !important;}

/* ---------- SIDEBAR (nav.js) ---------- */
#sidebar-drawer{background:#fff !important;border-right:1px solid var(--md-line) !important;box-shadow:0 4px 14px rgba(0,0,0,.07) !important;}
#sidebar-drawer [class*="bg-[#0b101e]"],#sidebar-drawer [class*="bg-[#0f172a]"]{background:transparent !important;}
#sidebar-drawer h1{color:var(--md-dark) !important;}
#sidebar-drawer .text-indigo-400{color:var(--md-primary) !important;}
#sidebar-drawer a{color:var(--md-heading) !important;}
#sidebar-drawer a:hover{background:#f5f5f5 !important;color:var(--md-primary) !important;}
#sidebar-drawer a.bg-indigo-600{background:linear-gradient(195deg,var(--md-primary-soft) 0%,var(--md-primary) 55%,var(--md-primary-2) 100%) !important;color:#fff !important;box-shadow:0 4px 10px rgba(233,30,99,.35) !important;}
#sidebar-drawer a.bg-indigo-600:hover{color:#fff !important;}
#sidebar-drawer div.bg-indigo-600{background:linear-gradient(195deg,var(--md-primary),var(--md-primary-2)) !important;color:#fff !important;}
#sidebar-drawer .text-emerald-400{color:var(--md-success) !important;}
#sidebar-drawer button{background:#f5f5f5 !important;color:var(--md-heading) !important;box-shadow:none !important;}
#mobile-top-bar{background:#fff !important;box-shadow:0 2px 10px rgba(0,0,0,.08) !important;}
#mobile-top-bar .text-white{color:var(--md-dark) !important;}
#mobile-top-bar #mobile-menu-btn,#mobile-top-bar #mobile-menu-btn span{color:#fff !important;}

/* ---------- CARDS / PANELS ---------- */
.bg-white{box-shadow:var(--md-card);border:1px solid #eceff1;border-radius:.9rem;}
.bg-slate-50{border-radius:.75rem;}

/* ---------- FORMS (Material filled/outlined) ---------- */
input,select,textarea{
  background:#fff !important;border:1px solid #d2d2d2 !important;color:var(--md-dark) !important;
  border-radius:.45rem !important;font-size:.875rem !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--md-primary) !important;box-shadow:0 0 0 .22rem rgba(233,30,99,.13) !important;outline:none;
}
input::placeholder,textarea::placeholder{color:#9ca3af;}
option{color:var(--md-dark);}
label{color:var(--md-heading) !important;font-weight:500 !important;font-size:.68rem !important;text-transform:uppercase;letter-spacing:.06em;}

/* ---------- BUTTONS (MD gradient + elevation) ---------- */
button{
  position:relative;overflow:hidden;border:none;cursor:pointer;
  border-radius:.5rem !important;text-transform:uppercase !important;
  letter-spacing:.04em !important;font-weight:700 !important;font-size:.72rem !important;
  box-shadow:0 2px 6px rgba(0,0,0,.16);transition:box-shadow .2s,transform .15s;
}
button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.2);}
button:active{transform:translateY(0);box-shadow:0 2px 5px rgba(0,0,0,.18);}
button[class*="bg-indigo"],button[class*="bg-fuchsia"],button[class*="bg-purple"],button[class*="bg-pink"]{background:linear-gradient(195deg,var(--md-primary-soft),var(--md-primary) 55%,var(--md-primary-2)) !important;color:#fff !important;}
button[class*="bg-emerald"],button[class*="bg-green"]{background:linear-gradient(195deg,#66BB6A,var(--md-success) 55%,#43a047) !important;color:#fff !important;}
button[class*="bg-rose"],button[class*="bg-red"]{background:linear-gradient(195deg,#EF5350,var(--md-danger) 55%,#e53935) !important;color:#fff !important;}
button[class*="bg-amber"],button[class*="bg-yellow"],button[class*="bg-orange"]{background:linear-gradient(195deg,#FFA726,var(--md-warning) 55%,#f57c00) !important;color:#fff !important;}
button[class*="bg-cyan"],button[class*="bg-blue"],button[class*="bg-sky"]{background:linear-gradient(195deg,#42A5F5,var(--md-info) 55%,#1565C0) !important;color:#fff !important;}
button[class*="bg-slate"]{background:#fff !important;color:var(--md-heading) !important;border:1px solid #d2d2d2 !important;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.md-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:md-ripple .6s ease-out forwards;pointer-events:none;}
@keyframes md-ripple{to{transform:scale(2.6);opacity:0;}}

/* ---------- TABLES ---------- */
thead th{background:transparent !important;color:var(--md-muted) !important;font-size:.66rem !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--md-line) !important;}
tbody td{color:#525252 !important;border-bottom:1px solid #f1f3f4 !important;}
tbody tr:hover td{background:#fafbfc;}

/* ---------- INLINE ALERTS ---------- */
#login-error:not(.hidden),[class*="bg-rose-50"],[class*="bg-rose-500/10"]{background:#fdecea !important;color:#c62828 !important;border:1px solid #f5c6c0 !important;border-radius:.5rem;}
[class*="bg-emerald-50"],[class*="bg-emerald-100"]{background:#e8f5e9 !important;color:#2e7d32 !important;}
[class*="bg-amber-50"],[class*="bg-amber-100"]{background:#fff8e1 !important;color:#ef6c00 !important;}
[class*="bg-indigo-50"],[class*="bg-indigo-100"]{background:#e3f2fd !important;color:#1565c0 !important;}

/* ---------- MD DIALOG (replaces alert) ---------- */
.md-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:99999;display:flex;align-items:center;justify-content:center;animation:md-fade .18s ease;}
.md-dialog{background:#fff;border-radius:1rem;box-shadow:0 24px 60px rgba(0,0,0,.28);max-width:430px;width:calc(100% - 40px);padding:26px;animation:md-pop .25s cubic-bezier(.2,.9,.3,1.15);}
.md-ico{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px;}
.md-ico.info{background:#e3f2fd;color:var(--md-info);} .md-ico.danger{background:#fdecea;color:var(--md-danger);}
.md-ico.success{background:#e8f5e9;color:var(--md-success);} .md-ico.warning{background:#fff8e1;color:var(--md-warning);}
.md-title{font-size:1.05rem;font-weight:700;color:var(--md-dark);}
.md-msg{color:var(--md-text);font-size:.875rem;margin:.45rem 0 1.3rem;white-space:pre-line;line-height:1.55;}
.md-actions{display:flex;justify-content:flex-end;gap:.6rem;}
.md-btn{background:transparent;color:var(--md-primary);font-weight:700;padding:.55rem 1.1rem;border-radius:.5rem;text-transform:uppercase;font-size:.74rem;letter-spacing:.05em;border:none;cursor:pointer;}
.md-btn:hover{background:rgba(233,30,99,.08);}
.md-btn.primary{background:linear-gradient(195deg,var(--md-primary),var(--md-primary-2));color:#fff;box-shadow:0 4px 10px rgba(233,30,99,.35);}
.md-btn.primary:hover{background:linear-gradient(195deg,var(--md-primary),var(--md-primary-2));filter:brightness(1.06);}

/* ---------- UPLOAD ANIMATION ---------- */
/* the chip is the same height as the LIVE CAMERA / UPLOAD ALL buttons (34px);
   the progress bar overlays below the chip and does not increase its height */
.md-up{position:relative;display:inline-flex;align-items:center;margin:0 0 0 .5rem;vertical-align:middle;}
.md-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;}
.md-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fce4ec;color:#ad1457;border:1px solid #f8bbd0;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:0 .95rem;height:34px;box-sizing:border-box;border-radius:999px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.05);animation:md-up .35s ease both;}
.md-linear{height:4px;background:#fce4ec;border-radius:2px;overflow:hidden;position:relative;}
.md-up .md-linear{position:absolute;top:calc(100% + 4px);left:0;right:0;width:auto;}
.md-linear i{position:absolute;height:100%;width:40%;background:linear-gradient(90deg,var(--md-primary),var(--md-primary-2));border-radius:2px;animation:md-ind 1.1s ease-in-out infinite;}
@keyframes md-ind{0%{left:-40%}100%{left:110%}}

/* ---------- OCR SCAN ANIMATION ---------- */
.md-scanwrap{position:relative;overflow:hidden;}
.md-scanwrap::before{content:'';position:absolute;inset:3px;border:2px solid rgba(233,30,99,.65);border-radius:8px;pointer-events:none;animation:md-fade 2.6s ease;}
.md-scanwrap::after{content:'';position:absolute;left:0;right:0;height:34%;top:-40%;background:linear-gradient(180deg,transparent,rgba(233,30,99,.3),transparent);animation:md-laser 1.3s ease-in-out 2;pointer-events:none;}
@keyframes md-laser{0%{top:-40%}50%{top:100%}100%{top:-40%}}

/* ---------- ENTRANCE ANIMATION ---------- */
.md-anim{animation:md-up .5s ease both;}
@keyframes md-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes md-fade{from{opacity:0}to{opacity:1}}
@keyframes md-pop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}

/* ---------- PRINT SAFETY ---------- */
@media print{
  html,body{background:#fff !important;}
  .md-overlay,.md-linear,.md-chips{display:none !important;}
  button{box-shadow:none !important;transform:none !important;}
  .bg-white{box-shadow:none !important;border:none !important;}
}

/* =====================================================================
   V2 — REFERENCE COLOR SCHEME: charcoal actions + pink accents only
   ===================================================================== */
button[class*="bg-indigo"],button[class*="bg-fuchsia"],button[class*="bg-purple"],button[class*="bg-pink"],
button[class*="bg-amber"],button[class*="bg-yellow"],button[class*="bg-orange"]{
  background:linear-gradient(195deg,#4d4d4d,#262626 60%,#111111) !important;color:#fff !important;
}
button[class*="bg-slate"]{background:#fff !important;color:#262626 !important;border:1px solid #d2d2d2 !important;}
#sidebar-drawer a.bg-indigo-600{background:linear-gradient(195deg,#424242,#1f1f1f) !important;box-shadow:0 4px 10px rgba(0,0,0,.28) !important;}
#sidebar-drawer div.bg-indigo-600{background:linear-gradient(195deg,#424242,#1f1f1f) !important;color:#fff !important;}
.md-btn.primary{background:linear-gradient(195deg,#424242,#1f1f1f) !important;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.28);}
.md-btn{color:var(--md-primary);}

/* theme toggle FAB */
.md-theme-toggle{
  position:fixed;right:18px;bottom:18px;z-index:99998;width:48px;height:48px;border-radius:50%;
  background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;
  font-size:20px;cursor:pointer;border:none;padding:0 !important;text-transform:none !important;
}
.md-theme-toggle:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.25);}

/* =====================================================================
   DARK MODE  (html[data-theme="dark"])
   ===================================================================== */
html[data-theme="dark"],html[data-theme="dark"] body{background:#141721 !important;}
html[data-theme="dark"] body{color:#b6c0cf;}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{color:#e8ecf3;}
html[data-theme="dark"] .bg-white{background:#1e222d !important;border-color:#2a3040 !important;box-shadow:0 10px 24px rgba(0,0,0,.35);}
html[data-theme="dark"] .bg-slate-50{background:#262b38 !important;}
html[data-theme="dark"] .bg-\[\#0b1120\],html[data-theme="dark"] .bg-\[\#0f172a\],
html[data-theme="dark"] .bg-\[\#0b101e\],html[data-theme="dark"] .bg-\[\#13192b\],
html[data-theme="dark"] .bg-slate-800,html[data-theme="dark"] .bg-slate-800\/80,html[data-theme="dark"] .bg-slate-800\/50{background-color:#1e222d !important;}
html[data-theme="dark"] .bg-slate-700{background-color:#262b38 !important;}
html[data-theme="dark"] .bg-slate-100,html[data-theme="dark"] .bg-slate-200{background-color:#2a3040 !important;}
html[data-theme="dark"] .text-slate-100,html[data-theme="dark"] .text-slate-200,html[data-theme="dark"] .text-slate-300{color:#dfe6ef !important;}
html[data-theme="dark"] .text-slate-400,html[data-theme="dark"] .text-slate-500{color:#8b94a7 !important;}
html[data-theme="dark"] .text-slate-600,html[data-theme="dark"] .text-slate-700,html[data-theme="dark"] .text-slate-800,html[data-theme="dark"] .text-slate-900{color:#c6cfdb !important;}
html[data-theme="dark"] .text-white:not(button):not(a){color:#e8ecf3 !important;}
html[data-theme="dark"] .border-slate-100,html[data-theme="dark"] .border-slate-200,html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-slate-600,html[data-theme="dark"] .border-slate-700,html[data-theme="dark"] .border-slate-800,
html[data-theme="dark"] .border-slate-800\/60,html[data-theme="dark"] .border-slate-700\/50{border-color:#2e3442 !important;}
/* sidebar dark */
html[data-theme="dark"] #sidebar-drawer{background:#1a1e28 !important;border-color:#2e3442 !important;box-shadow:0 4px 14px rgba(0,0,0,.4) !important;}
html[data-theme="dark"] #sidebar-drawer a{color:#b6c0cf !important;}
html[data-theme="dark"] #sidebar-drawer a:hover{background:#262b38 !important;color:#fff !important;}
html[data-theme="dark"] #sidebar-drawer a.bg-indigo-600{background:linear-gradient(195deg,var(--md-primary-soft),var(--md-primary) 55%,var(--md-primary-2)) !important;color:#fff !important;box-shadow:0 4px 10px rgba(233,30,99,.35) !important;}
html[data-theme="dark"] #sidebar-drawer h1{color:#e8ecf3 !important;}
html[data-theme="dark"] #sidebar-drawer button{background:#262b38 !important;color:#dfe6ef !important;}
html[data-theme="dark"] #mobile-top-bar{background:#1a1e28 !important;}
html[data-theme="dark"] #mobile-top-bar .text-white{color:#e8ecf3 !important;}
/* forms dark */
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{
  background:#171a24 !important;border-color:#3a4152 !important;color:#e8ecf3 !important;
}
html[data-theme="dark"] input:focus,html[data-theme="dark"] select:focus,html[data-theme="dark"] textarea:focus{
  border-color:var(--md-primary) !important;box-shadow:0 0 0 .22rem rgba(233,30,99,.18) !important;
}
html[data-theme="dark"] option{background:#171a24;color:#e8ecf3;}
html[data-theme="dark"] label{color:#c6cfdb !important;}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#5b6474;}
/* buttons dark */
html[data-theme="dark"] button[class*="bg-slate"]{background:#262b38 !important;color:#dfe6ef !important;border-color:#3a4152 !important;}
/* tables dark */
html[data-theme="dark"] thead th{color:#8b94a7 !important;border-color:#2e3442 !important;}
html[data-theme="dark"] tbody td{color:#b6c0cf !important;border-color:#262b38 !important;}
html[data-theme="dark"] tbody tr:hover td{background:#232836;}
/* alerts dark */
html[data-theme="dark"] #login-error:not(.hidden),html[data-theme="dark"] [class*="bg-rose-50"],html[data-theme="dark"] [class*="bg-rose-500/10"]{background:#3a1d20 !important;color:#f28b82 !important;border-color:#5c2b2e !important;}
html[data-theme="dark"] [class*="bg-emerald-50"],html[data-theme="dark"] [class*="bg-emerald-100"]{background:#17331d !important;color:#81c784 !important;}
html[data-theme="dark"] [class*="bg-amber-50"],html[data-theme="dark"] [class*="bg-amber-100"]{background:#3a2a12 !important;color:#ffb74d !important;}
html[data-theme="dark"] [class*="bg-indigo-50"],html[data-theme="dark"] [class*="bg-indigo-100"]{background:#14263f !important;color:#64b5f6 !important;}
/* dialog / toggle dark */
html[data-theme="dark"] .md-dialog{background:#1e222d;}
html[data-theme="dark"] .md-title{color:#e8ecf3;}
html[data-theme="dark"] .md-msg{color:#b6c0cf;}
html[data-theme="dark"] .md-theme-toggle{background:#262b38;box-shadow:0 6px 18px rgba(0,0,0,.5);}
html[data-theme="dark"] .md-chip{background:#33121f;color:#f48fb1;border-color:#5c2233;}
html[data-theme="dark"] .md-linear{background:#3d2430;}
html[data-theme="dark"] .md-linear{background:#2a3040;}
html[data-theme="dark"] .hover\:bg-slate-800\/80:hover{background:#262b38 !important;}

/* =====================================================================
   V3 — SPLIT-PANEL LOGIN (business.buypass.ai style)
   ===================================================================== */
.md-login-body{
  background:#f2ea15 url('https://business.buypass.ai/static/media/backGround.fd5eaa25b1d89aa4e447.png') center/cover no-repeat fixed !important;
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;
}
.md-login-card{display:flex;width:100%;max-width:880px;min-height:560px;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);}
.md-login-brand{flex:1;background:#2478f0;padding:48px 42px;display:flex;flex-direction:column;justify-content:center;}
.md-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:28px;}
.md-brand-logo{width:44px;height:44px;border-radius:10px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.2);}
.md-brand-name{font-size:1.35rem;font-weight:800;color:#fff;letter-spacing:.01em;}
.md-brand-head{color:#f2ea15;font-size:2.7rem;line-height:1.05;font-weight:800;margin:0 0 18px;}
.md-brand-tag{color:#fff;font-size:.95rem;line-height:1.5;margin:0;}
.md-login-form{flex:1;background:#f7f8fa;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;}
.md-login-form h2{font-size:1.5rem;font-weight:800;color:#262626;margin:0 0 6px;}
.md-login-sub{color:#8a94a6;font-size:.85rem;margin:0 0 24px;line-height:1.5;}
.md-field{position:relative;margin-bottom:16px;}
.md-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:#2478f0;}
.md-field input{width:100%;padding:12px 14px 12px 38px !important;border:1px solid #d2d2d2 !important;border-radius:8px !important;background:#fff !important;font-size:.875rem !important;color:#262626 !important;}
.req{color:#e91e63;}
.md-login-btn{width:100%;background:#2478f0 !important;color:#fff !important;border:none !important;border-radius:8px !important;padding:13px !important;font-size:.82rem !important;font-weight:700 !important;text-transform:none !important;letter-spacing:.02em !important;box-shadow:0 4px 12px rgba(36,120,240,.35) !important;margin-top:8px;}
.md-login-btn:hover{background:#1a63cf !important;transform:none !important;}
.md-login-foot{margin-top:24px;color:#9aa4b2;font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;text-align:center;}
@media (max-width:760px){
  .md-login-card{flex-direction:column;min-height:0;}
  .md-login-brand{padding:30px 26px;}
  .md-brand-head{font-size:1.9rem;}
  .md-login-form{padding:30px 24px;}
}
/* dark mode login */
html[data-theme="dark"] .md-login-form{background:#1e222d;}
html[data-theme="dark"] .md-login-form h2{color:#e8ecf3;}
html[data-theme="dark"] .md-login-sub{color:#8b94a7;}
html[data-theme="dark"] .md-field input{background:#171a24 !important;border-color:#3a4152 !important;color:#e8ecf3 !important;}
html[data-theme="dark"] .md-login-foot{color:#5b6474;}

/* =====================================================================
   V4 — MUI LinearProgress "buffer" style loader (theme colors,
   transparent bg, centered)
   ===================================================================== */
.custom-loader.md-hide-circle{display:none !important;}
[id^="loader-ai-"],[id^="upload-overlay-"]{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
[id^="ai-text-"],[id^="upload-text-"]{color:var(--md-primary) !important;}
html[data-theme="dark"] [id^="ai-text-"],html[data-theme="dark"] [id^="upload-text-"]{color:var(--md-primary-soft) !important;}
.md-buffer{
  position:relative;height:4px;width:72%;border-radius:3px;overflow:hidden;
  background-image:radial-gradient(circle, rgba(233,30,99,.30) 1.3px, transparent 1.4px);
  background-repeat:repeat-x;background-size:7px 4px;background-position:left center;
}
.md-buffer .md-b-buf{position:absolute;left:0;top:0;bottom:0;width:10%;background:rgba(233,30,99,.25);}
.md-buffer .md-b-bar{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--md-primary-soft),var(--md-primary));}
.md-center{margin:0 auto;}
.md-buffer-label{margin-top:10px;text-align:center;color:var(--md-primary);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;}
html[data-theme="dark"] .md-buffer{background-image:radial-gradient(circle, rgba(236,64,122,.45) 1.3px, transparent 1.4px);}
html[data-theme="dark"] .md-buffer .md-b-buf{background:rgba(236,64,122,.35);}

/* =====================================================================
   RECORDS ADMIN — row checkboxes + edit-record modal
   ===================================================================== */
.md-sel-check{width:16px;height:16px;accent-color:#e91e63;cursor:pointer;vertical-align:middle;}
.md-sel-count{font-family:'Roboto',sans-serif;}
.md-record-dialog{width:min(480px,94vw);max-width:min(480px,94vw);padding:0;overflow:hidden;}
.md-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.95rem 1.25rem;background:linear-gradient(195deg,var(--md-primary),var(--md-primary-2));
color:#fff;font-size:.85rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
.md-dialog-head .md-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:26px;height:26px;border-radius:6px;
font-size:.75rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;}
.md-dialog-head .md-x:hover{background:rgba(255,255,255,.3);}
.md-record-fields{display:grid;gap:.85rem;padding:1.15rem 1.25rem;max-height:60vh;overflow-y:auto;}
.ra-field{display:flex;flex-direction:column;gap:.3rem;}
.ra-field span{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9a9aa8;}
.ra-field input{padding:.55rem .75rem;border-radius:8px;border:1px solid #e2e2ea;background:#fafafc;
font-size:.8rem;font-weight:600;color:#3c3c46;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;box-sizing:border-box;}
.ra-field input:focus{border-color:#e91e63;box-shadow:0 0 0 3px rgba(233,30,99,.12);background:#fff;}
.md-dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;padding:.85rem 1.25rem;border-top:1px solid #eeeef3;background:#fafafc;}
.md-btn.md-btn-ghost{background:transparent;color:#6b6b78;border:1px solid #dddde4;}
.md-btn.md-btn-ghost:hover{background:#f0f0f4;}
.md-btn.md-btn-pri{background:linear-gradient(195deg,var(--md-primary),var(--md-primary-2));color:#fff;box-shadow:0 4px 10px rgba(233,30,99,.3);}
.md-btn.md-btn-pri:hover{filter:brightness(1.06);}
html[data-theme="dark"] .md-dialog-head{background:linear-gradient(195deg,#3d3d47,#2b2b33);}
html[data-theme="dark"] .ra-field span{color:#8a8a98;}
html[data-theme="dark"] .ra-field input{background:#171a24;border-color:#3a4152;color:#e8ecf3;}
html[data-theme="dark"] .ra-field input:focus{border-color:#e91e63;background:#171a24;}
html[data-theme="dark"] .md-dialog-actions{background:#1a1d26;border-color:#2c313d;}
html[data-theme="dark"] .md-btn.md-btn-ghost{color:#aab2c0;border-color:#3a4152;}
html[data-theme="dark"] .md-btn.md-btn-ghost:hover{background:#242836;}

/* =====================================================================
   RIDER AVAILABILITY TOGGLE — crisp on/off colors (Rider Route Plan)
   ===================================================================== */
.avail-label{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.avail-input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.avail-track{width:38px;height:20px;border-radius:999px;background:#cbd5e1;position:relative;
transition:background .2s ease;box-shadow:inset 0 1px 3px rgba(0,0,0,.15);flex:none;}
.avail-track::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s ease;}
.avail-input:checked + .avail-track{background:#10b981;}
.avail-input:checked + .avail-track::after{left:20px;}
.avail-input:disabled + .avail-track{opacity:.45;cursor:not-allowed;}
.avail-input:focus-visible + .avail-track{outline:2px solid #e91e63;outline-offset:2px;}
html[data-theme="dark"] .avail-track{background:#454c5a;}
html[data-theme="dark"] .avail-input:checked + .avail-track{background:#10b981;}


/* ####################################################################
   4) PAGE-SPECIFIC CSS (dusra/teesra block) + RIDER APP CSS
   #################################################################### */

/* ==================== dayendreport-2.css  |  page: dayendreport.html ==================== */
/* dayendreport-2.css — page-specific CSS for dayendreport.html (previously inline in the HTML <style>, now a separate file) */

/* Day End Report: scoped theme tokens, including dynamic table and chart content. */
#day-end-page {
  --report-bg: #f4f6f9;
  --report-surface: #ffffff;
  --report-inset: #f1f5f9;
  --report-text: #1e293b;
  --report-muted: #526176;
  --report-border: #dce3ed;
  --report-ring: #e2e8f0;
  --report-blue: #1d4ed8;
  --report-green: #047857;
  --report-red: #be123c;
  --report-amber: #92400e;
  --report-cyan: #0e7490;
  --report-purple: #7e22ce;
  background: var(--report-bg) !important;
  color: var(--report-text) !important;
  color-scheme: light;
}
html[data-theme="dark"] #day-end-page {
  --report-bg: #141721;
  --report-surface: #1e2431;
  --report-inset: #272f40;
  --report-text: #ffffff;
  --report-muted: #cbd5e1;
  --report-border: #3a4559;
  --report-ring: #364155;
  --report-blue: #93c5fd;
  --report-green: #6ee7b7;
  --report-red: #fda4af;
  --report-amber: #fcd34d;
  --report-cyan: #67e8f9;
  --report-purple: #d8b4fe;
  color-scheme: dark;
}
#day-end-page main { color: var(--report-text); }
#day-end-page .glass-panel {
  background: var(--report-surface) !important;
  border-color: var(--report-border) !important;
  backdrop-filter: none;
  box-shadow: 0 3px 12px rgb(0 0 0 / 5%);
}
#day-end-page main :is(h1,h2,h3,h4,.text-white,.text-slate-100,.text-slate-200,.text-slate-300) {
  color: var(--report-text) !important;
}
#day-end-page main h1 {
  background: none !important;
  -webkit-text-fill-color: currentColor;
}
#day-end-page main :is(.text-slate-400,.text-slate-500,.text-slate-600,thead th) {
  color: var(--report-muted) !important;
}
#day-end-page main tbody td { color: var(--report-text); border-color: var(--report-border) !important; }
#day-end-page main [class*="border-slate-"] { border-color: var(--report-border) !important; }
#day-end-page main :is([class*="bg-slate-800"],.bg-slate-700,.bg-slate-50) {
  background: var(--report-inset) !important;
}
#day-end-page main tbody tr:hover td { background: var(--report-inset) !important; }
#day-end-page .progress-circle-inner {
  background: var(--report-surface) !important;
  color: var(--report-text) !important;
  box-shadow: none;
}
#day-end-page main :is(.text-indigo-300,.text-indigo-400,.text-blue-400) { color: var(--report-blue) !important; }
#day-end-page main [class*="text-emerald-"] { color: var(--report-green) !important; }
#day-end-page main [class*="text-rose-"] { color: var(--report-red) !important; }
#day-end-page main :is([class*="text-amber-"],.text-orange-400) { color: var(--report-amber) !important; }
#day-end-page main .text-cyan-400 { color: var(--report-cyan) !important; }
#day-end-page main .text-purple-400 { color: var(--report-purple) !important; }
#day-end-page #report-date {
  color: var(--report-text) !important;
  background: var(--report-inset) !important;
  border-color: var(--report-border) !important;
  color-scheme: inherit;
}
#day-end-page #btn-email { color: #ffffff !important; }
#day-end-page #filter-city {
  color: var(--report-text) !important;
  background: var(--report-inset) !important;
  border-color: var(--report-border) !important;
  color-scheme: inherit;
}
#day-end-page #filter-city option { color: #0f172a; background: #ffffff; }
#day-end-page #city-lock { color: var(--report-cyan) !important; }
#day-end-page .custom-scrollbar::-webkit-scrollbar-track { background: var(--report-bg); }
#day-end-page .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--report-border); }
/* Keep report text white in dark mode; category icons/rings retain their colors. */
html[data-theme="dark"] #day-end-page main :is(h1,h2,h3,h4,p,span,td,th) { color: #ffffff !important; }
@media print {
  #day-end-page { --report-bg:#fff; --report-surface:#fff; --report-text:#111; --report-muted:#444; }
  #day-end-page main :is(h1,h2,h3,h4,p,span,td,th) { color: #111 !important; }
}

/* ==================== loadsheet-2.css  |  page: loadsheet.html ==================== */
/* loadsheet-2.css — page-specific CSS for loadsheet.html (previously inline in the HTML <style>, now a separate file) */

        @media print {
            #print-ui, #print-ui * { visibility: visible !important; }
            #app-container { margin: 0 !important; padding: 0 !important; width: 100% !important; }
            #print-pages-container { max-width: none !important; overflow: visible !important; }
            #print-ui .print-page { display: flex !important; flex-direction: column; }
        }

/* ==================== manage-roles-2.css  |  page: manage-roles.html ==================== */
/* manage-roles-2.css — page-specific CSS for manage-roles.html (previously inline in the HTML <style>, now a separate file) */

/* Scoped to role management; shared navigation and other pages are unaffected. */
#roles-page {
 --roles-bg:#f4f6f9; --roles-panel:#fff; --roles-inset:#f1f5f9;
 --roles-text:#1e293b; --roles-muted:#526176; --roles-border:#dce3ed;
 --roles-accent:#1d4ed8; --roles-selected:#e8efff; --roles-green:#047857;
 --roles-red:#be123c; --roles-off:#94a3b8;
 background:var(--roles-bg) !important; color:var(--roles-text) !important; color-scheme:light;
}
html[data-theme="dark"] #roles-page {
 --roles-bg:#141721; --roles-panel:#1e2431; --roles-inset:#272f40;
 --roles-text:#fff; --roles-muted:#cbd5e1; --roles-border:#3a4559;
 --roles-accent:#93c5fd; --roles-selected:#233858; --roles-green:#6ee7b7;
 --roles-red:#fda4af; --roles-off:#64748b; color-scheme:dark;
}
#roles-content .glass-panel { background:var(--roles-panel) !important; border-color:var(--roles-border) !important; backdrop-filter:none; }
#roles-content :is(h1,h2,h3,.text-white,.text-slate-100,.text-slate-200,.text-slate-300) {color:var(--roles-text) !important;}
#roles-content :is(.text-slate-400,.text-slate-500,.text-slate-600) {color:var(--roles-muted) !important;}
#roles-content h1 {background:none !important; -webkit-text-fill-color:currentColor;}
#roles-content [class*="border-slate-"] {border-color:var(--roles-border) !important;}
#roles-content :is([class*="bg-slate-800"],.bg-slate-700) {background:var(--roles-inset) !important;}
#roles-content [class*="text-indigo-"] {color:var(--roles-accent) !important;}
#roles-content [class*="text-emerald-"] {color:var(--roles-green) !important;}
#roles-content [class*="text-rose-"] {color:var(--roles-red) !important;}
#roles-content #city-container button,#roles-content #user-container button {
 background:var(--roles-panel) !important; color:var(--roles-text) !important;
 border:1px solid var(--roles-border) !important; box-shadow:none !important;
}
#roles-content #city-container button[aria-pressed="true"] {
 background:var(--roles-selected) !important; border:2px solid var(--roles-accent) !important;
}
#roles-content #city-container button[aria-pressed="true"] :is(span,i) {color:var(--roles-accent) !important;}
#roles-content #user-container button[aria-pressed="true"] {
 background:#1d4ed8 !important; border-color:#1d4ed8 !important;
}
#roles-content #user-container button[aria-pressed="true"] :is(span,i) {color:#fff !important;}
#roles-content :is(#city-container,#user-container) button:hover {border-color:var(--roles-accent) !important;}
#roles-content #available-modules-container button:hover {background:var(--roles-selected) !important;}
#roles-content #assigned-modules-container > div {background:var(--roles-panel) !important; box-shadow:0 2px 6px rgb(0 0 0 / 4%) !important;}
#roles-content #super-admin-overlay-available {
 background:var(--roles-panel) !important; color:var(--roles-text) !important;
 backdrop-filter:none; top:4.5rem; left:1rem; right:1rem; bottom:1rem; border:none !important;
}
#roles-content #save-btn,#roles-content #save-btn i {color:#fff !important;}
#roles-content button:focus-visible {outline:2px solid var(--roles-accent); outline-offset:3px;}
#roles-content .role-switch {display:inline-flex; position:relative; align-items:center; flex-shrink:0;}
#roles-content .role-switch input {position:absolute; opacity:0; width:1px; height:1px; padding:0 !important; margin:0;}
#roles-content .role-switch-track {display:block; position:relative; width:34px; height:20px; border-radius:999px; background:var(--roles-off); transition:background .15s;}
#roles-content .role-switch-track::after {content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgb(0 0 0 / 20%); transition:transform .15s;}
#roles-content .role-switch input:checked + .role-switch-track {background:#2563eb;}
#roles-content .role-switch input:checked + .role-switch-track::after {transform:translateX(14px);}
#roles-content .role-switch input:focus-visible + .role-switch-track {outline:2px solid var(--roles-accent); outline-offset:3px;}
#roles-content .role-switch input:disabled + .role-switch-track {opacity:.65; cursor:not-allowed;}
html[data-theme="dark"] #roles-content :is(h1,h2,h3,p,span) {color:#fff !important;}
#roles-content ::-webkit-scrollbar-track {background:var(--roles-panel);}
#roles-content ::-webkit-scrollbar-thumb {background:var(--roles-border);}

    
/* Explicit action styles prevent global substring button rules matching hover classes. */
#roles-content #available-modules-container .role-assign {
    background:var(--roles-inset) !important;
    color:var(--roles-text) !important;
    border:1px solid var(--roles-border) !important;
    border-radius:8px; min-height:42px;
    box-shadow:none !important; transform:none !important;
    text-transform:none; letter-spacing:normal;
}
#roles-content #available-modules-container .role-assign :is(div,span,i) {
    color:var(--roles-text) !important;
}
#roles-content #available-modules-container .role-assign:hover,
#roles-content #available-modules-container .role-assign:focus-visible {
    background:var(--roles-selected) !important;
    border-color:var(--roles-accent) !important;
}
#roles-content #assigned-modules-container .role-remove {
    display:inline-flex; align-items:center; justify-content:center;
    width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important;
    padding:0 !important; margin:0; flex-shrink:0;
    background:#dc2626 !important; color:#fff !important;
    border:1px solid #dc2626 !important; border-radius:6px !important;
    box-shadow:none !important; transform:none !important;
}
#roles-content #assigned-modules-container .role-remove i {
    color:#fff !important; font-size:12px; line-height:1;
}
#roles-content #assigned-modules-container .role-remove:hover {
    background:#b91c1c !important; border-color:#b91c1c !important;
}
#roles-content #assigned-modules-container .role-remove:focus-visible {
    outline:2px solid var(--roles-red); outline-offset:3px;
}

/* ==================== manage-sellers-2.css  |  page: manage-sellers.html ==================== */
/* manage-sellers-2.css — page-specific CSS for manage-sellers.html (previously inline in the HTML <style>, now a separate file) */

      #sellers-page-content { min-width: 0; }
      #sellers-database-panel {
        min-width: 0;
        height: clamp(360px, calc(100vh - 160px), 850px);
        height: clamp(360px, calc(100dvh - 160px), 850px);
      }
      #sellers-database-panel > div:first-child { flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
      #sellers-database-scroll {
        flex: 1 1 0%; min-height: 0; min-width: 0;
        overflow-x: auto; overflow-y: scroll;
        scrollbar-gutter: stable;
        scrollbar-width: auto;
        scrollbar-color: #94a3b8 #f1f5f9;
      }
      #sellers-database-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
      #sellers-database-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
      #sellers-database-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border: 2px solid #f1f5f9; border-radius: 8px; }
      #sellers-database-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }
      #sellers-database-scroll::-webkit-scrollbar-corner { background: #f1f5f9; }
      #sellers-database-scroll:focus-visible { outline: 2px solid #7c3aed; outline-offset: -2px; }
      #seller-table thead { position: sticky; top: 0; z-index: 2; background: #f1f5f9 !important; }
      html[data-theme="dark"] #seller-table thead { background: #2a3040 !important; }
      html[data-theme="dark"] #sellers-database-scroll { scrollbar-color: #64748b #1e222d; }
      html[data-theme="dark"] #sellers-database-scroll::-webkit-scrollbar-track,
      html[data-theme="dark"] #sellers-database-scroll::-webkit-scrollbar-corner { background: #1e222d; }
      html[data-theme="dark"] #sellers-database-scroll::-webkit-scrollbar-thumb { background: #64748b; border-color: #1e222d; }
      @media (max-width: 1279px) {
        #sellers-database-panel { height: 65vh; height: 65dvh; min-height: 360px; }
      }

/* ==================== rider-route-2.css  |  page: rider-route.html ==================== */
/* rider-route-2.css — page-specific CSS for rider-route.html (previously inline in the HTML <style>, now a separate file) */

      #pending-orders-scroll {min-width:0;max-height:520px;overflow:auto;scrollbar-gutter:stable;scrollbar-color:#94a3b8 #f1f5f9;}
      #pending-orders-scroll:focus-visible {outline:2px solid #6366f1;outline-offset:-2px;}
      #pending-orders-scroll::-webkit-scrollbar {width:10px;height:10px;}
      #pending-orders-scroll::-webkit-scrollbar-thumb {background:#94a3b8;border-radius:6px;}
      #pending-orders-table {min-width:1730px;font-size:12px;color:#334155;}
      #pending-orders-table thead {position:sticky;top:0;z-index:10;background:#f1f5f9 !important;}
      #pending-orders-table th {padding:14px 12px;font-size:10px;white-space:nowrap;text-transform:uppercase;color:#526176;}
      #pending-orders-table td {padding:14px 12px;vertical-align:top;border-bottom:1px solid #e2e8f0;}
      #pending-orders-table .rp-order-row:hover {background:#f8fafc;}
      #pending-orders-table .rp-serial {min-width:95px;white-space:nowrap;color:#64748b;font-weight:700;}
      #pending-orders-table .rp-seller {min-width:180px;max-width:240px;font-weight:700;overflow-wrap:anywhere;}
      #pending-orders-table .rp-order-id {font:700 12px ui-monospace,monospace;color:#1e293b;margin-bottom:7px;overflow-wrap:anywhere;}
      #pending-orders-table .rp-tracking {font-family:ui-monospace,monospace;overflow-wrap:anywhere;min-width:130px;max-width:180px;}
      #pending-orders-table .rp-order-status,#pending-orders-table .rp-missing {font-size:10px;color:#64748b;margin-top:6px;display:block;}
      #pending-orders-table .rp-address {min-width:230px;max-width:300px;white-space:normal;overflow-wrap:anywhere;line-height:1.6;}
      #pending-orders-table .rp-location {min-width:210px;max-width:250px;overflow-wrap:anywhere;}
      #pending-orders-table .rp-location-name {margin-bottom:6px;}
      #pending-orders-table .rp-map-link {color:#1d4ed8 !important;font-size:11px;text-decoration:underline;}
      #pending-orders-table .rp-badge {display:inline-block;padding:4px 7px;border-radius:5px;font-size:10px;font-weight:700;white-space:nowrap;}
      #pending-orders-table .rp-today {background:#dcfce7;color:#166534 !important;}
      #pending-orders-table .rp-recent {background:#fef3c7;color:#92400e !important;}
      #pending-orders-table .rp-overdue {background:#ffe4e6;color:#9f1239 !important;}
      #pending-orders-table .rp-unknown {background:#e2e8f0;color:#475569 !important;}
      #pending-orders-table .rp-total {background:#f1f5f9;font-weight:700;}
      #pending-orders-table .rp-total span {font-size:11px;font-weight:400;}
      #pending-orders-table .rp-empty {text-align:center;padding:36px;color:#64748b;}
      html[data-theme="dark"] #pending-orders-table thead,html[data-theme="dark"] #pending-orders-table .rp-total {background:#262b38 !important;}
      html[data-theme="dark"] #pending-orders-table .rp-order-id {color:#fff;}
      html[data-theme="dark"] #pending-orders-table :is(.rp-order-status,.rp-missing) {color:#b6c0cf;}
      html[data-theme="dark"] #pending-orders-table .rp-map-link {color:#93c5fd !important;}
      html[data-theme="dark"] #pending-orders-table .rp-today {background:#173c2a;color:#bbf7d0 !important;}
      html[data-theme="dark"] #pending-orders-table .rp-recent {background:#453212;color:#fde68a !important;}
      html[data-theme="dark"] #pending-orders-table .rp-overdue {background:#4c1d2a;color:#fecdd3 !important;}
      html[data-theme="dark"] #pending-orders-table .rp-unknown {background:#334155;color:#e2e8f0 !important;}

/* ==================== rider-route-3.css  |  page: rider-route.html ==================== */
/* rider-route-3.css — page-specific CSS for rider-route.html (previously inline in the HTML <style>, now a separate file) */

    .route-plan-status-strip {padding:12px 16px;border-bottom:1px solid #e2e8f0;font-size:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
    .route-plan-status-strip > p:last-child {flex-basis:100%;font-size:11px;color:#64748b;}
    #route-confirmation-status {font-weight:700;}
    #route-confirmation-status[data-state="confirmed"] {color:#047857;}
    #btn-assign-unassigned {padding:6px 10px;border:1px solid #cbd5e1;border-radius:5px;}
    button:disabled {cursor:not-allowed;opacity:.5;}
    html[data-theme="dark"] .route-plan-status-strip {border-color:#334155;color:#cbd5e1;}
    html[data-theme="dark"] #route-confirmation-status[data-state="confirmed"] {color:#6ee7b7;}
    .route-selection-bar {display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:12px 16px;border-bottom:1px solid #e2e8f0;font-size:12px;color:#475569;}
    .route-selection-bar label {display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;}
    #route-seller-filter {max-width:min(360px,70vw);min-width:180px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;font-size:12px;}
    #route-seller-selection[hidden] {display:none !important;}
    html[data-theme="dark"] #route-seller-filter {background:#262b38;color:#e2e8f0;border-color:#475569;}
    .route-selection-bar > span:last-child {font-size:11px;color:#64748b;}
    #route-select-all,#route-select-seller,.rp-order-select,#route-show-excluded {width:16px;height:16px;accent-color:#4f46e5;vertical-align:middle;cursor:pointer;}
    .rp-order-select {margin-right:8px;}
    #pending-orders-table .rp-excluded-row {background:#fff7ed;}
    html[data-theme="dark"] #pending-orders-table .rp-excluded-row {background:#332b23;}
    html[data-theme="dark"] .route-selection-bar {border-color:#334155;color:#cbd5e1;}
    html[data-theme="dark"] .route-selection-bar > span:last-child {color:#94a3b8;}
    .route-storage-strip {padding:10px 16px;border-bottom:1px solid #e2e8f0;font-size:12px;}
    #route-storage-status {color:#475569;font-weight:600;}
    #route-storage-status[data-kind="success"] {color:#047857;}
    #route-storage-status[data-kind="error"] {color:#be123c;}
    .route-storage-help {font-size:10px;color:#64748b;margin-top:5px;}
    #route-retry-save[hidden] {display:none !important;}
    #route-retry-save {margin-top:8px;padding:6px 12px;border:1px solid #d97706;border-radius:5px;color:#92400e;}
    html[data-theme="dark"] #route-storage-status {color:#cbd5e1;}
    html[data-theme="dark"] #route-storage-status[data-kind="success"] {color:#6ee7b7;}
    html[data-theme="dark"] #route-storage-status[data-kind="error"] {color:#fda4af;}
    html[data-theme="dark"] .route-storage-help {color:#94a3b8;}
    html[data-theme="dark"] .route-storage-strip {border-color:#334155;}

/* ==================== rider-dashboard.css  |  page: rider/dashboard.html, rider/day-summary.html, rider/duty-location.html, rider/history.html, rider/map.html, rider/pickup-confirmation.html, rider/profile.html, rider/task-details.html, rider/tasks.html ==================== */
/* Rider workspace shell. Uses the existing BuyPass Material tokens; no Tailwind/CDN JS required. */
:root{--rd-surface:#fff;--rd-bg:var(--md-bg,#f0f2f5);--rd-text:var(--md-heading,#344767);--rd-muted:#7b809a;--rd-line:#e8ebef;--rd-soft:#f8f9fb;--rd-pink:var(--md-primary,#e91e63);--rd-shadow:0 4px 15px rgba(40,55,80,.045)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body.rd-view{margin:0;background:var(--rd-bg)!important;color:var(--rd-text);font-size:14px;line-height:1.5}.rd-view h1,.rd-view h2,.rd-view h3,.rd-view p{margin:0;color:inherit}.rd-view a{color:inherit;text-decoration:none}.rd-view button{font-family:inherit}.rd-view [hidden]{display:none!important}.rd-view svg{display:block}.rd-view i[data-icon],.rd-view span[data-icon]{display:inline-flex;flex-shrink:0}.rd-view [data-icon] svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.rd-view button:focus-visible,.rd-view a:focus-visible{outline:3px solid #e91e6370;outline-offset:4px}.rd-view button:disabled{cursor:not-allowed;opacity:.55;transform:none}.rd-view .rd-icon-button{padding:8px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--rd-line);background:var(--rd-surface);color:var(--rd-muted);box-shadow:none}.rd-sidebar{width:235px;position:fixed;inset:0 auto 0 0;z-index:30;background:var(--rd-surface);border-right:1px solid var(--rd-line);display:flex;flex-direction:column;padding:26px 16px 16px}.rd-brand{display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--rd-text);font-size:26px;font-weight:800;letter-spacing:-1px}.rd-brand small{display:block;color:var(--rd-muted);font-size:8px;letter-spacing:2px;font-weight:600;margin-top:-3px}.rd-brand-mark{position:relative;display:grid;place-items:center;width:34px;height:39px;font-style:italic;color:var(--rd-pink);font-size:35px}.rd-brand-mark span{position:absolute;font-size:18px;right:-5px;top:-3px}.rd-brand-logo{width:34px;height:34px;border-radius:9px;flex-shrink:0;object-fit:cover;box-shadow:0 3px 8px #0f172a1f}.rd-side-rule{height:1px;background:var(--rd-line);margin:27px 3px 24px}.rd-nav-label{font-size:9px;letter-spacing:1.5px;font-weight:700;padding:0 14px;margin-bottom:12px!important;color:var(--rd-muted)!important}.rd-nav{display:grid;gap:7px}.rd-nav button{display:flex;align-items:center;gap:12px;text-align:left;background:transparent;color:var(--rd-text);padding:13px 16px;width:100%;box-shadow:none;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:500!important}.rd-nav button:hover{background:var(--rd-soft);transform:none;box-shadow:none}.rd-nav button.active{background:linear-gradient(195deg,#ec407a,#d81557);color:#fff;box-shadow:0 4px 10px #e91e632a}.rd-nav-count{margin-left:auto;background:var(--rd-soft);padding:0 6px;color:var(--rd-muted);border-radius:5px;font-size:10px}.rd-side-note{border:1px solid var(--rd-line);border-radius:12px;padding:17px 15px;margin:36px 2px 18px;background:linear-gradient(135deg,var(--rd-soft),var(--rd-surface));font-size:11px}.rd-note-icon{color:var(--rd-pink);margin-bottom:12px}.rd-side-note strong{display:block;font-size:12px}.rd-side-note p{margin:7px 0 11px;color:var(--rd-muted);line-height:1.7}.rd-mini-label{font-size:8px;font-weight:700;color:var(--rd-muted);letter-spacing:.7px}.rd-support{display:flex;align-items:center;gap:9px;margin-top:auto;margin-bottom:17px;padding:11px 9px;background:transparent;color:var(--rd-muted);box-shadow:none;font-size:11px!important;text-transform:none!important;letter-spacing:0!important}.rd-support i:last-child{margin-left:auto}.rd-side-profile{display:flex;align-items:center;gap:10px;padding:16px 2px 0;border-top:1px solid var(--rd-line)}.rd-side-profile strong{display:block;font-size:12px}.rd-side-profile small{display:block;font-size:10px;color:var(--rd-muted)}.rd-side-profile .rd-icon-button{margin-left:auto;border:none}.rd-avatar{display:inline-grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:10px;background:#e8edf5;color:#475c7d;font-size:11px;font-weight:800}.rd-avatar-button{border:1px solid var(--rd-line);box-shadow:none}.rd-shell{margin-left:235px;min-width:0}.rd-topbar{height:72px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rd-line);background:var(--rd-surface)}.rd-breadcrumb,.rd-topbar-left,.rd-topbar-actions,.rd-location{display:flex;align-items:center;gap:14px}.rd-breadcrumb{font-size:11px;color:var(--rd-muted)}.rd-breadcrumb i svg{width:15px;height:15px}.rd-breadcrumb b{font-weight:400;color:#bec5ce}.rd-breadcrumb strong{font-weight:500;color:var(--rd-text)}.rd-location{font-size:11px;gap:5px;margin-right:7px}.rd-location i{color:var(--rd-pink)}.rd-location small{color:var(--rd-muted)}.rd-menu-button{display:none!important}.rd-main{max-width:1540px;margin:auto;padding:23px 32px 16px}.rd-preview-banner{display:flex;align-items:center;gap:12px;padding:11px 14px;background:#fff9ec;border:1px solid #f3e7c9;border-radius:9px;color:#8e6a2c;font-size:11px}.rd-preview-banner>i svg{width:18px;height:18px}.rd-preview-banner strong{margin-right:10px}.rd-preview-banner span{color:#8d7858}.rd-preview-dot{margin-left:auto;white-space:nowrap;font-size:8px;font-weight:700;letter-spacing:1px}.rd-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0 29px}.rd-eyebrow{color:var(--rd-pink)!important;font-size:9px;font-weight:700;letter-spacing:1.6px;margin-bottom:8px!important}.rd-welcome h1{font-size:27px;letter-spacing:-.9px;font-weight:700;line-height:1.25}.rd-welcome>div>p:last-child{font-size:12px;color:var(--rd-muted);margin-top:9px}.rd-welcome>div>p:last-child strong{color:var(--rd-text);font-weight:500}.rd-date-actions{display:flex;align-items:flex-end;gap:10px;flex-shrink:0}.rd-view .rd-date-actions label{font-size:8px!important;letter-spacing:.7px;color:var(--rd-muted)!important}.rd-date-actions input{display:block;height:37px;margin-top:5px;padding:8px;max-width:149px;font-family:inherit}.rd-view .rd-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 15px;font-size:10px!important;white-space:nowrap;letter-spacing:.4px!important;min-height:38px}.rd-button i svg{width:15px;height:15px}.rd-button-white{background:var(--rd-surface);color:var(--rd-text);border:1px solid var(--rd-line);box-shadow:0 2px 4px #00000006}.rd-button-primary{background:linear-gradient(195deg,#ec407a,#d81557);color:#fff}.rd-button-on-pink{background:#fff;color:#d81557;box-shadow:0 3px 12px #96154324}.rd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:25px}.rd-stat{position:relative;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:12px;box-shadow:var(--rd-shadow);padding:18px 18px 11px;min-width:0}.rd-stat-icon{width:45px;height:45px;display:grid;place-items:center;border-radius:10px;box-shadow:0 4px 8px #0000000b}.rd-stat-icon i svg{width:22px;height:22px}.rd-icon-blue{background:linear-gradient(195deg,#49a3f1,#1a73e8);color:#fff}.rd-icon-green{background:linear-gradient(195deg,#66bb6a,#43a047);color:#fff}.rd-icon-amber{background:linear-gradient(195deg,#ffa726,#fb8c00);color:#fff}.rd-icon-pink{background:linear-gradient(195deg,#ec407a,#d81557);color:#fff}.rd-stat>div{text-align:right}.rd-stat p{font-size:11px;color:var(--rd-muted)}.rd-stat strong{font-size:28px;line-height:1.2}.rd-stat footer{display:flex;justify-content:space-between;gap:5px;flex-basis:100%;border-top:1px solid var(--rd-line);margin-top:17px;padding-top:9px;font-size:9px}.rd-stat footer small{font-size:8px;color:var(--rd-muted)}.rd-text-green{color:#43a047}.rd-text-amber{color:#e68a20}.rd-text-pink{color:#d81557}.rd-workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:22px;align-items:start}.rd-primary-column,.rd-secondary-column{display:grid;gap:22px;min-width:0}.rd-next-card{position:relative;isolation:isolate;overflow:clip;border-radius:13px;padding:23px 26px;background:linear-gradient(110deg,#ec407a 0%,#e91e63 52%,#cb1452 100%);color:#fff;box-shadow:0 6px 18px #e91e6320}.rd-next-top{display:flex;align-items:center;justify-content:space-between;color:#ffe3ed;font-size:10px;margin-bottom:16px;gap:12px}.rd-next-tag{font-size:8px;letter-spacing:1px;font-weight:700;display:flex;align-items:center;gap:7px}.rd-next-tag i svg{width:15px;height:15px}.rd-next-card h2{color:#fff;font-size:23px;letter-spacing:-.4px;line-height:1.2}.rd-next-card>p{margin-top:8px;font-size:11px;color:#ffe1eb}.rd-next-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:21px;gap:15px}.rd-next-bottom>div>span{font-size:12px;font-weight:600}.rd-next-bottom small{display:block;font-size:9px;color:#ffd3e3;margin-top:4px}.rd-next-orbit{position:absolute;z-index:-1;border:1px solid #ffffff19;border-radius:50%;pointer-events:none}.rd-orbit-one{width:280px;height:280px;right:-90px;top:-110px}.rd-orbit-two{width:370px;height:370px;right:-145px;top:-158px}.rd-card{background:var(--rd-surface);border:1px solid var(--rd-line);border-radius:12px;box-shadow:var(--rd-shadow);min-width:0;overflow:hidden}.rd-card-heading{padding:21px 20px 17px;display:flex;justify-content:space-between;align-items:center;gap:10px}.rd-card-heading h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:-.3px}.rd-card-heading p{font-size:10px;color:var(--rd-muted);margin-top:4px}.rd-count-badge{background:var(--rd-soft);color:var(--rd-muted);padding:1px 6px;font-size:9px;border-radius:5px}.rd-soft-badge{font-size:8px;color:var(--rd-muted);display:flex;align-items:center;gap:5px;white-space:nowrap}.rd-soft-badge i svg{width:12px;height:12px}.rd-task-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:0 20px 16px;border-bottom:1px solid var(--rd-line)}.rd-tabs{display:flex;padding:3px;gap:2px;background:var(--rd-soft);border:1px solid var(--rd-line);border-radius:7px}.rd-view .rd-tabs button{background:transparent;color:var(--rd-muted);box-shadow:none;text-transform:none!important;font-size:10px!important;letter-spacing:0!important;padding:7px 10px;border-radius:5px!important;font-weight:500!important}.rd-tabs button.active{background:var(--rd-surface);color:var(--rd-pink);box-shadow:0 1px 5px #00000008}.rd-view .rd-search{flex:1;min-width:155px;position:relative}.rd-search i{position:absolute;left:10px;top:9px;color:var(--rd-muted);z-index:1}.rd-search i svg{width:15px;height:15px}.rd-view .rd-search input{width:100%;height:34px;padding:6px 10px 6px 32px;font-size:10px!important;background:var(--rd-surface)!important;box-shadow:none}.rd-task-row{display:flex;align-items:flex-start;gap:13px;padding:20px;border-bottom:1px solid var(--rd-line)}.rd-task-row:last-child{border-bottom:0}.rd-stop-num{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--rd-soft);color:var(--rd-muted);border:1px solid var(--rd-line);font-size:11px;font-weight:600;flex-shrink:0}.rd-task-row:first-child .rd-stop-num{background:#fce4ec;color:#d81557;border-color:#f8d6e2}.rd-task-copy{flex:1;min-width:0}.rd-task-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.rd-task-copy h3{font-size:13px;font-weight:600}.rd-task-copy>p{font-size:10px;color:var(--rd-muted);margin-top:6px;overflow-wrap:anywhere}.rd-task-copy>p i svg{width:12px;height:12px}.rd-task-meta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:8px;color:var(--rd-muted);font-size:9px}.rd-task-meta>span{display:inline-flex;align-items:center;gap:5px}.rd-task-meta i svg{width:12px;height:12px}.rd-status{padding:3px 6px;border-radius:4px;font-size:8px;font-weight:600;white-space:nowrap}.rd-status.pending{background:#fff5df;color:#a87011}.rd-status.partial{background:#e7f1ff;color:#356baf}.rd-status.picked{background:#eaf5e9;color:#418645}.rd-status.not-picked{background:#fde8ed;color:#b94c64}.rd-view .rd-task-open{background:var(--rd-soft);border:1px solid var(--rd-line);box-shadow:none;color:var(--rd-text);display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:9px!important;text-transform:none!important;letter-spacing:0!important;align-self:center;white-space:nowrap}.rd-task-open i svg{width:14px;height:14px}.rd-task-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--rd-line);padding:13px 20px;font-size:9px;color:var(--rd-muted)}.rd-task-footer>span:last-child{display:flex;align-items:center;gap:4px}.rd-task-footer i svg{width:11px;height:11px}.rd-empty{padding:46px 20px;text-align:center;color:var(--rd-muted)}.rd-empty>i{margin-bottom:12px}.rd-empty h3{font-size:14px;color:var(--rd-text);margin-bottom:6px}.rd-empty p{font-size:11px}.rd-city-chip{border:1px solid var(--rd-line);background:var(--rd-soft);color:var(--rd-muted);font-size:9px;padding:4px 7px;border-radius:5px}.rd-route-illustration{margin:0 13px;border-radius:8px;overflow:hidden}.rd-route-illustration svg{width:100%;height:auto}.rd-route-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:17px 20px}.rd-route-meta small{display:block;color:var(--rd-muted);font-size:9px}.rd-route-meta strong{display:block;font-size:11px;margin-top:3px;font-weight:600}.rd-route-note{display:flex;gap:8px;align-items:flex-start;border-top:1px solid var(--rd-line);padding:12px 20px;color:var(--rd-muted);font-size:9px}.rd-route-note i svg{width:13px;height:13px}.rd-muted{color:var(--rd-muted)}.rd-progress-wrap{display:flex;align-items:center;gap:20px;padding:3px 20px 22px}.rd-progress-ring{width:105px;height:105px;border-radius:50%;background:conic-gradient(#4caf50 0% 25%,#fb8c00 25% 37.5%,var(--rd-line) 37.5%);padding:9px;flex-shrink:0;transform:rotate(-90deg)}.rd-progress-ring>div{width:100%;height:100%;background:var(--rd-surface);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(90deg)}.rd-progress-ring strong{font-size:24px;line-height:1.2}.rd-progress-ring small{font-size:8px;color:var(--rd-muted)}.rd-progress-copy strong{font-size:12px}.rd-progress-copy p{font-size:10px;color:var(--rd-muted);margin:5px 0 9px}.rd-progress-copy>span{font-size:9px;color:#dd8a19}.rd-progress-legend{display:flex;justify-content:space-between;gap:9px;padding:13px 17px;border-top:1px solid var(--rd-line);font-size:8px;color:var(--rd-muted)}.rd-progress-legend>span{display:flex;align-items:center;gap:4px}.rd-progress-legend b{color:var(--rd-text)}.rd-dot{height:5px;width:5px;border-radius:50%}.rd-green{background:#4caf50}.rd-amber{background:#fb8c00}.rd-gray{background:#cbd2de}.rd-tip{display:flex;align-items:flex-start;gap:12px;padding:17px 18px;border:1px dashed #d4dae4;border-radius:10px;color:var(--rd-muted)}.rd-tip>span{color:#7890b1}.rd-tip strong{font-size:11px;color:var(--rd-text)}.rd-tip p{font-size:10px;line-height:1.7;margin-top:5px}.rd-page-footer{display:flex;justify-content:space-between;gap:10px;padding:28px 0 8px;color:var(--rd-muted);font-size:10px}.rd-dialog{border:1px solid var(--rd-line);border-radius:16px;padding:0;background:var(--rd-surface);color:var(--rd-text);width:min(600px,calc(100% - 28px));max-height:90dvh;overflow-y:auto;box-shadow:0 20px 80px #00000030}.rd-dialog::backdrop,.rd-mobile-menu::backdrop{background:#10213f80;backdrop-filter:blur(3px)}.rd-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:23px;border-bottom:1px solid var(--rd-line)}.rd-dialog h2{font-size:20px}.rd-detail-body{padding:23px}.rd-detail-address{display:flex;gap:9px;font-size:12px;align-items:flex-start}.rd-detail-address i{color:var(--rd-pink)}.rd-detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 20px}.rd-detail-note{font-size:11px;color:var(--rd-muted);margin:13px 0!important;line-height:1.7}.rd-order-list{border:1px solid var(--rd-line);border-radius:9px;overflow:hidden}.rd-order-item{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--rd-line);padding:14px}.rd-order-item:last-child{border-bottom:0}.rd-order-item strong{font-family:ui-monospace,monospace;font-size:12px;display:block}.rd-order-item small{font-size:10px;color:var(--rd-muted)}.rd-detail-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px}.rd-detail-footer p{font-size:10px;flex:1;color:var(--rd-muted)}.rd-small-dialog{max-width:430px}#rd-info-content{padding:23px;font-size:13px;line-height:1.8}#rd-info-content p+p{margin-top:12px}.rd-bottom-nav{display:none}.rd-mobile-menu{padding:12px;border:0;background:var(--rd-surface);color:var(--rd-text);border-radius:0 15px 15px 0;margin:0;min-height:100dvh;width:min(300px,85vw)}.rd-mobile-menu .rd-dialog-heading{padding:16px 8px 24px;margin-bottom:16px}
html[data-theme="dark"]{--rd-surface:#1c2331;--rd-bg:#121824;--rd-text:#dce4f2;--rd-muted:#95a2b8;--rd-line:#2b3547;--rd-soft:#242c3c;--rd-shadow:0 4px 16px #00000015}html[data-theme="dark"] body.rd-view{background:var(--rd-bg)!important}html[data-theme="dark"] .rd-view input{background:var(--rd-surface)!important;border-color:var(--rd-line)!important;color:var(--rd-text)!important}html[data-theme="dark"] .rd-preview-banner{background:#302b20;border-color:#55462d;color:#e3c485}html[data-theme="dark"] .rd-preview-banner span{color:#c5b38b}html[data-theme="dark"] .rd-status.pending{background:#3d3221;color:#f0c975}html[data-theme="dark"] .rd-status.partial{background:#23364e;color:#a5c9f9}html[data-theme="dark"] .rd-status.picked{background:#243b30;color:#9ed2a2}html[data-theme="dark"] .rd-status.not-picked{background:#402733;color:#eba4ba}html[data-theme="dark"] .rd-route-illustration{filter:brightness(.78) saturate(.7)}html[data-theme="dark"] .rd-avatar{background:#2b3a54;color:#c4d5f1}html[data-theme="dark"] .rd-next-card h2,html[data-theme="dark"] .rd-next-card{color:#fff!important}
@media(min-width:1500px){.rd-workspace-grid{grid-template-columns:minmax(0,1fr) 355px}.rd-main{padding:27px 40px}.rd-next-card{padding:25px 28px}}
@media(max-width:1200px){.rd-sidebar{width:207px;padding-left:12px;padding-right:12px}.rd-shell{margin-left:207px}.rd-main{padding:20px}.rd-topbar{padding:0 20px}.rd-welcome{align-items:flex-start;flex-direction:column;gap:17px}.rd-date-actions{align-self:flex-end;margin-top:-9px}.rd-workspace-grid{grid-template-columns:minmax(0,1fr) 285px;gap:16px}.rd-stat{padding:15px 13px 10px}.rd-stats{gap:12px}.rd-stat-icon{width:35px;height:35px}.rd-stat p{font-size:9px}.rd-stat footer small{display:none}.rd-preview-dot{display:none}.rd-task-row{padding:17px 14px;gap:10px}.rd-card-heading{padding:18px 16px}.rd-task-tools{padding-left:16px;padding-right:16px}.rd-progress-wrap{gap:12px;padding-left:16px;padding-right:16px}.rd-progress-ring{width:92px;height:92px}.rd-task-open>span{display:none}}
@media(max-width:1000px){.rd-workspace-grid{grid-template-columns:minmax(0,1fr)}.rd-secondary-column{grid-template-columns:1fr 1fr;gap:16px}.rd-tip{grid-column:1/-1}.rd-task-open>span{display:inline}.rd-preview-banner span{display:block}.rd-next-card h2{font-size:24px}}
@media(max-width:760px){.rd-sidebar{display:none}.rd-shell{margin-left:0}.rd-topbar{height:62px;padding:0 17px}.rd-menu-button{display:inline-flex!important}.rd-breadcrumb>span,.rd-breadcrumb>b,.rd-breadcrumb>i{display:none}.rd-topbar-left{gap:10px}.rd-topbar-actions{gap:10px}.rd-location{margin:0}.rd-location small{display:none}.rd-main{padding:17px 16px 90px}.rd-welcome{margin-top:23px;gap:17px}.rd-welcome h1{font-size:26px;max-width:360px}.rd-date-actions{align-self:flex-start;margin:0;width:100%;justify-content:space-between}.rd-date-actions input{max-width:170px;width:170px}.rd-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.rd-stat{padding:16px 14px 10px}.rd-stat p{font-size:10px}.rd-stat-icon{width:41px;height:41px}.rd-stat strong{font-size:29px}.rd-stat footer{margin-top:15px;font-size:9px}.rd-preview-banner{font-size:10px;align-items:flex-start;padding:11px}.rd-preview-banner strong{display:block;margin-bottom:3px}.rd-next-card{padding:21px}.rd-next-card h2{font-size:22px}.rd-next-bottom{margin-top:20px}.rd-secondary-column{grid-template-columns:1fr}.rd-route-illustration svg{max-height:235px}.rd-card-heading h2{font-size:15px}.rd-task-tools{gap:12px}.rd-tabs{width:100%;justify-content:space-between}.rd-view .rd-tabs button{flex:1;padding:8px 7px;font-size:10px!important}.rd-search{width:100%;flex-basis:100%!important}.rd-view .rd-search input{height:37px;font-size:12px!important}.rd-search i{top:11px}.rd-task-open>span{display:none}.rd-task-row{padding:19px 15px}.rd-task-title{align-items:flex-start;gap:6px}.rd-task-copy h3{font-size:12px}.rd-task-copy>p{font-size:10px}.rd-task-meta{gap:9px}.rd-stop-num{width:27px;height:27px}.rd-task-footer{padding:12px 14px}.rd-task-footer>span:last-child{max-width:150px;text-align:right;font-size:8px}.rd-progress-wrap{justify-content:flex-start;padding:7px 22px 23px;gap:25px}.rd-progress-ring{width:110px;height:110px}.rd-progress-legend{padding:14px 24px;font-size:10px}.rd-bottom-nav{position:fixed;z-index:35;bottom:0;left:0;right:0;display:flex;background:var(--rd-surface);border-top:1px solid var(--rd-line);padding:8px 8px max(8px,env(safe-area-inset-bottom));box-shadow:0 -4px 20px #00000005}.rd-bottom-nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;background:transparent;box-shadow:none;color:var(--rd-muted);font-size:9px!important;text-transform:none!important;letter-spacing:0!important;padding:5px 0}.rd-bottom-nav button.active{color:var(--rd-pink)}.rd-page-footer{font-size:8px;gap:12px}.rd-detail-footer{flex-direction:column;align-items:stretch}.rd-dialog-heading,.rd-detail-body{padding:20px}.rd-dialog{max-height:88dvh}.rd-topbar .rd-avatar{width:31px;height:31px}.rd-topbar .rd-icon-button{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rd-view *{transition:none!important;animation:none!important}}
/* Multi-page rider module: shared navigation and page layouts. */
.rd-nav a{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:8px;color:var(--rd-text);font-size:12px;font-weight:500;transition:background .2s}
.rd-nav a:hover{background:var(--rd-soft)}.rd-nav a.active{background:linear-gradient(195deg,#ec407a,#d81557);color:#fff;box-shadow:0 4px 10px #e91e632a}
.rd-side-note{margin-top:23px}.rd-bottom-nav a{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;color:var(--rd-muted);font-size:9px;padding:5px 0}.rd-bottom-nav a.active{color:var(--rd-pink)}
.rp-panel{padding:23px}.rp-panel h2{font-size:17px;margin-bottom:16px}.rp-panel>p{font-size:12px;line-height:1.7;margin-bottom:16px}.rp-two-column{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}.rp-toolbar{display:flex;flex-wrap:wrap;gap:14px;padding:0 20px 20px}.rp-panel .rp-toolbar{padding:0 0 20px}.rp-toolbar label{flex:1;min-width:155px}.rp-toolbar input,.rp-toolbar select,.rp-form input,.rp-form select,.rp-form textarea{display:block;width:100%;margin-top:6px;padding:10px;font-family:inherit;min-height:40px}.rp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;margin-bottom:13px}.rp-address-line{margin:16px 0;font-size:13px}.rp-form{display:grid;gap:18px}.rp-order-line{display:flex;gap:10px;align-items:center;min-width:0}.rp-order-line input{width:18px;height:18px;flex-shrink:0;accent-color:var(--rd-pink)}.rp-order-line strong{overflow-wrap:anywhere}.rp-placeholder{display:flex;align-items:flex-start;gap:12px;background:var(--rd-soft);border:1px dashed var(--rd-line);border-radius:8px;padding:15px;font-size:12px}.rp-placeholder p{font-size:11px;color:var(--rd-muted);margin-top:5px}.rp-facts{margin:16px 0 0}.rp-facts>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--rd-line);padding:13px 0;font-size:12px}.rp-facts dt{color:var(--rd-muted)}.rp-facts dd{margin:0;text-align:right;max-width:65%;overflow-wrap:anywhere;font-weight:600}.rp-profile-head{display:flex;align-items:center;gap:15px}.rp-profile-head .rd-avatar{width:58px;height:58px;font-size:18px}#pickup-form-error{color:#d81557;font-size:12px}.rp-panel .rd-order-item{padding:13px 10px}.rp-panel .rd-button{white-space:normal;text-align:center}#history-list .rd-task-row{flex-wrap:wrap}#history-list .rd-task-copy{min-width:140px}
@media(max-width:1000px){.rp-two-column{grid-template-columns:1fr}.rd-side-note{font-size:10px}.rd-nav{gap:4px}}
@media(max-width:760px){.rp-panel{padding:19px}.rp-toolbar{padding:0 15px 15px;gap:10px}.rp-toolbar label{min-width:140px}.rp-two-column{gap:16px}#separate-task-list .rd-task-row{flex-wrap:wrap}#separate-task-list .rd-task-copy{min-width:170px}#separate-task-list .rd-button{margin-left:40px}.rp-panel .rd-detail-note{font-size:11px}.rd-bottom-nav a{min-height:42px}.rd-side-note{margin-top:18px}.rd-nav a{font-size:13px;padding:13px 15px}}
@media(min-width:761px) and (max-height:760px){.rd-sidebar{overflow-y:auto}.rd-side-note{margin-top:15px;padding:12px}.rd-side-rule{margin:16px 3px}.rd-nav a{padding:9px 12px}.rd-support{margin-top:18px}.rd-side-profile{padding-top:12px}}
/* Authenticated workspace additions. Shared by all eight separate pages. */
.rw-connection{display:flex;align-items:center;gap:9px;padding:12px 15px;border:1px solid var(--rd-line);background:var(--rd-surface);border-radius:10px;font-size:11px;color:var(--rd-muted)}.rw-connection small{margin-left:auto;font-size:9px}.rw-pulse{width:7px;height:7px;background:#fb8c00;border-radius:50%;flex-shrink:0}.rw-connection[data-state=ready] .rw-pulse{background:#4caf50;box-shadow:0 0 0 4px #4caf5013}.rw-connection[data-state=error] .rw-pulse{background:#f44335}.rw-connection[data-state=error]{border-color:#f4433560}.rw-loading,.rw-empty{text-align:center;padding:55px 24px;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.rw-loading h2,.rw-empty h2{margin:0}.rw-empty p,.rw-loading p{max-width:490px;color:var(--rd-muted);margin:0}.rw-empty .rd-button{margin-top:10px}.rw-empty-icon{width:58px;height:58px;background:var(--rd-soft);border-radius:18px;display:grid;place-items:center;color:var(--rd-pink);margin-bottom:5px}.rw-empty-icon svg{width:26px!important;height:26px!important}.rw-spinner{width:30px;height:30px;border:3px solid var(--rd-line);border-top-color:var(--rd-pink);border-radius:50%;animation:rw-spin .9s linear infinite;margin-bottom:12px}@keyframes rw-spin{to{transform:rotate(360deg)}}.rw-filter-label{display:flex;align-items:center;gap:6px;align-self:flex-end;font-size:10px;color:var(--rd-muted);min-height:40px}.rw-filter-label svg{width:14px!important}.rw-back{margin-top:-10px}.rw-history-top{margin-bottom:22px}.rd-view #rd-info-content{white-space:pre-wrap;overflow-wrap:anywhere}.rd-view .rw-duty-art{position:relative;isolation:isolate;display:grid;place-items:center;height:140px;margin:22px 0;background:radial-gradient(ellipse at center,#e91e6318,transparent 68%);color:var(--rd-pink)}.rw-duty-art i svg{width:48px;height:48px}.rw-duty-art span{position:absolute;z-index:-1;width:105px;height:105px;border:1px dashed #e91e6350;border-radius:50%}.rp-form label{font-size:12px;color:var(--rd-text)}.rd-view .rp-form select,.rd-view .rp-form textarea,.rd-view .rp-toolbar input{background:var(--rd-surface)!important;color:var(--rd-text)!important;border:1px solid var(--rd-line)!important;border-radius:8px;font-size:12px!important}.rd-order-item>span{flex-shrink:0;font-size:8px}.rd-order-item small{overflow-wrap:anywhere;display:block}.rd-order-item>div{min-width:0}.rd-task-copy,.rd-side-profile>div{min-width:0}.rd-side-profile strong,.rd-side-profile small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rd-task-title h3,.rd-task-copy>p,.rd-next-card h2,.rp-panel h2{overflow-wrap:anywhere}.rd-topbar-left{min-width:0}.rd-location>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rd-view .rd-task-open{min-height:42px}.rd-task-open:focus-visible,.rd-view input:focus-visible,.rd-view select:focus-visible,.rd-view textarea:focus-visible{outline:2px solid var(--rd-pink);outline-offset:3px}.rd-view .rd-status{white-space:normal}.rd-view .rd-button{border-radius:8px}.rd-side-profile .rd-icon-button{flex-shrink:0}.rd-next-bottom>div{min-width:0}.rd-view .rd-next-card .rd-button-on-pink{color:#d81557!important}.rd-view .rd-button-primary{color:white!important}
@media(max-width:760px){.rw-connection{align-items:flex-start;flex-wrap:wrap;font-size:10px;gap:8px}.rw-connection small{flex-basis:100%;margin-left:15px}.rw-pulse{margin-top:4px}.rd-topbar-actions{gap:7px}.rd-location{display:none}.rd-task-row{flex-wrap:wrap}.rd-task-copy{flex:1;min-width:170px}.rd-task-open{margin-left:38px}.rd-task-open span{display:inline}.rd-order-item{align-items:flex-start;flex-wrap:wrap}.rd-order-item>span{margin-left:0}.rp-order-line{width:100%}.rd-next-bottom{align-items:flex-start;flex-direction:column}.rd-next-bottom .rd-button{width:100%}.rw-empty,.rw-loading{padding:35px 19px}.rd-topbar .rd-avatar{display:none}.rw-filter-label{font-size:9px}.rd-welcome h1{font-size:25px}.rd-task-title{flex-wrap:wrap}.rd-date-actions input{max-width:160px}.rd-page-footer{flex-wrap:wrap}}

/* ---- Pickup recording: required photo + per-order outcome ---- */
.rp-progress-line{font-size:11px;color:var(--rd-muted);margin:0 0 4px!important;line-height:1.7}
.rp-photo{display:flex;align-items:center;gap:14px;border:1px dashed var(--rd-line);border-radius:12px;padding:15px;cursor:pointer;background:linear-gradient(135deg,var(--rd-soft),var(--rd-surface));transition:border-color .15s ease}
.rp-photo:hover{border-color:var(--rd-pink)}
.rp-photo-mark{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:11px;background:linear-gradient(195deg,#ec407a,#d81557);color:#fff}
.rp-photo-mark svg{width:22px!important;height:22px!important}
.rp-photo-copy{min-width:0;flex:1}
.rp-photo-copy strong{display:block;font-size:12px}
.rp-photo-copy small{display:block;font-size:10px;color:var(--rd-muted);margin-top:4px;line-height:1.6}
.rp-photo img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--rd-line);flex-shrink:0}
.rp-outcome-list{display:grid;gap:10px}
.rp-outcome-label{font-size:9px;letter-spacing:1.2px;font-weight:700;color:var(--rd-muted)}
.rp-outcome-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.rp-outcome-controls select{min-height:36px;padding:6px 8px;border:1px solid var(--rd-line);border-radius:8px;background:var(--rd-surface);color:var(--rd-text);font-size:11px;font-family:inherit}
.rp-history-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.rp-photo-link{min-height:32px!important;padding:6px 10px!important}
.rp-photo-link i svg{width:14px!important;height:14px!important}
.rd-view #pickup-submit{justify-content:center;min-height:46px;font-size:12px!important;letter-spacing:.6px!important}
@media(max-width:760px){
  .rp-outcome-controls{width:100%;justify-content:flex-start}
  .rp-photo{flex-wrap:wrap}
  .rp-photo img{width:64px;height:64px}
}

/* ---- Per-parcel pickup: live camera + one proof photo per order ---- */
.rp-progress-line strong{display:block;font-size:12px;color:var(--rd-text)}
.rp-progress-line span{display:block;font-size:10px;color:var(--rd-muted);margin-top:3px}
.rp-flash{margin:12px 0 0!important;padding:11px 13px;border-radius:9px;font-size:11px;font-weight:600;background:#eaf5e9;color:#356b45;border:1px solid #cfe6cc}
.rp-flash[data-tone=warn]{background:#fff5df;color:#8a6314;border-color:#f0e0bd}
.rp-parcel{align-items:flex-start;gap:14px;flex-wrap:wrap}
.rp-parcel-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0}
.rp-parcel-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.rp-parcel-busy{display:inline-flex;align-items:center;gap:8px;font-size:10px;color:var(--rd-muted)}
.rp-parcel-busy .rw-spinner{width:16px;height:16px;border-width:2px;margin:0}
.rp-parcel-error{font-size:10px;color:#c0392b;max-width:220px;text-align:right;margin:0!important;line-height:1.5}
.rp-thumb{display:block;width:62px;height:62px;border-radius:10px;overflow:hidden;border:1px solid var(--rd-line);background:var(--rd-soft);font-size:0;line-height:0}
.rp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rp-parcel .rd-order-item,.rp-parcel{min-width:0}
.rp-reject{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.rp-reject label{font-size:10px;color:var(--rd-muted)}
.rp-reject select{min-height:36px;padding:6px 8px;border:1px solid var(--rd-line);border-radius:8px;background:var(--rd-surface);color:var(--rd-text);font-size:11px;font-family:inherit;max-width:220px}
/* Live camera */
.rp-camera{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100%;height:100%}
.rp-camera::backdrop{background:#0b1220e6}
.rp-camera-frame{position:relative;display:flex;flex-direction:column;width:100%;height:100dvh;margin:auto;background:#0b1220}
.rp-camera video{flex:1;width:100%;height:100%;object-fit:cover;background:#0b1220}
.rp-camera-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(#0b1220cc,transparent);color:#fff;font-size:12px;font-weight:600}
.rp-camera-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid #ffffff33;background:#ffffff1f;color:#fff;box-shadow:none}
.rp-camera-icon svg{width:18px!important;height:18px!important}
.rp-camera-foot{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 30px;background:linear-gradient(transparent,#0b1220d9)}
.rd-view .rp-camera .rp-shutter{display:grid;place-items:center;width:78px!important;height:78px!important;min-width:78px;min-height:78px!important;border-radius:50%!important;border:4px solid #ffffff59;background:#ffffff26;box-shadow:none;padding:0;transform:none}
.rd-view .rp-camera .rp-shutter span{display:block;width:58px;height:58px;border-radius:50%;background:#fff}
.rd-view .rp-camera .rp-camera-icon{min-height:40px!important;padding:0!important}
.rp-shutter:active span{transform:scale(.92)}
.rp-camera-hint{margin:0!important;color:#ffffffc4;font-size:10px;text-align:center}
.rp-camera-error{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);margin:0;padding:15px;border-radius:10px;background:#2a1420;color:#ffd7e2;border:1px solid #7d2b47;font-size:12px;line-height:1.7;text-align:center}
@media(max-width:760px){.rp-parcel-side{align-items:flex-start;width:100%}.rp-parcel-controls{justify-content:flex-start;width:100%}.rp-parcel-error{text-align:left;max-width:100%}.rp-reject{align-items:flex-start}}

/* ---- Route map: hub + numbered stops on Google Maps ---- */
.rp-map-columns{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.rp-map-shell{position:relative;border:1px solid var(--rd-line);border-radius:12px;overflow:hidden;background:var(--rd-soft)}
.rp-map{width:100%;height:clamp(320px,52vh,560px);display:block}
.rp-map-status{position:absolute;inset:0;margin:0!important;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--rd-soft);color:var(--rd-muted);font-size:11px}
.rp-map-status[hidden]{display:none}
.rp-map-blank{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:22px;color:var(--rd-muted)}
.rp-map-blank svg{width:30px!important;height:30px!important;color:var(--rd-pink)}
.rp-map-blank strong{font-size:13px;color:var(--rd-text)}
.rp-map-blank p{font-size:11px;margin:0!important;max-width:420px;line-height:1.7}
.rp-map-legend{display:flex;flex-wrap:wrap;gap:7px 18px;margin-top:14px;font-size:10px;color:var(--rd-muted)}
.rp-map-legend span{display:flex;align-items:center;gap:7px}
.rp-map-legend i{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1.5px solid #ffffff;box-shadow:0 1px 3px #0000002e}
.rp-map-legend .rp-map-dot-hub{border-radius:3px}
.rp-map-list{margin-top:6px}
.rp-map-row{align-items:center;gap:12px;flex-wrap:wrap}
.rp-map-row .rd-stop-num{flex-shrink:0}
.rp-map-info{font-family:inherit;color:#1e293b;max-width:250px;line-height:1.6}
.rp-map-info strong{font-size:13px;display:block;margin-bottom:4px}
.rp-map-info p{font-size:11px;margin:0 0 4px;color:#475569}
.rp-map-info-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.rp-map-info-actions a{font-size:11px;font-weight:700;color:#d81557;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.rp-map-info-actions a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rp-map-lock{display:inline-block;margin-top:4px;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#4338ca;background:#eef0ff;border:1px solid #d9dcff;border-radius:5px;padding:2px 6px}
@media(max-width:900px){.rp-map-columns{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.rp-map{height:44vh}.rp-map-row .rp-parcel-controls{width:100%;justify-content:flex-start}}


/* ####################################################################
   5) BP-UI — ON-SCREEN ALERTS (toast) + CONFIRM DIALOG (on every page)
   #################################################################### */
/* =========================================================================
   BUYPASS — ON-SCREEN ALERTS / CONFIRM (bp-ui.css)
   -------------------------------------------------------------------------
   This part styles the toasts and the confirm dialog from bp-ui.js.
   No Tailwind needed — it works on both office and rider pages.
   Colors: each type has its own (success/danger/warning/info) + dark mode support.
   ========================================================================= */

#bp-toast-host.bp-toast-host {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  pointer-events: none;
}
#bp-toast-host.bp-toast-host.bp-rider {
  top: auto;
  bottom: 22px;
}

.bp-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 15px 15px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .07);
  color: #0f172a;
  font: 500 13.5px/1.5 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  opacity: 0;
  transform: translateY(-14px) scale(.97);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .9, .3, 1.1);
  overflow: hidden;
}
.bp-toast.bp-in   { opacity: 1; transform: translateY(0) scale(1); }
.bp-toast.bp-out  { opacity: 0; transform: translateY(-10px) scale(.96); }
.bp-toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: #6366f1;
}
.bp-toast.bp-success::before { background: #10b981; }
.bp-toast.bp-danger::before  { background: #ef4444; }
.bp-toast.bp-warning::before { background: #f59e0b; }
.bp-toast.bp-info::before    { background: #6366f1; }

.bp-toast-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: #eef2ff;
}
.bp-toast.bp-success .bp-toast-ico { background: #e7f8f1; }
.bp-toast.bp-danger  .bp-toast-ico { background: #fdeaea; }
.bp-toast.bp-warning .bp-toast-ico { background: #fef4e3; }

.bp-toast-body { flex: 1 1 auto; min-width: 0; }
.bp-toast-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: #64748b;
}
.bp-toast.bp-success .bp-toast-title { color: #0f9d70; }
.bp-toast.bp-danger  .bp-toast-title { color: #dc2626; }
.bp-toast.bp-warning .bp-toast-title { color: #b45309; }
.bp-toast.bp-info    .bp-toast-title { color: #4f46e5; }

.bp-toast-msg {
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 45vh;
  overflow: auto;
}
.bp-toast-x {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}
.bp-toast-x:hover { background: #f1f5f9; color: #0f172a; }

.bp-toast-prog {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: #6366f1;
  animation-name: bp-prog;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.bp-toast.bp-success .bp-toast-prog { background: #10b981; }
.bp-toast.bp-danger  .bp-toast-prog { background: #ef4444; }
.bp-toast.bp-warning .bp-toast-prog { background: #f59e0b; }
@keyframes bp-prog { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------------- CONFIRM DIALOG ---------------------- */
.bp-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .18s ease;
}
.bp-overlay.bp-in  { opacity: 1; }
.bp-overlay.bp-out { opacity: 0; }

.bp-dialog {
  width: min(430px, 100%);
  background: #fff;
  color: #0f172a;
  border-radius: 20px;
  padding: 24px 24px 18px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .34);
  text-align: center;
  font: 500 14px/1.55 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  transform: translateY(10px) scale(.96);
  transition: transform .2s cubic-bezier(.2, .9, .3, 1.1);
}
.bp-overlay.bp-in .bp-dialog { transform: translateY(0) scale(1); }

.bp-dialog-ico {
  width: 58px; height: 58px;
  margin: 0 auto 12px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 27px;
  background: #eef2ff;
}
.bp-dialog.bp-danger .bp-dialog-ico { background: #fdeaea; }

.bp-dialog-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
}
.bp-dialog-msg {
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: #475569;
  max-height: 50vh;
  overflow: auto;
}
.bp-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.bp-dialog-btn {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: 700 13.5px/1 'Inter', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.bp-dialog-btn:active { transform: scale(.98); }
.bp-dialog-btn.ghost {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
.bp-dialog-btn.ghost:hover { background: #e9eef6; }
.bp-dialog-btn.primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .32);
}
.bp-dialog-btn.primary:hover { box-shadow: 0 10px 24px rgba(79, 70, 229, .42); }
.bp-dialog.bp-danger .bp-dialog-btn.primary {
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 8px 20px rgba(220, 38, 38, .3);
}

/* ---------------------- DARK MODE ---------------------- */
[data-theme="dark"] .bp-toast,
[data-theme="dark"] .bp-dialog {
  background: #16203a;
  color: #e6ebf7;
  border-color: #26314f;
}
[data-theme="dark"] .bp-toast-msg,
[data-theme="dark"] .bp-dialog-msg { color: #b9c4dc; }
[data-theme="dark"] .bp-toast-ico { background: #1f2a47; }
[data-theme="dark"] .bp-toast-x:hover { background: #223054; color: #fff; }
[data-theme="dark"] .bp-dialog-btn.ghost { background: #202b49; color: #d5ddf1; border-color: #2c3859; }

/* ---------------------- MOBILE ---------------------- */
@media (max-width: 560px) {
  #bp-toast-host.bp-toast-host { top: 10px; width: calc(100vw - 16px); }
  .bp-dialog { padding: 20px 16px 14px; border-radius: 16px; }
  .bp-dialog-actions { flex-direction: column-reverse; }
}

/* ============================================================
   RIDER-OFFICE THEME PARITY — rider UI matches the main office UI
   (office sidebar header, emoji nav links, pink pills, card tokens)
   ============================================================ */
.rd-brand{gap:10px;padding:0 10px;}
.rd-brand-logo{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;background:#facc15;border-radius:9px;box-shadow:0 4px 10px rgba(0,0,0,.18);padding:4px;}
.rd-brand-logo img{width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:none;}
.rd-brand-text{font-size:18px;font-weight:900;font-style:italic;letter-spacing:.06em;color:var(--rd-text);line-height:1;}
.rd-brand-text small{display:block;font-style:normal;font-size:8px;font-weight:700;letter-spacing:.22em;color:#818cf8;margin-top:4px;}
.rd-nav{gap:3px;}
.rd-nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--rd-text);transition:background .15s ease,color .15s ease;}
.rd-nav a:hover{background:#f5f5f5;color:#e91e63;}
.rd-nav a.active{background:linear-gradient(195deg,#ec407a,#d81557)!important;color:#fff!important;box-shadow:0 4px 10px rgba(233,30,99,.35);}
.rd-nav a.active .rd-nav-count{background:rgba(255,255,255,.25);color:#fff;}
.rd-nav-emoji{font-size:18px;line-height:1;width:24px;text-align:center;flex-shrink:0;}
.rd-nav-label{font-size:10px!important;font-weight:700!important;letter-spacing:.14em!important;color:#7b809a!important;padding:0 12px!important;}
.rd-sidebar{box-shadow:0 4px 14px rgba(0,0,0,.07);}
.rd-side-note{border-radius:.9rem;}
.rd-topbar{box-shadow:0 2px 10px rgba(0,0,0,.08);}
.rd-card,.rd-stat{border-radius:.9rem;box-shadow:0 20px 27px 0 rgba(0,0,0,.05),0 4px 6px -1px rgba(0,0,0,.08);}
.rd-view .rd-button{border-radius:.5rem;text-transform:uppercase!important;letter-spacing:.05em!important;font-weight:700!important;}
.rd-button-primary{background:linear-gradient(195deg,#ec407a,#e91e63 55%,#d81557)!important;color:#fff!important;box-shadow:0 4px 10px rgba(233,30,99,.35);}
.rd-bottom-nav a{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;color:var(--rd-muted);font-size:9px;padding:5px 0;}
.rd-bottom-nav a.active{color:var(--rd-pink);}
.rd-bottom-nav a .rd-nav-emoji{font-size:20px;width:auto;}
.rd-dialog{border-radius:.9rem;box-shadow:0 20px 60px rgba(0,0,0,.25);}
html[data-theme="dark"] .rd-nav a:hover{background:#262b38;color:#fff;}
html[data-theme="dark"] .rd-brand-text{color:#e8ecf3;}
html[data-theme="dark"] .rd-sidebar{box-shadow:0 4px 14px rgba(0,0,0,.4);}

/* bulk selection row highlight (history pages) */
tbody tr.bp-row-picked{background:#fce4ec!important;}
tbody tr.bp-row-picked:hover{background:#f8bbd0!important;}

/* ---- BuyPass verified badge (upload success) --------------------------------
   Theme-emerald draw-on check. JS adds .bp-verified to the upload circle,
   which stops the spin animation and draws circle + tick once. */
.custom-loader.bp-verified {
    animation: none !important;
    border-color: transparent !important;
    background: transparent !important;
    overflow: visible;
}
.custom-loader.bp-verified svg {
    width: 100%; height: 100%;
    display: block; overflow: visible;
}
.custom-loader.bp-verified circle {
    fill: #ecfdf5;
    stroke: #10b981;
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    transform-origin: center;
    animation: bpVerifyDraw .6s ease-out forwards, bpVerifyPop .5s .55s ease-out;
}
.custom-loader.bp-verified path {
    fill: none;
    stroke: #059669;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: bpVerifyDraw .35s .45s ease-out forwards;
}
@keyframes bpVerifyDraw { to { stroke-dashoffset: 0; } }
@keyframes bpVerifyPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ---- Market Expansion portals (manager / executive) ---------------------- */
.mx-scroll{overflow-x:auto}
.mx-table{width:100%;border-collapse:collapse;font-size:12px;min-width:560px}
.mx-table th{text-align:left;padding:10px 12px;font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--rd-muted);border-bottom:2px solid var(--rd-line);white-space:nowrap}
.mx-table td{padding:10px 12px;border-bottom:1px solid var(--rd-line);vertical-align:middle}
.mx-table tr:last-child td{border-bottom:none}
.mx-empty-cell{text-align:center!important;color:var(--rd-muted);padding:26px 12px!important;font-size:12px}
.mx-badge{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:6px;border:1px solid;white-space:nowrap}
.mx-b-indigo{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.mx-b-green{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.mx-b-amber{background:#fffbeb;color:#b45309;border-color:#fde68a}
.mx-b-slate{background:#f1f5f9;color:#475569;border-color:#cbd5e1}
.mx-mono{font-family:ui-monospace,Menlo,Consolas,monospace!important}
.mx-nowrap{white-space:nowrap}
.mx-link{color:#4338ca}
.mx-hint{font-size:11px;color:var(--rd-muted)}
.mx-row-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.mx-row-actions .rd-button{padding:8px 10px!important;min-height:32px!important}
.mx-radio-row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:flex-end}
.mx-date-inline{margin-left:auto;min-width:170px}
.mx-shot{border:1px solid var(--rd-line);border-radius:10px;padding:14px;display:grid;gap:10px;background:var(--rd-soft)}
.mx-prev{max-width:100%;max-height:180px;border-radius:8px;border:1px solid var(--rd-line)}
.rd-nav a{display:flex;align-items:center;gap:12px;text-align:left;color:var(--rd-text);padding:13px 16px;width:100%;font-size:13px;font-weight:500;border-radius:8px}
.rd-nav a:hover{background:var(--rd-soft)}
.rd-bottom-nav a{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;color:var(--rd-muted);font-size:9px;padding:5px 0;min-height:42px}

.rd-bottom-nav a.active{color:var(--rd-pink)!important}

/* Sidebar active link: keep icon white on indigo */
#sidebar-drawer a.bg-indigo-600 > i { color: #fff; }

/* ===== BuyPass App Mode: install button + bottom tab bar (mobile/tablet) ===== */
#app-tabbar { display: none; }
.app-install-btn { width: 34px; height: 34px; flex: none; border-radius: 9999px; border: 0; cursor: pointer;
  background: #4f46e5; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(79,70,229,.5); }
@media (max-width: 1023px) {
  body { padding-bottom: 86px; }
  #mobile-top-bar { position: sticky; top: 0; }
  #app-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(11,16,30,.96); border-top: 1px solid #1e293b;
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); backdrop-filter: blur(12px); }
  .app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 0 4px; color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    background: none; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; }
  .app-tab i { font-size: 19px; line-height: 1; }
  .app-tab.active { color: #fff; }
  .app-tab.active i { color: #818cf8; }
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main input, main select, main textarea,
  main input[class], main select[class], main textarea[class] { font-size: 16px; }
}
@media (min-width: 1024px) {
  #app-tabbar { display: none !important; }
}

/* Theme toggle inside mobile app header (floating stays desktop-only) */
#mobile-top-bar .md-theme-toggle { position: static; width: 34px; height: 34px; font-size: 15px;
  border-radius: 9999px; background: rgba(255,255,255,.08); box-shadow: none; padding: 0; }
#mobile-top-bar .md-theme-toggle:hover { transform: none; background: rgba(255,255,255,.16); box-shadow: none; }
@media (max-width: 1023px) {
  body > .md-theme-toggle { display: none; }
}

/* ===== BuyPass boot overlay: 3s blur + loader on every page ===== */
#bp-boot { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
  background: rgba(11,16,30,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity .45s ease; }
#bp-boot.hide { opacity: 0; pointer-events: none; }
#bp-boot .loader { width: 50px; aspect-ratio: 1; display: grid; border: 4px solid #0000;
  border-radius: 50%; border-right-color: #25b09b; animation: l15 1s infinite linear; }
#bp-boot .loader::before, #bp-boot .loader::after { content: ""; grid-area: 1/1; margin: 2px;
  border: inherit; border-radius: 50%; animation: l15 2s infinite; }
#bp-boot .loader::after { margin: 8px; animation-duration: 3s; }
@keyframes l15 { 100% { transform: rotate(1turn); } }

/* ===== Manager/Executive portals: main-UI (indigo) theme. Rider untouched (no data-portal). ===== */
body[data-portal="mx"]{--rd-pink:#4f46e5;background:#f4f7fb!important;}
body[data-portal="mx"] .rd-button-primary{background:#4f46e5!important;box-shadow:0 4px 10px rgba(79,70,229,.35);}
body[data-portal="mx"] .rd-button-primary:hover{background:#4338ca!important;}
body[data-portal="mx"] .rd-text-pink{color:#4f46e5!important;}
body[data-portal="mx"] .rd-icon-pink{background:linear-gradient(195deg,#818cf8,#4f46e5)!important;}
body[data-portal="mx"] button:focus-visible,body[data-portal="mx"] a:focus-visible{outline:3px solid rgba(79,70,229,.45)!important;outline-offset:4px;}
body[data-portal="mx"] .rd-view{background:#f4f7fb;}