/* Illustrations belong to workflow cards and rails. The page background stays user-selected. */
#cleanCrmApp {
  --art-form: url('./illustrations-20261006/form-light.webp');
  --art-planned: url('./illustrations-20261006/planned-light.webp');
  --art-client: url('./illustrations-20261006/client-light.webp');
  --art-fleet: url('./illustrations-20261006/fleet-light.webp');
  --art-chat: url('./illustrations-20261006/chat-light.webp');
  --art-panel: #fbfdff;
  --art-wash: rgba(250,253,255,.77);
  --art-top-wash: rgba(250,253,255,.96);
  --art-line: rgba(49,113,148,.22);
  --art-edge: #5ba9b6;
  --art-rail: #f2f8fa;
  --art-rail-position: right;
  --art-rail-wash: rgba(247,252,253,.56);
  --art-route-position: 74.03%;
  --art-history-position: 76.0%;
  --art-execution-position: 59.04%;
  --art-banner-x: -700px;
  --art-shadow: 0 5px 18px rgba(28,69,91,.055);
}
#cleanCrmApp:is([data-ui-mode='atmosphere'],[data-ui-mode='watersphere']) {
  --art-form: url('./illustrations-20261006/form-dark.webp');
  --art-planned: url('./illustrations-20261006/planned-dark.webp');
  --art-client: url('./illustrations-20261006/client-dark.webp');
  --art-fleet: url('./illustrations-20261006/fleet-dark.webp');
  --art-chat: url('./illustrations-20261006/chat-dark.webp');
  --art-panel: #071820;
  --art-wash: rgba(6,21,29,.63);
  --art-top-wash: rgba(6,21,29,.96);
  --art-line: rgba(111,203,215,.28);
  --art-edge: #72cad4;
  --art-rail: #09212b;
  --art-rail-position: left;
  --art-rail-wash: rgba(5,20,29,.65);
  --art-route-position: 25.97%;
  --art-history-position: 25.0%;
  --art-execution-position: 3.49%;
  --art-banner-x: -250px;
  --art-shadow: 0 7px 22px rgba(0,10,18,.18);
}

/* Filled form: quiet centre and fine lines around the edges, as in sheets 55/59. */
#cleanCrmApp [data-block-id='requests.dispatch'] {
  background-color: var(--art-panel) !important;
  background-image: linear-gradient(var(--art-top-wash),var(--art-wash)), var(--art-form) !important;
  background-size: cover;
  background-position: center;
  border-color: var(--art-line) !important;
  box-shadow: var(--art-shadow);
}
#cleanCrmApp [data-block-id='requests.dispatch'] > .exp-head {
  background: transparent;
  border-color: var(--art-line);
}

/* Illustration lives in the open content panel, never over an actual map. */
#cleanCrmApp .request-detail-accordion__item[data-accordion-id='execution'] .request-detail-accordion__panel-inner {
  background-color: var(--art-panel) !important;
  background-image: linear-gradient(var(--art-top-wash) 0%,var(--art-wash) 62%,transparent 100%),var(--art-planned) !important;
  background-size: cover;
  background-position: center bottom;
}
#cleanCrmApp .request-detail-accordion__item[data-accordion-id='history'] .request-detail-accordion__panel-inner,
#cleanCrmApp .co-detail-accordion__item[data-accordion-id='history'] .co-detail-accordion__panel-inner {
  background-color: var(--art-panel);
  background-image: linear-gradient(var(--art-top-wash),var(--art-wash)),var(--art-form);
  background-size: cover;
  background-position: center;
}
#cleanCrmApp .request-detail-accordion__item[data-accordion-id='chat'] .request-detail-accordion__panel-inner,
#cleanCrmApp .co-detail-accordion__item[data-accordion-id='chat'] .co-detail-accordion__panel-inner {
  background-color: var(--art-panel);
  background-image: linear-gradient(var(--art-top-wash),var(--art-wash)),var(--art-chat);
  background-size: cover;
}
#cleanCrmApp [data-block-id='co.obj.info'] {
  background-color: var(--art-panel) !important;
  background-image: linear-gradient(var(--art-top-wash),var(--art-wash)),var(--art-client) !important;
  background-position: right bottom;
  background-size: cover;
  border-color: var(--art-line) !important;
}

