/* Final site-wide layout layer: one rhythm for every authenticated X-Route page. */
:root{
  --xr-page-max:100%;
  --xr-page-gap:12px;
  --xr-card-radius:7px;
  --xr-control-height:32px;
}
html{scrollbar-gutter:stable}
main>.content{
  width:100%;
  max-width:var(--xr-page-max);
  margin-inline:auto;
  padding:12px 18px 20px!important;
}
main>.content>*{min-width:0}
main>.content:has(#xrMasterData),main>.content:has(#xr-drivers){max-width:var(--xr-page-max)!important}
#xrMasterData,#xr-drivers{width:100%;max-width:none}
main>.content>.pagehead,
main>.content>.customer-head,
main>.content>.trip-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 16px;
  width:100%;
  margin:0 0 var(--xr-page-gap)!important;
}
main>.content>.pagehead h1,
main>.content>.customer-head h1{margin:0!important;line-height:1.15}
main>.content>.card,
main>.content>.planner,
main>.content>.settings-page,
main>.content>.trip-editor,
main>.content>.xroute-new-intro,
main>.content>.xroute-planner-layout{width:100%}
main>.content>.card,
main>.content>.planner,
main>.content>.driver-trip,
main>.content .editor-card{
  border-radius:var(--xr-card-radius);
}
main>.content>.card+ .card,
main>.content>.card+ .planner,
main>.content>.planner+ .card{margin-top:var(--xr-page-gap)}
.card>.pagehead:first-child,
.card>.customer-head:first-child{margin-top:0!important}
.actions,.editor-actions,.settings-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
}
.form,.gridform,.form-grid,.destination-grid{
  align-items:end;
  gap:10px 12px;
}
.form label,.gridform label,.form-grid label,.destination-grid label{min-width:0;margin:0}
.form input,.form select,.form textarea,
.gridform input,.gridform select,.gridform textarea,
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;
  min-width:0;
}
main>.content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
main>.content select,
main>.content button,
main>.content .btn,
main>.content .smallbtn{min-height:var(--xr-control-height)}
main>.content textarea{min-width:0;width:100%}
main>.content table{width:100%}
main>.content th,main>.content td{vertical-align:middle}
main>.content .table-wrap,
main>.content [class$="-table-wrap"],
main>.content [class*="-table-scroll"]{width:100%;max-width:100%;overflow-x:auto}

/* The trip editor uses the same aligned field grid in create and edit mode. */
body.xroute-new-trip main>.content{max-width:var(--xr-page-max)!important}
body.xroute-new-trip .xroute-new-intro,
body.xroute-new-trip .xroute-planner-layout{
  width:100%!important;
  max-width:1440px!important;
  margin-inline:auto!important;
}
body.xroute-new-trip .xroute-planner-layout{
  grid-template-columns:minmax(0,1fr) minmax(320px,380px)!important;
  gap:12px!important;
}
body.xroute-new-trip .xroute-exact-form{gap:8px!important}
body.xroute-new-trip .xr-card{width:100%;padding:10px 11px!important}
body.xroute-new-trip .xroute-step-title{min-height:27px;margin:0 0 8px!important}
body.xroute-new-trip .xr-grid{align-items:end!important;gap:8px 12px!important}
body.xroute-new-trip .xr-grid>label,
body.xroute-new-trip .xr-grid-container>label{min-width:0!important;margin:0!important;align-self:end!important}
body.xroute-new-trip .xr-grid-order.xr-order-clean{
  max-width:none!important;
  width:100%!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-areas:
    "customer reference jobtype"
    "date times times"!important;
  column-gap:12px!important;
  row-gap:8px!important;
}
body.xroute-new-trip .xr-order-reference{max-width:none!important}
body.xroute-new-trip .xr-order-operation-times,
body.xroute-new-trip .xr-operation-window{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:end!important;
}
body.xroute-new-trip .xr-order-operation-times[hidden],
body.xroute-new-trip .xr-operation-window[hidden]{display:none!important}
body.xroute-new-trip .xr-order-operation-times label,
body.xroute-new-trip .xr-operation-window label{width:auto!important;min-width:0!important;margin:0!important}
body.xroute-new-trip .xr-grid-container{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:8px 12px!important;
  align-items:end!important;
}
body.xroute-new-trip .xr-grid-container:not(.xr-container-ordered)>label,
body.xroute-new-trip .xr-grid-container:not(.xr-container-ordered)>.xr-checkline{
  grid-column:auto!important;
  grid-row:auto!important;
}
body.xroute-new-trip .xr-grid-container .xr-checkline{min-height:var(--xr-control-height);align-self:end!important}
body.xroute-new-trip .xr-route-head,
body.xroute-new-trip .xroute-stop{
  grid-template-columns:30px minmax(90px,120px) minmax(180px,2fr) 132px 104px minmax(110px,1fr) 36px!important;
  gap:7px!important;
}
body.xroute-new-trip .xroute-route-grid{overflow-x:auto!important}
body.xroute-new-trip .xr-route-head,
body.xroute-new-trip .xroute-stop{width:100%;min-width:760px;box-sizing:border-box}
body.xroute-new-trip .xroute-stop>*{min-width:0}
body.xroute-new-trip .xroute-stop input{width:100%!important}
/* Never allow a field-clear control to wrap below the route sequence number. */
body.xroute-new-trip .xroute-stop>:is(.xr-generic-clear,.xr-route-clear){display:none!important}
body.xroute-new-trip .xroute-stop>.xr-picker-clear-wrap:has(.xroute-date),
body.xroute-new-trip .xroute-stop>.xr-picker-clear-wrap:has(input[type="time"]){display:none!important}

