/* Shared screen theme. Existing job states and printed documents keep their colours. */
@media screen {
  :root {
    --metal-black: #0b0d0f;
    --metal-line: #575c62;
    --metal-text: #f4f5f6;
    --metal-muted: #c2c7cd;
    --metal-red: #ed3945;
    --metal-grain: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px);
    --metal-panel: linear-gradient(112deg, #34383d, #23262a 35%, #15171a 79%);
    --metal-control: linear-gradient(180deg, #373b40, #22252a 52%, #17191c);
    --metal-red-face: linear-gradient(180deg, #ad2331, #911622 48%, #620c15);
    --metal-heading: linear-gradient(113deg, transparent 0 77%, #ffffff12 77% 77.4%, transparent 77.4% 79%, #a61a2780 79% 81%, transparent 81%),
                     var(--metal-grain), linear-gradient(109deg, #121417 8%, #30353a 72%, #4d535a);
    --metal-backdrop: radial-gradient(ellipse at top right, #272b30, #111316 51%, var(--metal-black) 85%);
    --metal-radius: 4px;
  }

  body.motorsport-app,
  body.motorsport-reception,
  body.motorsport-tracking,
  body.t4y-public-display.t4y-tv {
    background: var(--metal-backdrop) !important;
    color: var(--metal-text);
  }

  body.motorsport-app :is(#app, #dashboard, #board, #customer),
  body.t4y-public-display :is(#app, #board, #customer) {
    background: transparent !important;
  }

  body.motorsport-app > header,
  body.motorsport-reception > header,
  body.motorsport-tracking > header,
  body.t4y-public-display .tv-banner {
    background: var(--metal-heading) !important;
    border: 1px solid var(--metal-line);
    border-bottom: 2px solid var(--metal-red);
    border-image: none;
    border-radius: var(--metal-radius);
    box-shadow: inset 0 1px #ffffff24, 0 6px 18px #0006;
  }

  body.motorsport-app .workshop-overview,
  body.motorsport-app :is(#login, #pinUnlock, #recovery),
  body.t4y-public-display .tv-standby {
    background: var(--metal-grain),
                linear-gradient(105deg, #15171afc 9%, #262a2fea 50%, #17191e58 95%),
                url("workshop-tyre-photo.jpg") center right / cover no-repeat var(--metal-black);
    border: 1px solid var(--metal-line);
    border-left: 4px solid var(--metal-red);
    border-radius: var(--metal-radius);
    box-shadow: inset 0 1px #ffffff25, 0 9px 24px #0006;
  }

  body.motorsport-app #menu {
    background: linear-gradient(180deg, #1c1f22, #101215) !important;
    border-bottom: 1px solid var(--metal-line) !important;
  }

  body.motorsport-app :is(#workshopTools summary, #workshopTools[open]),
  body.motorsport-app :is(.booking-day, .archive-day, .archive-shell > summary, .archive-top,
    .absence-panel, .absence-record, .eodcards > *, .job-payment, .stock-sale,
    .vehicle-picker-list, .vehicle-picker-option),
  body.motorsport-app #displayRotation .rotation-entry,
  body.motorsport-app #slots :is(.reference-card, .lovable-empty),
  body.motorsport-reception :is(.reception-day, .reception-invoice-row),
  body.motorsport-tracking :is(.card, .error, .thankyou),
  body.t4y-public-display.t4y-tv .reception-card.tv-page-card {
    background: var(--metal-grain), var(--metal-panel) !important;
    border-color: var(--metal-line) !important;
    border-radius: var(--metal-radius) !important;
    box-shadow: inset 0 1px #ffffff26, 0 5px 13px #0005;
  }

  body.motorsport-app #slots .reference-card:not(.is-done),
  body.t4y-public-display.t4y-tv .reception-card.tv-page-card {
    border-left: 4px solid var(--metal-red) !important;
  }

  body.motorsport-app #slots .reference-planned,
  body.motorsport-app #slots .reference-share,
  body.motorsport-tracking .detail,
  body.t4y-public-display .work-panel {
    border-color: var(--metal-line) !important;
    border-radius: var(--metal-radius);
  }

  body.motorsport-app #slots .reference-planned,
  body.t4y-public-display .work-panel {
    background: linear-gradient(110deg, #111316, #23262b);
  }

  body.motorsport-app :is(#menu button, .tabs button, .home-bottom-actions button, .booking-actions button),
  body.motorsport-reception .reception-back {
    background: var(--metal-control) !important;
    color: var(--metal-text) !important;
    border: 1px solid var(--metal-line) !important;
    border-radius: var(--metal-radius) !important;
  }

  body.motorsport-app :is(#menu button:hover, #menu button.selected, .tabs button.selected,
    .home-bottom-actions button:hover, .booking-actions button.red, button.red,
    button.primary, #signin, #pinSubmit, #displayRotation button[type="submit"]),
  body.motorsport-reception button:not(.selected) {
    background: var(--metal-red-face) !important;
    color: white !important;
    border-color: #e8656d !important;
    border-radius: var(--metal-radius) !important;
    box-shadow: inset 0 1px #ffffff2e;
  }

  body.motorsport-app :is(button, select, textarea, input:not([type="checkbox"]):not([type="radio"])),
  body.motorsport-reception :is(button, input) {
    border-radius: var(--metal-radius);
  }

  body.motorsport-app :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])),
  body.motorsport-reception input:not([type="checkbox"]) {
    background-color: #101216;
    border-color: #686e76;
  }

  body.motorsport-app :is(button, summary, input, textarea, select, a):focus-visible,
  body.motorsport-reception :is(button, input, a):focus-visible {
    outline: 2px solid #ff8991;
    outline-offset: 2px;
  }

  body.t4y-public-display :is(.tv-brand, .live-sub, .tv-vehicle-line, .tv-work-label, .tv-standby-message),
  body.motorsport-app .booking-day summary span {
    color: var(--metal-muted);
  }

  #customer-advert {
    background: var(--metal-backdrop);
    border-bottom-color: var(--metal-red);
  }

  /* Widescreen uploads include their headline in the artwork. Keep the title available to assistive technology. */
  #customer-advert.advert-upload {
    grid-template-rows: minmax(0, 1fr);
    padding: 0;
    gap: 0;
  }

  #customer-advert.advert-upload .advert-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}