/* Shared application shell for every authenticated role. */
.mobile-filter-toggle { display: none; }
.mobile-filter-content { display: block !important; }
.mobile-account-switch-form { display: none; }
.mobile-current-account { display: none; }

@media (min-width: 992px) {
  body.authenticated .content-width,
  body.authenticated .employee-mobile-page,
  body.authenticated .quick-claim-page,
  body.authenticated .trip-summary-page {
    width: 100%;
    max-width: 1320px;
    margin-right: auto;
    margin-left: auto;
  }

  body.authenticated .employee-mobile-page,
  body.authenticated .quick-claim-page {
    padding-bottom: 56px;
  }

  body.authenticated .page-head,
  body.authenticated .employee-home-head {
    min-height: 64px;
    margin-bottom: 24px;
  }

  body.authenticated .filter-panel,
  body.authenticated .mobile-form-card {
    padding: 20px;
  }
}

@media (max-width: 991.98px) {
  body.authenticated .topbar { gap: 8px; }
  body.authenticated .topbar .brand { min-width: 0; flex: 0 1 auto; }
  body.authenticated .topbar .brand > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.authenticated .mobile-account-switch-form {
    min-width: 0;
    display: block;
    margin-left: auto;
  }
  body.authenticated .mobile-current-account {
    min-width: 0;
    max-width: 150px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 5px;
    border: 1px solid #99e8e0;
    border-radius: 999px;
    background: #e9fbf9;
    color: #0b6661;
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
  }
  body.authenticated .mobile-current-account:hover { border-color: #5ed2c8; background: #dff8f5; }
  body.authenticated .mobile-current-account:active { transform: scale(.97); }
  body.authenticated .mobile-current-account > span {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f8f87;
    color: #fff;
    font-size: .62rem;
    font-weight: 850;
  }
  body.authenticated .mobile-current-account > strong {
    min-width: 0;
    overflow: hidden;
    color: #0b6661;
    font-size: .7rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.authenticated .mobile-current-account > i {
    flex: 0 0 auto;
    color: #0f8f87;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
  }
  body.authenticated .topbar-actions { flex: 0 0 auto; }

  body.authenticated .content-pad,
  body.authenticated .employee-mobile-page,
  body.authenticated .quick-claim-page {
    width: 100%;
    max-width: 100%;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.authenticated .bottom-nav,
  body.authenticated .employee-bottom-nav {
    height: 88px;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    padding: 12px 5px max(3px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(18, 50, 86, .10);
    backdrop-filter: blur(12px);
  }

  body.authenticated .bottom-nav > a,
  body.authenticated .employee-bottom-nav > a,
  body.authenticated .bottom-menu-toggle {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
    border-radius: 12px;
    color: #64748b;
    font-size: .62rem;
    font-weight: 800;
  }

  body.authenticated .bottom-nav > a > span,
  body.authenticated .employee-bottom-nav > a > span,
  body.authenticated .bottom-menu-toggle > b {
    width: 36px;
    height: 34px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    border-radius: 11px;
    background: #f1f5f9;
    color: #40566e;
    font-size: 1.28rem;
    line-height: 1;
  }

  body.authenticated .bottom-nav > a.active,
  body.authenticated .employee-bottom-nav > a.active {
    background: #edf4ff;
    color: var(--blue);
  }

  body.authenticated .bottom-nav > a.active > span,
  body.authenticated .employee-bottom-nav > a.active > span {
    background: var(--blue);
    color: #fff;
  }

  body.authenticated .employee-bottom-nav .employee-expense-action > span,
  body.authenticated .bottom-nav .new-claim-nav > span {
    width: 40px;
    height: 38px;
    background: var(--blue);
    color: #fff;
    box-shadow: 0 5px 13px rgba(23, 105, 224, .28);
  }

  body.authenticated .app-main {
    padding-bottom: 116px;
  }
}

@media (max-width: 575.98px) {
  body.authenticated .mobile-collapsible-filter {
    display: block;
    padding: 0 !important;
    overflow: hidden;
  }

  body.authenticated .mobile-filter-toggle {
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    color: #173858;
    cursor: pointer;
    list-style: none;
  }

  body.authenticated .mobile-filter-toggle::-webkit-details-marker { display: none; }
  body.authenticated .mobile-filter-toggle > span { min-width: 0; display: grid; }
  body.authenticated .mobile-filter-toggle b { font-size: .86rem; font-weight: 850; }
  body.authenticated .mobile-filter-toggle small { color: #718399; font-size: .65rem; }
  body.authenticated .mobile-filter-toggle em {
    padding: 4px 7px;
    border-radius: 999px;
    background: #e5f0ff;
    color: #1769e0;
    font-size: .62rem;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
  }
  body.authenticated .mobile-filter-toggle i {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #edf5ff;
    color: #1769e0;
    font-style: normal;
  }
  body.authenticated .mobile-filter-toggle i:before {
    content: '⌄';
    transform: translateY(-2px);
    transition: transform .15s ease;
  }
  body.authenticated .mobile-collapsible-filter[open] .mobile-filter-toggle {
    border-bottom: 1px solid #dbe5ef;
    background: #f8fbff;
  }
  body.authenticated .mobile-collapsible-filter[open] .mobile-filter-toggle i:before {
    transform: rotate(180deg) translateY(1px);
  }
  body.authenticated .mobile-collapsible-filter:not([open]) .mobile-filter-content {
    display: none !important;
  }
  body.authenticated .mobile-filter-content { padding: 10px; }
  body.authenticated .mobile-filter-content .form-control,
  body.authenticated .mobile-filter-content .form-select,
  body.authenticated .mobile-filter-content .btn { min-height: 44px; font-size: .86rem; }
  body.authenticated .mobile-filter-content .form-label { margin-bottom: 4px; font-size: .68rem; }

  body.authenticated .trip-summary-month-filter { display: block; }
  body.authenticated .trip-summary-filter-fields {
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 8px;
  }
  body.authenticated .trip-summary-filter-fields > div:first-child { grid-column: 1 / -1; }
  body.authenticated .trip-summary-filter-actions {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(92px, 1fr);
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 390px) {
  body.authenticated .mobile-current-account { max-width: 100px; padding-right: 6px; }
  body.authenticated .mobile-current-account > span { width: 25px; height: 25px; flex-basis: 25px; }
  body.authenticated .mobile-current-account > strong { font-size: .64rem; }

  body.authenticated .bottom-nav,
  body.authenticated .employee-bottom-nav {
    height: 84px;
    padding-right: 2px;
    padding-left: 2px;
  }

  body.authenticated .bottom-nav > a,
  body.authenticated .employee-bottom-nav > a,
  body.authenticated .bottom-menu-toggle {
    min-height: 60px;
    font-size: .56rem;
  }
}
/* Unified teal line icons for desktop, drawer, and bottom navigation. */
.nav-line-icon{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.side-nav a,.side-nav .nav-logout{gap:11px}
.side-nav .nav-line-icon,.side-nav .notification-bell-icon{color:#58d8cb}
.side-nav a.active .nav-line-icon,.side-nav a.active .notification-bell-icon{color:#0f9f91}
.side-nav a:hover .nav-line-icon,.side-nav a:hover .notification-bell-icon{color:#78eadf}
.mobile-menu-nav .nav-line-icon,.mobile-menu-nav .notification-bell-icon,.mobile-menu-logout .nav-line-icon{width:20px;height:20px;color:#67dfd3}
.mobile-menu-nav a.active .nav-line-icon,.mobile-menu-nav a.active .notification-bell-icon{color:#84f0e5}
.bottom-nav .nav-line-icon,.employee-bottom-nav .nav-line-icon{width:21px;height:21px;color:#0f9f91}
.employee-bottom-nav>button.employee-expense-action{min-width:0;min-height:60px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;padding:0;border:0;border-radius:12px;background:transparent;color:#64748b;font:inherit;font-size:.63rem;font-weight:800;cursor:pointer}
.employee-bottom-nav>button.employee-expense-action>small{font:inherit;font-size:inherit;font-weight:inherit}
.bottom-nav a.active>span,.employee-bottom-nav a.active>span{background:#dff8f4!important;color:#087f75!important}
.bottom-nav a.active,.employee-bottom-nav a.active{color:#087f75!important}
.bottom-nav .new-claim-nav>span,.employee-bottom-nav .employee-expense-action>span{background:#0f9f91!important;color:#fff!important;box-shadow:0 5px 15px rgba(15,159,145,.3)!important}
.bottom-nav .new-claim-nav .nav-line-icon,.employee-bottom-nav .employee-expense-action .nav-line-icon{color:#fff}
.bottom-menu-toggle .nav-line-icon{width:21px;height:21px;color:#0f9f91}

@media(max-width:991.98px){
  body.receipt-entry-requested .expense-entry-page{padding-bottom:calc(65vh + 96px)!important}
  body.receipt-entry-requested #receipt-camera-section{scroll-margin-top:76px}
}

/* Small, non-interactive signed-in identity beneath the desktop logout action. */
.desktop-sidebar-account{display:flex;align-items:center;gap:9px;margin:12px 2px 0;padding:11px 5px 0;border-top:1px solid rgba(255,255,255,.15);color:#fff;pointer-events:none}
.desktop-account-avatar{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#0f9f91;color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.02em}
.desktop-account-copy{min-width:0;display:grid;line-height:1.12}
.desktop-account-copy small{color:#a8c9dc;font-size:.58rem;font-weight:750;text-transform:uppercase;letter-spacing:.035em}
.desktop-account-copy strong{max-width:142px;overflow:hidden;color:#fff;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}
.desktop-account-copy em{margin-top:2px;color:#78e0d7;font-size:.62rem;font-style:normal;font-weight:750;text-transform:capitalize}
.mobile-context-back { display: none; }

.desktop-context-back {
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 8px;
}

.desktop-context-back .btn {
  min-width: 142px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #8fa2b6;
  border-radius: 12px;
  color: #526b84;
  font-weight: 800;
}

.desktop-context-back .btn:hover {
  border-color: var(--blue);
  background: #edf5ff;
  color: var(--blue);
}

@media (max-width: 991.98px) {
  .mobile-context-back {
    display: block;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .mobile-context-back .btn {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #8fa2b6;
    border-radius: 11px;
    background: rgba(255,255,255,.88);
    color: #526b84;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(18,50,86,.06);
  }

  .mobile-context-back .btn:active {
    background: #eaf2f8;
    transform: scale(.985);
  }
}