@media(max-width:1180px){
  body.xroute-new-trip .xroute-planner-layout{grid-template-columns:1fr!important;max-width:980px!important}
  body.xroute-new-trip .xroute-planner-side{position:static!important;grid-template-columns:1fr 1fr}
  body.xroute-new-trip .xr-grid-order.xr-order-clean{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-areas:"customer reference jobtype" "date times times"!important;
  }
  body.xroute-new-trip .xr-grid-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:850px){
  main>.content{padding:12px!important}
  .gridform,.form-grid{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  main>.content>.pagehead,
  main>.content>.customer-head,
  main>.content>.trip-editor-head{align-items:flex-start}
  body.xroute-new-trip .xr-grid-order.xr-order-clean{
    grid-template-columns:1fr!important;
    grid-template-areas:"customer" "reference" "jobtype" "date" "times"!important;
  }
  body.xroute-new-trip .xr-grid-container{grid-template-columns:1fr!important}
  body.xroute-new-trip .xr-order-operation-times,
  body.xroute-new-trip .xr-operation-window{grid-template-columns:1fr 1fr!important}
  body.xroute-new-trip .xroute-route-grid{gap:9px!important}
}


/* Search fields use plain text alignment throughout the site. */
main>.content .fa-magnifying-glass{
  display:none!important;
}
main>.content .xr-search>input,
main>.content .xr-location-wrap>input,
main>.content .xr-customer-combo>input,
main>.content .xr-type-combo>input,
main>.content .xr-search-like>input,
main>.content .input-icon>input,
main>.content .input-with-icon>input,
main>.content .search-input-wrap>input,
main>.content .trip-filter-field>input,
main>.content .customer-search>input{
  padding-left:10px!important;
}

/* Compact route row: one clear delete action, no Portbase status controls. */
body.xroute-new-trip .xr-route-delete{
  width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;
  display:grid!important;place-items:center!important;align-self:center!important;
  border:1px solid #8e3434!important;border-radius:5px!important;
  background:#171213!important;color:#ff5b5b!important;cursor:pointer!important;
}
body.xroute-new-trip .xr-route-delete:hover{background:#321719!important;border-color:#cf4545!important;color:#ff7777!important}
body.xroute-new-trip .xr-route-delete i{font-size:11px!important}

/* Compact financial entry with safe euro-prefix spacing. */
body.xroute-new-trip .xr-fin-grid.xr-fin-grid-compact{grid-template-columns:minmax(200px,280px)!important;width:min(100%,280px)!important}
body.xroute-new-trip .xr-fin-grid.xr-fin-grid-compact>div{width:100%!important}
body.xroute-new-trip .xr-fin-grid.xr-fin-grid-compact .xr-money{width:100%!important;max-width:280px!important}
body.xroute-new-trip .xr-fin-grid.xr-fin-grid-compact .xr-money>input{padding-left:36px!important}


/* Financial sidebar and horizontal route support — shared by New trip and Edit trip. */
body.xroute-new-trip .xroute-planner-side{align-self:start}
body.xroute-new-trip .xr-financial-sidebar{position:sticky;top:12px;overflow:hidden}
body.xroute-new-trip .xr-fin-base{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:14px}
body.xroute-new-trip .xr-fin-base label{display:grid;grid-template-columns:105px minmax(0,1fr);align-items:center;gap:8px;margin:0}
body.xroute-new-trip .xr-fin-base .xr-money{width:100%;max-width:none!important}
body.xroute-new-trip .xr-fin-base .xr-money>input{padding-left:34px!important}
body.xroute-new-trip .xr-tariff-title{font-size:12px;font-weight:800;margin:2px 0 7px}
body.xroute-new-trip .xr-tariff-head,
body.xroute-new-trip .xr-tariff-row{display:grid;grid-template-columns:22px minmax(115px,1fr) 20px minmax(64px,82px);gap:5px;align-items:center}
body.xroute-new-trip .xr-financial-sidebar.has-charter .xr-tariff-head,
body.xroute-new-trip .xr-financial-sidebar.has-charter .xr-tariff-row{grid-template-columns:22px minmax(105px,1fr) 20px minmax(58px,72px) minmax(58px,72px)}
body.xroute-new-trip .xr-tariff-head{padding:0 1px 5px;color:#aeb9bc;font-size:9px;font-weight:700}
body.xroute-new-trip .xr-tariff-head span:nth-last-child(-n+2){text-align:right}
body.xroute-new-trip .xr-tariff-list{display:grid;gap:5px}
body.xroute-new-trip .xr-tariff-row{min-height:30px}
body.xroute-new-trip .xr-tariff-label{font-size:10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.xroute-new-trip .xr-tariff-unit{font-size:11px;color:#9da9ac;text-align:center}
body.xroute-new-trip .xr-tariff-value{height:28px!important;min-height:28px!important;padding:4px 7px!important;text-align:right;font-size:10px}
body.xroute-new-trip .xr-tariff-check{display:grid;place-items:center;margin:0!important}
body.xroute-new-trip .xr-tariff-check input{position:absolute;opacity:0;pointer-events:none}
body.xroute-new-trip .xr-tariff-check span{width:15px;height:15px;border:1px solid #586267;border-radius:3px;background:#171c1e}
body.xroute-new-trip .xr-tariff-check input:checked+span{background:#e8b83f;border-color:#e8b83f;box-shadow:inset 0 0 0 3px #171c1e}
body.xroute-new-trip .xr-charter-col[hidden]{display:none!important}
body.xroute-new-trip .xr-route-support-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%}
body.xroute-new-trip .xr-route-support-row .xroute-side-card{min-width:0;margin:0}
body.xroute-new-trip .xr-route-support-row .xroute-map{min-height:250px;height:100%}
body.xroute-new-trip .xr-route-support-row .xroute-route-list{max-height:210px;overflow:auto}
@media(max-width:1180px){
  body.xroute-new-trip .xroute-planner-side{display:block!important}
  body.xroute-new-trip .xr-financial-sidebar{position:static}
}
@media(max-width:760px){
  body.xroute-new-trip .xr-route-support-row{grid-template-columns:1fr}
  body.xroute-new-trip .xr-fin-base label{grid-template-columns:92px minmax(0,1fr)}
}


/* Compact financial sidebar: denser without sacrificing legibility. */
@media(min-width:1181px){
  body.xroute-new-trip .xroute-planner-layout{
    grid-template-columns:minmax(0,1fr) 340px!important;
  }
}
body.xroute-new-trip .xr-financial-sidebar{
  padding:9px 10px!important;
}
body.xroute-new-trip .xr-financial-sidebar .xroute-step-title{
  min-height:24px!important;
  margin-bottom:6px!important;
}
body.xroute-new-trip .xr-financial-sidebar .xroute-step-title>span{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
}
body.xroute-new-trip .xr-fin-base{
  gap:5px!important;
  margin-bottom:9px!important;
}
body.xroute-new-trip .xr-fin-base label{
  grid-template-columns:96px minmax(0,1fr)!important;
  gap:5px!important;
  font-size:10px!important;
}
body.xroute-new-trip .xr-fin-base .xr-money,
body.xroute-new-trip .xr-fin-base .xr-money>input{
  min-height:28px!important;
  height:28px!important;
}
body.xroute-new-trip .xr-tariff-title{
  margin:0 0 4px!important;
  font-size:11px!important;
}
body.xroute-new-trip .xr-tariff-head{
  padding-bottom:2px!important;
  font-size:8px!important;
}
body.xroute-new-trip .xr-tariff-list{
  gap:2px!important;
}
body.xroute-new-trip .xr-tariff-row{
  min-height:26px!important;
}
body.xroute-new-trip .xr-tariff-label{
  font-size:9px!important;
  line-height:1.1!important;
}
body.xroute-new-trip .xr-tariff-unit{
  font-size:10px!important;
}
body.xroute-new-trip .xr-tariff-value{
  height:25px!important;
  min-height:25px!important;
  padding:2px 6px!important;
  font-size:9px!important;
}
body.xroute-new-trip .xr-tariff-check span{
  width:14px!important;
  height:14px!important;
}


/* Quick-add master locations from Route & locaties. */
.xr-location-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:6px;margin-top:9px}
.xr-location-actions .xroute-extra-stop{margin:0!important}
.xr-location-actions .xr-add-location{border-color:#586166!important;background:#171c1e!important;color:#e8eceb!important}
.xr-location-actions .xr-add-location:hover{border-color:#d2a735!important;color:#efc15a!important}
.xr-location-modal{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:18px;background:rgba(3,6,7,.76);backdrop-filter:blur(3px)}
.xr-location-dialog{width:min(620px,100%);border:1px solid #465055;border-radius:9px;background:#101516;color:#eef1ef;box-shadow:0 24px 70px rgba(0,0,0,.62);overflow:hidden}
.xr-location-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 15px;border-bottom:1px solid #30383b}
.xr-location-modal-head b{display:block;font-size:14px}
.xr-location-modal-head small{display:block;margin-top:3px;color:#9ba6a9;font-size:9.5px}
.xr-modal-x{width:30px!important;height:30px!important;min-height:30px!important;padding:0!important;border:1px solid #454f53!important;border-radius:5px!important;background:#171d1f!important;color:#c7cecf!important;font-size:18px!important}
.xr-location-dialog form{padding:14px 15px}
.xr-location-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.xr-location-form-grid label{display:grid;gap:5px;margin:0;font-size:10px;font-weight:700}
.xr-location-form-grid em{color:#efb83f;font-style:normal}
.xr-location-form-grid input{width:100%;min-width:0;height:34px}
.xr-location-check{margin-top:11px;padding:8px 10px;border:1px solid #334348;border-radius:5px;background:#122025;color:#9fc3ce;font-size:9.5px}
.xr-location-check i{margin-right:5px;color:#59badd}
.xr-location-message{margin-top:8px;padding:8px 10px;border-radius:5px;font-size:10px}
.xr-location-message.error{border:1px solid #793d3d;background:#281719;color:#ff9999}
.xr-location-message.success{border:1px solid #296c45;background:#10261a;color:#78dda0}
.xr-location-modal-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:12px}
@media(max-width:620px){.xr-location-form-grid{grid-template-columns:1fr}.xr-location-actions{justify-content:stretch}.xr-location-actions>*{flex:1}}


/* Approved single-column layout for both quick-location dialogs. */
.xr-location-dialog{width:min(520px,100%)!important}
.xr-location-form-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
.xr-location-form-grid label{width:100%!important}
.xr-location-form-grid input{width:100%!important}