/* Parts tab only. Work orders and the other Maintenance tabs stay as they are. */

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

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

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

#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-muted,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-empty,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-num,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .cm-muted {
  color: #5c564c;
  font-size: 16px;
}

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

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

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

#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-card,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-sec,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-banner,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-kpi,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .cm-sec,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .cm-kpi {
  background: #fff;
  background-image: none;
  border: 1px solid #e4e1da;
  color: #111;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
}
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-banner.demo { border-color: #e4e1da; }
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-card .t { color: #111; font-size: 16px; }
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-kpi .n { color: #111; }
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-kpi .l,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-kpi .l { color: #5c564c; }

#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-chip {
  background: #fff;
  color: #5c564c;
  border: 1px solid #e4e1da;
}
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-chip.on {
  color: #111;
  background: #f3f1ec;
  border-color: #111;
}

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

#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-head,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-bar {
  flex-direction: column;
  align-items: stretch;
}
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) a.btn,
html.ftf-ux_polish #screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].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, background 100ms ease-out;
}
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn:hover,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .btn:hover { filter: none; transform: none; }
#screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn:active,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .btn:active { transform: scale(0.98); }

#screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn-primary { background: #fff; color: #111; border: 1px solid #e4e1da; }
#screen-cmms:has(.cm-tab[data-tab="parts"].on) #cm-p-new,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) #cm-r-new,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .btn-primary {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}
#screen-cmms:has(.cm-tab[data-tab="parts"].on) #cm-p-new:hover,
#screen-cmms:has(.cm-tab[data-tab="parts"].on) #cm-r-new:hover,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].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="parts"].on) #cm-p-new,
body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="parts"].on) #cm-r-new,
body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="parts"].on) #cm-p-new:hover,
body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="parts"].on) #cm-r-new:hover {
  background: #fff;
  color: #111;
  border-color: #e4e1da;
}

#screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-actions,
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet-actions {
  flex-direction: column;
  align-items: stretch;
}
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet-actions { background: #fff; }
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet-back {
  background: rgba(17, 17, 17, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(#screen-cmms.active .cm-tab[data-tab="parts"].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:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet label { color: #5c564c; }

@media (min-width: 900px) {
  #screen-cmms.active:has(.cm-tab[data-tab="parts"].on) { max-width: 1120px; }
  #screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-list {
    gap: 0;
    background: #fff;
    border: 1px solid #e4e1da;
    border-radius: 12px;
    overflow: hidden;
  }
  #screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-list .cm-card {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #e4e1da;
    box-shadow: none;
  }
  #screen-cmms:has(.cm-tab[data-tab="parts"].on) .cm-list .cm-card:last-child { border-bottom: 0; }
  #screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn,
  html.ftf-ux_polish #screen-cmms:has(.cm-tab[data-tab="parts"].on) .btn,
  body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet .btn {
    min-height: 46px;
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
  }
  /* List stays visible beside the part detail. */
  body:has(.cm-sheet):has(#screen-cmms.active .cm-tab[data-tab="parts"].on) #screen-cmms {
    padding-right: min(440px, 42vw);
    box-sizing: border-box;
  }
  body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet-back {
    background: transparent;
    align-items: stretch;
    justify-content: flex-end;
    padding-left: 240px;
  }
  body:has(#screen-cmms.active .cm-tab[data-tab="parts"].on) .cm-sheet {
    width: min(440px, 42vw);
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-left: 1px solid #e4e1da;
    box-shadow: none;
  }
}

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