/* X-Route reference UI — aligns the live product with the approved visual concept. */

:root{
  --xr-ref-sidebar:212px;
  --xr-ref-header:58px;
  --xr-ref-radius:12px;
  --xr-ref-blue:#35698f;
  --xr-ref-blue-soft:#edf5fa;
  --xr-ref-gold:#dfa63a;
  --xr-ref-gold-soft:#fff4d7;
  --xr-ref-text:#18324a;
  --xr-ref-muted:#6d8290;
  --xr-ref-line:#d9e4e9;
}

/* App shell */
.layout>aside{
  width:var(--xr-ref-sidebar)!important;
  padding:0 12px 14px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
.layout main{margin-left:var(--xr-ref-sidebar)!important}
.layout>aside .brand-row{
  box-sizing:border-box!important;
  min-height:var(--xr-ref-header)!important;
  height:var(--xr-ref-header)!important;
  align-items:center!important;
  margin:0 0 10px!important;
  padding:8px 4px 8px 8px!important;
  border-bottom:1px solid!important;
}
.layout>aside .brand-row .sidebar-logo{
  width:132px!important;
  height:50px!important;
  flex-basis:132px!important;
}
.layout>aside .brand-row .sidebar-menu{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  border-radius:8px!important;
}
.layout>aside .spacer{flex:1 1 auto!important;min-height:20px!important}

.nav-item{
  min-height:40px!important;
  height:40px!important;
  margin:2px 0!important;
  padding:0 11px!important;
  gap:11px!important;
  border-radius:8px!important;
  font-size:11px!important;
}
.nav-item i{width:18px!important;font-size:13px!important}

.xr-helpdesk-card{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin:12px 2px 10px;
  padding:12px;
  border:1px solid;
  border-radius:10px;
  text-decoration:none!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.xr-helpdesk-card:hover{transform:translateY(-1px)}
.xr-helpdesk-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  font-size:14px;
}
.xr-helpdesk-copy{display:grid;gap:3px;min-width:0}
.xr-helpdesk-copy b{font-size:11px;line-height:1.2}
.xr-helpdesk-copy span{font-size:8.5px;line-height:1.45}
.xr-helpdesk-copy small{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:8.5px;font-weight:700}

header{
  min-height:var(--xr-ref-header)!important;
  height:var(--xr-ref-header)!important;
  padding:0 18px 0 20px!important;
  gap:11px!important;
}
.xr-global-search{
  position:relative;
  flex:0 1 340px;
  width:min(340px,32vw);
  margin:0;
}
.xr-global-search>i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  pointer-events:none;
  font-size:12px;
}
.xr-global-search input{
  box-sizing:border-box;
  width:100%;
  height:36px!important;
  min-height:36px!important;
  padding:0 13px 0 36px!important;
  border-radius:8px!important;
  font-size:10px!important;
  font-weight:500!important;
}
.header-icons{gap:3px!important}
.header-icons a{
  width:34px!important;
  height:34px!important;
  border-radius:8px!important;
}
.header-tools{gap:8px!important}
.theme-toggle{height:36px!important}
.language-current{height:36px!important}
.user-chip{min-width:172px!important;gap:9px!important}
.avatar{width:32px!important;height:32px!important}
.user-copy b{font-size:10px!important}
.user-copy small{font-size:8px!important}

