/* Work orders and PM, the jobs views on Maintenance. Other tabs stay as they are. */

html:is(
  :has(#screen-cmms.active .cm-tab[data-tab="wo"].on),
  :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)
) { background: #faf9f6; }

body:not(.signin):is(
  :has(#screen-cmms.active .cm-tab[data-tab="wo"].on),
  :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)
) {
  background: #faf9f6;
  color: #111;
}

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)),
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet {
  font-family: "FT Signin", system-ui, sans-serif;
  font-size: 16px;
  color: #111;
}

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-head h1,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) h2,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) h3,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet h2 {
  color: #111;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-head h1 { font-size: 28px; }

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-muted,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-empty,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-num,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-kv .k,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .cm-muted {
  color: #5c564c;
}

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) :focus-visible,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet :focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .ux-skel i { animation: none; background: #f3f1ec; }

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-tabs { background: #faf9f6; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-tab { color: #5c564c; background: transparent; border-color: transparent; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-tab.on { color: #111; background: #fff; border-color: #e4e1da; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-tab.on::after { background: #111; }

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-pill,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-pill {
  background: #f3f1ec;
  color: #5c564c;
  border-color: #e4e1da;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-pill.accent,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-pill.accent {
  color: #111;
  background: #fff;
  border-color: #111;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-pill.green,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-pill.green { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-pill.red,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-pill.red { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-pill.amber,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-pill.amber { color: #92400e; background: #fef3c7; border-color: #fde68a; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-pill.demo,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-pill.demo { color: #5c564c; background: #f3f1ec; border-color: #e4e1da; }

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-card,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-sec,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-banner,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-kpi,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-cal .d,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .cm-sec,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .cm-card {
  background: #fff;
  background-image: none;
  border: 1px solid #e4e1da;
  color: #111;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-card .t,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-card.sel { color: #111; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-card.sel { border-color: #111; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-hist,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-comment,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-task { border-color: #e4e1da; color: #111; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-prio.critical { background: #ef4444; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-prio.high { background: #f59e0b; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-prio.med,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-prio.low { background: #e4e1da; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-task .box {
  background: #fff;
  border-color: #e4e1da;
  color: #111;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-task.done .box {
  background: #f3f1ec;
  border-color: #111;
  color: #111;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-loto { border-color: #fde68a; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-loto h3 { color: #92400e; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-wo-link { color: #111; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-cal .d.today { border-color: #111; }
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-cal .ev,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-cal .ev.wo {
  background: #f3f1ec;
  color: #111;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-chip {
  background: #fff;
  color: #5c564c;
  border: 1px solid #e4e1da;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-chip.on {
  color: #111;
  background: #f3f1ec;
  border-color: #111;
}

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) input,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) select,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) textarea,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet input,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet select,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet textarea {
  background: #fff;
  border: 1px solid #e4e1da;
  color: #111;
}

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-head,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-bar,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-actions,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet-actions {
  flex-direction: column;
  align-items: stretch;
}

#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) a.btn,
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) label.btn,
html.ftf-ux_polish #screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn {
  width: 100%;
  min-height: 52px;
  background: #fff;
  color: #111;
  border: 1px solid #e4e1da;
  border-radius: 12px;
  box-shadow: none;
  filter: none;
  font-weight: 650;
  transition: transform 100ms ease-out;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn:hover,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn:hover {
  filter: none;
  transform: none;
}
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn:active,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn:active {
  transform: scale(0.98);
}

/* One teal: + New WO on the list, the detail's forward action when a job is open, + PM on that tab, or the open sheet's confirm. */
#screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn-primary {
  background: #fff;
  color: #111;
  border: 1px solid #e4e1da;
}
#screen-cmms:has(.cm-tab[data-tab="wo"].on) #cm-new,
#screen-cmms:has(.cm-tab[data-tab="pm"].on) #cm-pm-new,
#screen-cmms:has(.cm-tab[data-tab="wo"].on) #cm-wodetail .btn-primary,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
#screen-cmms:has(.cm-tab[data-tab="wo"].on) #cm-new:hover,
#screen-cmms:has(.cm-tab[data-tab="pm"].on) #cm-pm-new:hover,
#screen-cmms:has(.cm-tab[data-tab="wo"].on) #cm-wodetail .btn-primary:hover,
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn-primary:hover {
  background: #0c655e;
  border-color: #0c655e;
  color: #fff;
}
body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="wo"].on) #cm-new,
body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="pm"].on) #cm-pm-new,
#screen-cmms:has(.cm-tab[data-tab="wo"].on):has(#cm-wodetail .btn-primary) #cm-new,
body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="wo"].on) #cm-new:hover,
#screen-cmms:has(.cm-tab[data-tab="wo"].on):has(#cm-wodetail .btn-primary) #cm-new:hover {
  background: #fff;
  color: #111;
  border-color: #e4e1da;
}

body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet-actions { background: #fff; }
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet-back {
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet {
  background: #fff;
  color: #111;
  border: 1px solid #e4e1da;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
  animation: none;
}
body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet label { color: #5c564c; }

@media (min-width: 900px) {
  #screen-cmms.active:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) { max-width: 1120px; }
  #screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .cm-list {
    gap: 8px;
  }
  #screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn,
  html.ftf-ux_polish #screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn,
  body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn {
    min-height: 46px;
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }
  #screen-cmms:has(.cm-tab[data-tab="pm"].on) .cm-list {
    gap: 0;
    background: #fff;
    border: 1px solid #e4e1da;
    border-radius: 12px;
    overflow: hidden;
  }
  #screen-cmms:has(.cm-tab[data-tab="pm"].on) .cm-list .cm-card {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #e4e1da;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #screen-cmms:is(:has(.cm-tab[data-tab="wo"].on), :has(.cm-tab[data-tab="pm"].on)) .btn,
  body:is(:has(#screen-cmms.active .cm-tab[data-tab="wo"].on), :has(#screen-cmms.active .cm-tab[data-tab="pm"].on)) .cm-sheet .btn { transition: none; }
}