.app-shell{--mobile-nav-height:72px;--nav-blue:#285fd8;--nav-ink:#243b58;--nav-muted:#5b6e87;--nav-line:#e1e8f2}
.app-menu-button{min-width:44px;min-height:44px}
.app-drawer{width:min(88vw,360px);max-width:100%;color:var(--nav-ink);background:#fff;text-align:right;direction:rtl}
.app-drawer .offcanvas-header{background:#f2f6fe;padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px;border-bottom:1px solid var(--nav-line);gap:12px}
.app-drawer .offcanvas-title{font-weight:800;font-size:1.08rem;line-height:1.9;overflow-wrap:anywhere}
.app-drawer .btn-close{width:24px;height:24px;padding:10px;flex:none}
.app-drawer-caption{font-size:.8rem;color:var(--nav-muted)}
.app-drawer .offcanvas-body{padding:12px 14px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
.app-drawer-nav{display:grid;gap:5px}
.app-drawer-link{display:flex;align-items:center;gap:13px;min-height:50px;padding:11px 14px;border-radius:13px;color:var(--nav-ink);font-weight:600;font-size:.93rem;text-decoration:none;border:0;background:transparent;width:100%;text-align:right}
.app-drawer-link i{font-size:21px;width:26px;text-align:center;flex:none}
.app-drawer-link:hover,.app-drawer-link:focus-visible{background:#f0f5ff;color:#2359cc}
.app-drawer-link[aria-current="page"]{background:#eaf1ff;color:#204fb8;box-shadow:inset -3px 0 #3269df}
.app-drawer-link--logout{color:#b42c40}
.app-drawer-divider{border-top:1px solid var(--nav-line);margin:12px 0}
.app-drawer-foot{margin-top:auto;padding-top:20px;font-size:.8rem;color:var(--nav-muted)}
.app-bottom-nav{display:none}
.app-drawer-link:focus-visible,.app-bottom-nav a:focus-visible,.trip-history-item>summary:focus-visible{outline:3px solid #e4ad32;outline-offset:3px}
@media(max-width:991.98px){
.app-shell.has-mobile-navigation{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px))}
.app-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));inset-inline:0;bottom:0;padding:7px max(6px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));min-height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--nav-line);box-shadow:0 -6px 25px #172e5810;z-index:1030;direction:rtl}
.app-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:4px 2px;border-radius:12px;color:#536781;text-decoration:none;font-size:.72rem;font-weight:600;line-height:1.5;text-align:center}
.app-bottom-nav i{font-size:22px;line-height:1.2}
.app-bottom-nav a[aria-current="page"]{color:#204fb8;background:#edf3ff;font-weight:800}
.app-bottom-nav a:active{background:#e5edfa}
.app-shell.has-mobile-navigation #globalToastContainer,.app-shell.has-mobile-navigation #app-connectivity{bottom:calc(var(--mobile-nav-height) + 12px + env(safe-area-inset-bottom,0px))}
.app-shell .navbar>.container{flex-wrap:nowrap;gap:10px}
.app-shell .navbar-brand{min-width:0}
.app-shell .navbar{padding-top:max(8px,env(safe-area-inset-top,0px))!important}
.app-shell main.container{padding-inline:12px}
.app-shell main>.trip-dashboard{padding-inline:0}
}
@media(prefers-reduced-motion:reduce){.app-drawer{transition:none!important}}

.app-drawer-identity{min-width:0;flex:1}.app-drawer-profile{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}.app-drawer-profile-copy{min-width:0}.app-drawer-profile-copy .offcanvas-title{margin:0}.app-drawer-avatar{position:relative;display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;background:linear-gradient(145deg,#eaf3ff,#cbdcff);color:#2359cc;font-size:1.25rem;font-weight:800;border:2px solid #fff;box-shadow:0 2px 12px #315fa62b}.app-drawer-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}.app-drawer-profile:hover .offcanvas-title{color:#2359cc}
.create-trip-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:9px 16px;min-height:44px;border-radius:14px;font-weight:700}
@media(max-width:767.98px){.create-trip-back{width:100%;justify-content:center;margin-bottom:12px}}

/* Tighter vertical rhythm in the slide-out navigation. */
.app-drawer-nav{gap:2px}
.app-drawer-link{min-height:43px;padding:8px 12px;gap:11px}
.app-drawer-divider{margin:8px 0}

/* Make the drawer list more compact on small screens. */
.app-drawer-nav{gap:0}
.app-drawer-link{min-height:38px;padding:5px 10px;gap:9px;font-size:.9rem}
.app-drawer-link i{font-size:19px}
.app-drawer-divider{margin:5px 0}

.app-drawer{background:rgba(248,252,255,.91);border-inline-end:1px solid rgba(255,255,255,.9);box-shadow:0 18px 60px rgba(31,64,113,.22);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.app-drawer .offcanvas-header{background:linear-gradient(135deg,rgba(222,237,255,.9),rgba(249,252,255,.72));border-color:rgba(151,181,221,.28)}
.app-drawer .offcanvas-body{background:linear-gradient(160deg,rgba(255,255,255,.46),rgba(220,239,255,.36))}
.app-drawer-nav{gap:4px}
.app-drawer-link{min-height:43px;padding:7px 10px;border:1px solid transparent;transition:background .18s,border-color .18s,color .18s}
.app-drawer-link i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(229,240,255,.85);color:#3565b2;font-size:18px}
.app-drawer-link:hover,.app-drawer-link:focus-visible,.app-drawer-link[aria-current="page"]{background:rgba(225,239,255,.88);border-color:rgba(147,187,242,.5);box-shadow:inset 0 1px 0 #fff,0 3px 12px #3568aa14}
.app-drawer-link--logout i{color:#b42c40;background:rgba(255,229,231,.8)}
.app-drawer-divider{border-color:rgba(134,169,213,.25)}
.app-shell .dropdown-menu{background:rgba(248,252,255,.94);border:1px solid rgba(197,220,250,.8)!important;box-shadow:0 12px 38px #214d852b!important;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.app-shell .dropdown-item{border-radius:10px}
.app-shell .dropdown-item:hover,.app-shell .dropdown-item:focus{background:rgba(222,237,255,.85)}
@media(max-width:991.98px){
 .app-shell{--mobile-nav-height:86px}
 .app-bottom-nav{inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));min-height:70px;padding:6px 5px;background:rgba(245,251,255,.84);border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:0 10px 34px #244d862b,inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25)}
 .app-bottom-nav a{min-height:57px;border-radius:17px;color:#596f8e;gap:3px}
 .app-bottom-nav a[aria-current="page"]{background:rgba(215,233,255,.88);box-shadow:inset 0 1px 0 #fff,0 3px 12px #3975c825;color:#2059c2}
 .app-bottom-nav a:nth-child(3) i{display:grid;place-items:center;width:32px;height:32px;margin-top:-3px;border-radius:12px;background:linear-gradient(145deg,#6aa8fa,#477fe2);color:white;box-shadow:0 4px 12px #4b83d94d}
}

@media(max-width:991.98px){
 .app-shell .app-drawer{background:rgba(231,242,255,.82);border-inline-end:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3)}
 .app-shell .app-drawer .offcanvas-body{background:linear-gradient(155deg,rgba(255,255,255,.38),rgba(190,218,252,.22))}
 .app-shell .app-bottom-nav{background:rgba(226,241,255,.78);border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:0 10px 34px #244d8638,inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
 .app-shell .app-bottom-nav{position:fixed!important;bottom:0!important;inset-block-end:0!important;margin:0!important;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));border-radius:24px 24px 0 0}
}
@supports (-webkit-touch-callout:none){
 @media(max-width:991.98px){
  .app-shell>header{padding-top:max(48px,env(safe-area-inset-top,0px));background:#2c58b9}
  .app-shell>header .navbar{padding-top:8px!important}
 }
}