/* Light concept */
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] .content,
html[data-theme="light"] .layout{background:#f6f9fb!important}
html[data-theme="light"] .layout>aside{
  background:#fbfdfe!important;
  border-color:#dce7ec!important;
  box-shadow:8px 0 28px rgba(38,73,96,.035)!important;
}
html[data-theme="light"] .layout>aside .brand-row{border-color:#e1eaee!important}
html[data-theme="light"] .sidebar-menu{
  background:#f1f6f8!important;
  border:1px solid #dbe6eb!important;
  color:#4e6879!important;
}
html[data-theme="light"] .nav-item{
  color:#315067!important;
  border-color:transparent!important;
}
html[data-theme="light"] .nav-item i{color:#5f7f95!important}
html[data-theme="light"] .nav-item:hover{
  background:#eef5f8!important;
  border-color:#dce9ef!important;
  color:#19354c!important;
}
html[data-theme="light"] .nav-item.active{
  background:linear-gradient(135deg,#fff1c4 0%,#f7d77e 100%)!important;
  border-color:#efc768!important;
  color:#3c2b07!important;
  box-shadow:0 5px 16px rgba(190,139,27,.10)!important;
}
html[data-theme="light"] .nav-item.active i{color:#735006!important}
html[data-theme="light"] .xr-helpdesk-card{
  background:linear-gradient(145deg,#f4f9fc,#edf5f9)!important;
  border-color:#d6e5ec!important;
  color:#23445b!important;
  box-shadow:0 6px 20px rgba(49,91,117,.035);
}
html[data-theme="light"] .xr-helpdesk-card:hover{border-color:#bcd4e0!important}
html[data-theme="light"] .xr-helpdesk-icon{background:#fff4d9;color:#cf8d12}
html[data-theme="light"] .xr-helpdesk-copy span{color:#718692}
html[data-theme="light"] .xr-helpdesk-copy small{color:#496c83}
html[data-theme="light"] header{
  background:rgba(255,255,255,.97)!important;
  border-color:#dce7ec!important;
  box-shadow:0 4px 16px rgba(38,73,96,.035)!important;
}
html[data-theme="light"] .xr-global-search>i{color:#6b8495}
html[data-theme="light"] .xr-global-search input{
  background:#f9fbfc!important;
  border-color:#d6e2e8!important;
  color:#234056!important;
}
html[data-theme="light"] .xr-global-search input::placeholder{color:#91a3ae!important}
html[data-theme="light"] .header-icons a{color:#587184!important}
html[data-theme="light"] .header-icons a:hover{background:#eef5f8!important;color:#315f7d!important}

/* Dark concept */
html[data-theme="dark"] .layout>aside{
  background:linear-gradient(180deg,#0e1922,#0b141b)!important;
  border-color:#243641!important;
}
html[data-theme="dark"] .layout>aside .brand-row{border-color:#2a3c47!important}
html[data-theme="dark"] .sidebar-menu{
  background:#15232d!important;
  border:1px solid #2e4350!important;
  color:#c5d2d8!important;
}
html[data-theme="dark"] .xr-helpdesk-card{
  background:linear-gradient(145deg,#152630,#11202a)!important;
  border-color:#2b4656!important;
  color:#edf4f7!important;
}
html[data-theme="dark"] .xr-helpdesk-card:hover{border-color:#41677c!important}
html[data-theme="dark"] .xr-helpdesk-icon{background:rgba(228,178,77,.13);color:#edbd58}
html[data-theme="dark"] .xr-helpdesk-copy span{color:#9fb0ba}
html[data-theme="dark"] .xr-helpdesk-copy small{color:#d9b04f}
html[data-theme="dark"] .xr-global-search>i{color:#879ba7}
html[data-theme="dark"] .xr-global-search input{
  background:#15242e!important;
  border-color:#304754!important;
  color:#eef4f7!important;
}
html[data-theme="dark"] .xr-global-search input::placeholder{color:#7f919c!important}

/* Approved New/Edit trip visual system */
body.xroute-new-trip main>.content{padding:16px 22px 24px!important}
body.xroute-new-trip .xroute-new-intro,
body.xroute-new-trip .xroute-planner-layout{
  max-width:1500px!important;
  width:100%!important;
}
body.xroute-new-trip .xroute-new-intro{
  min-height:62px!important;
  margin-bottom:12px!important;
  align-items:center!important;
}
body.xroute-new-trip .xroute-new-intro h1{
  font-size:26px!important;
  font-weight:780!important;
  letter-spacing:-.035em!important;
}
body.xroute-new-trip .xroute-new-intro p{
  margin-top:5px!important;
  font-size:10px!important;
}
body.xroute-new-trip .xroute-new-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}
body.xroute-new-trip .xroute-concept-btn{display:none!important}
body.xroute-new-trip .xr-form-status{
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:9px!important;
  font-size:9px!important;
  font-weight:650!important;
  white-space:nowrap;
}
body.xroute-new-trip .xroute-save-btn{
  min-height:40px!important;
  height:40px!important;
  padding:0 18px!important;
  border-radius:9px!important;
  font-size:10px!important;
}
body.xroute-new-trip .xroute-planner-layout{
  grid-template-columns:minmax(0,1fr) 370px!important;
  gap:14px!important;
}
body.xroute-new-trip .xroute-exact-form{gap:10px!important}
body.xroute-new-trip .xr-card,
body.xroute-new-trip .xroute-side-card{
  border-radius:var(--xr-ref-radius)!important;
  overflow:hidden;
}
body.xroute-new-trip .xr-card{padding:11px 12px!important}
body.xroute-new-trip .xroute-step-title{
  display:flex!important;
  align-items:center!important;
  min-height:38px!important;
  gap:10px!important;
  margin:0 0 10px!important;
  font-size:13px!important;
  font-weight:750!important;
}
body.xroute-new-trip .xroute-step-title .xr-modern-section-number{
  width:40px!important;
  min-width:40px!important;
  height:38px!important;
  padding:0!important;
  border-radius:10px!important;
  font-size:12px!important;
  letter-spacing:.02em!important;
}
body.xroute-new-trip .xroute-step-title .xr-section-icon{
  display:grid!important;
  place-items:center!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  margin-left:1px!important;
  font-size:14px!important;
}
body.xroute-new-trip .xroute-step-title .xr-section-icon.xr-icon-blue{color:#3b7399!important}
body.xroute-new-trip .xroute-step-title .xr-section-icon.xr-icon-gold{color:#d99b21!important}

html[data-theme="light"] body.xroute-new-trip .xr-card,
html[data-theme="light"] body.xroute-new-trip .xroute-side-card{
  background:#fff!important;
  border:1px solid #d9e4e9!important;
  box-shadow:0 7px 22px rgba(39,73,95,.035)!important;
}
html[data-theme="dark"] body.xroute-new-trip .xr-card,
html[data-theme="dark"] body.xroute-new-trip .xroute-side-card{
  background:linear-gradient(180deg,#13212b,#101b23)!important;
  border:1px solid #2d424f!important;
  box-shadow:0 8px 24px rgba(0,0,0,.12)!important;
}
html[data-theme="light"] body.xroute-new-trip .xroute-step-title .xr-modern-section-number{
  background:#fff3d3!important;
  border-color:#f0d38a!important;
  color:#956500!important;
}
html[data-theme="dark"] body.xroute-new-trip .xroute-step-title .xr-modern-section-number{
  background:rgba(228,178,77,.14)!important;
  border-color:rgba(228,178,77,.38)!important;
  color:#efc262!important;
}

/* Fields and nested container blocks */
body.xroute-new-trip .xr-card input,
body.xroute-new-trip .xr-card select,
body.xroute-new-trip .xr-card textarea{
  min-height:34px!important;
  height:34px!important;
  border-radius:7px!important;
  font-size:10px!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-card input,
html[data-theme="light"] body.xroute-new-trip .xr-card select,
html[data-theme="light"] body.xroute-new-trip .xr-card textarea{
  background:#fbfdfe!important;
  border-color:#cedde4!important;
  color:#1e3a50!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-card input:focus,
html[data-theme="light"] body.xroute-new-trip .xr-card select:focus,
html[data-theme="light"] body.xroute-new-trip .xr-card textarea:focus{
  border-color:#79a3bf!important;
  box-shadow:0 0 0 3px rgba(77,133,169,.09)!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-section-identification,
html[data-theme="light"] body.xroute-new-trip .xr-section-cargo,
html[data-theme="light"] body.xroute-new-trip .xr-section-conditions,
html[data-theme="light"] body.xroute-new-trip .xr-section-voyage,
html[data-theme="light"] body.xroute-new-trip .xr-portbase-row4{
  background:#f9fbfc!important;
  border-color:#dce7ec!important;
  border-radius:10px!important;
}
html[data-theme="dark"] body.xroute-new-trip .xr-section-identification,
html[data-theme="dark"] body.xroute-new-trip .xr-section-cargo,
html[data-theme="dark"] body.xroute-new-trip .xr-section-conditions,
html[data-theme="dark"] body.xroute-new-trip .xr-section-voyage,
html[data-theme="dark"] body.xroute-new-trip .xr-portbase-row4{
  background:#15242d!important;
  border-color:#2e4350!important;
  border-radius:10px!important;
}
body.xroute-new-trip .xr-container-middle{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
}
body.xroute-new-trip .xr-container-subtitle,
body.xroute-new-trip .xr-portbase-title{
  min-height:22px!important;
  margin-bottom:7px!important;
  font-size:10px!important;
  letter-spacing:0!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-container-subtitle,
html[data-theme="light"] body.xroute-new-trip .xr-portbase-title{color:#28475c!important}
body.xroute-new-trip .xr-container-subtitle span,
body.xroute-new-trip .xr-portbase-title>span{
  width:24px!important;
  height:24px!important;
  border-radius:7px!important;
  font-size:10px!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-container-subtitle span,
html[data-theme="light"] body.xroute-new-trip .xr-portbase-title>span{
  background:#eaf4fa!important;
  color:#326d94!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-container-subtitle>i,
html[data-theme="light"] body.xroute-new-trip .xr-portbase-title>i{color:#d89a20!important}
body.xroute-new-trip .xr-section-cargo .xr-container-section-fields{
  grid-template-columns:1fr 1fr!important;
}
body.xroute-new-trip .xr-section-conditions .xr-container-section-fields{
  grid-template-columns:minmax(170px,1fr)!important;
  align-content:start!important;
}
body.xroute-new-trip .xr-section-conditions{
  min-height:100%!important;
}

/* Route rows */
body.xroute-new-trip .xr-route-card .xroute-stop{
  border-radius:9px!important;
  min-height:42px!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-route-card .xroute-stop{
  background:#f9fbfc!important;
  border-color:#dbe7ec!important;
}
body.xroute-new-trip .xr-route-card .xroute-stop-num{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  border-radius:8px!important;
}
html[data-theme="light"] body.xroute-new-trip .xr-route-card .xroute-stop-num{
  background:#eaf4fa!important;
  border-color:#cce0eb!important;
  color:#326d94!important;
}

/* Financial card */
body.xroute-new-trip .xr-financial-sidebar{
  border-radius:12px!important;
  padding:11px 12px!important;
}
body.xroute-new-trip .xr-fin-base{margin-bottom:13px!important}
body.xroute-new-trip .xr-fin-base label{
  grid-template-columns:105px minmax(0,1fr)!important;
  min-height:34px!important;
}
body.xroute-new-trip .xr-tariff-title{font-size:12px!important;margin:4px 0 7px!important}
body.xroute-new-trip .xr-tariff-list{gap:4px!important}
body.xroute-new-trip .xr-tariff-row{min-height:30px!important}
body.xroute-new-trip .xr-tariff-label{font-size:9.5px!important}
body.xroute-new-trip .xr-tariff-value{
  min-height:29px!important;
  height:29px!important;
  border-radius:6px!important;
}

/* Responsive */
@media(max-width:1180px){
  :root{--xr-ref-sidebar:186px}
  .xr-global-search{flex-basis:280px;width:min(280px,28vw)}
  body.xroute-new-trip .xroute-planner-layout{grid-template-columns:1fr!important}
  body.xroute-new-trip .xroute-planner-side{position:static!important}
}
@media(max-width:850px){
  .layout>aside{width:100%!important}
  .layout main{margin-left:0!important}
  .xr-global-search{display:none}
  .xr-helpdesk-card{display:none!important}
  body.xroute-new-trip main>.content{padding:12px!important}
}
@media(max-width:720px){
  body.xroute-new-trip .xroute-new-intro{align-items:flex-start!important}
  body.xroute-new-trip .xroute-new-actions{width:100%;flex-wrap:wrap;justify-content:flex-start!important}
  body.xroute-new-trip .xr-form-status{white-space:normal}
  body.xroute-new-trip .xr-container-middle{grid-template-columns:1fr!important}
}

/* Sidebar and main header share one height and vertical center. */
.layout>aside .brand-row .sidebar-logo{
  height:40px!important;
  margin-top:0!important;
  margin-bottom:0!important;
  align-self:center!important;
}
.layout>main>header{
  box-sizing:border-box!important;
  align-items:center!important;
}

/* Approved full-width section bars: exact palette from the preview. */
:root{
  --xr-section-bar:#244353;
  --xr-section-bar-text:#dfedf6;
  --xr-section-bar-number:#355769;
}
html[data-theme="light"]{
  --xr-section-bar:#dceaf3;
  --xr-section-bar-text:#234e6c;
  --xr-section-bar-number:#f6fafc;
}
html body.xroute-new-trip .xr-card .xr-container-section{
  padding:0!important;
}
html body.xroute-new-trip .xr-card .xr-container-section>.xr-container-section-fields{
  padding:12px!important;
}
html body.xroute-new-trip .xr-card :is(.xr-container-section,.xr-portbase-row4)>:is(.xr-container-subtitle,.xr-portbase-title){
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:36px!important;
  padding:8px 12px!important;
  margin:0!important;
  background:var(--xr-section-bar)!important;
  color:var(--xr-section-bar-text)!important;
  border:0!important;
  border-radius:9px 9px 0 0!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.3!important;
  letter-spacing:0!important;
}
html body.xroute-new-trip .xr-card :is(.xr-container-subtitle,.xr-portbase-title)>:is(b,i){
  color:var(--xr-section-bar-text)!important;
}
html body.xroute-new-trip .xr-card :is(.xr-container-subtitle,.xr-portbase-title)>b{
  font-size:12px!important;font-weight:600!important;
}
html body.xroute-new-trip .xr-card :is(.xr-container-subtitle,.xr-portbase-title)>i{
  width:15px!important;font-size:15px!important;flex-shrink:0!important;
}
html body.xroute-new-trip .xr-card :is(.xr-container-subtitle,.xr-portbase-title)>span{
  display:grid!important;place-items:center!important;
  width:20px!important;min-width:20px!important;height:20px!important;
  border:0!important;border-radius:5px!important;
  background:var(--xr-section-bar-number)!important;
  color:var(--xr-section-bar-text)!important;
  font-size:10px!important;font-weight:600!important;
}
/* Portbase fields are direct grid children; the title spans the padded grid. */
html body.xroute-new-trip .xr-card .xr-portbase-row4{
  padding:0 12px 12px!important;
  row-gap:12px!important;
}
html body.xroute-new-trip .xr-card .xr-portbase-row4>.xr-portbase-title{
  grid-column:1/-1!important;
  width:calc(100% + 24px)!important;
  margin:0 -12px!important;
}