/* Cabby internal operations redesign — clarity, hierarchy, and predictable density. */
:root{
  --clarity-navy:#001b3f;
  --clarity-navy-2:#06345c;
  --clarity-teal:#00b8c4;
  --clarity-teal-dark:#007d88;
  --clarity-teal-soft:#e7f8f9;
  --clarity-canvas:#f3f6f8;
  --clarity-surface:#fff;
  --clarity-line:#d9e2e8;
  --clarity-line-strong:#b9c8d2;
  --clarity-text:#102a43;
  --clarity-muted:#62758a;
  --clarity-quiet:#8291a3;
  --clarity-warning:#a86b0b;
  --clarity-success:#187d62;
  --clarity-danger:#c4473d;
  --clarity-radius-sm:10px;
  --clarity-radius:14px;
  --clarity-radius-lg:18px;
  --clarity-shadow:0 12px 36px rgba(0,27,63,.08);
  scrollbar-color:#9aabb8 #edf2f5;
  scrollbar-width:thin;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#edf2f5}
*::-webkit-scrollbar-thumb{background:#9aabb8;border:2px solid #edf2f5;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#718698}
html{background:var(--clarity-canvas)}
body{font-family:'Noto Sans Thai',system-ui,sans-serif!important;background:var(--clarity-canvas)!important;color:var(--clarity-text)!important;font-size:14px!important;line-height:1.55!important}
body.sidebar-shell-ready{--app-sidebar-width:280px;--app-header-height:104px;padding:0!important}

/* App shell */
body.sidebar-shell-ready .sidebar{top:0!important;bottom:0!important;left:0!important;width:var(--app-sidebar-width)!important;min-width:var(--app-sidebar-width)!important;padding:18px 14px 14px!important;overflow:hidden!important;border:0!important;border-top:3px solid var(--clarity-teal)!important;border-right:1px solid var(--clarity-line)!important;border-radius:0!important;box-shadow:none!important;transition:width .2s ease,min-width .2s ease,transform .2s ease!important}
body.sidebar-shell-ready .sidebar:not(.mobile-open){width:64px!important;min-width:64px!important;padding:15px 8px 12px!important;transform:translateX(0)!important}
body.sidebar-shell-ready:not(.drawer-is-open) .main{margin-left:64px!important}
body.sidebar-shell-ready.drawer-is-open .main{margin-left:var(--app-sidebar-width)!important}
body.sidebar-shell-ready .main{min-height:100vh!important;border:0!important;border-radius:0!important;background:var(--clarity-surface)!important;box-shadow:none!important}
body.sidebar-shell-ready .drawer-toggle-btn{top:22px!important;left:47px!important;border-color:var(--clarity-line)!important;color:var(--clarity-navy)!important;background:#fff!important;box-shadow:0 4px 12px rgba(0,27,63,.09)!important}
body.sidebar-shell-ready.drawer-is-open .drawer-toggle-btn{left:calc(var(--app-sidebar-width) - 17px)!important}
body.sidebar-shell-ready .sidebar-logo{height:calc(var(--app-header-height) - 5px)!important;min-height:calc(var(--app-header-height) - 5px)!important;margin:-18px -14px 10px!important;box-sizing:border-box!important;justify-content:center!important;padding:13px 14px 11px!important;border-bottom:0!important;background:var(--clarity-navy)!important}
body.sidebar-shell-ready .sidebar-logo img{width:170px!important;height:54px!important;object-fit:contain!important;object-position:center!important}
body.sidebar-shell-ready .sidebar-logo .sidebar-compact-logo{display:none!important;width:30px!important;height:30px!important;object-fit:contain!important}
body.sidebar-shell-ready .sidebar:not(.mobile-open) .sidebar-logo{min-height:61px!important;margin:-15px -8px 0!important;padding:15px 8px 12px!important;border-bottom:0!important;background:var(--clarity-navy)!important}
body.sidebar-shell-ready .sidebar:not(.mobile-open) .sidebar-logo .logo-mark{display:none!important}
body.sidebar-shell-ready .sidebar:not(.mobile-open) .sidebar-logo .sidebar-compact-logo{display:block!important}
body.sidebar-shell-ready .sidebar:not(.mobile-open) .sidebar-menu-scroll,
body.sidebar-shell-ready .sidebar:not(.mobile-open) .sidebar-bottom{display:none!important}
.sidebar-brand-copy{display:none!important}
body.sidebar-shell-ready .sidebar-menu-scroll{display:block;flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 2px 10px;scrollbar-width:thin}
body.sidebar-shell-ready .sidebar-user{order:0!important;justify-content:flex-start!important;margin:0!important;padding:6px 5px!important;gap:8px!important;border:0!important;border-radius:0!important;background:transparent!important}
body.sidebar-shell-ready .sidebar-user .user-info{text-align:left!important}
body.sidebar-shell-ready .sidebar-user .user-ava{width:32px!important;height:32px!important;min-width:32px!important;font-size:10px!important}
body.sidebar-shell-ready .sidebar-user .user-name{font-size:10px!important;line-height:1.25!important}
body.sidebar-shell-ready .sidebar-user .user-role{font-size:8px!important;line-height:1.25!important;margin-top:1px!important}
body.sidebar-shell-ready .nav-item{min-height:42px!important;margin:1px 0!important;padding:9px 10px!important;border-radius:8px!important;color:#43566c!important;font-size:12px!important;font-weight:600!important;transition:background .16s,color .16s,box-shadow .16s!important}
body.sidebar-shell-ready .nav-item:hover{background:#f0f6f7!important;color:var(--clarity-navy)!important}
body.sidebar-shell-ready .nav-item.active{background:#f0f4f6!important;color:var(--clarity-teal-dark)!important;box-shadow:none!important}
body.sidebar-shell-ready .sidebar-section{margin:8px 6px 4px!important;padding:12px 5px 4px!important;border-top:0!important;font-size:8px!important;color:#8794a4!important;text-transform:uppercase}
body.sidebar-shell-ready .sidebar-spacer{display:none!important}
body.sidebar-shell-ready .sidebar-bottom{position:static!important;flex:0 0 auto;margin:0!important;padding:8px 2px 0!important;border-top:1px solid #e2e8ec!important;background:#fff!important;text-align:left!important}
body.sidebar-shell-ready .logout-btn{display:inline-flex!important;width:auto!important;min-height:30px!important;margin:3px 5px 0!important;padding:5px 9px!important;justify-content:flex-start!important;gap:5px!important;color:var(--clarity-danger)!important;border:1px solid #efcfcc!important;border-radius:7px!important;background:#fff!important;font-size:9px!important;font-weight:650!important}
body.sidebar-shell-ready .logout-btn span{font-size:9px!important}
body.sidebar-shell-ready .logout-btn:hover{border-color:#dfaaa5!important;background:#fff2f0!important}

/* Page identity */
body .topbar{height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;box-sizing:border-box!important;padding:10px clamp(20px,2.4vw,34px)!important;align-items:center!important;background:#fff!important;border-top:3px solid var(--clarity-teal)!important;border-bottom:1px solid var(--clarity-line)!important}
body .topbar-left{display:flex!important;align-items:center!important;gap:13px!important;min-width:0}
body .topbar-left::before{width:4px!important;height:48px!important;border-radius:999px!important;background:linear-gradient(180deg,var(--clarity-teal),var(--clarity-navy))!important;color:transparent!important;box-shadow:none!important}
.clarity-title-stack{display:grid;gap:1px;min-width:0}
.clarity-eyebrow{font-size:9px;font-weight:750;line-height:1.2;letter-spacing:.11em;color:var(--clarity-teal-dark);text-transform:uppercase}
body .topbar-page-title{font-size:clamp(24px,2.4vw,30px)!important;line-height:1.25!important;letter-spacing:-.02em!important;color:var(--clarity-navy)!important}
body .topbar-breadcrumb{font-size:12px!important;line-height:1.5!important;color:var(--clarity-muted)!important}
.clarity-today{display:grid;gap:1px;padding-right:14px;text-align:right;border-right:1px solid var(--clarity-line)}
.clarity-today strong{font-size:11px;color:var(--clarity-navy)}
.clarity-today span{font-size:9px;color:var(--clarity-muted)}
body .booking-id-tag{min-height:42px!important;padding:7px 11px!important;border:1px solid #c8e7e9!important;border-radius:11px!important;background:var(--clarity-teal-soft)!important}

/* Shared surfaces */
body .page-content{padding:clamp(16px,2vw,26px)!important;background:#fafcfd!important}
body :is(.section-block,.card,.abt-card,.upcoming-filter-strip,.upcoming-date-bar,.filter-strip){border:1px solid var(--clarity-line)!important;border-radius:var(--clarity-radius)!important;background:#fff!important;box-shadow:none!important}
body :is(.section-head,.card-header,.abt-card-head){border-bottom:1px solid #e5ebef!important;background:#fff!important}
body .section-num{background:var(--clarity-navy)!important;color:#fff!important;border:0!important}
body :is(.section-head-title,.card-title,.abt-card-head strong){font-size:18px!important;line-height:1.4!important;color:var(--clarity-navy)!important}
body :is(.section-head-sub,.form-label,.s-label){color:var(--clarity-muted)!important}
body .form-label{font-size:12px!important;font-weight:650!important}
body :is(.form-input,.form-select,input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:42px!important;height:42px;padding:9px 12px!important;border:1px solid var(--clarity-line-strong)!important;border-radius:10px!important;background:#fff!important;color:var(--clarity-text)!important;font:500 13px/1.4 'Noto Sans Thai',sans-serif!important;box-shadow:none!important}
body textarea{height:auto!important;min-height:84px!important;resize:vertical}
body :is(.form-input,.form-select,input,select,textarea):focus{border-color:var(--clarity-teal-dark)!important;box-shadow:0 0 0 3px rgba(0,184,196,.16)!important;outline:0!important}
body :is(button,a,[role=button]){transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s}
body :is(button,a,[role=button]):focus-visible{outline:3px solid rgba(0,184,196,.3)!important;outline-offset:2px!important}
body :is(.btn-primary,.btn-submit){min-height:44px!important;padding:9px 16px!important;border-radius:10px!important;background:var(--clarity-navy)!important;color:#fff!important;box-shadow:none!important;font-size:12px!important;font-weight:700!important}
body :is(.btn-primary,.btn-submit):hover{background:var(--clarity-navy-2)!important;box-shadow:0 5px 14px rgba(0,27,63,.16)!important;transform:translateY(-1px)}
body :is(.btn-ghost,.btn-show-all,.action-dropdown-btn){min-height:42px!important;border:1px solid var(--clarity-line-strong)!important;border-radius:10px!important;background:#fff!important;color:#41566d!important;font-size:12px!important}
body button:disabled{opacity:.48!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important}
body :is(.job-pill,.pkg-card,.need-chip,.pay-opt){border-color:var(--clarity-line)!important;border-radius:11px!important;background:#fff!important}
body :is(.job-pill,.pkg-card,.need-chip,.pay-opt).selected,
body :is(.job-pill,.pkg-card,.need-chip,.pay-opt).checked{border-color:var(--clarity-teal)!important;background:var(--clarity-teal-soft)!important;box-shadow:inset 3px 0 var(--clarity-teal)!important}

/* Filters and operational tables */
body .filter-tabs{gap:5px!important;padding:3px!important;border-radius:11px!important;background:#eef3f6!important}
body .filter-tab{min-height:38px!important;padding:7px 12px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#5d7084!important;font-size:11px!important;font-weight:650!important}
body .filter-tab:hover{background:#fff!important;color:var(--clarity-navy)!important}
body .filter-tab.active{background:#fff!important;color:var(--clarity-teal-dark)!important;box-shadow:0 1px 4px rgba(0,27,63,.1),inset 0 -2px var(--clarity-teal)!important}
body :is(.table-scroll,.upcoming-table-scroll,.today-table-wrap){border:1px solid var(--clarity-line)!important;border-radius:var(--clarity-radius)!important;background:#fff!important;scrollbar-gutter:stable}
body .data-table{font-size:12px!important;color:var(--clarity-text)!important;border-collapse:separate!important;border-spacing:0!important}
body .data-table thead th{position:sticky!important;top:0;z-index:2;padding:12px 14px!important;background:#f1f5f7!important;color:#53677c!important;border-bottom:1px solid var(--clarity-line)!important;font-size:10px!important;font-weight:750!important;letter-spacing:.02em!important}
body .data-table tbody td{padding:13px 14px!important;border-bottom:1px solid #e8edf1!important;background:#fff!important;vertical-align:top!important;font-size:12px!important}
body .data-table tbody tr:hover td{background:#f7fbfb!important}
body .data-table tbody tr:focus-within td{background:#f1fafb!important}
body .data-table :is(td,td div,td span,td strong,td b,td a,td button){font-size:12px!important}
body .status-badge{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:28px!important;padding:5px 9px!important;border-radius:999px!important;font-size:10px!important;font-weight:700!important;line-height:1.25!important}
body .status-badge.s-waiting{background:#fff4d8!important;color:#8c5705!important;border:1px solid #efd795!important}
body .status-badge.s-matched{background:#e6f7ef!important;color:#136b54!important;border:1px solid #afe0cb!important}
body .status-badge.s-sending{background:#e8f3fb!important;color:#176b9e!important;border:1px solid #b8d9ed!important}

/* Dashboard KPI cards: emphasize the operational numbers without enlarging the grid. */
body #db-kpi>div{
  min-height:122px!important;
  padding:17px 19px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
body #db-kpi>div>div:first-child{
  margin-bottom:5px!important;
  font-size:20px!important;
  line-height:1!important;
}
body #db-kpi>div>div:nth-child(2){
  font-size:24px!important;
  font-weight:700!important;
  line-height:1.3!important;
}
body #db-kpi>div>div:nth-child(3){
  margin-top:2px!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.4!important;
}

/* Activity log must sit above the persistent navigation drawer. */
body #activityLogModal.modal-overlay{
  z-index:1200!important;
  box-sizing:border-box!important;
  padding:clamp(12px,2vw,24px)!important;
}
body #activityLogModal .modal-box{
  width:min(1440px,calc(100vw - 48px))!important;
  max-width:calc(100vw - 48px)!important;
  height:min(900px,calc(100dvh - 48px))!important;
  max-height:calc(100dvh - 48px)!important;
  margin:0!important;
  overflow:hidden!important;
}
body #activityLogModal .modal-body{
  min-width:0!important;
  min-height:0!important;
  overflow:auto!important;
}
body #activityLogModal .activity-log-close{
  display:grid!important;
  place-items:center!important;
  flex:0 0 44px!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  border:1px solid #d7e0e7!important;
  border-radius:11px!important;
  background:#f5f8fa!important;
  color:#53677c!important;
  font-size:26px!important;
  font-weight:500!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:background .16s,border-color .16s,color .16s!important;
}
body #activityLogModal .activity-log-close:hover{
  border-color:#efb3ae!important;
  background:#fff1f0!important;
  color:#c43d34!important;
}
body #activityLogModal .activity-log-close:focus-visible{
  outline:3px solid rgba(0,188,198,.24)!important;
  outline-offset:2px!important;
}
body .status-badge.s-done{background:#edf7f0!important;color:#256c47!important;border:1px solid #bfdfcb!important}
body .status-badge.s-cancel{background:#fbeceb!important;color:#a23a33!important;border:1px solid #edc4c0!important}
body .pagination-bar{min-height:54px!important;padding:10px 14px!important;border-top:1px solid var(--clarity-line)!important;background:#fff!important}

/* Page-specific hierarchy */
#page-upcoming .ops-overview{gap:12px!important;border:0!important;background:transparent!important}
#page-upcoming .ops-overview>div:not(.ops-overview-heading){min-height:96px!important;border-color:var(--clarity-line)!important}
#page-upcoming .ops-overview .ops-overview-heading{padding:0 2px 5px!important}
#page-upcoming .ops-metric-value{font-size:28px!important;color:var(--clarity-navy)!important}
#page-today .today-command{border-radius:var(--clarity-radius)!important;background:linear-gradient(120deg,#00244d,#005b72)!important;box-shadow:none!important}
#page-create .create-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important}
#page-create .summary-panel{position:static!important;grid-column:1/-1;display:grid;grid-template-columns:minmax(160px,.55fr) minmax(0,3fr) minmax(190px,.75fr);grid-template-rows:auto auto;min-height:150px}
#page-create .summary-top{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;justify-content:center}
#page-create .summary-rows{grid-column:2;grid-row:1/3;justify-content:center}
#page-create .summary-total{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:space-between;border-left:1px solid var(--clarity-line)}
#page-create .summary-actions{grid-column:3;grid-row:2;align-self:end;border-left:1px solid var(--clarity-line)}
#page-create #tsContent:not([style*="display:none"]):not([style*="display: none"]){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px!important}
#page-create #tsContent:not([style*="display:none"]):not([style*="display: none"]) .route-summary{grid-column:1/-1}
#page-create #tsContent:not([style*="display:none"]):not([style*="display: none"]) .s-divider{display:none}
#page-create #tsContent .s-row{min-width:0}
#page-create #tsContent .s-val{max-width:62%}

/* Responsive
   Laptop density is controlled by the compact type and spacing tokens above.
   Do not scale the whole document with CSS zoom: it raster-scales canvas charts
   and text, which becomes blurry when the browser zoom level changes. */
@media (min-width:721px) and (max-width:1600px) and (max-height:1000px){
  html{background:var(--clarity-canvas)}
  body{zoom:1;text-rendering:optimizeLegibility}
}
@media(max-width:1050px){
  .clarity-today{display:none}
  body.sidebar-shell-ready{--app-sidebar-width:260px}
}
@media(max-width:900px){
  #page-create .create-grid{grid-template-columns:1fr!important}
  #page-create .summary-panel{grid-column:auto;display:block;min-height:0}
  #page-create #tsContent:not([style*="display:none"]):not([style*="display: none"]){display:flex!important}
  #page-create .summary-total,#page-create .summary-actions{border-left:0}
}
@media(max-width:720px){
  body #activityLogModal.modal-overlay{padding:8px!important}
  body #activityLogModal .modal-box{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    height:calc(100dvh - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
}
@media(max-width:720px){
  body.sidebar-shell-ready{padding:0!important}
  body.sidebar-shell-ready .sidebar,
  body.sidebar-shell-ready .sidebar:not(.mobile-open){top:0!important;bottom:0!important;left:0!important;width:min(88vw,300px)!important;min-width:0!important;padding:16px 12px 12px!important;border-radius:0!important;transform:translateX(-105%)!important}
  body.sidebar-shell-ready .sidebar.mobile-open{transform:translateX(0)!important}
  body.sidebar-shell-ready:not(.drawer-is-open) .main{margin-left:0!important}
  body.sidebar-shell-ready .drawer-toggle-btn{left:18px!important}
  body.sidebar-shell-ready .sidebar.mobile-open .sidebar-logo .logo-mark{display:flex!important}
  body.sidebar-shell-ready .sidebar.mobile-open .sidebar-logo .sidebar-compact-logo{display:none!important}
  body.sidebar-shell-ready .main,body.sidebar-shell-ready.drawer-is-open .main{margin-left:0!important}
  body .topbar{height:auto!important;min-height:82px!important;padding:14px 14px 14px 56px!important}
  body .topbar-left::before{display:none!important}
  body .topbar-page-title{font-size:22px!important}
  body .topbar-breadcrumb{font-size:11px!important;white-space:normal!important}
  body .topbar-right{margin-left:0!important}
  body .page-content{padding:12px!important}
  body :is(.section-head-title,.card-title,.abt-card-head strong){font-size:16px!important}
  body .data-table thead th,body .data-table tbody td{padding:10px 11px!important}
  #page-create .summary-panel{position:static}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media(forced-colors:active){
  *{scrollbar-color:auto}
  body .status-badge,body .nav-item.active{border:1px solid CanvasText!important}
}

/* Upcoming bookings: use the same workspace scrolling model as Today's
   Bookings. The table grows with its rows and the page-content area scrolls. */
@media(min-width:901px){
  body:has(#page-upcoming.page-section.active) .main{
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
  }
  body:has(#page-upcoming.page-section.active) .main>.page-content{
    display:block!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
  }
  #page-upcoming.page-section.active{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  #page-upcoming .ops-overview,
  #page-upcoming .upcoming-date-bar,
  #page-upcoming .upcoming-filter-strip{
    flex:0 0 auto!important;
  }
  #page-upcoming .upcoming-table-scroll{
    flex:none!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;
    scrollbar-gutter:auto!important;
  }
  #page-upcoming #upcoming-pagination{
    position:static!important;
    background:#fff!important;
  }
}

/* Upcoming overview uses the same dark command-card palette as Today's work overview. */
#page-upcoming .ops-overview{
  padding:20px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:18px!important;
  background:linear-gradient(120deg,#00244d,#005b72)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
#page-upcoming .ops-overview .ops-overview-heading{
  padding:0 2px 5px!important;
  color:#fff!important;
  background:transparent!important;
}
#page-upcoming .ops-overview-heading strong{color:#fff!important}
#page-upcoming .ops-overview-heading small{color:rgba(255,255,255,.68)!important}
#page-upcoming .ops-overview>div:not(.ops-overview-heading){
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(255,255,255,.075)!important;
  backdrop-filter:blur(5px);
}
#page-upcoming .ops-metric-label{color:rgba(255,255,255,.62)!important}
#page-upcoming .ops-metric-value,
#page-upcoming .ops-metric-value[data-count="waiting"],
#page-upcoming .ops-metric-value[data-count="matched"],
#page-upcoming .ops-metric-value[data-count="sent"]{color:#fff!important}
@media(max-width:600px){
  #page-upcoming .ops-overview{padding:15px!important;border-radius:15px!important}
}

/* Today filter buttons match the Upcoming filter control. */
#page-today .today-filter-tabs{
  box-sizing:border-box!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:3px!important;
  border-radius:9px!important;
  background:#f1f5f8!important;
}
#page-today .today-filter-tabs .filter-tab{
  min-height:44px!important;
  height:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:8px 14px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#64748a!important;
  box-shadow:none!important;
}
#page-today .today-filter-tabs .filter-tab.active{
  border:0!important;
  background:var(--ops-navy,#001840)!important;
  color:#fff!important;
  box-shadow:0 2px 4px #00184015!important;
}
#page-today .today-filter-tabs .filter-tab.active i{color:inherit!important}
@media(max-width:720px){
  #page-today .today-filter-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  #page-today .today-filter-tabs .filter-tab{justify-content:flex-start!important}
}

/* Keep every filter icon in the same line-icon system and geometry. */
.filter-tab>i{
  width:16px!important;
  height:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 16px!important;
  color:inherit!important;
  font-size:14px!important;
  line-height:1!important;
}
#page-upcoming .filter-tab{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}

/* Upcoming summary cards carry the same status icons as Today's metrics. */
#page-upcoming .ops-overview .ops-metric-card{
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
}
#page-upcoming .ops-metric-icon{
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 31px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.10)!important;
  font-size:14px!important;
}
#page-upcoming .ops-metric-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:1px!important;
}
#page-upcoming .ops-metric-card.metric-waiting .ops-metric-icon{color:#ffd36e!important}
#page-upcoming .ops-metric-card.metric-matched .ops-metric-icon{color:#72e7ae!important}
#page-upcoming .ops-metric-card.metric-sending .ops-metric-icon{color:#89c9ff!important}
#page-upcoming .ops-metric-icon i{color:inherit!important;line-height:1!important}
@media(max-width:600px){
  #page-upcoming .ops-overview .ops-metric-card{justify-content:flex-start!important}
}

/* Report table: reveal truncated route text through the native hover tooltip. */
#rpt-table .rpt-fulltext {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
}

#rpt-table .rpt-fulltext:hover {
  color: #005f9f;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

#rpt-table .rpt-fulltext:focus-visible {
  outline: 2px solid #00b8c4;
  outline-offset: 2px;
}
/* Booking review: facts, route and notes remain readable before submission. */
#page-create .trip-summary-panel{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;min-height:0}
#page-create .trip-summary-panel .summary-top{grid-column:1/-1;grid-row:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--clarity-navy);border:0}
#page-create .trip-summary-panel .summary-top h3{margin:0;font-size:15px}
#page-create .trip-summary-panel .summary-top p{margin:0;font-size:12px}
#page-create .trip-summary-panel .summary-rows{grid-column:1/-1;grid-row:2;padding:14px 16px;display:block}
#page-create .trip-summary-panel #tsContent:not([style*="display:none"]):not([style*="display: none"]){display:block!important}
#page-create .trip-summary-panel .trip-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding-bottom:12px;border-bottom:1px solid var(--clarity-line)}
#page-create .trip-summary-panel .s-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;font-size:14px;min-width:0}
#page-create .trip-summary-panel .s-label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-secondary)}
#page-create .trip-summary-panel .s-val{max-width:100%;text-align:left;line-height:1.45;white-space:normal;overflow-wrap:anywhere;color:var(--clarity-navy)}
#page-create .trip-summary-panel .trip-time{display:inline;margin-left:8px;font-variant-numeric:tabular-nums}
#page-create .trip-summary-panel .trip-route-details{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--clarity-line)}
#page-create .trip-summary-panel .trip-origin .s-label .fi{color:var(--brand)}
#page-create .trip-summary-panel .trip-destination .s-label .fi{color:var(--clarity-navy)}
#page-create .trip-summary-panel .trip-additional{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;padding-top:12px}
#page-create .trip-summary-panel .summary-total{grid-column:1;grid-row:3;border-left:0;border-top:1px solid var(--clarity-line);padding:10px 16px;justify-content:flex-start;gap:24px;background:var(--brand-soft)}
#page-create .trip-summary-panel .st-label{font-size:14px}
#page-create .trip-summary-panel .st-price{font-size:24px;font-variant-numeric:tabular-nums}
#page-create .trip-summary-panel .summary-actions{grid-column:2;grid-row:3;align-self:stretch;align-items:center;border-left:0;padding:10px 16px;background:var(--brand-soft)}
#page-create .trip-summary-panel .summary-actions button{min-height:44px;white-space:nowrap;padding:9px 16px;font-size:14px;border-radius:12px}
#page-create .trip-summary-panel .summary-actions button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media(max-width:1100px){#page-create .trip-summary-panel .trip-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){
 #page-create .trip-summary-panel{display:block!important}
 #page-create .trip-summary-panel .summary-top{padding:10px 14px}
 #page-create .trip-summary-panel .summary-rows{padding:14px}
 #page-create .trip-summary-panel .trip-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 #page-create .trip-summary-panel .trip-route-details,#page-create .trip-summary-panel .trip-additional{grid-template-columns:1fr;gap:12px}
 #page-create .trip-summary-panel .summary-total{justify-content:space-between;padding:10px 14px}
 #page-create .trip-summary-panel .summary-actions{padding:0 14px 12px;border-top:0;flex-wrap:wrap}
 #page-create .trip-summary-panel .summary-actions button{flex:1}
}

/* Advance Booking supplied white wordmark; show artwork without square transparent margins. */
body.sidebar-shell-ready .sidebar-logo .logo-mark img{width:170px!important;height:64px!important;object-fit:cover!important;object-position:center!important;background:#001B3F!important}
#login-screen .ssls-login-brand-panel img{width:100%!important;height:auto!important;aspect-ratio:2.65!important;object-fit:cover!important;object-position:center!important;background:transparent!important;border-radius:0}