/* X-Route calm contemporary palette
   Keeps the existing dark/light toggle and only refines visual styling. */

:root{
  --xr-calm-gold:#e1ab3f;
  --xr-calm-gold-strong:#c98914;
  --xr-calm-blue:#365f83;
  --xr-calm-blue-soft:#eaf3f8;
  --xr-calm-success:#2f7f69;
  --xr-calm-danger:#c54848;
  --xr-calm-radius:10px;
}

html[data-theme="dark"]{
  --xr-bg:#0b1116;
  --xr-sidebar:#0d161e;
  --xr-panel:#111c24;
  --xr-panel2:#15232d;
  --xr-input:#182631;
  --xr-border:#2b3d49;
  --xr-border-soft:#20313b;
  --xr-text:#eef4f7;
  --xr-muted:#9eb0bb;
  --xr-gold:#e4b24d;
  --xr-gold2:#f0c66b;
  --xr-portbase-data-color:#f0bd4f;
}

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .content,
html[data-theme="dark"] .layout{
  background:#0b1116!important;
  color:#eef4f7!important;
}

html[data-theme="dark"] .layout>aside{
  background:linear-gradient(180deg,#0f1a23 0%,#0b141b 100%)!important;
  border-color:#253743!important;
}

html[data-theme="dark"] header{
  background:#0f1921!important;
  border-color:#263844!important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .planner,
html[data-theme="dark"] .driver-trip,
html[data-theme="dark"] .editor-card,
html[data-theme="dark"] .customer-tab-workspace,
html[data-theme="dark"] .settings-workspace,
html[data-theme="dark"] .reference-editor form,
html[data-theme="dark"] .legacy-section,
html[data-theme="dark"] .finance-block,
html[data-theme="dark"] .xr-card,
html[data-theme="dark"] .xroute-side-card{
  background:linear-gradient(180deg,#13202a 0%,#101a22 100%)!important;
  border-color:#304451!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#17252f!important;
  border-color:#3b5260!important;
  color:#eef4f7!important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:#d9aa47!important;
  box-shadow:0 0 0 3px rgba(217,170,71,.10)!important;
}

html[data-theme="dark"] .nav-item:hover{
  background:#16232c!important;
  border-color:#253947!important;
}

html[data-theme="dark"] .nav-item.active{
  background:linear-gradient(135deg,#e4b655,#d79a2d)!important;
  border-color:#e7ba5b!important;
  box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .language-current{
  background:#14212a!important;
  border-color:#314653!important;
}

html[data-theme="light"]{
  --xr-bg:#f4f8fa;
  --xr-sidebar:#fbfdfe;
  --xr-panel:#ffffff;
  --xr-panel2:#f8fbfc;
  --xr-input:#ffffff;
  --xr-border:#d8e3e8;
  --xr-border-soft:#e6eef2;
  --xr-text:#183047;
  --xr-muted:#667f90;
  --xr-gold:#d99b21;
  --xr-gold2:#efbf55;
  --xr-portbase-data-color:#9a6500;
}

html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] .content,
html[data-theme="light"] .layout{
  background:#f4f8fa!important;
  color:#183047!important;
}

html[data-theme="light"] .layout>aside{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfc 100%)!important;
  border-right:1px solid #dce6eb!important;
  box-shadow:8px 0 30px rgba(30,63,86,.035)!important;
}

html[data-theme="light"] header{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid #dce6eb!important;
  box-shadow:0 4px 18px rgba(37,67,87,.035)!important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] label,
html[data-theme="light"] .user-copy b{
  color:#173047!important;
}

html[data-theme="light"] .muted,
html[data-theme="light"] small,
html[data-theme="light"] .user-copy small{
  color:#6f8492!important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .planner,
html[data-theme="light"] .driver-trip,
html[data-theme="light"] .editor-card,
html[data-theme="light"] .customer-tab-workspace,
html[data-theme="light"] .settings-workspace,
html[data-theme="light"] .reference-editor form,
html[data-theme="light"] .legacy-section,
html[data-theme="light"] .finance-block,
html[data-theme="light"] .xr-card,
html[data-theme="light"] .xroute-side-card{
  background:#ffffff!important;
  border-color:#d9e4e9!important;
  box-shadow:0 8px 26px rgba(39,73,95,.045)!important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background:#fbfdfe!important;
  border-color:#cddbe2!important;
  color:#1d3549!important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus{
  border-color:#6e9ab9!important;
  box-shadow:0 0 0 3px rgba(82,133,169,.10)!important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{
  color:#94a6b1!important;
}

html[data-theme="light"] input[readonly],
html[data-theme="light"] input:disabled,
html[data-theme="light"] select:disabled{
  background:#f0f5f7!important;
  color:#718693!important;
}

html[data-theme="light"] .nav-item{
  color:#334f63!important;
}

html[data-theme="light"] .nav-item i{
  color:#668397!important;
}

html[data-theme="light"] .nav-item:hover{
  background:#eef5f8!important;
  border-color:#d8e7ed!important;
  color:#173047!important;
}

html[data-theme="light"] .nav-item.active{
  background:linear-gradient(135deg,#fff1c8 0%,#f8d77e 100%)!important;
  border-color:#ecc25d!important;
  color:#402f08!important;
  box-shadow:0 6px 18px rgba(188,139,35,.12)!important;
}

html[data-theme="light"] .nav-item.active i{
  color:#7d5b09!important;
}

html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .language-current{
  background:#f8fbfc!important;
  border-color:#d5e1e6!important;
  color:#29455a!important;
}

html[data-theme="light"] .theme-track{
  background:#dfe9ee!important;
  border-color:#ccd9df!important;
}

html[data-theme="light"] .language-menu,
html[data-theme="light"] [class*="-results"],
html[data-theme="light"] [class*="-menu"]{
  background:#ffffff!important;
  border-color:#d5e1e6!important;
  box-shadow:0 16px 38px rgba(32,65,86,.12)!important;
}

html[data-theme="light"] table{
  background:#fff!important;
}

html[data-theme="light"] th{
  background:#f0f6f8!important;
  color:#4c6678!important;
  border-color:#d8e4e9!important;
}

html[data-theme="light"] td{
  background:#fff!important;
  color:#213b4f!important;
  border-color:#e1e9ed!important;
}

html[data-theme="light"] tr:hover td{
  background:#f8fbfc!important;
}

html[data-theme="light"] .badge{
  background:#edf7f3!important;
  color:#316f5f!important;
  border-color:#c7e4d9!important;
}

/* Softer cards, controls and actions in both modes */
.card,.planner,.driver-trip,.editor-card,.xr-card,.xroute-side-card,
.settings-workspace,.customer-tab-workspace{
  border-radius:var(--xr-calm-radius)!important;
}

button,.btn,.smallbtn,input,select,textarea{
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}

button:not(.theme-toggle):not(.language-current):not(.nav-item),
.btn{
  border-radius:8px!important;
}

.btn:hover,
button:not(.theme-toggle):not(.language-current):not(.nav-item):hover{
  transform:translateY(-1px);
}

html[data-theme="light"] button:not(.smallbtn):not(.theme-toggle):not(.language-current):not(.nav-item),
html[data-theme="light"] .btn{
  background:linear-gradient(180deg,#f6ce74,#e5ae42)!important;
  border-color:#e1b154!important;
  color:#352707!important;
  box-shadow:0 4px 12px rgba(194,143,33,.10)!important;
}

html[data-theme="light"] .smallbtn{
  background:#ffffff!important;
  border-color:#cddbe2!important;
  color:#35566c!important;
}

html[data-theme="light"] .smallbtn:hover{
  background:#eef5f8!important;
}

/* New trip page refinements to match the approved light mock-up */
html[data-theme="light"] body.xroute-new-trip .xroute-new-intro h1{
  color:#173047!important;
}

html[data-theme="light"] body.xroute-new-trip .xroute-new-intro p{
  color:#6d8290!important;
}

html[data-theme="light"] body.xroute-new-trip .xr-card,
html[data-theme="light"] body.xroute-new-trip .xroute-side-card{
  background:#ffffff!important;
  border-color:#d9e4e9!important;
}

html[data-theme="light"] body.xroute-new-trip .xroute-step-title{
  color:#183047!important;
}

html[data-theme="light"] body.xroute-new-trip .xroute-step-title span{
  background:linear-gradient(145deg,#fff3ce,#f6d37b)!important;
  color:#8a5d08!important;
}

html[data-theme="light"] body.xroute-new-trip .xr-route-card .xroute-stop{
  background:#f9fcfd!important;
  border-color:#dbe6ea!important;
}

html[data-theme="light"] body.xroute-new-trip .xr-route-card .xroute-stop-num{
  background:#e9f4fa!important;
  border-color:#c9dfeb!important;
  color:#2b678d!important;
}

html[data-theme="light"] body.xroute-new-trip .xr-route-card .xr-location-actions :is(.xr-add-location,.xroute-extra-stop){
  background:#fffaf0!important;
  border-color:#e6c875!important;
  color:#815b07!important;
}

html[data-theme="light"] body.xroute-new-trip .xr-financial-sidebar .xr-tariff-check span{
  background:#ffffff!important;
  border-color:#b9cbd4!important;
}

html[data-theme="light"] body.xroute-new-trip .xr-financial-sidebar .xr-tariff-check input:checked+span{
  background:#e9b13e!important;
  border-color:#e9b13e!important;
  box-shadow:inset 0 0 0 3px #ffffff!important;
}

/* Dark mode keeps the premium blue-black appearance shown in the first concept */
html[data-theme="dark"] body.xroute-new-trip .xr-route-card .xroute-stop{
  background:#13202a!important;
  border-color:#2d4350!important;
}

html[data-theme="dark"] body.xroute-new-trip .xr-route-card .xroute-stop-num{
  background:linear-gradient(145deg,rgba(228,178,77,.20),rgba(228,178,77,.08))!important;
  border-color:rgba(228,178,77,.45)!important;
  color:#edc265!important;
}