/* Narrow accordion tabs keep their real titles, icons, unread counts and hit areas. */
#cleanCrmApp :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger) {
  isolation: isolate;
  background-color: var(--art-rail) !important;
  box-shadow: inset 1px 0 var(--art-line),inset -1px 0 var(--art-line);
}
#cleanCrmApp :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--art-rail-wash),var(--art-rail-wash)),url('./illustrations-20261006/rail-pair.webp');
  background-size: auto,200% 100%;
  background-position: center,var(--art-rail-position) center;
  background-repeat: no-repeat;
}
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item) {
  --art-tab-accent: #3796a9;
}
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item)[data-accordion-id='map'] > :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger)::before {
  background-image: linear-gradient(var(--art-rail-wash),var(--art-rail-wash)),url('./illustrations-20261006/rail-map.webp');
  background-size: auto,665% 100%;
  background-position: center,var(--art-route-position) center;
}
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item):is([data-accordion-id='history'],[data-accordion-id='requests']) > :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger)::before {
  background-image: linear-gradient(var(--art-rail-wash),var(--art-rail-wash)),url('./illustrations-20261006/rail-history.webp');
  background-size: auto,853.33% 100%;
  background-position: center,var(--art-history-position) center;
}
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item):is([data-accordion-id='execution'],[data-accordion-id='schedule']) > :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger)::before {
  background-image: linear-gradient(var(--art-rail-wash),var(--art-rail-wash)),url('./illustrations-20261006/rail-execution.webp');
  background-size: auto,966.04% 100%;
  background-position: center,var(--art-execution-position) center;
}
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item)[data-accordion-id='execution'] { --art-tab-accent: #24a077; }
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item)[data-accordion-id='additional'] { --art-tab-accent: #8a78b6; }
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item)[data-accordion-id='agreement'] { --art-tab-accent: #de982e; }
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item)[data-accordion-id='chat'] { --art-tab-accent: #627cd0; }
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item)[data-accordion-id='history'] { --art-tab-accent: #7795b0; }
#cleanCrmApp :is(.request-detail-accordion__item,.co-detail-accordion__item).is-open > :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger),
#cleanCrmApp :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger):hover {
  box-shadow: inset 3px 0 var(--art-tab-accent),inset -1px 0 var(--art-line);
}
#cleanCrmApp :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger):focus-visible {
  outline: 2px solid var(--art-tab-accent);
  outline-offset: -3px;
}

/* Confirmation retains the existing warning/success colours; its header gets a quiet seal. */
#cleanCrmApp [data-block-id='requests.confirm'] {
  background-color: var(--art-panel) !important;
  background-image: linear-gradient(var(--art-top-wash),var(--art-wash)),var(--art-form) !important;
  background-size: cover;
  background-position: center;
  border-color: var(--art-line) !important;
}
#cleanCrmApp [data-block-id='requests.confirm'] > .exp-head {
  position: relative;
  isolation: isolate;
  background-color: var(--art-panel);
  border-color: var(--art-line);
}
#cleanCrmApp [data-block-id='requests.confirm'] > .exp-head::after {
  content: '';
  position: absolute;
  pointer-events: none;
  right: 12px;
  top: 7px;
  width: 24px;
  height: 24px;
  opacity: .28;
  border: 1px solid var(--art-edge);
  border-radius: 50%;
  background: radial-gradient(circle,transparent 40%,color-mix(in srgb,var(--art-edge) 12%,transparent) 42%);
}

/* Section artwork is contained in the existing summary cards. */
#cleanCrmApp .fleet-page .fleet-summary {
  background-color: var(--art-panel);
  background-image: linear-gradient(90deg,var(--art-top-wash) 55%,var(--art-wash)),var(--art-fleet);
  background-size: auto,720px auto;
  background-position: right bottom;
  background-repeat: no-repeat;
}
#cleanCrmApp .journal-page .journal-intro {
  background-color: var(--art-panel);
  background-image: linear-gradient(90deg,var(--art-top-wash) 65%,var(--art-wash)),var(--art-form);
  background-size: cover;
  background-position: right center;
}
/* Crop only the illustration area of the reference sheet with CSS; headings stay real text. */
#cleanCrmApp :is([data-block-id='requests.dispatch'],[data-block-id='co.obj.info'],[data-block-id='requests.confirm']) > .exp-head {
  position: relative;
  isolation: isolate;
}
#cleanCrmApp :is([data-block-id='requests.dispatch'],[data-block-id='co.obj.info'],[data-block-id='requests.confirm']) > .exp-head::before {
  content: '';
  position: absolute;
  inset: 0 0 0 auto;
  width: 200px;
  max-width: 43%;
  z-index: -1;
  pointer-events: none;
  opacity: .52;
  background-image: url('./illustrations-20261006/banners.webp');
  background-size: 900px 600px;
  background-repeat: no-repeat;
  background-position: var(--art-banner-x) -28px;
  mask-image: linear-gradient(90deg,transparent,#000 55%);
}
#cleanCrmApp [data-block-id='co.obj.info'] > .exp-head::before {
  background-position: var(--art-banner-x) -239px;
}
#cleanCrmApp [data-block-id='requests.confirm'] > .exp-head::before {
  background-position: var(--art-banner-x) -386px;
}

/* The decorative layers do not change geometry or input handling at smaller widths. */
@media (max-width: 760px) {
  #cleanCrmApp :is([data-block-id='requests.dispatch'],[data-block-id='co.obj.info']) {
    background-size: auto,cover;
  }
  #cleanCrmApp .request-detail-accordion__item[data-accordion-id='execution'] .request-detail-accordion__panel-inner {
    background-image: linear-gradient(var(--art-top-wash),var(--art-wash)),var(--art-planned) !important;
  }
}
@media print {
  #cleanCrmApp :is([data-block-id='requests.dispatch'],[data-block-id='requests.confirm'],[data-block-id='co.obj.info'],.request-detail-accordion__panel-inner,.co-detail-accordion__panel-inner) {
    background: white !important;
  }
  #cleanCrmApp :is(.fleet-summary,.journal-intro) { background: white !important; }
  #cleanCrmApp :is(.request-detail-accordion__trigger,.co-detail-accordion__trigger)::before,
  #cleanCrmApp :is([data-block-id='requests.dispatch'],[data-block-id='co.obj.info'],[data-block-id='requests.confirm']) > .exp-head::before,
  #cleanCrmApp [data-block-id='requests.confirm'] > .exp-head::after { display: none; }
}