:root {
  --ink: #183432;
  --ink-strong: #0c2928;
  --muted: #72827e;
  --muted-2: #95a29e;
  --canvas: #f3f5f1;
  --canvas-deep: #e9ede7;
  --surface: #ffffff;
  --line: #e3e8e2;
  --line-strong: #d4ddd6;
  --teal: #139d8e;
  --teal-deep: #0c776d;
  --teal-soft: #e8f7f3;
  --mint: #a9efd8;
  --amber: #d68f27;
  --amber-soft: #fff5e5;
  --red: #d3604e;
  --red-soft: #fff0ed;
  --blue: #5783b8;
  --blue-soft: #edf4fc;
  --shadow: 0 10px 36px rgba(18, 54, 48, 0.06);
  --shadow-hover: 0 18px 46px rgba(18, 54, 48, 0.11);
  --radius: 16px;
  --radius-lg: 22px;
  --font: "Aptos", "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--canvas);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.modal-open {
  overflow: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid rgba(19, 157, 142, 0.2);
  outline-offset: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

svg {
  display: block;
}

.icon {
  flex: none;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 238px;
  padding: 24px 16px 18px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 10% 0%, rgba(46, 151, 129, 0.18), transparent 28%),
    linear-gradient(180deg, #0e2d2b 0%, #0a2423 100%);
  color: #e8f3ef;
  overflow: hidden;
}

.sidebar::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  left: -95px;
  bottom: 90px;
  border: 1px solid rgba(126, 210, 190, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(126, 210, 190, 0.025),
    0 0 0 76px rgba(126, 210, 190, 0.018);
  pointer-events: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 45px;
  padding: 0 8px;
  color: #fff;
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #93e8d5;
  background: rgba(111, 226, 199, 0.1);
  border: 1px solid rgba(170, 239, 216, 0.16);
  border-radius: 12px;
}

.brand-mark svg {
  width: 32px;
  height: 32px;
}

.brand-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-copy strong {
  letter-spacing: 0.05em;
  font-size: 20px;
  font-weight: 700;
}

.brand-copy small {
  color: #76a397;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.tenant-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 21px;
  padding: 11px 12px;
  color: #dcece7;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  cursor: pointer;
}

.tenant-switcher .tenant-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #95e4d0;
  background: rgba(115, 217, 192, 0.09);
}

.tenant-switcher > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tenant-switcher strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.tenant-switcher small {
  color: #789d94;
  font-size: 14px;
}

.tenant-switcher > svg {
  color: #688f86;
}

.side-nav {
  position: relative;
  z-index: 1;
}

.nav-label {
  padding: 0 12px 8px;
  color: #5f877e;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.nav-label-secondary {
  margin-top: 16px;
}

.nav-item {
  position: relative;
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: #9ab5ae;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: 160ms ease;
}

.nav-item:hover {
  color: #e8f6f2;
  background: rgba(255, 255, 255, 0.045);
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(37, 165, 143, 0.28), rgba(37, 165, 143, 0.12));
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: #78dcc4;
  box-shadow: 0 0 14px rgba(120, 220, 196, 0.5);
}

.nav-icon {
  width: 21px;
  display: grid;
  place-items: center;
}

.nav-item > span:nth-child(2) {
  flex: 1;
  font-size: 15px;
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #d3f9ef;
  background: rgba(68, 190, 164, 0.2);
  font-size: 14px;
}

.side-support {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  margin-bottom: 14px;
  padding: 11px;
  background: rgba(169, 239, 216, 0.06);
  border: 1px solid rgba(169, 239, 216, 0.09);
  border-radius: 13px;
}

.support-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #92dfcc;
  background: rgba(169, 239, 216, 0.08);
}

.side-support > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.side-support strong {
  font-size: 14.5px;
  font-weight: 500;
}

.side-support small {
  color: #6e948b;
  font-size: 13px;
  white-space: nowrap;
}

.side-support button,
.side-user button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #87a79f;
  background: transparent;
  cursor: pointer;
}

.side-support button:hover,
.side-user button:hover {
  color: white;
  background: rgba(255, 255, 255, 0.06);
}

.side-user {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.side-user > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.side-user strong {
  font-size: 15px;
  font-weight: 500;
}

.side-user small {
  color: #718f88;
  font-size: 14px;
}

.avatar {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #174039;
  background: linear-gradient(135deg, #b6eadc, #7ed8c2);
  font-size: 16px;
  font-weight: 700;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 15px;
}

.avatar-xs {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  font-size: 13px;
}

.avatar.blue {
  color: #2c506f;
  background: #dcecf8;
}

.avatar.amber {
  color: #76551f;
  background: #f6e5c7;
}

.avatar.gray {
  color: #4f615d;
  background: #e6ebe7;
}

.content-shell {
  min-height: 100vh;
  margin-left: 238px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 30px;
  background: rgba(247, 248, 245, 0.93);
  border-bottom: 1px solid rgba(221, 228, 221, 0.86);
  backdrop-filter: blur(16px);
}

.page-heading {
  min-width: 160px;
}

.page-heading h1 {
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-heading p {
  margin-top: 1px;
  color: var(--muted-2);
  font-size: 14px;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.global-search {
  width: min(310px, 25vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  color: #84928e;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: 160ms ease;
}

.global-search:focus-within {
  border-color: #9dd8cc;
  box-shadow: 0 0 0 3px rgba(19, 157, 142, 0.08);
}

.global-search input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14.5px;
}

.global-search input::placeholder {
  color: #a5b0ac;
}

.global-search kbd {
  padding: 2px 5px;
  color: #9ba6a2;
  background: #f5f7f4;
  border: 1px solid #e8ece8;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: #87938f;
  font-size: 13px;
  white-space: nowrap;
}

.sync-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43b58f;
  box-shadow: 0 0 0 3px rgba(67, 181, 143, 0.1);
}

.icon-button {
  width: 37px;
  height: 37px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #687975;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: 150ms ease;
}

.icon-button:hover {
  color: var(--teal-deep);
  border-color: #bcded7;
  background: #f8fcfa;
}

.icon-button.small {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.notification-button {
  position: relative;
}

.notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border: 1.5px solid white;
  border-radius: 50%;
  background: #e36a57;
}

.top-avatar {
  width: 37px;
  height: 37px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #d8b682, #ad7d43);
  cursor: pointer;
}

.top-avatar span {
  color: white;
  font-size: 15px;
  font-weight: 600;
}

.enterprise-account-wrap {
  position: relative;
  flex: none;
}

.top-avatar.active {
  box-shadow: 0 0 0 3px rgba(191, 150, 91, 0.2);
}

.enterprise-account-menu {
  position: absolute;
  z-index: 140;
  top: calc(100% + 9px);
  right: 0;
  width: min(290px, calc(100vw - 24px));
  padding: 7px;
  background: #fff;
  border: 1px solid #dce6e1;
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(11, 48, 41, 0.2);
  animation: modalIn 130ms ease;
}

.enterprise-account-menu > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  padding: 9px;
  background: #f7faf8;
  border-radius: 8px;
}

.enterprise-account-menu > header > span {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #d8b682, #ad7d43);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 750;
}

.enterprise-account-menu header > div {
  display: flex;
  flex-direction: column;
}

.enterprise-account-menu header strong {
  color: #37534d;
  font-size: 12px;
}

.enterprise-account-menu header small {
  color: #889993;
  font-size: 10px;
}

.enterprise-account-menu > button {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 7px;
  padding: 8px;
  color: #52706a;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.enterprise-account-menu > button:hover {
  background: #f2f7f4;
}

.enterprise-account-menu > button > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #277e70;
  background: #eaf5f1;
  border-radius: 6px;
}

.enterprise-account-menu > button > div {
  display: flex;
  flex-direction: column;
}

.enterprise-account-menu > button strong {
  color: #3f5a54;
  font-size: 11px;
}

.enterprise-account-menu > button small {
  color: #8a9a95;
  font-size: 9.5px;
}

.enterprise-account-menu > button.logout {
  margin-top: 4px;
  border-top: 1px solid #edf1ee;
  border-radius: 0 0 6px 6px;
}

.enterprise-account-menu > button.logout > span {
  color: #b35848;
  background: #fff1ee;
}

.mobile-menu-button {
  display: none;
}

.main-content {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 25px 30px 44px;
}

.home-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.greeting {
  color: #7e8c88;
  font-size: 15px;
}

.wave {
  display: inline-block;
  margin-left: 3px;
  font-size: 16px;
  transform-origin: 70% 70%;
  animation: wave 2.8s infinite;
}

@keyframes wave {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(16deg); }
  66% { transform: rotate(-8deg); }
  72% { transform: rotate(12deg); }
  78% { transform: rotate(0); }
}

.home-welcome h2 {
  margin-top: 3px;
  color: var(--ink-strong);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.home-welcome h2 span {
  color: #758782;
  font-weight: 400;
}

.date-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: #7e8c88;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 14px;
}

.home-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(290px, 0.82fr);
  gap: 16px;
}

.hero-production {
  position: relative;
  min-height: 246px;
  overflow: hidden;
  padding: 22px 24px 19px;
  color: white;
  background:
    radial-gradient(circle at 88% 4%, rgba(80, 206, 174, 0.22), transparent 29%),
    linear-gradient(122deg, #0f3431 0%, #0b2928 58%, #123f3a 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(13, 47, 43, 0.15);
}

.hero-grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.17;
  background-image:
    linear-gradient(rgba(177, 241, 225, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177, 241, 225, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to right, transparent, black 45%, black);
}

.hero-production::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -150px;
  bottom: -210px;
  border: 1px solid rgba(130, 229, 207, 0.15);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(130, 229, 207, 0.025),
    0 0 0 88px rgba(130, 229, 207, 0.018);
}

.hero-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hero-title-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hero-equipment-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #b2f1df;
  background: rgba(133, 231, 207, 0.1);
  border: 1px solid rgba(133, 231, 207, 0.1);
}

.hero-title-wrap p {
  color: #7ea8a0;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.hero-title-wrap h3 {
  margin-top: 1px;
  font-size: 16px;
  font-weight: 600;
}

.hero-title-wrap h3 span {
  margin-left: 5px;
  color: #63978e;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.07em;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--teal-deep);
  background: var(--teal-soft);
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.status-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.mint {
  color: #c0f7e6;
  background: rgba(99, 215, 185, 0.12);
  border: 1px solid rgba(99, 215, 185, 0.12);
}

.status-pill.amber {
  color: #9e691d;
  background: var(--amber-soft);
}

.status-pill.red {
  color: #ac4d3f;
  background: var(--red-soft);
}

.status-pill.blue {
  color: #426f9f;
  background: var(--blue-soft);
}

.status-pill.gray {
  color: #687a75;
  background: #f0f3f0;
}

.hero-main {
  position: relative;
  z-index: 1;
  min-height: 115px;
  display: flex;
  align-items: center;
}

.hero-speed p {
  color: #83a9a1;
  font-size: 14px;
}

.hero-speed > strong {
  display: block;
  margin: 1px 0;
  font-family: "Aptos Display", var(--font);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.hero-speed > strong span {
  margin-left: 7px;
  color: #76a49a;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
}

.hero-speed > small {
  color: #7f9f98;
  font-size: 13px;
}

.hero-speed > small b {
  margin-right: 4px;
  color: #86d7c3;
  font-weight: 600;
}

.machine-visual {
  position: absolute;
  right: 1%;
  bottom: 4px;
  width: 48%;
  height: 105px;
  opacity: 0.9;
}

.paper-roll {
  position: absolute;
  display: block;
  border: 5px solid #6fbcae;
  border-radius: 50%;
  background: radial-gradient(circle, #143733 0 23%, #4f9489 25% 31%, #163f3a 33% 58%, #a1e0d2 60% 64%, #173b37 66%);
  box-shadow: 0 0 32px rgba(80, 204, 177, 0.18);
}

.roll-a {
  width: 45px;
  height: 45px;
  right: 34%;
  top: 1px;
}

.roll-b {
  width: 70px;
  height: 70px;
  right: 3%;
  top: 25px;
}

.roll-c {
  width: 38px;
  height: 38px;
  right: 57%;
  top: 61px;
  opacity: 0.68;
}

.paper-line {
  position: absolute;
  right: 5%;
  top: 23px;
  width: 55%;
  height: 58px;
  border-top: 1px dashed rgba(161, 224, 210, 0.42);
  transform: skewX(-17deg);
}

.machine-body {
  position: absolute;
  right: 0;
  bottom: 9px;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(161, 224, 210, 0.58), transparent);
  box-shadow: 0 10px 0 rgba(161, 224, 210, 0.14);
}

.hero-metrics {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 0.7fr)) 1.4fr;
  gap: 20px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-metrics > div > span {
  display: block;
  color: #7ca39a;
  font-size: 13px;
}

.hero-metrics strong {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 600;
}

.hero-metrics em {
  color: #79a69c;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

.hero-spark {
  align-self: center;
}

.hero-spark svg {
  width: 100%;
  height: 36px;
  overflow: visible;
}

.spark-area {
  fill: rgba(80, 199, 172, 0.11);
}

.spark-line {
  fill: none;
  stroke: #78d7c2;
  stroke-width: 1.4;
}

.right-rail-top {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
}

.downtime-card {
  position: relative;
  overflow: hidden;
  padding: 17px 18px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.downtime-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 54px;
  height: 2px;
  background: #e8a644;
  box-shadow: 0 0 15px rgba(232, 166, 68, 0.45);
}

.downtime-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.downtime-head > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #697a76;
  font-size: 14px;
}

.downtime-card > p {
  margin-top: 12px;
  color: #7d8c88;
  font-size: 14px;
}

.countdown {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 1px 0 3px;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

.countdown span {
  font-family: "Aptos Display", var(--font);
  font-size: 31.4px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.countdown i {
  color: #c0c9c5;
  font-size: 18px;
  font-style: normal;
}

.countdown.large span {
  font-size: 41.1px;
}

.downtime-meta {
  display: flex;
  justify-content: space-between;
  color: #8a9894;
  font-size: 13px;
}

.downtime-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.window-progress,
.progress-track {
  position: relative;
  overflow: hidden;
  height: 4px;
  background: #eef1ed;
  border-radius: 6px;
}

.window-progress {
  margin-top: 10px;
}

.window-progress i,
.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e3a43f, #ebba69);
}

.window-readiness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 11px;
  color: #8c9995;
  font-size: 12.5px;
}

.window-readiness strong {
  color: #b5771e;
  font-size: 13px;
}

.button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: white;
  background: linear-gradient(135deg, #149f8e, #0d7f74);
  border-color: #0e897d;
  box-shadow: 0 7px 16px rgba(15, 135, 121, 0.17);
}

.button-primary:hover {
  background: linear-gradient(135deg, #16aa97, #0c746a);
  box-shadow: 0 9px 22px rgba(15, 135, 121, 0.23);
}

.button-secondary {
  color: #4f625e;
  background: #fff;
  border-color: var(--line-strong);
}

.button-secondary:hover {
  color: var(--teal-deep);
  border-color: #b8d8d1;
  background: #fbfdfc;
}

.button-dark {
  color: #e4f3ef;
  background: #153d38;
  border-color: #153d38;
}

.button-light {
  color: #153d38;
  background: #e5f6f0;
  border-color: rgba(255, 255, 255, 0.18);
}

.button-block {
  width: 100%;
}

.button.small {
  min-height: 31px;
  padding: 5px 10px;
  font-size: 14px;
}

.quick-repair-card {
  position: relative;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 12px 15px;
  color: white;
  background: linear-gradient(115deg, #167e70, #139889);
  border: 1px solid rgba(10, 110, 98, 0.25);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(17, 142, 126, 0.17);
  cursor: pointer;
}

.quick-repair-card:hover .quick-repair-icon {
  transform: rotate(-8deg) scale(1.05);
}

.quick-repair-card > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.quick-repair-card strong {
  font-size: 16px;
  font-weight: 650;
}

.quick-repair-card small {
  color: rgba(220, 252, 245, 0.67);
  font-size: 13px;
}

.quick-repair-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.13);
  transition: 180ms ease;
}

.repair-pulse {
  position: absolute;
  width: 85px;
  height: 85px;
  right: 42px;
  top: -35px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.025);
}

.todo-strip {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  align-items: stretch;
  margin: 14px 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.todo-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fafbf9;
  border-right: 1px solid var(--line);
}

.todo-title > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #c78427;
  background: var(--amber-soft);
  border-radius: 9px;
}

.todo-title div,
.todo-item > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.todo-title strong,
.todo-item strong {
  color: #364b48;
  font-size: 14px;
  font-weight: 600;
}

.todo-title small,
.todo-item small {
  color: #96a19e;
  font-size: 12.5px;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 15px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.todo-item:last-child {
  border-right: 0;
}

.todo-item:hover {
  background: #fbfcfa;
}

.todo-item > span:nth-child(2) {
  flex: 1;
}

.todo-item > svg {
  color: #a1aaa7;
}

.todo-count {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
}

.todo-count.amber {
  color: #a36b18;
  background: var(--amber-soft);
}

.todo-count.blue {
  color: #426f9f;
  background: var(--blue-soft);
}

.todo-count.teal {
  color: var(--teal-deep);
  background: var(--teal-soft);
}

.home-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(290px, 0.82fr);
  gap: 16px;
}

.home-main-column,
.home-side-column {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.surface-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 3px 12px rgba(18, 54, 48, 0.025);
}

.home-main-column > .surface-section,
.home-side-column > .surface-section {
  padding: 18px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 15px;
}

.section-heading > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.section-heading h3 {
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 700;
}

.section-heading span {
  color: #97a19e;
  font-size: 13px;
}

.section-heading.compact {
  margin-bottom: 12px;
}

.section-heading.compact > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  color: #60817b;
  background: transparent;
  border: 0;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.text-button:hover {
  color: var(--teal-deep);
}

.circle-arrow {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #82908c;
  background: #fff;
  cursor: pointer;
}

.workorder-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.workorder-card {
  position: relative;
  padding: 13px 14px 12px;
  background: #fbfcfa;
  border: 1px solid #e9ede8;
  border-radius: 12px;
  transition: 170ms ease;
}

.workorder-card:hover {
  border-color: #cddfd8;
  box-shadow: 0 7px 20px rgba(26, 73, 64, 0.05);
  transform: translateY(-1px);
}

.workorder-card.new-order {
  border-color: #b8e5db;
  background: linear-gradient(110deg, #f7fdfb, #fff);
}

.wo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wo-card-top > div {
  display: flex;
  gap: 5px;
}

.wo-number {
  color: #9ba5a2;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.workorder-card h3 {
  margin: 8px 0 4px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.wo-equipment {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #778782;
  font-size: 13px;
}

.wo-equipment > span {
  color: #a1aaa7;
  font-size: 12.5px;
}

.wo-progress-row {
  margin-top: 10px;
}

.wo-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.wo-progress-meta span {
  color: #8c9894;
  font-size: 12.5px;
}

.wo-progress-meta strong {
  color: #b57921;
  font-size: 12.5px;
  font-weight: 600;
}

.progress-track i {
  background: linear-gradient(90deg, #1ba28f, #69cdb8);
}

.progress-track.full i {
  background: linear-gradient(90deg, #7d8e89, #a8b5b0);
}

.wo-card-bottom {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.wo-person {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.wo-person > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wo-person strong {
  font-size: 13px;
  font-weight: 600;
}

.wo-person small {
  color: #959f9c;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wo-card-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.wo-card-amount small {
  color: #a0aaa7;
  font-size: 12px;
}

.wo-card-amount strong {
  font-size: 14px;
  font-weight: 650;
}

.health-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.health-card {
  min-width: 0;
  padding: 12px;
  text-align: left;
  background: #fbfcfa;
  border: 1px solid #e9ede8;
  border-radius: 11px;
  cursor: pointer;
  transition: 160ms ease;
}

.health-card:hover {
  border-color: #c7ded7;
  background: #fff;
}

.health-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.health-device-icon {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #457d72;
  background: #ebf5f1;
}

.health-score {
  color: var(--teal-deep);
  font-size: 17px;
  font-weight: 700;
}

.health-score small {
  margin-left: 1px;
  font-size: 12px;
  font-weight: 400;
}

.health-score.warn {
  color: #bd7d21;
}

.health-card > strong {
  display: block;
  font-size: 14px;
  font-weight: 650;
}

.health-card > small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: #98a3a0;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-meter {
  height: 3px;
  margin-top: 9px;
  overflow: hidden;
  background: #edf1ed;
  border-radius: 4px;
}

.mini-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2fad96;
}

.health-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 6px;
}

.health-foot span,
.health-foot em {
  color: #99a39f;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.health-foot span:first-child {
  color: #ab7626;
}

.service-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.service-entry-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  background: #fafbf9;
  border: 1px solid #ebefea;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.service-entry-grid button:hover {
  border-color: #bfddd5;
  background: #fcfffd;
}

.service-entry-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 8px;
}

.service-entry-icon.install {
  color: #3b7ea1;
  background: var(--blue-soft);
}

.service-entry-icon.overhaul {
  color: #b3751c;
  background: var(--amber-soft);
}

.service-entry-icon.spare {
  color: #6c6f9b;
  background: #f0f0f8;
}

.service-entry-icon.expert {
  color: #448275;
  background: var(--teal-soft);
}

.service-entry-grid strong {
  font-size: 13px;
  font-weight: 600;
}

.service-entry-grid small {
  color: #9ca6a2;
  font-size: 12px;
}

.mini-provider-list {
  display: flex;
  flex-direction: column;
}

.mini-provider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #eef1ed;
  cursor: pointer;
  text-align: left;
}

.mini-provider:last-child {
  border-bottom: 0;
}

.provider-logo {
  width: 31px;
  height: 31px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.provider-logo.teal {
  color: #25786b;
  background: #d9f1ea;
}

.provider-logo.amber {
  color: #8d611d;
  background: #f8e8c9;
}

.provider-logo.blue {
  color: #3c6f99;
  background: #e0eef9;
}

.provider-logo.navy {
  color: #3a526b;
  background: #e6ecf2;
}

.provider-logo.large {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  font-size: 14.5px;
}

.provider-logo.xlarge {
  width: 55px;
  height: 55px;
  border-radius: 15px;
  font-size: 16px;
}

.mini-provider > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mini-provider strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-provider small {
  color: #9ba5a1;
  font-size: 12px;
}

.mini-rating {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #bd8126;
  font-size: 12.5px;
}

.mini-rating svg {
  fill: currentColor;
}

.mobile-nav {
  display: none;
}

/* Shared page patterns */
.page-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 21px;
}

.eyebrow {
  color: var(--teal-deep);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-intro h2 {
  margin: 4px 0 2px;
  color: var(--ink-strong);
  font-size: clamp(22px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.page-intro p:not(.eyebrow) {
  color: #7f8e8a;
  font-size: 14.5px;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-grid {
  display: grid;
  gap: 11px;
  margin-bottom: 16px;
}

.metric-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.metric-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.metric-icon {
  width: 35px;
  height: 35px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.metric-icon.teal {
  color: var(--teal-deep);
  background: var(--teal-soft);
}

.metric-icon.amber {
  color: #aa701d;
  background: var(--amber-soft);
}

.metric-icon.blue {
  color: #4775a8;
  background: var(--blue-soft);
}

.metric-icon.red {
  color: #b15446;
  background: var(--red-soft);
}

.metric-icon.gray {
  color: #667873;
  background: #eef2ee;
}

.metric-card > div {
  min-width: 0;
}

.metric-card > div > span {
  display: block;
  color: #8b9995;
  font-size: 12.5px;
}

.metric-card > div > strong {
  display: inline-block;
  margin: 1px 4px 0 0;
  color: var(--ink-strong);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.metric-card strong em {
  margin-left: 2px;
  color: #80908b;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
}

.metric-card small {
  color: #909d99;
  font-size: 12px;
  white-space: nowrap;
}

.metric-card small.positive {
  color: #29977f;
}

.metric-card small svg {
  display: inline;
  vertical-align: -1px;
}

.metric-card > p {
  display: none;
}

.empty-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #92a09c;
  text-align: center;
}

.empty-state strong {
  margin-top: 10px;
  color: #536763;
  font-size: 15px;
}

.empty-state p {
  margin-top: 3px;
  font-size: 14px;
}

/* Work orders */
.workorders-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 15px;
}

.orders-surface {
  min-width: 0;
  padding: 17px;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #e8ece7;
}

.segmented-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented-tabs::-webkit-scrollbar {
  display: none;
}

.segmented-tabs button,
.provider-filter-tabs button {
  min-height: 30px;
  padding: 4px 10px;
  color: #7b8b86;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.segmented-tabs button:hover,
.provider-filter-tabs button:hover {
  color: #415d57;
  background: #f4f7f3;
}

.segmented-tabs button.active,
.provider-filter-tabs button.active {
  color: #176e63;
  background: #e7f4f0;
  font-weight: 600;
}

.segmented-tabs button span {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  margin-left: 4px;
  place-items: center;
  color: #657a74;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  font-size: 12px;
}

.filter-button,
.small-search {
  height: 31px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: #73827e;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
}

.small-search input {
  width: 175px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
}

.orders-list {
  display: grid;
  gap: 9px;
  padding-top: 13px;
}

.workorder-card.detailed {
  padding: 14px 15px;
  background: #fff;
  border-color: #e8ece7;
}

.workorder-card.detailed h3 {
  font-size: 15px;
}

.workorder-aside {
  display: grid;
  align-content: start;
  gap: 12px;
}

.workorder-aside .surface-section {
  padding: 16px;
}

.sla-panel .section-heading {
  margin-bottom: 12px;
}

.sla-ring-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 15px;
}

.sla-ring {
  position: relative;
  width: 104px;
  height: 104px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#1ba28f calc(var(--value) * 1%), #e8eeea 0);
  border-radius: 50%;
}

.sla-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: #fff;
  border-radius: 50%;
}

.sla-ring strong,
.sla-ring span {
  position: relative;
  z-index: 1;
}

.sla-ring strong {
  color: var(--ink-strong);
  font-size: 26px;
  line-height: 1;
}

.sla-ring strong small {
  font-size: 13px;
}

.sla-ring span {
  margin-top: 5px;
  color: #8f9c98;
  font-size: 12.5px;
}

.sla-ring-notes {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sla-ring-notes span {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  align-items: center;
  gap: 6px;
  color: #84928e;
  font-size: 12.5px;
}

.sla-ring-notes strong {
  color: #455c57;
  font-size: 13px;
}

.dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
}

.dot.teal {
  background: #2fac95;
}

.dot.amber {
  background: #d79939;
}

.dot.red {
  background: #d56250;
}

.sla-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  background: #fff9ee;
  border: 1px solid #f4e3bd;
  border-radius: 9px;
}

.sla-alert-icon {
  color: #c78a2d;
}

.sla-alert > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.sla-alert strong {
  font-size: 12.5px;
  font-weight: 600;
}

.sla-alert small {
  color: #9d855e;
  font-size: 12px;
}

.sla-alert button {
  padding: 3px 7px;
  color: #a76c16;
  background: white;
  border: 1px solid #efd7a8;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}

.funnel-row {
  display: grid;
  grid-template-columns: 60px 1fr 24px;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: #7d8c87;
  font-size: 12.5px;
}

.funnel-row > div {
  height: 5px;
  overflow: hidden;
  background: #eff2ee;
  border-radius: 5px;
}

.funnel-row i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #25a791, #77cbb9);
  border-radius: inherit;
}

.funnel-row strong {
  color: #52645f;
  font-size: 13px;
  text-align: right;
}

.support-tip {
  display: flex;
  gap: 10px;
  padding: 13px;
  color: #44655e;
  background: #eaf5f1;
  border: 1px solid #d9eae4;
  border-radius: 12px;
}

.support-tip > span {
  flex: none;
  color: #288d7C;
}

.support-tip strong {
  display: block;
  font-size: 13px;
}

.support-tip p {
  margin-top: 2px;
  color: #79928b;
  font-size: 12.5px;
  line-height: 1.65;
}

/* Projects */
.project-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.25fr;
  gap: 10px;
  margin-bottom: 15px;
}

.project-stat-row > article {
  display: flex;
  flex-direction: column;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.project-stat-row > article > span {
  color: #8c9995;
  font-size: 12.5px;
}

.project-stat-row > article > strong {
  color: var(--ink-strong);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

.project-stat-row em {
  margin-left: 2px;
  color: #798a85;
  font-size: 12.5px;
  font-style: normal;
}

.project-stat-row small {
  color: #94a09c;
  font-size: 12px;
}

.project-risk-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px;
  color: #a8772d;
  background: #fff9ee;
  border: 1px solid #f1dfba;
  border-radius: 12px;
}

.project-risk-note > span {
  display: flex;
  flex-direction: column;
}

.project-risk-note strong {
  color: #7b622f;
  font-size: 13px;
}

.project-risk-note small {
  color: #a68a58;
  font-size: 12px;
}

.project-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.project-card {
  min-width: 0;
  padding: 15px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
  transition: 170ms ease;
}

.project-card:hover,
.project-card.active {
  border-color: #afd8ce;
  box-shadow: 0 10px 25px rgba(22, 75, 65, 0.06);
}

.project-card.active {
  background: linear-gradient(140deg, #fcfffd, #fff);
  box-shadow: inset 0 2px 0 #37a692, 0 10px 25px rgba(22, 75, 65, 0.06);
}

.project-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.project-type {
  color: #758b85;
  font-size: 12.5px;
  letter-spacing: 0.05em;
}

.project-card h3 {
  margin: 9px 0 2px;
  font-size: 15px;
  font-weight: 650;
}

.project-card > p {
  overflow: hidden;
  color: #939e9b;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-progress-label {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 5px;
  color: #93a09c;
  font-size: 12.5px;
}

.project-progress-label strong {
  color: #3d746b;
  font-size: 13px;
}

.project-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  color: #889591;
  font-size: 12.5px;
}

.project-card-foot span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.project-detail {
  overflow: hidden;
}

.project-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 19px 14px;
}

.project-title-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  color: #367e70;
  background: #e9f5f1;
  border-radius: 12px;
}

.project-detail-head > div:nth-child(2) {
  min-width: 0;
}

.project-detail-head p {
  color: #879590;
  font-size: 12.5px;
}

.project-detail-head h3 {
  font-size: 16px;
  font-weight: 700;
}

.project-detail-head > div:nth-child(2) > span {
  color: #95a19d;
  font-size: 12.5px;
}

.project-detail-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.project-detail-meta > span {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.project-detail-meta small {
  color: #9aa5a1;
  font-size: 12px;
}

.project-detail-meta strong {
  color: #3a4f4a;
  font-size: 13px;
}

.detail-tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 40px;
  padding: 0 19px;
  border-bottom: 1px solid #e7ece7;
}

.detail-tabs button {
  position: relative;
  align-self: stretch;
  padding: 0;
  color: #82918d;
  background: transparent;
  border: 0;
  font-size: 13px;
  cursor: pointer;
}

.detail-tabs button.active {
  color: #186f64;
  font-weight: 600;
}

.detail-tabs button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: #1a9d8c;
}

.detail-tabs button span {
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  margin-left: 4px;
  place-items: center;
  color: #617c75;
  background: #eaf4f0;
  border-radius: 5px;
  font-size: 12px;
}

.gantt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px 10px;
}

.gantt-legend {
  display: flex;
  gap: 12px;
}

.gantt-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #84928e;
  font-size: 12.5px;
}

.gantt-legend i {
  width: 8px;
  height: 4px;
  border-radius: 3px;
}

.gantt-legend i.done {
  background: #70b8a8;
}

.gantt-legend i.active {
  background: #158e7e;
}

.gantt-legend i.wait {
  background: #dfe5df;
}

.gantt-range {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #899691;
  font-size: 12.5px;
}

.gantt-wrap {
  position: relative;
  margin: 0 18px 10px;
  overflow: hidden;
  border: 1px solid #e8ece7;
  border-radius: 9px;
}

.gantt-head {
  display: grid;
  grid-template-columns: 210px repeat(5, 1fr);
  height: 31px;
  align-items: center;
  color: #8d9995;
  background: #f8faf7;
  border-bottom: 1px solid #e8ece7;
  font-size: 12px;
}

.gantt-head span:not(.gantt-task-name) {
  text-align: center;
}

.gantt-task-name {
  padding-left: 12px;
}

.gantt-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  min-height: 43px;
  align-items: center;
  border-bottom: 1px solid #eef1ed;
}

.gantt-row:last-child {
  border-bottom: 0;
}

.gantt-row > .gantt-task-name {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  border-right: 1px solid #eef1ed;
}

.gantt-row strong {
  font-size: 12.5px;
  font-weight: 550;
}

.gantt-row small {
  color: #9aa5a1;
  font-size: 12px;
}

.gantt-track {
  position: relative;
  align-self: stretch;
  background-image: linear-gradient(90deg, transparent calc(20% - 1px), #eff2ee 20%, transparent calc(20% + 1px), transparent calc(40% - 1px), #eff2ee 40%, transparent calc(40% + 1px), transparent calc(60% - 1px), #eff2ee 60%, transparent calc(60% + 1px), transparent calc(80% - 1px), #eff2ee 80%, transparent calc(80% + 1px));
}

.gantt-track > i {
  position: absolute;
  top: 17px;
  height: 9px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  border-radius: 4px;
}

.gantt-track > i.done {
  background: #8cc7b9;
}

.gantt-track > i.active {
  background: linear-gradient(90deg, #149483, #42b49f);
  box-shadow: 0 3px 8px rgba(20, 148, 131, 0.18);
}

.gantt-track > i.wait {
  background: #dfe5df;
}

.gantt-track > i span {
  color: #e9fffa;
  font-size: 11.5px;
  font-weight: 600;
}

.gantt-today {
  position: absolute;
  top: 31px;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed #d4745d;
  pointer-events: none;
}

.gantt-today span {
  position: absolute;
  top: 3px;
  left: -14px;
  padding: 1px 4px;
  color: #b45f4c;
  background: #fff2ef;
  border-radius: 3px;
  font-size: 11.5px;
}

.project-keyline {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px 15px;
  color: #85938e;
  font-size: 12.5px;
}

.project-keyline span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-keyline strong {
  color: #af7420;
}

.milestone-list {
  padding: 10px 20px 18px;
}

.milestone-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
}

.milestone-item::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 42px;
  bottom: -10px;
  width: 1px;
  background: #e1e7e1;
}

.milestone-item:last-child::after {
  display: none;
}

.milestone-marker {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  flex: none;
  display: grid;
  place-items: center;
  color: #86958f;
  background: #f2f5f1;
  border: 1px solid #e1e7e1;
  border-radius: 50%;
  font-size: 12px;
}

.milestone-item.done .milestone-marker {
  color: #1b786a;
  background: #e1f3ed;
  border-color: #cde9e1;
}

.milestone-item.active .milestone-marker {
  color: #a16a18;
  background: #fff5e4;
  border-color: #eed8ad;
  box-shadow: 0 0 0 4px #fff9ed;
}

.milestone-item > div {
  flex: 1;
}

.milestone-item strong {
  font-size: 13px;
}

.milestone-item p {
  color: #94a09c;
  font-size: 12.5px;
}

.milestone-date {
  color: #889691;
  font-size: 12.5px;
}

.documents-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 25px;
  padding: 18px;
}

.doc-summary {
  display: grid;
  grid-template-columns: 53px 1fr;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f3f8f5, #fbfcfa);
  border: 1px solid #e5ebe6;
  border-radius: 12px;
}

.doc-cover {
  width: 53px;
  height: 65px;
  display: grid;
  place-items: center;
  color: #497e73;
  background: #fff;
  border: 1px solid #dfe8e2;
  border-radius: 7px;
  box-shadow: 0 5px 12px rgba(26, 70, 61, 0.06);
}

.doc-summary h3 {
  font-size: 15px;
}

.doc-summary p {
  margin-top: 2px;
  color: #879691;
  font-size: 12.5px;
  line-height: 1.6;
}

.doc-progress {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 3px;
}

.doc-progress strong {
  font-size: 18px;
}

.doc-progress span {
  color: #8b9995;
  font-size: 12.5px;
}

.doc-summary .button {
  grid-column: 1 / -1;
}

.document-list {
  display: flex;
  flex-direction: column;
}

.document-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1ed;
}

.file-icon {
  width: 29px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #63847c;
  background: #f1f5f2;
  border-radius: 6px;
}

.document-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.document-row strong {
  font-size: 12.5px;
  font-weight: 550;
}

.document-row small {
  color: #96a29e;
  font-size: 12px;
}

.document-row button {
  color: #7d918b;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.warranty-layout {
  padding: 18px;
}

.warranty-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  background: linear-gradient(135deg, #103c37, #174c45);
  border-radius: 12px;
  color: white;
}

.warranty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  color: #a8ebd9;
  background: rgba(123, 221, 196, 0.1);
  border-radius: 14px;
}

.warranty-hero > div {
  flex: 1;
}

.warranty-hero p {
  color: #81aca2;
  font-size: 12.5px;
}

.warranty-hero h3 {
  font-size: 16px;
}

.warranty-hero span {
  color: #77a49b;
  font-size: 12.5px;
}

.warranty-terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.warranty-terms > div {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #fafbf9;
  border: 1px solid #e9ede8;
  border-radius: 9px;
}

.warranty-terms span {
  color: #879590;
  font-size: 12.5px;
}

.warranty-terms strong {
  font-size: 15px;
}

.warranty-terms small {
  color: #97a29e;
  font-size: 12px;
}

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 11px;
  color: #69827b;
  background: #f1f6f3;
  border: 1px solid #e0e9e3;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
}

/* Equipment */
.equipment-overview-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.equipment-quick-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 122px;
  padding: 0 14px;
  border-right: 1px solid #e9ede8;
}

.equipment-quick-stat:first-child {
  padding-left: 2px;
}

.equipment-quick-stat > span {
  color: #6e8982;
}

.equipment-quick-stat > span.ok {
  color: #2b9a83;
}

.equipment-quick-stat > span.warn {
  color: #bf852c;
}

.equipment-quick-stat > span.danger {
  color: #c35c4c;
}

.equipment-quick-stat > div {
  display: flex;
  flex-direction: column;
}

.equipment-quick-stat strong {
  color: var(--ink-strong);
  font-size: 16px;
  line-height: 1.2;
}

.equipment-quick-stat small {
  color: #939f9b;
  font-size: 12px;
}

.equipment-search-wrap {
  height: 33px;
  min-width: 230px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 10px;
  color: #98a39f;
  background: #f8faf7;
  border: 1px solid #e7ece7;
  border-radius: 8px;
}

.equipment-search-wrap input {
  width: 100%;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
}

.equipment-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
}

.equipment-tree {
  padding: 14px 10px;
}

.tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px 10px;
}

.tree-head h3 {
  font-size: 15px;
}

.tree-root {
  padding-bottom: 9px;
  border-bottom: 1px solid #edf0ec;
}

.tree-line {
  width: 100%;
  min-height: 29px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  color: #73837e;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.tree-line:hover,
.tree-line.selected {
  color: #287368;
  background: #edf6f2;
}

.tree-line.root {
  color: #425a54;
  font-weight: 600;
}

.tree-line.level-1 {
  padding-left: 15px;
}

.tree-line.level-2 {
  padding-left: 35px;
}

.tree-line span {
  flex: 1;
}

.tree-line small {
  color: #a5aeab;
  font-size: 12px;
}

.tree-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 6px 5px;
  color: #8c9995;
  font-size: 12px;
}

.tree-section-label button {
  display: grid;
  place-items: center;
  padding: 0;
  color: #8c9995;
  background: transparent;
  border: 0;
}

.recent-equipment {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-equipment button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.recent-equipment button:hover,
.recent-equipment button.active {
  background: #f1f7f4;
}

.recent-dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: #3cb097;
  border-radius: 50%;
}

.recent-dot.warn {
  background: #d39536;
}

.recent-equipment button > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recent-equipment strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-equipment small {
  color: #9aa5a1;
  font-size: 12px;
}

.equipment-detail {
  min-width: 0;
  overflow: hidden;
}

.equipment-titlebar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 17px 13px;
}

.equipment-avatar {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  color: #3b7d71;
  background: linear-gradient(135deg, #e2f3ed, #f0f8f5);
  border: 1px solid #d6eae4;
  border-radius: 13px;
}

.equipment-titlebar > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.equipment-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.equipment-title-line h2 {
  margin-right: 2px;
  font-size: 17px;
  font-weight: 700;
}

.equipment-titlebar p {
  margin-top: 3px;
  color: #8c9995;
  font-size: 12.5px;
}

.equipment-titlebar p span {
  color: #3c7066;
  font-weight: 600;
}

.equipment-title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.equipment-health-bar {
  display: grid;
  grid-template-columns: 105px repeat(3, 1fr) 130px;
  gap: 0;
  margin: 0 17px 2px;
  padding: 10px 0;
  background: #f9fbf8;
  border: 1px solid #e8ede8;
  border-radius: 10px;
}

.health-big-score,
.vital-item,
.vital-spark {
  padding: 0 13px;
  border-right: 1px solid #e6ebe6;
}

.health-big-score {
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-gauge {
  position: relative;
  width: 47px;
  height: 47px;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(#25a58e calc(var(--score) * 1%), #e3eae4 0);
  border-radius: 50%;
}

.score-gauge::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #f9fbf8;
  border-radius: 50%;
}

.score-gauge strong {
  position: relative;
  z-index: 1;
  font-size: 17px;
}

.health-big-score > span {
  color: #5d736d;
  font-size: 12.5px;
  writing-mode: vertical-lr;
  letter-spacing: 0.1em;
}

.health-big-score > small {
  align-self: flex-end;
  margin-bottom: 7px;
  color: #2d957f;
  font-size: 12px;
}

.vital-item {
  display: flex;
  flex-direction: column;
}

.vital-item > span,
.vital-spark > span {
  color: #8a9894;
  font-size: 12px;
}

.vital-item strong {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 650;
}

.vital-item em {
  color: #85938f;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.vital-item small {
  color: #9da7a3;
  font-size: 11.5px;
}

.vital-track {
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  background: #e8ede8;
  border-radius: 4px;
}

.vital-track i {
  display: block;
  height: 100%;
  background: #49ad96;
  border-radius: 4px;
}

.vital-item:nth-of-type(3) .vital-track i {
  background: #83bca9;
}

.vital-spark {
  border-right: 0;
}

.vital-spark svg {
  width: 100%;
  height: 34px;
  margin-top: 4px;
  overflow: visible;
}

.vital-spark path {
  fill: rgba(60, 176, 151, 0.08);
}

.vital-spark polyline {
  fill: none;
  stroke: #40ab94;
  stroke-width: 1.2;
}

.equipment-tabs {
  padding: 0 17px;
}

.tab-content {
  padding: 16px 17px;
}

.tab-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tab-toolbar h3 {
  font-size: 14.5px;
}

.tab-toolbar p {
  color: #919e99;
  font-size: 12.5px;
}

.equipment-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  background: #fafbf9;
  border: 1px solid #e9ede8;
  border-radius: 10px;
}

.equipment-info-grid > div {
  display: flex;
  flex-direction: column;
  min-height: 53px;
  padding: 10px 11px;
  border-right: 1px solid #e8ece7;
  border-bottom: 1px solid #e8ece7;
}

.equipment-info-grid > div:nth-child(4n) {
  border-right: 0;
}

.equipment-info-grid > div:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.equipment-info-grid span {
  color: #929e9a;
  font-size: 12px;
}

.equipment-info-grid strong {
  margin-top: 2px;
  color: #435a54;
  font-size: 12.5px;
  font-weight: 550;
}

.overview-columns {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.related-order {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  cursor: pointer;
}

.related-order > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.related-order strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-order small {
  color: #99a39f;
  font-size: 12px;
}

.equipment-memo {
  display: flex;
  gap: 9px;
  padding: 13px;
  color: #3d7167;
  background: linear-gradient(135deg, #edf7f3, #f8fcfa);
  border: 1px solid #dcebe5;
  border-radius: 10px;
}

.equipment-memo > span {
  flex: none;
}

.equipment-memo strong {
  font-size: 13px;
}

.equipment-memo p {
  margin: 4px 0 7px;
  color: #718a83;
  font-size: 12.5px;
  line-height: 1.7;
}

.bom-row {
  display: grid;
  grid-template-columns: 52px 20px minmax(180px, 1fr) 50px 90px 100px;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-bottom: 1px solid #edf0ec;
  color: #6d7f7a;
  font-size: 12.5px;
}

.bom-row:first-of-type {
  color: #84918d;
  background: #f8faf7;
  border-radius: 7px;
}

.bom-row strong {
  color: #3f5550;
  font-weight: 550;
}

.bom-level {
  color: #8d9c97;
}

.bom-tree-prefix {
  color: #b4bdb9;
}

.text-danger {
  color: #c25b4c !important;
}

.history-timeline {
  padding: 4px 0;
}

.history-row {
  display: grid;
  grid-template-columns: 72px 12px minmax(0, 1fr) auto 80px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  border-bottom: 1px solid #edf0ec;
}

.history-date {
  color: #8a9894;
  font-size: 12px;
}

.history-dot {
  width: 7px;
  height: 7px;
  border: 2px solid #b8d7cf;
  border-radius: 50%;
  background: #fff;
}

.history-dot.active {
  border-color: #d39838;
  box-shadow: 0 0 0 3px #fff5e6;
}

.history-row > div {
  display: flex;
  flex-direction: column;
}

.history-row strong {
  font-size: 12.5px;
}

.history-row p {
  color: #9aa4a1;
  font-size: 12px;
}

.measurement-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.measurement-card {
  padding: 11px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 9px;
}

.measurement-card > div:first-child {
  display: flex;
  justify-content: space-between;
}

.measurement-card span,
.measurement-card small {
  color: #8d9995;
  font-size: 12px;
}

.measurement-card > strong {
  display: inline-block;
  margin: 3px 5px 2px 0;
  font-size: 17px;
  font-weight: 650;
}

.measurement-card em {
  color: #8b9995;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.measurement-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #2b987f;
  font-size: 11.5px;
}

.measurement-status i {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
}

.measurement-status.blue {
  color: #5883af;
}

.mini-meter.blue i {
  background: #6f9bc3;
}

.spare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  border-bottom: 1px solid #edf0ec;
}

.part-symbol {
  width: 31px;
  height: 31px;
  flex: none;
  display: grid;
  place-items: center;
  color: #507f75;
  background: #edf5f1;
  border-radius: 8px;
}

.part-symbol.large {
  width: 44px;
  height: 44px;
}

.spare-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.spare-row strong {
  font-size: 12.5px;
}

.spare-row small {
  color: #93a09b;
  font-size: 12px;
}

.spare-row > span:not(.status-pill):not(.part-symbol) {
  display: flex;
  flex-direction: column;
  color: #4f625d;
  font-size: 13px;
}

.spare-row > span small {
  font-size: 11.5px;
}

.qr-tab {
  display: grid;
  place-items: center;
  padding: 25px;
}

.qr-preview {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 20px;
  background: linear-gradient(135deg, #f7faf8, #fff);
  border: 1px solid #e6ebe6;
  border-radius: 14px;
}

.qr-frame {
  width: 138px;
  height: 138px;
  padding: 9px;
  background: white;
  border: 1px solid #e0e6e0;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(24, 63, 55, 0.07);
}

.qr-frame svg {
  width: 100%;
  height: 100%;
  fill: #173c37;
}

.qr-preview p {
  color: #889691;
  font-size: 12.5px;
}

.qr-preview h3 {
  margin: 2px 0;
  font-size: 20px;
}

.qr-preview > div:nth-child(2) > span {
  color: #909d99;
  font-size: 12.5px;
}

.qr-actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

/* Maintenance */
.maintenance-top-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.95fr 0.83fr;
  gap: 11px;
  margin-bottom: 14px;
}

.maintenance-window-hero {
  position: relative;
  overflow: hidden;
  padding: 17px 19px;
  color: white;
  background:
    radial-gradient(circle at 90% 0, rgba(220, 172, 85, 0.2), transparent 34%),
    linear-gradient(125deg, #173d38, #0c2e2b);
  border-radius: var(--radius);
}

.maintenance-window-hero::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -95px;
  bottom: -110px;
  border: 1px solid rgba(222, 182, 109, 0.13);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(222, 182, 109, 0.025);
}

.window-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.window-hero-top > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #89afa6;
  font-size: 13px;
}

.maintenance-window-hero h2 {
  margin-top: 15px;
  font-size: 16px;
}

.maintenance-window-hero > p {
  color: #86a69f;
  font-size: 12.5px;
}

.maintenance-window-hero .countdown {
  color: white;
  margin-top: 6px;
}

.maintenance-window-hero .countdown i {
  color: #d3b879;
}

.window-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #86a59e;
  font-size: 12px;
}

.window-hero-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.readiness-card,
.loss-card {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.readiness-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.readiness-head > div {
  display: flex;
  flex-direction: column;
}

.readiness-head span {
  color: #879590;
  font-size: 12.5px;
}

.readiness-head strong {
  font-size: 24.9px;
  line-height: 1.3;
}

.readiness-head em {
  color: #7f8f8a;
  font-size: 12.5px;
  font-style: normal;
}

.readiness-trend {
  color: #2a997f !important;
  font-size: 12px !important;
}

.readiness-bar {
  height: 5px;
  overflow: hidden;
  margin: 3px 0 13px;
  background: #edf1ed;
  border-radius: 6px;
}

.readiness-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1ba08c, #61c1ac);
  border-radius: inherit;
}

.readiness-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.readiness-items > div {
  display: flex;
  flex-direction: column;
  padding: 7px 8px;
  background: #fafbf9;
  border-radius: 7px;
}

.readiness-items span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #7d8e89;
  font-size: 12px;
}

.readiness-items strong {
  margin-top: 1px;
  font-size: 14.5px;
}

.readiness-items strong.warning {
  color: #b87a21;
}

.readiness-items small {
  color: #9da7a3;
  font-size: 11.5px;
}

.loss-card .section-heading {
  margin-bottom: 9px;
}

.loss-card > strong {
  color: var(--ink-strong);
  font-size: 26px;
}

.loss-card > strong em {
  color: #80908b;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 500;
}

.loss-card > p {
  color: #8a9793;
  font-size: 12.5px;
}

.loss-card > p b {
  color: #665f50;
  font-weight: 600;
}

.loss-compare {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  color: #96a19d;
  font-size: 11.5px;
}

.loss-compare span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.loss-compare i {
  width: 7px;
  height: 3px;
  border-radius: 2px;
}

.loss-compare .budget {
  background: #a9c9bf;
}

.loss-compare .actual {
  background: #d29b43;
}

.loss-bars {
  height: 45px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-top: 5px;
  padding-top: 3px;
  border-bottom: 1px solid #e9ede8;
}

.loss-bars i {
  flex: 1;
  background: linear-gradient(to top, #dceae5, #86c4b4);
  border-radius: 3px 3px 0 0;
}

.loss-bars i.highlight {
  background: linear-gradient(to top, #efdfbd, #d4a34c);
}

.maintenance-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 14px;
}

.schedule-panel {
  min-width: 0;
  padding: 16px;
}

.schedule-actions {
  display: flex;
  gap: 5px;
}

.schedule-legend {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px;
  color: #879590;
  font-size: 12px;
}

.schedule-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.schedule-legend i {
  width: 7px;
  height: 4px;
  border-radius: 2px;
}

.schedule-legend .mechanical {
  background: #4aa58f;
}

.schedule-legend .electrical {
  background: #658fb8;
}

.schedule-legend .instrument {
  background: #bd8b4a;
}

.schedule-legend .outside {
  background: #8e7ba4;
}

.schedule-legend .critical {
  margin-left: auto;
  color: #b55344;
}

.maintenance-gantt {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e7ece7;
  border-radius: 9px;
}

.maintenance-gantt-head {
  display: grid;
  grid-template-columns: 230px repeat(4, 1fr);
  height: 31px;
  align-items: center;
  color: #879590;
  background: #f8faf7;
  border-bottom: 1px solid #e6ebe6;
  font-size: 12px;
}

.maintenance-gantt-head span {
  text-align: center;
}

.maintenance-gantt-head span:first-child {
  padding-left: 12px;
  text-align: left;
}

.maintenance-gantt-row {
  display: grid;
  grid-template-columns: 230px 1fr;
  align-items: center;
  min-height: 41px;
  border-bottom: 1px solid #edf0ec;
}

.maintenance-gantt-row:last-of-type {
  border-bottom: 0;
}

.maintenance-gantt-row > div:first-child {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 12px;
  border-right: 1px solid #edf0ec;
}

.maintenance-gantt-row strong {
  font-size: 12.5px;
  font-weight: 550;
}

.maintenance-gantt-row small {
  color: #9ca6a2;
  font-size: 11.5px;
}

.schedule-track {
  position: relative;
  align-self: stretch;
  background-image: linear-gradient(90deg, transparent calc(25% - 1px), #eff2ee 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), #eff2ee 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), #eff2ee 75%, transparent calc(75% + 1px));
}

.schedule-track i {
  position: absolute;
  top: 14px;
  min-width: 12px;
  height: 11px;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(33, 82, 71, 0.08);
}

.schedule-track i.mechanical {
  background: #54ac95;
}

.schedule-track i.electrical {
  background: #719ac0;
}

.schedule-track i.instrument {
  background: #c39355;
}

.schedule-track i.outside {
  background: #9987ac;
}

.schedule-track i span {
  position: absolute;
  top: -3px;
  right: 2px;
  color: #c94e3e;
}

.critical-path-line {
  position: absolute;
  top: 31px;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed rgba(202, 90, 71, 0.58);
}

.critical-path-line span {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 4px;
  color: #b94f3f;
  background: #fff3f0;
  border-radius: 3px;
  font-size: 11.5px;
  white-space: nowrap;
}

.maintenance-aside {
  display: grid;
  align-content: start;
  gap: 12px;
}

.maintenance-aside .surface-section {
  padding: 16px;
}

.checklist {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}

.checklist-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  color: #70817c;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  text-align: left;
  cursor: pointer;
}

.check-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

.check-icon.ok {
  color: #2c987e;
  background: #e7f5f0;
}

.check-icon.warning {
  color: #b5771f;
  background: #fff4e0;
}

.checklist-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.checklist-row strong {
  color: #435853;
  font-size: 12.5px;
}

.checklist-row small {
  color: #9ca6a2;
  font-size: 11.5px;
}

.checklist-row > span:nth-last-of-type(1) {
  color: #5d716c;
  font-size: 12px;
}

.conflict-count {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #b25142;
  background: #ffefec;
  border-radius: 6px;
  font-size: 12.5px;
}

.conflict-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0ec;
}

.conflict-item:last-child {
  border-bottom: 0;
}

.conflict-icon {
  color: #c27a26;
}

.conflict-item > div {
  flex: 1;
}

.conflict-item strong {
  font-size: 12.5px;
}

.conflict-item p {
  color: #929e9a;
  font-size: 12px;
}

.conflict-item button {
  margin-top: 3px;
  padding: 0;
  color: #9a6b25;
  background: transparent;
  border: 0;
  font-size: 12px;
  cursor: pointer;
}

/* Parts */
.sourcing-search-panel {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 13px 16px;
  background: linear-gradient(110deg, #113d38, #0d302d);
  border-radius: 14px;
  color: white;
}

.sourcing-search-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -90px;
  top: -120px;
  border: 1px solid rgba(134, 225, 203, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(134, 225, 203, 0.018);
}

.sourcing-search-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.search-bolt {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #abdcca;
  background: rgba(146, 229, 206, 0.1);
  border-radius: 10px;
}

.sourcing-search-copy strong {
  font-size: 15px;
}

.sourcing-search-copy p {
  color: #84aaa2;
  font-size: 12.5px;
}

.sourcing-input {
  position: relative;
  z-index: 1;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px 0 12px;
  color: #789e96;
  background: #fff;
  border-radius: 9px;
}

.sourcing-input input {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.sourcing-input button {
  align-self: stretch;
  min-width: 90px;
  padding: 0 14px;
  color: white;
  background: #159985;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.sourcing-suggestions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
}

.sourcing-suggestions span {
  color: #719a91;
  font-size: 12px;
}

.sourcing-suggestions button {
  padding: 1px 6px;
  color: #91b8af;
  background: transparent;
  border: 1px solid rgba(158, 209, 197, 0.14);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}

.parts-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 12px;
}

.parts-stat-grid > article {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.parts-stat-grid > article > div {
  display: flex;
  flex-direction: column;
}

.parts-stat-grid span {
  color: #8b9995;
  font-size: 12px;
}

.parts-stat-grid strong {
  font-size: 18px;
  line-height: 1.3;
}

.parts-stat-grid em {
  margin-left: 1px;
  color: #8a9894;
  font-size: 12px;
  font-style: normal;
}

.parts-stat-grid small {
  color: #97a29e;
  font-size: 12px;
}

.parts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 13px;
}

.part-requests {
  min-width: 0;
  padding: 15px;
}

.request-list {
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}

.request-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 9px 4px;
  color: #758580;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  text-align: left;
  cursor: pointer;
}

.request-row:hover {
  background: #fbfcfa;
}

.request-part-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #55877c;
  background: #edf5f1;
  border-radius: 9px;
}

.request-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.request-main > div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.request-main strong {
  overflow: hidden;
  color: #394e49;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-main small {
  color: #9aa5a1;
  font-size: 12px;
}

.request-qty,
.request-quotes,
.request-time {
  min-width: 68px;
  display: flex;
  flex-direction: column;
  color: #50635e;
  font-size: 12.5px;
}

.request-qty small,
.request-quotes small,
.request-time small {
  color: #9ca6a2;
  font-size: 11.5px;
}

.request-quotes strong {
  color: #278f7b;
  font-size: 12.5px;
}

.parts-aside {
  display: grid;
  align-content: start;
  gap: 11px;
}

.urgent-part-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  color: white;
  background:
    radial-gradient(circle at 100% 0, rgba(240, 181, 82, 0.23), transparent 38%),
    linear-gradient(140deg, #5e4323, #3d3020);
  border-radius: 14px;
}

.urgent-rush {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  color: #f4d39d;
  background: rgba(240, 187, 99, 0.12);
  border-radius: 5px;
  font-size: 12px;
}

.urgent-part-card h3 {
  margin-top: 9px;
  font-size: 16px;
}

.urgent-part-card > p {
  margin-top: 2px;
  color: #c6b291;
  font-size: 12.5px;
}

.urgent-route {
  display: flex;
  align-items: center;
  margin: 13px 0;
  color: #e4d5bd;
  font-size: 12px;
}

.urgent-route i {
  height: 1px;
  flex: 1;
  margin: 0 5px;
  background: rgba(238, 207, 157, 0.25);
}

.truck-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #e5ba72;
  background: rgba(237, 186, 98, 0.12);
  border-radius: 7px;
}

.tracking-mini {
  padding: 14px;
}

.tracking-step {
  position: relative;
  display: flex;
  gap: 9px;
  padding: 7px 0;
}

.tracking-step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 25px;
  bottom: -7px;
  width: 1px;
  background: #e1e7e1;
}

.tracking-step:last-child::after {
  display: none;
}

.tracking-step > i {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  flex: none;
  display: grid;
  place-items: center;
  color: white;
  background: #fff;
  border: 1px solid #ced8d2;
  border-radius: 50%;
}

.tracking-step.done > i {
  background: #41a68d;
  border-color: #41a68d;
}

.tracking-step.active > i {
  background: #fff;
  border: 3px solid #d59b40;
  box-shadow: 0 0 0 3px #fff7ea;
}

.tracking-step > span {
  display: flex;
  flex-direction: column;
}

.tracking-step strong {
  font-size: 12.5px;
}

.tracking-step small {
  color: #9aa4a0;
  font-size: 11.5px;
}

.substitute-note {
  display: flex;
  gap: 9px;
  padding: 13px;
  color: #49786f;
  background: #eff7f4;
  border-color: #dfebe6;
}

.substitute-note > span {
  flex: none;
}

.substitute-note strong {
  color: #3e615a;
  font-size: 12.5px;
}

.substitute-note p {
  margin: 2px 0 4px;
  color: #829791;
  font-size: 12px;
  line-height: 1.6;
}

.data-table {
  padding-top: 7px;
}

.data-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.7fr 0.8fr 0.8fr 20px;
  align-items: center;
  min-height: 52px;
  gap: 8px;
  padding: 8px 5px;
  color: #74847f;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  text-align: left;
  font-size: 12.5px;
}

button.data-row {
  cursor: pointer;
}

.data-head {
  min-height: 30px;
  color: #97a29e;
  background: #f8faf7;
  border-radius: 6px;
  font-size: 12px;
}

.data-row > span:first-child {
  display: flex;
  flex-direction: column;
}

.data-row strong {
  color: #3d524d;
  font-size: 12.5px;
}

.data-row small {
  color: #98a39f;
  font-size: 11.5px;
}

.logistics-focus {
  padding: 7px 3px;
}

.logistics-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  background: #f8faf7;
  border-radius: 10px;
}

.logistics-head > div {
  flex: 1;
}

.logistics-head > div > span {
  color: #2c947f;
  font-size: 12px;
}

.logistics-head h3 {
  font-size: 14.5px;
}

.logistics-head p {
  color: #8f9c98;
  font-size: 12px;
}

.logistics-timeline {
  padding: 20px 9px 7px 15px;
}

.logistics-event {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 0 0 20px;
}

.logistics-event::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 13px;
  bottom: 0;
  width: 1px;
  background: #e3e9e3;
}

.logistics-event:last-child::after {
  display: none;
}

.logistics-event > i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  flex: none;
  border: 2px solid #c8d4ce;
  border-radius: 50%;
  background: white;
}

.logistics-event.current > i {
  border-color: #2b9b85;
  box-shadow: 0 0 0 4px #eaf7f3;
}

.logistics-event > div {
  display: grid;
  grid-template-columns: 1fr auto;
  flex: 1;
}

.logistics-event strong {
  font-size: 12.5px;
}

.logistics-event small {
  color: #81928d;
  font-size: 12px;
}

.logistics-event p {
  grid-column: 1 / -1;
  color: #9aa5a1;
  font-size: 12px;
}

/* Providers */
.deployment-mode-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  color: #6d654b;
  background: #fbf5e8;
  border: 1px solid #eadcc0;
  border-radius: 8px;
  font-size: 12.5px;
}

.deployment-mode-note strong {
  color: #5b5037;
}

.provider-hero-strip {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 0;
  margin-bottom: 13px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.provider-count {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 0;
  border-right: 1px solid #e8ece7;
}

.provider-shield {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  color: #347e70;
  background: #e9f5f1;
  border-radius: 10px;
}

.provider-count > div,
.provider-quality {
  display: flex;
  flex-direction: column;
}

.provider-count strong,
.provider-quality strong {
  color: var(--ink-strong);
  font-size: 20px;
  line-height: 1.3;
}

.provider-count small,
.provider-quality span {
  color: #8c9995;
  font-size: 12px;
}

.provider-quality {
  padding-left: 15px;
  border-right: 1px solid #e8ece7;
}

.provider-quality:last-child {
  border-right: 0;
}

.provider-quality em {
  color: #8a9793;
  font-size: 12.5px;
  font-style: normal;
}

.provider-quality small {
  color: #8f9d98;
  font-size: 12px;
}

.provider-quality small svg {
  display: inline;
  vertical-align: -1px;
  color: #27967e;
}

.provider-stars {
  display: flex;
  gap: 1px;
  color: #c68b2f;
}

.provider-stars svg {
  fill: currentColor;
}

.provider-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.provider-filter-tabs {
  display: flex;
  gap: 3px;
}

.provider-filter-tabs button {
  padding: 6px 11px;
  background: #fff;
  border: 1px solid var(--line);
}

.provider-filter-tabs button.active {
  color: #167265;
  background: #e6f4f0;
  border-color: #c4e4db;
}

.providers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

.provider-card {
  padding: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  transition: 160ms ease;
}

.provider-card:hover {
  border-color: #c8ded7;
  box-shadow: 0 10px 25px rgba(22, 67, 58, 0.05);
}

.provider-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.provider-name {
  flex: 1;
  min-width: 0;
}

.provider-name h3 {
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-name p {
  color: #8d9a96;
  font-size: 12.5px;
}

.favorite-button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #b4bcba;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.favorite-button.active {
  color: #c89134;
}

.favorite-button.active svg {
  fill: currentColor;
}

.provider-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0;
}

.provider-tag-row span {
  padding: 2px 6px;
  color: #788d87;
  background: #f1f5f2;
  border-radius: 4px;
  font-size: 11.5px;
}

.provider-score-row {
  display: grid;
  grid-template-columns: 0.65fr 1fr 1fr;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #edf0ec;
  border-bottom: 1px solid #edf0ec;
}

.provider-score {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.provider-score strong {
  color: #227f70;
  font-size: 20px;
}

.provider-score span {
  color: #94a09c;
  font-size: 11.5px;
}

.provider-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  color: #bf892f;
}

.provider-rating svg {
  fill: currentColor;
}

.provider-rating strong {
  color: #4f625d;
  font-size: 14px;
}

.provider-rating small {
  width: 100%;
  color: #98a29f;
  font-size: 11.5px;
}

.provider-distance {
  display: flex;
  flex-direction: column;
}

.provider-distance span {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #526861;
  font-size: 12.5px;
}

.provider-distance small {
  color: #9ba5a1;
  font-size: 11.5px;
}

.provider-performance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  padding: 10px 0 3px;
}

.provider-performance > div {
  position: relative;
}

.provider-performance span {
  color: #899792;
  font-size: 12px;
}

.provider-performance strong {
  float: right;
  color: #4c625c;
  font-size: 12.5px;
}

.provider-performance .mini-meter {
  clear: both;
  margin-top: 5px;
}

.provider-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding-top: 9px;
}

.provider-footer-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #909d99;
  font-size: 12.5px;
}

/* Profile */
.profile-header-card {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 12px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at 90% -10%, rgba(105, 208, 183, 0.1), transparent 30%),
    #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.company-emblem {
  width: 50px;
  height: 50px;
  flex: none;
  display: grid;
  place-items: center;
  color: #e7faf5;
  background: linear-gradient(135deg, #1d796d, #10564e);
  border-radius: 13px;
  font-size: 20px;
  font-weight: 700;
}

.company-identity {
  flex: 1;
}

.company-identity > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.company-identity h2 {
  font-size: 17px;
}

.company-identity > p {
  color: #7f8f8a;
  font-size: 12.5px;
}

.company-identity > span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: #9aa5a1;
  font-size: 12px;
}

.profile-header-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profile-header-meta > div {
  display: flex;
  flex-direction: column;
}

.profile-header-meta span {
  color: #94a09c;
  font-size: 12px;
}

.profile-header-meta strong {
  font-size: 13px;
}

.finance-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.finance-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 82px;
  overflow: hidden;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.finance-card.primary {
  display: flex;
  justify-content: space-between;
  color: white;
  background: linear-gradient(125deg, #14584f, #0e3d38);
  border-color: #10483f;
}

.finance-card > div:not(.metric-icon) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.finance-card span {
  color: #8d9a96;
  font-size: 12px;
}

.finance-card.primary span {
  color: #94bdb4;
}

.finance-card strong {
  color: var(--ink-strong);
  font-size: 18px;
  line-height: 1.35;
}

.finance-card.primary strong {
  color: white;
}

.finance-card em {
  color: #71857f;
  font-size: 12.5px;
  font-style: normal;
}

.finance-card small {
  color: #99a4a0;
  font-size: 12px;
}

.finance-card.primary small {
  color: #83aaa1;
}

.finance-card > button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  color: #7a908a;
  background: transparent;
  border: 0;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.finance-card.primary > button {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 8px;
  color: #d6f3eb;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.finance-pattern {
  position: absolute;
  right: -35px;
  bottom: -55px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(170, 234, 219, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 21px rgba(170, 234, 219, 0.025);
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 13px;
}

.profile-main {
  min-width: 0;
}

.profile-main .filter-bar {
  padding: 0 15px;
}

.profile-table {
  padding: 8px 15px 13px;
}

.profile-table-head,
.profile-table-row {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 0.7fr 0.7fr 0.7fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-bottom: 1px solid #edf0ec;
  font-size: 12.5px;
}

.profile-table-head {
  min-height: 31px;
  color: #98a39f;
  font-size: 12px;
}

.profile-table-row strong {
  color: #485d57;
  font-size: 12.5px;
}

.credit-panel {
  padding: 15px;
}

.credit-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px;
  color: white;
  background: linear-gradient(120deg, #164d46, #0f3330);
  border-radius: 11px;
}

.credit-hero > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.credit-hero span {
  color: #8bb1a8;
  font-size: 12.5px;
}

.credit-hero strong {
  font-size: 26px;
}

.credit-hero small {
  color: #7e9e97;
  font-size: 12px;
}

.credit-meter {
  height: 4px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.credit-meter i {
  display: block;
  height: 100%;
  background: #79d4be;
  border-radius: 4px;
}

.credit-badge {
  align-self: flex-start;
  padding: 4px 7px;
  color: #b1e8da !important;
  background: rgba(134, 225, 203, 0.1);
  border-radius: 5px;
}

.credit-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 9px;
}

.credit-detail-grid > div {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: #f9fbf8;
  border: 1px solid #e9ede8;
  border-radius: 8px;
}

.credit-detail-grid span {
  color: #8f9c98;
  font-size: 12px;
}

.credit-detail-grid strong {
  font-size: 14.5px;
}

.credit-detail-grid small {
  color: #9ba5a1;
  font-size: 11.5px;
}

.approval-list {
  padding: 6px 15px 13px;
}

.approval-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 65px;
  border-bottom: 1px solid #edf0ec;
}

.approval-icon {
  width: 35px;
  height: 35px;
  flex: none;
  display: grid;
  place-items: center;
  color: #5c8178;
  background: #f0f5f2;
  border-radius: 9px;
}

.approval-row > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.approval-row strong {
  font-size: 13px;
}

.approval-row p {
  color: #879691;
  font-size: 12px;
}

.approval-row small {
  color: #a2aba7;
  font-size: 11.5px;
}

.approval-actions {
  display: flex;
  gap: 5px;
}

.members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px 8px;
}

.members-header h3 {
  font-size: 14.5px;
}

.members-header p {
  color: #929e99;
  font-size: 12px;
}

.member-list {
  padding: 0 15px 13px;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  border-bottom: 1px solid #edf0ec;
}

.member-row > div {
  display: flex;
  flex-direction: column;
}

.member-row strong {
  font-size: 12.5px;
}

.member-row small {
  color: #98a29f;
  font-size: 12px;
}

.member-role {
  min-width: 80px;
  color: #50645e;
  font-size: 12.5px;
}

.member-permission {
  flex: 1;
  color: #8a9793;
  font-size: 12px;
}

.contract-list {
  padding: 6px 15px 13px;
}

.contract-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 0;
  color: #8c9995;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  text-align: left;
  cursor: pointer;
}

.contract-icon {
  width: 36px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: #5c847a;
  background: #eff5f2;
  border-radius: 8px;
}

.contract-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contract-row strong {
  color: #3d514c;
  font-size: 12.5px;
}

.contract-row small {
  color: #98a39f;
  font-size: 12px;
}

.contract-amount {
  display: flex;
  flex-direction: column;
  color: #425650;
  font-size: 13px;
}

.contract-amount small {
  font-size: 11.5px;
}

.profile-aside {
  display: grid;
  align-content: start;
  gap: 11px;
}

.profile-aside .surface-section {
  padding: 14px;
}

.admin-person {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0 12px;
  border-bottom: 1px solid #edf0ec;
}

.admin-person > div {
  display: flex;
  flex-direction: column;
}

.admin-person strong {
  font-size: 13px;
}

.admin-person p,
.admin-person small {
  color: #909d99;
  font-size: 12px;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 9px;
}

.contact-row span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #899692;
  font-size: 12px;
}

.contact-row strong {
  font-size: 12px;
  font-weight: 550;
}

.security-card {
  display: flex;
  gap: 9px;
  background: #edf7f3;
  border-color: #dbeae4;
}

.security-icon {
  color: #3b8d7c;
}

.security-card strong {
  font-size: 13px;
}

.security-card p {
  margin: 2px 0 5px;
  color: #7b928b;
  font-size: 12px;
  line-height: 1.6;
}

.security-card button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  color: #47796e;
  background: transparent;
  border: 0;
  font-size: 12px;
  cursor: pointer;
}

.service-manager-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #153d38;
  border-radius: 12px;
  color: white;
}

.manager-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  color: #17473e;
  background: #a7dfcf;
  border-radius: 9px;
  font-weight: 600;
}

.service-manager-card > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-manager-card span,
.service-manager-card small {
  color: #7ea59c;
  font-size: 11.5px;
}

.service-manager-card strong {
  font-size: 13px;
}

/* Modal and drawer foundations */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 28, 26, 0.52);
  backdrop-filter: blur(7px);
  animation: backdropIn 160ms ease;
}

@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.report-modal {
  width: min(800px, 94vw);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow: 0 35px 100px rgba(5, 29, 25, 0.28);
  animation: modalIn 200ms ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.report-header {
  padding: 18px 22px 15px;
  background:
    radial-gradient(circle at 94% 0, rgba(67, 185, 160, 0.12), transparent 31%),
    #f8fbf8;
  border-bottom: 1px solid #e7ece7;
}

.report-brandline {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 11px;
  color: #66827b;
  font-size: 12.5px;
}

.report-brandline .brand-mark {
  width: 22px;
  height: 22px;
  color: #168f7d;
  background: #e5f3ee;
  border: 0;
  border-radius: 7px;
}

.report-brandline .brand-mark svg {
  width: 19px;
  height: 19px;
}

.report-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.report-title h2 {
  font-size: 20px;
  letter-spacing: -0.03em;
}

.report-title p {
  margin-top: 2px;
  color: #889590;
  font-size: 12.5px;
}

.report-steps {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 15px;
}

.report-step {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.48;
}

.report-step.active,
.report-step.done {
  opacity: 1;
}

.report-step > span {
  width: 25px;
  height: 25px;
  flex: none;
  display: grid;
  place-items: center;
  color: #7b8b86;
  background: #e8ece8;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
}

.report-step.active > span {
  color: white;
  background: #158f7e;
  box-shadow: 0 4px 12px rgba(21, 143, 126, 0.2);
}

.report-step.done > span {
  color: #167e6e;
  background: #ddf2eb;
}

.report-step > div {
  display: flex;
  flex-direction: column;
}

.report-step strong {
  font-size: 12.5px;
}

.report-step small {
  color: #9ca6a2;
  font-size: 11.5px;
}

.step-connector {
  width: 35px;
  height: 1px;
  background: #dfe5df;
}

.report-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 20px;
  scrollbar-width: thin;
  scrollbar-color: #c7d3ce transparent;
}

.report-section-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}

.report-section-head > span {
  width: 25px;
  height: 25px;
  flex: none;
  display: grid;
  place-items: center;
  color: #1a8d7b;
  background: #e9f6f2;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}

.report-section-head h3 {
  font-size: 15px;
}

.report-section-head p {
  color: #8d9995;
  font-size: 12.5px;
}

.report-device-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 14px;
}

.scan-device-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  text-align: left;
  background: linear-gradient(125deg, #edf8f4, #fbfdfb);
  border: 1px solid #d9ebe4;
  border-radius: 10px;
  cursor: pointer;
}

.scan-device-card:hover {
  border-color: #acd9cd;
}

.scan-animation {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  color: #248c7b;
  background: #fff;
  border: 1px solid #d8e9e3;
  border-radius: 11px;
  box-shadow: 0 5px 12px rgba(28, 100, 85, 0.06);
}

.scan-device-card > div {
  flex: 1;
}

.scan-device-card strong {
  font-size: 13px;
}

.scan-device-card p {
  color: #8a9894;
  font-size: 12px;
}

.scan-action {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #6c8881;
  background: #fff;
  border-radius: 8px;
}

.tag-search-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 5px 8px;
  padding: 10px 12px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 10px;
}

.tag-search-card label {
  grid-column: 1 / -1;
  height: 31px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #91a09b;
  background: #fff;
  border: 1px solid #e3e8e3;
  border-radius: 7px;
}

.tag-search-card input {
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 12.5px;
}

.tag-search-card > span {
  color: #a5afab;
  font-size: 12px;
}

.tag-search-card button {
  justify-self: end;
  padding: 0;
  color: #51847a;
  background: transparent;
  border: 0;
  font-size: 12px;
  cursor: pointer;
}

.report-device-picker {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr;
  gap: 15px;
}

.group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.group-title strong {
  font-size: 12.5px;
}

.group-title span {
  color: #9ba5a1;
  font-size: 12px;
}

.recent-device-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.report-device-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  text-align: left;
  background: #fff;
  border: 1px solid #e7ece7;
  border-radius: 8px;
  cursor: pointer;
}

.report-device-option:hover,
.report-device-option.selected {
  background: #f7fdfb;
  border-color: #afdcd1;
}

.report-device-icon {
  width: 29px;
  height: 29px;
  flex: none;
  display: grid;
  place-items: center;
  color: #4d8177;
  background: #edf5f2;
  border-radius: 8px;
}

.report-device-option > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.report-device-option strong {
  font-size: 12.5px;
}

.report-device-option small {
  color: #949f9b;
  font-size: 12px;
}

.selected-check {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: white;
  background: #1a9a87;
  border-radius: 50%;
}

.mini-equipment-tree {
  padding: 5px 7px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 8px;
}

.mini-equipment-tree > div {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  color: #6d7f7a;
  font-size: 12px;
}

.mini-equipment-tree .indent-1 {
  padding-left: 13px;
}

.mini-equipment-tree .indent-2 {
  padding-left: 27px;
}

.mini-equipment-tree button {
  width: 100%;
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px 3px 42px;
  color: #70817c;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.mini-equipment-tree button small {
  margin-left: auto;
  color: #a0aaa6;
  font-size: 11.5px;
}

.mini-equipment-tree button:hover,
.mini-equipment-tree button.selected {
  color: #21796c;
  background: #eaf5f1;
}

.selected-device-banner,
.report-empty-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  color: #2e7c6d;
  background: #edf8f4;
  border: 1px solid #d8ebe4;
  border-radius: 8px;
}

.selected-device-banner > div {
  flex: 1;
}

.selected-device-banner strong {
  font-size: 12.5px;
}

.selected-device-banner p {
  color: #718d86;
  font-size: 12px;
}

.report-empty-hint {
  color: #8b9793;
  background: #f7f9f6;
  border-color: #e7ebe7;
  font-size: 12.5px;
}

.report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid #e7ece7;
  background: #fbfcfa;
}

.report-safe-note {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8b9894;
  font-size: 12px;
}

.report-footer-actions {
  display: flex;
  gap: 7px;
}

.report-footer-actions .button-primary {
  min-width: 120px;
}

.publish-button {
  background: linear-gradient(135deg, #df9340, #c56f24);
  border-color: #c77b2f;
  box-shadow: 0 8px 18px rgba(193, 112, 35, 0.2);
}

.report-selected-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: #f6faf8;
  border: 1px solid #e1ebe6;
  border-radius: 8px;
}

.report-selected-compact > span {
  color: #4e7f75;
}

.report-selected-compact > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.report-selected-compact strong {
  font-size: 12.5px;
}

.report-selected-compact small {
  color: #8f9c98;
  font-size: 12px;
}

.report-selected-compact button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  color: #528178;
  background: transparent;
  border: 0;
  font-size: 12px;
  cursor: pointer;
}

.symptom-section,
.urgency-section,
.form-section {
  margin-top: 14px;
}

.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.field-label strong {
  font-size: 13px;
}

.field-label span {
  color: #96a19d;
  font-size: 12px;
}

.symptom-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.symptom-chips button,
.safety-chips button {
  min-height: 29px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  color: #667a74;
  background: #fff;
  border: 1px solid #dfe6df;
  border-radius: 7px;
  font-size: 12.5px;
  cursor: pointer;
}

.symptom-chips button:hover,
.safety-chips button:hover {
  border-color: #b4d8cf;
}

.symptom-chips button.selected,
.safety-chips button.selected {
  color: #176f62;
  background: #e9f6f2;
  border-color: #bce1d7;
  font-weight: 550;
}

.custom-symptom {
  height: 31px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 0 9px;
  color: #a0aaa6;
  background: #fafbf9;
  border: 1px dashed #dde5df;
  border-radius: 7px;
}

.custom-symptom input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12.5px;
}

.rich-media-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 9px;
  margin-top: 12px;
}

.voice-note-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  background: linear-gradient(135deg, #eef7f3, #fbfdfb);
  border: 1px solid #dcebe5;
  border-radius: 10px;
}

.voice-note-card.recording {
  border-color: #e6b774;
  background: #fff9f0;
}

.voice-button {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, #1a9c89, #127a6e);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 7px 15px rgba(20, 143, 126, 0.22);
  cursor: pointer;
}

.recording .voice-button {
  background: linear-gradient(135deg, #e7a545, #ca7c26);
  animation: pulseVoice 1.3s infinite;
}

@keyframes pulseVoice {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221, 151, 56, 0.23); }
  50% { box-shadow: 0 0 0 9px rgba(221, 151, 56, 0); }
}

.voice-note-card > div {
  flex: 1;
}

.voice-note-card strong {
  font-size: 12.5px;
}

.voice-wave {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 3px 0;
}

.voice-wave i {
  width: 2px;
  height: var(--h);
  max-height: 17px;
  background: #67b7a4;
  border-radius: 2px;
}

.recording .voice-wave i {
  background: #d1963e;
  animation: waveBar 0.75s ease-in-out infinite alternate;
  animation-delay: calc(var(--h) * -0.02s);
}

@keyframes waveBar {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

.voice-note-card small {
  color: #92a09b;
  font-size: 11.5px;
}

.media-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.media-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 70px;
  padding: 6px;
  color: #71857f;
  background: #fafbf9;
  border: 1px dashed #d7e1da;
  border-radius: 9px;
  cursor: pointer;
}

.media-upload:hover {
  color: #287e70;
  border-color: #9fcfc2;
  background: #f7fcfa;
}

.media-upload strong {
  font-size: 12px;
}

.media-upload small {
  color: #9ba5a1;
  font-size: 11.5px;
}

.media-preview {
  position: relative;
  overflow: hidden;
  min-height: 70px;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  color: white;
  border-radius: 9px;
}

.media-preview span,
.media-preview small {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
}

.media-preview > button {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0;
  color: white;
  background: rgba(10, 30, 27, 0.55);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.photo-preview {
  background: linear-gradient(to top, rgba(9, 31, 27, 0.75), transparent), radial-gradient(circle at 70% 25%, #8e9a92, #485a54);
}

.fake-machine-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fake-machine-photo span {
  position: absolute;
  width: 52px;
  height: 52px;
  left: 15px;
  top: 10px;
  border: 7px solid #c4c6bb;
  border-radius: 50%;
  background: #48504b;
}

.fake-machine-photo i {
  position: absolute;
  width: 65%;
  height: 5px;
  right: -8px;
  top: 41px;
  background: #d1c9b9;
  transform: rotate(-8deg);
}

.fake-machine-photo b {
  position: absolute;
  width: 35%;
  height: 12px;
  right: 3px;
  bottom: 12px;
  background: #273b36;
}

.video-preview {
  background: linear-gradient(to top, rgba(8, 29, 25, 0.75), transparent), linear-gradient(135deg, #667e76, #2f4c46);
}

.video-preview > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #d9f7ee;
  background: rgba(18, 53, 47, 0.54);
  border-radius: 50%;
}

.urgency-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.urgency-options button {
  position: relative;
  display: grid;
  grid-template-columns: 27px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 9px;
  text-align: left;
  background: #fafbf9;
  border: 1px solid #e4eae4;
  border-radius: 9px;
  cursor: pointer;
}

.urgency-options button:hover,
.urgency-options button.selected {
  border-color: #bcdcd4;
  background: #f7fcf9;
}

.urgency-options button.selected {
  box-shadow: inset 0 0 0 1px #88c9ba;
}

.urgency-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #a67b36;
  background: #fff4e4;
}

.urgency-options button:nth-child(1) .urgency-icon {
  color: #b25143;
  background: #ffefeb;
}

.urgency-options button > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.urgency-options strong {
  font-size: 12.5px;
}

.urgency-options small {
  color: #929f9a;
  font-size: 11.5px;
}

.urgency-options em {
  display: none;
}

.radio-dot {
  width: 14px;
  height: 14px;
  display: block;
  border: 1px solid #cbd5cf;
  border-radius: 50%;
  background: white;
}

.selected .radio-dot {
  border: 4px solid #199786;
}

.service-summary-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px;
  background: #f6faf8;
  border: 1px solid #deebe5;
  border-radius: 9px;
}

.service-summary-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-device {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  color: #4f8176;
  background: white;
  border-radius: 8px;
}

.service-summary-main > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-summary-main strong {
  font-size: 12.5px;
}

.service-summary-main p {
  color: #85958f;
  font-size: 12px;
}

.service-summary-card > button {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  color: #54827a;
  background: transparent;
  border: 0;
  font-size: 12px;
  cursor: pointer;
}

.arrival-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.arrival-options button {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 9px;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8e2;
  border-radius: 8px;
  cursor: pointer;
}

.arrival-options button:hover,
.arrival-options button.selected {
  background: #f7fcf9;
  border-color: #a9d6ca;
}

.arrival-options strong {
  font-size: 12.5px;
}

.arrival-options small {
  color: #94a09c;
  font-size: 11.5px;
}

.arrival-options .radio-dot {
  position: absolute;
  top: 8px;
  right: 8px;
}

.form-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-field > span {
  color: #697d77;
  font-size: 12.5px;
  font-weight: 550;
}

.form-field > div {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  color: #90a09a;
  background: #fff;
  border: 1px solid #dfe6df;
  border-radius: 7px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0;
  color: #3d554f;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 12.5px;
}

.form-field textarea {
  min-height: 70px;
  padding: 8px 0;
  resize: vertical;
}

.safety-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.safety-notice {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #9f7029;
  font-size: 12px;
}

.estimate-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.2fr;
  gap: 10px;
  margin-top: 13px;
  padding: 10px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 8px;
}

.estimate-row > div {
  display: flex;
  flex-direction: column;
}

.estimate-row span {
  color: #8c9995;
  font-size: 12px;
}

.estimate-row strong {
  font-size: 14px;
}

.estimate-row small {
  color: #9da7a3;
  font-size: 11.5px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7a8985;
  font-size: 12px;
  cursor: pointer;
}

.checkbox-line input {
  width: 13px;
  height: 13px;
  accent-color: #199886;
}

.success-modal {
  width: min(470px, 92vw);
  padding: 28px 30px 24px;
  text-align: center;
  background: #fff;
  border-radius: 19px;
  box-shadow: 0 30px 90px rgba(5, 29, 25, 0.3);
  animation: modalIn 200ms ease;
}

.success-radar {
  position: relative;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.success-radar i {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(34, 164, 141, 0.13);
  border-radius: 50%;
  animation: radar 2.4s infinite;
}

.success-radar i:nth-child(2) {
  animation-delay: 0.8s;
}

.success-radar i:nth-child(3) {
  animation-delay: 1.6s;
}

@keyframes radar {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

.success-radar > span {
  position: relative;
  z-index: 1;
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, #27b49b, #107d70);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(23, 155, 134, 0.28);
}

.success-modal h2 {
  margin: 3px 0 5px;
  font-size: 20px;
}

.success-description {
  max-width: 360px;
  margin: 0 auto;
  color: #81908b;
  font-size: 12.5px;
  line-height: 1.7;
}

.notify-count {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 16px 0 12px;
  padding: 11px 0;
  background: #f4f8f5;
  border: 1px solid #e5ebe6;
  border-radius: 9px;
}

.notify-count > div {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e1e7e1;
}

.notify-count > div:last-child {
  border-right: 0;
}

.notify-count strong {
  color: #187d6e;
  font-size: 18px;
}

.notify-count span {
  color: #8d9a96;
  font-size: 12px;
}

.matching-list {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.matching-list > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0ec;
}

.matching-list > div > span:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.matching-list strong {
  font-size: 12.5px;
}

.matching-list small {
  color: #8f9d98;
  font-size: 12px;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 17px;
}

.drawer-backdrop {
  justify-content: flex-end;
  padding: 0;
}

.detail-drawer {
  width: min(690px, 94vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: -25px 0 70px rgba(8, 32, 28, 0.2);
  animation: drawerIn 220ms ease;
}

@keyframes drawerIn {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 22px 16px;
  background:
    radial-gradient(circle at 86% 0, rgba(52, 177, 152, 0.1), transparent 30%),
    #f8fbf8;
  border-bottom: 1px solid #e6ebe6;
}

.drawer-header > div:first-child {
  min-width: 0;
}

.drawer-header p {
  color: #84938e;
  font-size: 12px;
}

.drawer-header h2 {
  margin: 3px 0 7px;
  overflow: hidden;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-status {
  display: flex;
  gap: 5px;
}

.drawer-meta-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 22px;
  padding: 12px 0;
  border-bottom: 1px solid #e8ece7;
}

.drawer-meta-bar > div {
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  border-right: 1px solid #e8ece7;
}

.drawer-meta-bar > div:first-child {
  padding-left: 0;
}

.drawer-meta-bar > div:last-child {
  border-right: 0;
}

.drawer-meta-bar span {
  color: #97a29e;
  font-size: 12px;
}

.drawer-meta-bar strong {
  overflow: hidden;
  color: #405650;
  font-size: 12.5px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-sla strong {
  color: #b7781f;
}

.drawer-tabs {
  flex: none;
  min-height: 45px;
  padding: 0 22px;
}

.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 17px 22px 20px;
  scrollbar-width: thin;
  scrollbar-color: #c7d3ce transparent;
}

.drawer-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 22px;
  background: #fbfcfa;
  border-top: 1px solid #e6ebe6;
}

.quote-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px;
  background: #f7faf7;
  border: 1px solid #e7ece7;
  border-radius: 8px;
}

.quote-summary > div {
  display: flex;
  flex-direction: column;
  padding: 0 9px;
  border-right: 1px solid #e3e9e3;
}

.quote-summary > div:first-child {
  padding-left: 0;
}

.quote-summary > div:last-child {
  border-right: 0;
}

.quote-summary span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #8c9995;
  font-size: 12px;
}

.quote-summary strong {
  font-size: 13px;
}

.quote-card-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quote-card {
  width: 100%;
  padding: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8e2;
  border-radius: 10px;
  cursor: pointer;
}

.quote-card:hover,
.quote-card.selected {
  border-color: #9fd3c5;
  background: #fbfefc;
}

.quote-card.selected {
  box-shadow: inset 0 0 0 1px #83c3b3;
}

.quote-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-provider {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.quote-provider strong {
  color: #394f4a;
  font-size: 13px;
}

.quote-provider small {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #8e9b97;
  font-size: 12px;
}

.quote-provider small svg {
  fill: #c38b31;
  color: #c38b31;
}

.quote-body {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr 0.8fr;
  align-items: center;
  gap: 14px;
  margin-top: 9px;
  padding: 9px 0 0;
  border-top: 1px solid #edf0ec;
}

.quote-body > div {
  display: flex;
  flex-direction: column;
}

.quote-body span {
  color: #96a29e;
  font-size: 11.5px;
}

.quote-body strong {
  font-size: 13px;
}

.quote-body small {
  color: #899793;
  font-size: 11.5px;
}

.quote-price {
  align-items: flex-end;
}

.quote-price strong {
  color: #18796b;
  font-size: 17px;
}

.quote-recommendation {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  padding: 5px 7px;
  color: #438277;
  background: #edf8f4;
  border-radius: 5px;
  font-size: 11.5px;
}

.quote-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: #899894;
  font-size: 12px;
}

.progress-overview {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
}

.progress-hero {
  padding: 14px;
  background: linear-gradient(145deg, #153f39, #0e2f2c);
  border-radius: 11px;
  color: white;
}

.progress-hero > span {
  color: #85ada3;
  font-size: 12px;
}

.progress-hero > strong {
  display: block;
  margin: 5px 0 2px;
  font-size: 17px;
}

.progress-hero > p {
  color: #82a299;
  font-size: 12.5px;
}

.progress-hero .progress-track {
  margin-top: 15px;
  background: rgba(255, 255, 255, 0.11);
}

.progress-hero .progress-track i {
  background: #7bdac1;
}

.timeline-full {
  padding: 5px 0;
}

.timeline-item {
  position: relative;
  display: flex;
  gap: 9px;
  padding-bottom: 13px;
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: 0;
  width: 1px;
  background: #e1e7e1;
}

.timeline-item:last-child::after {
  display: none;
}

.timeline-item > i {
  width: 13px;
  height: 13px;
  flex: none;
  display: grid;
  place-items: center;
  color: white;
  background: white;
  border: 1px solid #ccd8d2;
  border-radius: 50%;
}

.timeline-item.done > i {
  background: #42a68e;
  border-color: #42a68e;
}

.timeline-item.active > i {
  border: 3px solid #d69a3f;
  box-shadow: 0 0 0 3px #fff7ea;
}

.timeline-item > div {
  display: grid;
  grid-template-columns: 1fr auto;
  flex: 1;
}

.timeline-item strong {
  font-size: 12.5px;
}

.timeline-item small {
  color: #81928c;
  font-size: 12px;
}

.timeline-item p {
  grid-column: 1 / -1;
  color: #9ba5a1;
  font-size: 12px;
}

.acceptance-ready {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  background: #eff9f5;
  border: 1px solid #d8ebe4;
  border-radius: 9px;
}

.acceptance-icon {
  color: #25927c;
}

.acceptance-ready p {
  color: #5c766f;
  font-size: 12px;
}

.acceptance-ready h3 {
  font-size: 15px;
}

.acceptance-ready > div > span {
  color: #8b9994;
  font-size: 12px;
}

.acceptance-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 10px;
}

.acceptance-metrics > div {
  display: flex;
  flex-direction: column;
  padding: 9px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 8px;
}

.acceptance-metrics span {
  color: #8d9a96;
  font-size: 12px;
}

.acceptance-metrics strong {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.6;
}

.evidence-section {
  margin-top: 13px;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.evidence-photo,
.evidence-more {
  position: relative;
  height: 74px;
  overflow: hidden;
  border-radius: 8px;
}

.evidence-photo.one {
  background: linear-gradient(to top, rgba(9, 27, 23, 0.68), transparent), radial-gradient(circle at 30% 30%, #a2a89f, #46544e 60%);
}

.evidence-photo.two {
  background: linear-gradient(to top, rgba(9, 27, 23, 0.68), transparent), repeating-linear-gradient(45deg, #809088 0 8px, #6f817a 8px 16px);
}

.evidence-photo.three {
  background: linear-gradient(to top, rgba(9, 27, 23, 0.68), transparent), linear-gradient(155deg, #8eb4a9, #e3eee9);
}

.evidence-photo span {
  position: absolute;
  left: 6px;
  bottom: 5px;
  color: white;
  font-size: 11.5px;
}

.evidence-more {
  display: grid;
  place-items: center;
  color: #6c827b;
  background: #f2f5f1;
  font-size: 15px;
}

.acceptance-checklist {
  margin-top: 12px;
}

.acceptance-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 0;
  border-top: 1px solid #edf0ec;
  font-size: 12px;
}

.acceptance-checklist input {
  margin-top: 2px;
  accent-color: #159683;
}

.acceptance-checklist label > span {
  display: flex;
  flex-direction: column;
}

.acceptance-checklist strong {
  color: #445a54;
  font-size: 12.5px;
}

.acceptance-checklist small {
  color: #929e9a;
  font-size: 12px;
}

.wo-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.wo-overview-grid article {
  display: flex;
  flex-direction: column;
  padding: 11px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 9px;
}

.wo-overview-grid span {
  color: #8c9995;
  font-size: 12px;
}

.wo-overview-grid strong {
  margin-top: 2px;
  font-size: 14px;
}

.wo-overview-grid small {
  color: #919e99;
  font-size: 12px;
}

.wo-overview-grid button {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  padding: 0;
  color: #55847a;
  background: transparent;
  border: 0;
  font-size: 11.5px;
  cursor: pointer;
}

.wo-brief {
  margin-top: 13px;
}

.wo-brief > p {
  padding: 10px;
  color: #667873;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.7;
}

.attachment-chips,
.safety-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.attachment-chips span,
.safety-requirements span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  color: #6e817b;
  background: #f1f5f2;
  border-radius: 5px;
  font-size: 12px;
}

.signature-backdrop {
  z-index: 130;
}

.signature-modal {
  width: min(540px, 92vw);
  overflow: hidden;
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 30px 90px rgba(5, 29, 25, 0.32);
  animation: modalIn 190ms ease;
}

.signature-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  background: #f8fbf8;
  border-bottom: 1px solid #e7ece7;
}

.signature-modal header p {
  color: #83938e;
  font-size: 12px;
}

.signature-modal header h2 {
  font-size: 17px;
}

.signature-summary {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 20px;
  padding: 10px;
  color: #507c72;
  background: #edf7f3;
  border-radius: 8px;
}

.signature-summary > div {
  display: flex;
  flex-direction: column;
}

.signature-summary strong {
  color: #385750;
  font-size: 12.5px;
}

.signature-summary p {
  color: #81958f;
  font-size: 12px;
}

.signature-identity {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px;
  margin: 0 20px;
  padding: 9px;
  background: #fafbf9;
  border: 1px solid #e8ede8;
  border-radius: 7px;
  font-size: 12px;
}

.signature-identity span {
  color: #96a19d;
}

.signature-identity strong {
  font-weight: 550;
}

.signature-canvas-wrap {
  position: relative;
  height: 190px;
  margin: 12px 20px;
  overflow: hidden;
  background:
    linear-gradient(#f1f4f1 1px, transparent 1px),
    linear-gradient(90deg, #f1f4f1 1px, transparent 1px),
    #fdfefd;
  background-size: 24px 24px;
  border: 1px dashed #cfdcd5;
  border-radius: 9px;
}

#signature-pad {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

.signature-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #bdc6c2;
  font-size: 15px;
  letter-spacing: 0.22em;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#signature-pad[data-has-ink="true"] + .signature-placeholder {
  display: none;
}

.signature-line {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 30px;
  border-bottom: 1px solid #dce4df;
  pointer-events: none;
}

.signature-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -3px 20px 13px;
}

.signature-tools button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  color: #748681;
  background: transparent;
  border: 0;
  font-size: 12px;
  cursor: pointer;
}

.signature-tools > span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  color: #96a19d;
  font-size: 11.5px;
}

.signature-modal > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: #fbfcfa;
  border-top: 1px solid #e7ece7;
}

.provider-detail-header {
  align-items: center;
}

.provider-profile-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.provider-profile-head p {
  color: #83918d;
  font-size: 12px;
}

.provider-profile-head h2 {
  margin-bottom: 2px;
}

.provider-profile-head > div > span {
  color: #8b9995;
  font-size: 12.5px;
}

.provider-detail-score {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 13px 0;
  background: #f7faf7;
  border: 1px solid #e7ece7;
  border-radius: 9px;
}

.provider-detail-score > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #e1e7e1;
}

.provider-detail-score > div:last-child {
  border-right: 0;
}

.provider-detail-score strong {
  font-size: 17px;
}

.provider-detail-score span {
  color: #8d9a96;
  font-size: 12px;
}

.provider-section {
  margin-top: 17px;
}

.cert-grid,
.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cert-grid span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  color: #4f7169;
  background: #edf7f3;
  border-radius: 6px;
  font-size: 12px;
}

.skill-list span {
  padding: 5px 8px;
  color: #647772;
  background: #f1f4f1;
  border-radius: 6px;
  font-size: 12px;
}

.provider-order-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0ec;
}

.provider-order-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.provider-order-row strong {
  font-size: 12.5px;
}

.provider-order-row small {
  color: #949f9b;
  font-size: 11.5px;
}

.notification-backdrop {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

.notification-panel {
  width: min(390px, 94vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -20px 0 60px rgba(8, 32, 28, 0.18);
  animation: drawerIn 200ms ease;
}

.notification-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e8ece7;
}

.notification-panel header p {
  color: #83928d;
  font-size: 12px;
}

.notification-panel header h2 {
  font-size: 18px;
}

.notification-tabs {
  display: flex;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid #e8ece7;
}

.notification-tabs button {
  position: relative;
  align-self: stretch;
  min-height: 41px;
  padding: 0;
  color: #80908b;
  background: transparent;
  border: 0;
  font-size: 13px;
}

.notification-tabs button.active {
  color: #176d62;
  font-weight: 600;
}

.notification-tabs button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #169482;
}

.notification-tabs span {
  margin-left: 3px;
  padding: 1px 5px;
  color: white;
  background: #dc765f;
  border-radius: 5px;
  font-size: 11.5px;
}

.notification-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}

.notification-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0ec;
  text-align: left;
  cursor: pointer;
}

.notification-row.unread {
  position: relative;
}

.notification-row.unread::before {
  content: "";
  position: absolute;
  right: 0;
  top: 17px;
  width: 5px;
  height: 5px;
  background: #e4755e;
  border-radius: 50%;
}

.notice-icon {
  width: 33px;
  height: 33px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
}

.notice-icon.amber {
  color: #b17720;
  background: var(--amber-soft);
}

.notice-icon.teal {
  color: #278b79;
  background: var(--teal-soft);
}

.notice-icon.blue {
  color: #4977a6;
  background: var(--blue-soft);
}

.notice-icon.gray {
  color: #697c76;
  background: #eef2ee;
}

.notification-row > div {
  flex: 1;
}

.notification-row strong {
  font-size: 13px;
}

.notification-row p {
  color: #83928d;
  font-size: 12px;
  line-height: 1.6;
}

.notification-row small {
  color: #a1aaa7;
  font-size: 11.5px;
}

.notification-panel > footer {
  display: flex;
  justify-content: space-between;
  padding: 13px 20px;
  border-top: 1px solid #e8ece7;
}

.launcher-modal {
  width: min(670px, 92vw);
  padding: 20px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(5, 29, 25, 0.3);
  animation: modalIn 200ms ease;
}

.launcher-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 15px;
}

.launcher-modal header p {
  color: #86948f;
  font-size: 12px;
}

.launcher-modal header h2 {
  font-size: 18px;
}

.launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.launcher-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px;
  text-align: left;
  background: #fafbf9;
  border: 1px solid #e6ebe6;
  border-radius: 10px;
  cursor: pointer;
}

.launcher-grid button:hover {
  background: #f7fcfa;
  border-color: #b9dcd3;
}

.launcher-grid button > span {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: #3f7b70;
  background: #eaf4f0;
  border-radius: 10px;
}

.launcher-grid strong {
  font-size: 13px;
}

.launcher-grid small {
  overflow: hidden;
  max-width: 100%;
  color: #96a19d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.small-modal {
  width: min(470px, 92vw);
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(5, 29, 25, 0.3);
  animation: modalIn 190ms ease;
}

.small-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 17px 19px 14px;
  background: #f8fbf8;
  border-bottom: 1px solid #e7ece7;
}

.small-modal header p {
  color: #84928e;
  font-size: 12px;
}

.small-modal header h2 {
  font-size: 17px;
}

.small-modal-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px 19px;
}

.small-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 12px 19px;
  background: #fbfcfa;
  border-top: 1px solid #e7ece7;
}

.urgent-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  color: #8f672a;
  background: #fff9ef;
  border: 1px solid #f1dfbd;
  border-radius: 8px;
  font-size: 12.5px;
}

.urgent-toggle > span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.switch {
  position: relative;
  width: 31px;
  height: 18px;
}

.switch input {
  opacity: 0;
}

.switch i {
  position: absolute;
  inset: 0;
  background: #d1d9d4;
  border-radius: 12px;
  cursor: pointer;
  transition: 150ms ease;
}

.switch i::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);
  transition: 150ms ease;
}

.switch input:checked + i {
  background: #159784;
}

.switch input:checked + i::after {
  transform: translateX(13px);
}

.dispute-order {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  color: #5d8279;
  background: #f1f7f4;
  border-radius: 8px;
}

.dispute-order > div {
  display: flex;
  flex-direction: column;
}

.dispute-order strong {
  color: #3e5852;
  font-size: 12.5px;
}

.dispute-order p {
  color: #83958f;
  font-size: 12px;
}

.toast-root {
  position: fixed;
  z-index: 200;
  top: 84px;
  right: 24px;
  width: min(350px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #345e55;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #d6e9e2;
  border-radius: 10px;
  box-shadow: 0 12px 35px rgba(8, 42, 35, 0.14);
  opacity: 0;
  transform: translateY(-7px);
  transition: 180ms ease;
  pointer-events: auto;
}

.toast.show {
  opacity: 1;
  transform: none;
}

.toast > span {
  color: #25927d;
}

.toast.info > span {
  color: #517dad;
}

.toast p {
  flex: 1;
  font-size: 12.5px;
}

.toast button {
  padding: 0;
  color: #9ba6a2;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Responsive layout */
@media (max-width: 1280px) {
  .sidebar {
    width: 218px;
  }

  .content-shell {
    margin-left: 218px;
  }

  .topbar {
    padding: 0 24px;
  }

  .main-content {
    padding-right: 24px;
    padding-left: 24px;
  }

  .global-search {
    width: min(250px, 24vw);
  }

  .sync-status {
    display: none;
  }

  .home-top-grid,
  .home-lower-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.8fr);
  }

  .hero-metrics {
    gap: 12px;
  }

  .equipment-health-bar {
    grid-template-columns: 95px repeat(3, 1fr);
  }

  .vital-spark {
    display: none;
  }

  .equipment-quick-stat {
    min-width: 105px;
    padding: 0 10px;
  }

  .provider-card {
    padding: 13px;
  }
}

@media (max-width: 1100px) {
  .sidebar {
    width: 74px;
    padding: 20px 10px 15px;
  }

  .content-shell {
    margin-left: 74px;
  }

  .brand {
    justify-content: center;
    padding: 0;
  }

  .brand-copy,
  .tenant-switcher > span:nth-child(2),
  .tenant-switcher > svg,
  .nav-item > span:nth-child(2),
  .nav-label,
  .side-support > div,
  .side-support > button,
  .side-user > span:nth-child(2),
  .side-user > button {
    display: none;
  }

  .tenant-switcher {
    justify-content: center;
    padding: 7px;
  }

  .nav-item {
    justify-content: center;
    height: 46px;
    padding: 0;
  }

  .nav-item.active::before {
    left: -10px;
  }

  .nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 12px;
  }

  .nav-label-secondary {
    display: none;
  }

  .side-support {
    justify-content: center;
    padding: 8px;
  }

  .side-user {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .topbar {
    padding: 0 20px;
  }

  .page-heading {
    min-width: 130px;
  }

  .page-heading p {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main-content {
    padding: 22px 20px 40px;
  }

  .global-search {
    width: 210px;
  }

  .home-top-grid,
  .home-lower-grid {
    grid-template-columns: 1fr;
  }

  .right-rail-top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }

  .downtime-card {
    min-height: 177px;
  }

  .quick-repair-card {
    align-self: stretch;
    min-height: 0;
  }

  .home-side-column {
    grid-template-columns: 1fr 1fr;
  }

  .todo-strip {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .todo-title {
    display: none;
  }

  .workorders-layout,
  .maintenance-layout,
  .parts-layout,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .workorder-aside,
  .maintenance-aside,
  .parts-aside,
  .profile-aside {
    grid-template-columns: repeat(2, 1fr);
  }

  .maintenance-aside .completeness-panel {
    grid-row: span 2;
  }

  .project-stat-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .project-risk-note {
    grid-column: 1 / -1;
  }

  .equipment-layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .equipment-quick-stat:nth-of-type(3),
  .equipment-quick-stat:nth-of-type(4) {
    display: none;
  }

  .equipment-title-actions .button-secondary {
    display: none;
  }

  .equipment-health-bar {
    grid-template-columns: 90px repeat(2, 1fr);
  }

  .vital-item:nth-of-type(4) {
    display: none;
  }

  .finance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .provider-hero-strip {
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
  }

  .provider-count {
    border-right: 1px solid #e8ece7;
  }
}

@media (max-width: 820px) {
  .sidebar {
    display: none;
  }

  .content-shell {
    margin-left: 0;
  }

  .topbar {
    height: 64px;
    gap: 12px;
  }

  .mobile-menu-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #536c66;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .page-heading h1 {
    font-size: 17px;
  }

  .page-heading p {
    display: none;
  }

  .global-search,
  .topbar-actions > .icon-button:not(.notification-button) {
    display: none;
  }

  .topbar-actions {
    margin-left: auto;
  }

  .main-content {
    padding: 18px 16px calc(90px + env(safe-area-inset-bottom));
  }

  .mobile-nav {
    position: fixed;
    z-index: 50;
    right: 10px;
    bottom: calc(9px + env(safe-area-inset-bottom));
    left: 10px;
    height: 61px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 5px 7px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(215, 225, 218, 0.95);
    border-radius: 17px;
    box-shadow: 0 10px 35px rgba(12, 48, 40, 0.15);
    backdrop-filter: blur(14px);
  }

  .mobile-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    color: #8b9994;
    background: transparent;
    border: 0;
    border-radius: 11px;
    font-size: 12px;
  }

  .mobile-nav button.active {
    color: #147c6e;
    background: #eaf6f2;
  }

  .home-welcome {
    align-items: flex-start;
  }

  .date-chip {
    display: none;
  }

  .home-welcome h2 {
    font-size: 20px;
  }

  .home-top-grid,
  .home-lower-grid {
    gap: 12px;
  }

  .right-rail-top,
  .home-side-column {
    grid-template-columns: 1fr;
  }

  .todo-strip {
    grid-template-columns: 1fr 1fr 1fr;
    overflow-x: auto;
  }

  .todo-item {
    min-width: 170px;
  }

  .health-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .health-card:last-child {
    display: none;
  }

  .page-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .button {
    flex: 1;
  }

  .metric-grid.four,
  .parts-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .workorder-aside,
  .maintenance-aside,
  .parts-aside,
  .profile-aside {
    grid-template-columns: 1fr;
  }

  .project-card-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }

  .project-card-head,
  .project-card > p,
  .project-progress-label,
  .project-card .progress-track,
  .project-card-foot {
    grid-column: 1 / -1;
  }

  .project-card h3 {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .project-detail-head {
    flex-wrap: wrap;
  }

  .project-detail-meta {
    width: 100%;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #e8ece7;
  }

  .gantt-wrap {
    overflow-x: auto;
  }

  .gantt-head,
  .gantt-row,
  .maintenance-gantt-head,
  .maintenance-gantt-row {
    min-width: 690px;
  }

  .gantt-today,
  .critical-path-line {
    display: none;
  }

  .milestone-item {
    flex-wrap: wrap;
  }

  .milestone-item > div {
    min-width: calc(100% - 110px);
  }

  .documents-layout {
    grid-template-columns: 1fr;
  }

  .equipment-overview-strip {
    flex-wrap: wrap;
    gap: 8px 0;
  }

  .equipment-search-wrap {
    flex-basis: 100%;
    margin-left: 0;
  }

  .equipment-quick-stat:nth-of-type(3),
  .equipment-quick-stat:nth-of-type(4) {
    display: flex;
  }

  .equipment-quick-stat {
    flex: 1;
  }

  .equipment-layout {
    grid-template-columns: 1fr;
  }

  .equipment-tree {
    display: none;
  }

  .equipment-titlebar {
    flex-wrap: wrap;
  }

  .equipment-title-actions {
    width: 100%;
    padding-top: 9px;
    border-top: 1px solid #e8ece7;
  }

  .equipment-title-actions .button {
    flex: 1;
  }

  .equipment-title-actions .button-secondary {
    display: inline-flex;
  }

  .equipment-health-bar {
    grid-template-columns: 82px repeat(2, 1fr);
  }

  .overview-columns,
  .acceptance-metrics {
    grid-template-columns: 1fr;
  }

  .equipment-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .equipment-info-grid > div:nth-child(2n) {
    border-right: 0;
  }

  .equipment-info-grid > div:nth-last-child(-n + 4) {
    border-bottom: 1px solid #e8ece7;
  }

  .equipment-info-grid > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .measurement-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .maintenance-top-grid {
    grid-template-columns: 1fr 1fr;
  }

  .loss-card {
    grid-column: 1 / -1;
  }

  .providers-grid {
    grid-template-columns: 1fr;
  }

  .provider-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .provider-filter-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .provider-filter-tabs button {
    white-space: nowrap;
  }

  .small-search {
    width: 100%;
  }

  .small-search input {
    width: 100%;
  }

  .profile-header-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .profile-header-meta {
    width: 100%;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid #e8ece7;
  }

  .credit-detail-grid {
    grid-template-columns: 1fr 1fr;
  }

  .approval-row {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .approval-row > div:nth-child(2) {
    min-width: calc(100% - 100px);
  }

  .approval-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .report-modal,
  .detail-drawer {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .report-header {
    padding: 14px 16px 12px;
  }

  .report-title h2 {
    font-size: 18px;
  }

  .report-steps {
    gap: 5px;
  }

  .report-step small,
  .step-connector {
    display: none;
  }

  .report-step {
    flex: 1;
  }

  .report-body {
    padding: 15px 16px 20px;
  }

  .report-footer {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }

  .report-safe-note {
    display: none;
  }

  .report-device-tools,
  .report-device-picker,
  .rich-media-grid,
  .progress-overview {
    grid-template-columns: 1fr;
  }

  .urgency-options {
    grid-template-columns: 1fr;
  }

  .urgency-options button {
    grid-template-columns: 30px 1fr 14px;
  }

  .drawer-header {
    padding: 16px;
  }

  .drawer-meta-bar {
    grid-template-columns: 1fr 1fr;
    margin: 0 16px;
    row-gap: 8px;
  }

  .drawer-meta-bar > div:nth-child(2) {
    border-right: 0;
  }

  .drawer-tabs {
    padding: 0 16px;
    overflow-x: auto;
  }

  .drawer-content {
    padding: 15px 16px 20px;
  }

  .drawer-footer {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }

  .quote-summary {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .quote-summary > div {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0 7px;
    border-right: 0;
    border-bottom: 1px solid #e3e9e3;
  }

  .quote-summary > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .quote-body {
    grid-template-columns: 1fr 1.4fr;
  }

  .quote-price {
    grid-column: 1 / -1;
    align-items: flex-start;
    padding-top: 6px;
    border-top: 1px solid #edf0ec;
  }

  .progress-hero {
    min-height: 130px;
  }

  .wo-overview-grid {
    grid-template-columns: 1fr;
  }

  .launcher-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .modal-backdrop {
    padding: 10px;
  }

  .toast-root {
    top: 72px;
    right: 14px;
  }
}

@media (max-width: 520px) {
  .top-avatar {
    width: 35px;
    height: 35px;
  }

  .home-welcome {
    margin-bottom: 15px;
  }

  .home-welcome h2 span {
    display: block;
  }

  .hero-production {
    min-height: 224px;
    padding: 18px;
  }

  .hero-speed > strong {
    font-size: 38.9px;
  }

  .machine-visual {
    right: -5%;
    width: 60%;
    opacity: 0.62;
  }

  .hero-metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .hero-metrics strong {
    font-size: 16px;
  }

  .hero-spark {
    display: none;
  }

  .right-rail-top {
    gap: 9px;
  }

  .todo-strip {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .todo-item {
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .todo-item:last-child {
    border-bottom: 0;
  }

  .home-main-column > .surface-section,
  .home-side-column > .surface-section {
    padding: 14px;
  }

  .health-card-grid {
    grid-template-columns: 1fr;
  }

  .health-card:last-child {
    display: block;
  }

  .wo-card-bottom {
    flex-wrap: wrap;
  }

  .wo-card-amount {
    display: none;
  }

  .page-intro h2 {
    font-size: 20px;
  }

  .metric-card {
    padding: 11px;
  }

  .metric-card > div > strong {
    font-size: 18px;
  }

  .orders-surface,
  .part-requests,
  .profile-main {
    padding: 12px;
  }

  .filter-bar {
    align-items: flex-start;
  }

  .segmented-tabs {
    max-width: calc(100% - 50px);
  }

  .filter-button {
    padding: 0 7px;
    font-size: 0;
  }

  .project-stat-row {
    grid-template-columns: 1fr 1fr;
  }

  .project-stat-row > article:nth-child(3) {
    grid-column: 1 / -1;
  }

  .project-detail-head {
    padding: 14px;
  }

  .project-detail-meta {
    gap: 14px;
  }

  .detail-tabs {
    gap: 15px;
    overflow-x: auto;
    padding: 0 14px;
  }

  .warranty-terms,
  .acceptance-metrics {
    grid-template-columns: 1fr;
  }

  .equipment-quick-stat {
    min-width: 0;
    padding: 0 8px;
  }

  .equipment-quick-stat:nth-of-type(4) {
    display: none;
  }

  .equipment-health-bar {
    grid-template-columns: 1fr 1fr;
    margin: 0 13px 2px;
  }

  .health-big-score {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    border-right: 0;
    border-bottom: 1px solid #e6ebe6;
  }

  .vital-item:nth-of-type(2) {
    border-right: 1px solid #e6ebe6;
  }

  .vital-item:nth-of-type(3) {
    display: block;
    border-right: 0;
  }

  .equipment-titlebar {
    padding: 14px;
  }

  .equipment-title-line {
    flex-wrap: wrap;
  }

  .equipment-tabs {
    padding: 0 14px;
    overflow-x: auto;
  }

  .equipment-tabs button {
    flex: none;
  }

  .tab-content {
    padding: 14px;
  }

  .measurement-card-grid {
    grid-template-columns: 1fr;
  }

  .bom-row {
    grid-template-columns: 40px 15px minmax(150px, 1fr) 30px 70px;
    min-width: 600px;
  }

  .tab-content:has(.bom-row) {
    overflow-x: auto;
  }

  .spare-row {
    flex-wrap: wrap;
  }

  .spare-row > div {
    min-width: calc(100% - 45px);
  }

  .history-row {
    grid-template-columns: 60px 10px 1fr;
  }

  .history-row .status-pill,
  .history-row .text-button {
    display: none;
  }

  .maintenance-top-grid {
    grid-template-columns: 1fr;
  }

  .loss-card {
    grid-column: auto;
  }

  .maintenance-window-hero .countdown span {
    font-size: 34.6px;
  }

  .schedule-panel {
    padding: 12px;
  }

  .sourcing-search-panel {
    padding: 13px;
  }

  .sourcing-input button {
    min-width: 75px;
    padding: 0 9px;
  }

  .sourcing-suggestions {
    overflow: hidden;
  }

  .sourcing-suggestions button:nth-last-child(-n + 2) {
    display: none;
  }

  .request-qty,
  .request-time {
    display: none;
  }

  .provider-hero-strip {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 13px;
  }

  .provider-count,
  .provider-quality {
    padding: 9px 0;
    border-right: 0;
    border-bottom: 1px solid #e8ece7;
  }

  .provider-quality:last-child {
    border-bottom: 0;
  }

  .provider-score-row {
    grid-template-columns: 0.6fr 1fr;
    row-gap: 8px;
  }

  .provider-distance {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 6px;
  }

  .profile-header-meta {
    justify-content: space-between;
  }

  .finance-grid {
    grid-template-columns: 1fr;
  }

  .finance-card.primary {
    min-height: 90px;
  }

  .profile-tabs-wrap {
    overflow-x: auto;
  }

  .profile-table {
    overflow-x: auto;
  }

  .profile-table-head,
  .profile-table-row {
    min-width: 550px;
  }

  .company-identity h2 {
    font-size: 16px;
  }

  .company-emblem {
    width: 42px;
    height: 42px;
  }

  .contract-amount {
    display: none;
  }

  .report-steps {
    gap: 2px;
  }

  .report-step {
    gap: 4px;
  }

  .report-step strong {
    font-size: 12px;
  }

  .report-footer-actions {
    width: 100%;
  }

  .report-footer-actions .button {
    flex: 1;
  }

  .report-footer-actions .button-primary {
    min-width: 0;
  }

  .report-device-tools {
    gap: 7px;
  }

  .symptom-chips {
    gap: 5px;
  }

  .symptom-chips button {
    min-height: 32px;
    padding: 5px 8px;
  }

  .media-upload-grid {
    grid-template-columns: 1fr 1fr;
  }

  .voice-note-card {
    min-height: 79px;
  }

  .arrival-options {
    grid-template-columns: 1fr 1fr;
  }

  .form-columns {
    grid-template-columns: 1fr;
  }

  .estimate-row {
    grid-template-columns: 1fr 1fr;
  }

  .estimate-row .checkbox-line {
    grid-column: 1 / -1;
  }

  .drawer-footer {
    flex-wrap: wrap;
  }

  .drawer-footer .button {
    flex: 1;
  }

  .evidence-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .signature-modal {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
  }

  .signature-canvas-wrap {
    height: 160px;
    margin: 10px 14px;
  }

  .signature-summary,
  .signature-identity {
    margin-right: 14px;
    margin-left: 14px;
  }

  .signature-identity {
    grid-template-columns: auto 1fr;
  }

  .signature-canvas-wrap {
    height: 150px;
  }

  .signature-modal > footer {
    flex-wrap: wrap;
  }

  .signature-modal > footer .button {
    width: 100%;
  }

  .success-modal {
    padding: 22px 18px 18px;
  }

  .launcher-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.enterprise-settings-modal {
  width: min(760px, 95vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.enterprise-settings-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 19px 13px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.enterprise-settings-modal h2 {
  margin: 2px 0;
  color: #294640;
  font-size: 20px;
}

.enterprise-settings-modal header p {
  color: #84948f;
  font-size: 11.5px;
}

.enterprise-settings-body {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 19px 16px;
  background: #fff;
}

.settings-section {
  padding: 11px;
  border: 1px solid #e4ebe7;
  border-radius: 8px;
}

.settings-section + .settings-section {
  margin-top: 11px;
}

.settings-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.settings-section-head > span {
  width: 26px;
  height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  color: #267e70;
  background: #eaf5f1;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 800;
}

.settings-section-head > div {
  display: flex;
  flex-direction: column;
}

.settings-section-head strong {
  color: #3d5751;
  font-size: 12.5px;
}

.settings-section-head small {
  color: #8a9a95;
  font-size: 10px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.settings-grid label,
.settings-full {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-full {
  margin-top: 8px;
}

.settings-grid label > span,
.settings-full > span {
  color: #627872;
  font-size: 10.8px;
  font-weight: 650;
}

.settings-grid b,
.settings-full b {
  color: #bd594a;
}

.settings-grid input,
.settings-grid select,
.settings-full input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  color: #405952;
  background: #fff;
  border: 1px solid #dce5e0;
  border-radius: 6px;
  outline: 0;
  font: inherit;
  font-size: 11.5px;
}

.settings-grid input[readonly] {
  color: #7e8f89;
  background: #f5f7f5;
  cursor: default;
}

.settings-grid input:focus,
.settings-grid select:focus,
.settings-full input:focus {
  border-color: #73b6a8;
  box-shadow: 0 0 0 3px rgba(47, 143, 126, 0.09);
}

.settings-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.settings-checkboxes label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  color: #506963;
  background: #f8faf8;
  border: 1px solid #e7ede9;
  border-radius: 6px;
  font-size: 11px;
}

.settings-checkboxes input {
  accent-color: #1f9682;
}

.enterprise-settings-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 19px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

@media (max-width: 620px) {
  .enterprise-settings-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .settings-grid,
  .settings-checkboxes {
    grid-template-columns: 1fr;
  }
}

.maintenance-plan-modal {
  width: min(640px, 94vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.maintenance-plan-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 19px 13px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.maintenance-plan-modal h2 {
  margin: 2px 0;
  color: #294740;
  font-size: 20px;
}

.maintenance-plan-modal header p {
  color: #84948f;
  font-size: 11.5px;
}

.maintenance-plan-body {
  min-height: 0;
  overflow-y: auto;
  padding: 15px 19px 17px;
  background: #fff;
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.plan-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.plan-field > span {
  color: #60766f;
  font-size: 11.5px;
  font-weight: 650;
}

.plan-field b {
  color: #bf5b4c;
}

.plan-field input,
.plan-field select,
.plan-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #405852;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 7px;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.plan-field textarea {
  min-height: 86px;
  resize: vertical;
  line-height: 1.6;
}

.plan-field input:focus,
.plan-field select:focus,
.plan-field textarea:focus {
  border-color: #73b6a8;
  box-shadow: 0 0 0 3px rgba(47, 143, 126, 0.09);
}

.plan-preview {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 9px 10px;
  color: #607a73;
  background: #edf7f3;
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1.55;
}

.maintenance-plan-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 19px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

@media (max-width: 620px) {
  .maintenance-plan-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }
}

.enterprise-project-modal {
  width: min(650px, 94vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.enterprise-project-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 19px 13px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.enterprise-project-modal h2 {
  margin: 2px 0;
  color: #294740;
  font-size: 20px;
}

.enterprise-project-modal header p {
  color: #84948f;
  font-size: 11.5px;
}

.enterprise-project-body {
  min-height: 0;
  overflow-y: auto;
  padding: 15px 19px 17px;
  background: #fff;
}

.project-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.project-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.project-form-field > span {
  color: #60766f;
  font-size: 11.5px;
  font-weight: 650;
}

.project-form-field b {
  color: #bf5b4c;
}

.project-form-field input,
.project-form-field select,
.project-form-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #405852;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 7px;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.project-form-field textarea {
  min-height: 86px;
  resize: vertical;
  line-height: 1.6;
}

.project-form-field input:focus,
.project-form-field select:focus,
.project-form-field textarea:focus {
  border-color: #73b6a8;
  box-shadow: 0 0 0 3px rgba(47, 143, 126, 0.09);
}

.project-form-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 9px 10px;
  color: #607a73;
  background: #edf7f3;
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1.55;
}

.enterprise-project-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 19px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

.project-template-modal {
  width: min(860px, 95vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.project-template-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 19px 13px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.project-template-modal h2 {
  margin: 2px 0;
  color: #294740;
  font-size: 20px;
}

.project-template-modal header p {
  color: #84948f;
  font-size: 11.5px;
}

.project-template-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 15px 19px;
}

.project-template-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #fbfcfa;
  border: 1px solid #e3eae6;
  border-radius: 9px;
}

.template-type {
  align-self: flex-start;
  padding: 3px 6px;
  color: #277f70;
  background: #eaf5f1;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
}

.project-template-card h3 {
  margin: 8px 0 4px;
  color: #31504a;
  font-size: 13px;
}

.project-template-card p {
  flex: 1;
  color: #80918c;
  font-size: 10.5px;
  line-height: 1.6;
}

.template-phases {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 9px 0;
}

.template-phases span {
  padding: 3px 5px;
  color: #657c76;
  background: #fff;
  border: 1px solid #e5ebe7;
  border-radius: 4px;
  font-size: 9px;
}

.project-template-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid #e8eeea;
}

.project-template-card > footer > span {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #8a9995;
  font-size: 9px;
}

.project-template-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 19px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

.industry-service-modal {
  width: min(780px, 94vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.industry-service-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 19px 13px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.industry-service-modal h2 {
  margin: 2px 0;
  color: #294740;
  font-size: 20px;
}

.industry-service-modal header p {
  color: #84948f;
  font-size: 11.5px;
}

.industry-service-grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 15px 19px;
}

.industry-service-grid > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  text-align: left;
  background: #fbfcfa;
  border: 1px solid #e4ebe7;
  border-radius: 9px;
}

.industry-service-grid > button:hover {
  background: #f4f9f6;
  border-color: #cfe3dc;
}

.industry-service-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #287f71;
  background: #eaf5f1;
  border-radius: 9px;
}

.industry-service-icon.amber {
  color: #a36f25;
  background: #fff3df;
}

.industry-service-icon.red {
  color: #b45b4b;
  background: #fff1ed;
}

.industry-service-icon.blue {
  color: #547ea5;
  background: #edf3f9;
}

.industry-service-icon.navy {
  color: #536c86;
  background: #edf1f5;
}

.industry-service-grid > button > div {
  display: flex;
  flex-direction: column;
}

.industry-service-grid strong {
  color: #36534d;
  font-size: 12.5px;
}

.industry-service-grid p {
  color: #81928d;
  font-size: 10.5px;
  line-height: 1.55;
}

.industry-service-grid > button > svg {
  color: #879994;
}

.industry-service-modal > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 19px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

.industry-service-modal > footer > span {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #84958f;
  font-size: 9.8px;
}

.provider-invite-modal {
  width: min(620px, 94vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.provider-invite-modal > header,
.framework-agreement-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 19px 13px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.provider-invite-modal h2,
.framework-agreement-modal h2 {
  margin: 2px 0;
  color: #294740;
  font-size: 20px;
}

.provider-invite-modal header p,
.framework-agreement-modal header p {
  color: #84948f;
  font-size: 11.5px;
}

.provider-invite-body,
.framework-agreement-body {
  min-height: 0;
  overflow-y: auto;
  padding: 15px 19px 17px;
  background: #fff;
}

.provider-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.provider-form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.provider-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.provider-form-field > span {
  color: #60766f;
  font-size: 11.5px;
  font-weight: 650;
}

.provider-form-field b {
  color: #bf5b4c;
}

.provider-form-field input,
.provider-form-field select,
.provider-form-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: #405852;
  background: #fff;
  border: 1px solid #dfe7e2;
  border-radius: 7px;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.provider-form-field textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.6;
}

.provider-form-field input:focus,
.provider-form-field select:focus,
.provider-form-field textarea:focus {
  border-color: #73b6a8;
  box-shadow: 0 0 0 3px rgba(47, 143, 126, 0.09);
}

.provider-invite-preview {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 9px 10px;
  color: #607a73;
  background: #edf7f3;
  border-radius: 7px;
  font-size: 10.5px;
  line-height: 1.55;
}

.provider-invite-modal > footer,
.framework-agreement-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  padding: 11px 19px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

.framework-agreement-modal {
  width: min(820px, 95vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.framework-existing {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8eeea;
}

.framework-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.framework-section-title strong {
  color: #3c5851;
  font-size: 12.5px;
}

.framework-section-title span {
  color: #8a9a95;
  font-size: 10px;
}

.framework-agreement-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid #edf1ee;
}

.framework-agreement-row > span:first-child {
  color: #2e8476;
}

.framework-agreement-row > div {
  display: flex;
  flex-direction: column;
}

.framework-agreement-row strong {
  color: #405a54;
  font-size: 11px;
}

.framework-agreement-row small,
.framework-agreement-row > span:not(:first-child) {
  color: #8b9a96;
  font-size: 9.5px;
}

.framework-empty {
  padding: 14px;
  color: #899994;
  text-align: center;
  background: #f8faf8;
  border-radius: 7px;
  font-size: 10.5px;
}

.framework-create-form {
  padding: 11px;
  background: #fbfcfa;
  border: 1px solid #e5ebe7;
  border-radius: 8px;
}

.framework-form-actions {
  display: flex;
  justify-content: flex-end;
}

.project-workorder-tab {
  padding: 12px 0 2px;
}

.project-workorder-summary {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: #f8faf8;
  border: 1px solid #e5ebe7;
  border-radius: 8px;
}

.project-workorder-summary > div {
  display: flex;
  flex-direction: column;
}

.project-workorder-summary span {
  color: #879792;
  font-size: 10px;
}

.project-workorder-summary strong {
  color: #36534d;
  font-size: 17px;
}

.project-workorder-summary strong em {
  margin-left: 2px;
  color: #84948f;
  font-size: 10px;
  font-style: normal;
}

.project-workorder-summary small {
  color: #91a09b;
  font-size: 9.5px;
}

.project-workorder-list {
  overflow: hidden;
  border: 1px solid #e5ebe7;
  border-radius: 8px;
}

.project-workorder-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1.5fr) minmax(100px, .8fr) auto minmax(70px, auto) 16px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf1ee;
}

.project-workorder-list > button:last-child {
  border-bottom: 0;
}

.project-workorder-list > button:hover {
  background: #f8fbf9;
}

.wo-project-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #2d8274;
  background: #eaf5f1;
  border-radius: 7px;
}

.project-workorder-list > button > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.project-workorder-list strong {
  overflow: hidden;
  color: #3e5852;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-workorder-list small,
.project-workorder-list > button > span:not(.wo-project-icon) {
  color: #8b9a96;
  font-size: 9.5px;
}

.project-workorder-list > button > em {
  color: #247d6f;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.project-link-section {
  padding: 10px;
  background: #f8faf8;
  border: 1px solid #e5ece8;
  border-radius: 8px;
}

.project-link-field select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  color: #405852;
  background: #fff;
  border: 1px solid #dce5e0;
  border-radius: 7px;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.project-link-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 7px;
  color: #788d87;
  font-size: 10px;
  line-height: 1.55;
}

.project-delivery-tab {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 12px;
  padding-top: 12px;
}

.delivery-acceptance-section,
.delivery-payment-section {
  min-width: 0;
  padding: 12px;
  border: 1px solid #e5ebe7;
  border-radius: 8px;
}

.delivery-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 10px;
}

.delivery-section-head > div {
  display: flex;
  flex-direction: column;
}

.delivery-section-head h3 {
  margin: 0;
  color: #36534d;
  font-size: 13px;
}

.delivery-section-head span {
  color: #8c9b97;
  font-size: 9.5px;
}

.delivery-acceptance-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.delivery-acceptance-list article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  background: #f8faf8;
  border-radius: 7px;
}

.delivery-stage-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #287f71;
  background: #e9f5f1;
  border-radius: 7px;
}

.delivery-acceptance-list article > div {
  display: flex;
  flex-direction: column;
}

.delivery-acceptance-list strong {
  color: #405a54;
  font-size: 11px;
}

.delivery-acceptance-list small,
.delivery-acceptance-list em {
  color: #879791;
  font-size: 9.5px;
  font-style: normal;
}

.delivery-empty {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: #849690;
  text-align: center;
  background: #fafbfa;
  border: 1px dashed #dbe4df;
  border-radius: 7px;
}

.delivery-empty strong {
  color: #506862;
  font-size: 11.5px;
}

.delivery-empty p {
  color: #8a9a95;
  font-size: 10px;
}

.payment-total {
  text-align: right;
}

.payment-total strong {
  color: #277e70;
  font-size: 12px;
}

.delivery-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin-bottom: 8px;
  background: #f8faf8;
  border: 1px solid #e8eeea;
  border-radius: 7px;
}

.delivery-payment-summary > div {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-right: 1px solid #e8eeea;
}

.delivery-payment-summary > div:last-child {
  border-right: 0;
}

.delivery-payment-summary span {
  color: #899994;
  font-size: 9px;
}

.delivery-payment-summary strong {
  color: #405a54;
  font-size: 11px;
}

.delivery-payment-summary .paid {
  color: #23816f;
}

.delivery-payment-summary .pending {
  color: #a66c20;
}

.delivery-payment-list {
  overflow: hidden;
  border: 1px solid #e8eeea;
  border-radius: 7px;
}

.delivery-payment-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border-bottom: 1px solid #edf1ee;
}

.delivery-payment-list > div:last-child {
  border-bottom: 0;
}

.payment-sequence {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #2b7e70;
  background: #eaf5f1;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
}

.delivery-payment-list > div > div {
  display: flex;
  flex-direction: column;
}

.delivery-payment-list strong {
  color: #405a54;
  font-size: 10.5px;
}

.delivery-payment-list small,
.payment-invoice {
  color: #8a9a95;
  font-size: 9px;
}

.payment-invoice {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .enterprise-project-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .project-form-grid {
    grid-template-columns: 1fr;
  }

  .project-template-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .project-template-grid {
    grid-template-columns: 1fr;
  }

  .industry-service-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .industry-service-grid {
    grid-template-columns: 1fr;
  }

  .provider-invite-modal,
  .framework-agreement-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .provider-form-grid,
  .provider-form-grid-3 {
    grid-template-columns: 1fr;
  }

  .framework-agreement-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .project-workorder-summary {
    grid-template-columns: 1fr;
  }

  .project-workorder-list > button {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .project-workorder-list > button > span:nth-child(3),
  .project-workorder-list > button > .status-pill,
  .project-workorder-list > button > em {
    display: none;
  }

  .project-delivery-tab {
    grid-template-columns: 1fr;
  }

  .delivery-acceptance-list article,
  .delivery-payment-list > div {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .delivery-acceptance-list article > small,
  .delivery-payment-list .payment-invoice {
    display: none;
  }
}

.platform-support-entry {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 9px 10px;
  color: #d9f8f0;
  text-align: left;
  background: rgba(73, 170, 151, 0.12);
  border: 1px solid rgba(133, 220, 201, 0.16);
  border-radius: 9px;
  cursor: pointer;
}

.platform-support-entry > svg:first-child {
  width: 30px;
  height: 30px;
  padding: 6px;
  color: #9be5d3;
  background: rgba(169, 239, 216, 0.09);
  border-radius: 8px;
}

.platform-support-entry > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.platform-support-entry strong {
  font-size: 14px;
  font-weight: 600;
}

.platform-support-entry small {
  overflow: hidden;
  color: #7fa59c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-support-entry > svg:last-child {
  color: #6f9a91;
}

.platform-support-entry:hover {
  color: #fff;
  background: rgba(73, 170, 151, 0.2);
  border-color: rgba(133, 220, 201, 0.28);
}

.enterprise-support-modal {
  width: min(760px, 94vw);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #405852;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(9, 42, 37, 0.28);
}

.enterprise-support-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 21px 15px;
  background: #fff;
  border-bottom: 1px solid #e2e9e5;
}

.enterprise-support-modal h2 {
  margin: 3px 0;
  color: #294740;
  font-size: 22px;
}

.enterprise-support-modal header p {
  margin-top: 4px;
  color: #748983;
  font-size: 13px;
  line-height: 1.55;
}

.enterprise-support-body {
  min-height: 0;
  overflow-y: auto;
  padding: 16px 21px 18px;
  background: #fff;
}

.support-contact-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 12px 13px;
  color: #315f56;
  background: linear-gradient(135deg, #edf8f4, #f7fbf9);
  border: 1px solid #dcece6;
  border-radius: 10px;
}

.support-contact-summary > span {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2f8b7c;
  border-radius: 9px;
}

.support-contact-summary > div {
  display: flex;
  flex-direction: column;
}

.support-contact-summary strong {
  font-size: 15px;
}

.support-contact-summary small {
  color: #6c837d;
  font-size: 12.5px;
}

.enterprise-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.enterprise-support-grid > label,
.enterprise-support-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.enterprise-support-grid span,
.enterprise-support-field > span {
  color: #536e67;
  font-size: 13px;
  font-weight: 650;
}

.enterprise-support-field b {
  color: #bd5a4d;
}

.enterprise-support-grid input,
.enterprise-support-grid select,
.enterprise-support-field input,
.enterprise-support-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: #38534c;
  background: #fff;
  border: 1px solid #dce6e1;
  border-radius: 8px;
  outline: 0;
  font: inherit;
  font-size: 14px;
}

.enterprise-support-field textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.65;
}

.enterprise-support-grid input:focus,
.enterprise-support-grid select:focus,
.enterprise-support-field input:focus,
.enterprise-support-field textarea:focus {
  border-color: #69ad9f;
  box-shadow: 0 0 0 3px rgba(47, 143, 126, 0.09);
}

.enterprise-support-history {
  margin-top: 5px;
  padding-top: 11px;
  border-top: 1px solid #e6ede9;
}

.enterprise-support-history > div:not(.field-label) {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border-bottom: 1px solid #edf2ef;
}

.enterprise-support-history > div > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #2f8476;
  background: #eaf5f1;
  border-radius: 7px;
}

.enterprise-support-history > div > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.enterprise-support-history strong {
  color: #3e5b54;
  font-size: 13px;
}

.enterprise-support-history small {
  color: #84958f;
  font-size: 11.5px;
}

.enterprise-support-history em {
  margin-top: 3px;
  color: #277b6d;
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.5;
}

.enterprise-support-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 21px;
  background: #fff;
  border-top: 1px solid #e3eae6;
}

@media (max-width: 620px) {
  .enterprise-support-modal {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .enterprise-support-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Enterprise operations: equipment, parts and analytics */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dashboard-kpi-grid article {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e1eae5;
  border-radius: 14px;
  box-shadow: 0 7px 24px rgba(22, 66, 58, 0.055);
}

.dashboard-kpi-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2e8c7c;
  border-radius: 12px;
}

.dashboard-kpi-icon.blue {
  background: #527daa;
}

.dashboard-kpi-icon.amber {
  background: #d79b39;
}

.dashboard-kpi-icon.navy {
  background: #244f5c;
}

.dashboard-kpi-icon.red {
  background: #c96055;
}

.dashboard-kpi-grid article > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dashboard-kpi-grid article span:not(.dashboard-kpi-icon) {
  color: #6b817a;
  font-size: 13px;
}

.dashboard-kpi-grid article strong {
  color: #244f48;
  font-size: 24px;
  line-height: 1.15;
}

.dashboard-kpi-grid article strong em {
  margin-left: 2px;
  color: #6b817a;
  font-size: 13px;
  font-style: normal;
}

.dashboard-kpi-grid article small {
  overflow: hidden;
  color: #84958f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: 16px;
}

.dashboard-chart-card,
.dashboard-provider-card,
.dashboard-cost-card {
  grid-column: span 2;
}

.dashboard-main-grid > .surface-section {
  padding: 18px;
}

.dashboard-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #71857f;
  font-size: 12px;
}

.dashboard-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dashboard-legend i,
.dashboard-cost-strip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dashboard-legend i.orders {
  background: #2d8d7d;
}

.dashboard-legend i.cost {
  background: #d7a047;
}

.dashboard-bar-chart {
  height: 254px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 26px 8px 4px;
  background: repeating-linear-gradient(to top, transparent 0 49px, #eef3f0 49px 50px);
}

.dashboard-bar-group {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.dashboard-bars {
  width: 100%;
  height: 174px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}

.dashboard-bars i {
  width: min(24px, 35%);
  min-height: 6px;
  border-radius: 5px 5px 2px 2px;
  transition: height 240ms ease;
}

.dashboard-bars i.orders {
  background: linear-gradient(180deg, #42a892, #287e70);
}

.dashboard-bars i.cost {
  background: linear-gradient(180deg, #edbd64, #c88828);
}

.dashboard-bar-group > strong {
  color: #4a655e;
  font-size: 12px;
}

.dashboard-bar-group > small {
  color: #8a9a95;
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}

.dashboard-health-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.dashboard-donut {
  position: relative;
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.dashboard-donut::after {
  position: absolute;
  inset: 18px;
  content: "";
  background: #fff;
  border-radius: 50%;
}

.dashboard-donut > span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-donut strong {
  color: #244f48;
  font-size: 31px;
}

.dashboard-donut small {
  color: #7d8f89;
  font-size: 11px;
}

.dashboard-health-legend {
  display: grid;
  gap: 9px;
}

.dashboard-health-legend > div {
  display: flex;
  justify-content: space-between;
  padding: 9px 10px;
  background: #f7faf8;
  border-radius: 8px;
}

.dashboard-health-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5c746d;
  font-size: 13px;
}

.dashboard-health-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dashboard-health-legend i.teal {
  background: #39a58d;
}

.dashboard-health-legend i.amber {
  background: #e3a63c;
}

.dashboard-health-legend i.red {
  background: #d5655a;
}

.dashboard-attention-list {
  display: grid;
  gap: 6px;
}

.dashboard-attention-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: #3f5b54;
  text-align: left;
  background: #fff;
  border: 1px solid #e6ede9;
  border-radius: 8px;
}

.dashboard-attention-list button:hover {
  border-color: #8ec4b7;
  background: #f9fcfb;
}

.dashboard-attention-list span {
  color: #2c8274;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-attention-list strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-attention-list em {
  color: #c16e35;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.dashboard-attention-list > p,
.dashboard-empty {
  padding: 18px;
  color: #84958f;
  font-size: 13px;
  text-align: center;
}

.dashboard-provider-table {
  border: 1px solid #e5ece8;
  border-radius: 10px;
  overflow: hidden;
}

.dashboard-provider-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) repeat(5, minmax(70px, 0.55fr));
  align-items: center;
  min-height: 48px;
  padding: 0 13px;
  color: #526b64;
  font-size: 13px;
  border-top: 1px solid #edf2ef;
}

.dashboard-provider-row:first-child {
  border-top: 0;
}

.dashboard-provider-row.head {
  min-height: 38px;
  color: #7b8e88;
  font-size: 11.5px;
  font-weight: 700;
  background: #f5f9f7;
}

.dashboard-provider-row strong {
  color: #35534b;
}

.dashboard-score {
  color: #b87924;
  font-weight: 700;
}

.dashboard-window-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0 12px;
}

.dashboard-window-metrics > div {
  padding: 10px;
  background: #f6f9f7;
  border-radius: 8px;
}

.dashboard-window-metrics span {
  display: block;
  color: #7b8d87;
  font-size: 11px;
}

.dashboard-window-metrics strong {
  color: #36544c;
  font-size: 16px;
}

.dashboard-window-list {
  display: grid;
  gap: 7px;
}

.dashboard-window-list button {
  display: grid;
  gap: 3px;
  padding: 10px;
  text-align: left;
  background: #fff;
  border: 1px solid #e6ede9;
  border-radius: 8px;
}

.dashboard-window-list span {
  color: #2c8274;
  font-size: 11px;
}

.dashboard-window-list strong {
  color: #3a5750;
  font-size: 13px;
}

.dashboard-window-list small {
  color: #81928d;
  font-size: 11px;
}

.dashboard-data-source {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7f918b;
  font-size: 11px;
}

.dashboard-cost-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.dashboard-cost-strip > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: #f7faf8;
  border: 1px solid #e8efeb;
  border-radius: 10px;
}

.dashboard-cost-strip span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6b807a;
  font-size: 12px;
}

.dashboard-cost-strip i.navy {
  background: #244f5c;
}

.dashboard-cost-strip i.teal {
  background: #2d8d7d;
}

.dashboard-cost-strip i.amber {
  background: #d7a047;
}

.dashboard-cost-strip i.red {
  background: #c96055;
}

.dashboard-cost-strip strong {
  color: #315049;
  font-size: 19px;
}

.dashboard-loading {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #78908a;
  text-align: center;
}

.qr-frame.qr-real {
  padding: 12px;
  background: #fff;
}

.qr-frame.qr-real img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-target {
  display: block;
  margin-top: 9px;
  padding: 7px 9px;
  color: #58746c;
  background: #f3f8f6;
  border-radius: 7px;
  font-size: 11px;
  word-break: break-all;
}

.empty-state.compact {
  min-height: 170px;
}

.bom-row strong small {
  display: block;
  margin-top: 2px;
  color: #879892;
  font-size: 10.5px;
  font-weight: 500;
}

.equipment-memo.compact-empty {
  min-height: 88px;
}

.parts-readiness-panel {
  padding: 4px;
}

.parts-readiness-head {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: #f5faf8;
  border: 1px solid #dfebe6;
  border-radius: 12px;
}

.readiness-ring {
  --value: 0;
  position: relative;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  align-content: center;
  background: conic-gradient(#2d8d7d calc(var(--value) * 1%), #dfeae6 0);
  border-radius: 50%;
}

.readiness-ring::after {
  position: absolute;
  inset: 13px;
  content: "";
  background: #fff;
  border-radius: 50%;
}

.readiness-ring strong,
.readiness-ring span {
  position: relative;
  z-index: 1;
}

.readiness-ring strong {
  color: #285d53;
  font-size: 25px;
}

.readiness-ring strong small {
  font-size: 12px;
}

.readiness-ring span {
  color: #7b8e88;
  font-size: 10.5px;
}

.parts-readiness-head h3 {
  margin: 0 0 6px;
  color: #315149;
  font-size: 18px;
}

.parts-readiness-head p {
  margin: 0 0 10px;
  color: #6d817b;
  font-size: 13px;
  line-height: 1.7;
}

.readiness-missing-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.readiness-missing-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 35px minmax(160px, 1fr) auto auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: #fff;
  border: 1px solid #e7edea;
  border-radius: 9px;
}

.readiness-missing-list > button:hover {
  border-color: #86bbaf;
}

.readiness-missing-list > button > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.readiness-missing-list strong {
  color: #3b5851;
  font-size: 13px;
}

.readiness-missing-list small,
.readiness-missing-list em {
  color: #85958f;
  font-size: 11px;
  font-style: normal;
}

.readiness-missing-list > button > span:not(.part-symbol) {
  color: #657a74;
  font-size: 12px;
}

.sourcing-detail-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.sourcing-detail-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: #f5f9f7;
  border-radius: 8px;
}

.sourcing-detail-summary span {
  color: #7d908a;
  font-size: 11px;
}

.sourcing-detail-summary strong {
  overflow: hidden;
  color: #35544c;
  font-size: 13px;
  text-overflow: ellipsis;
}

.supplier-quote-list {
  display: grid;
  gap: 8px;
}

.supplier-quote-list article {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e4ece8;
  border-radius: 9px;
}

.supplier-quote-list article.selected {
  border-color: #79b7a9;
  background: #f5fbf8;
}

.supplier-quote-list article > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.supplier-quote-list strong {
  color: #36544c;
  font-size: 13px;
}

.supplier-quote-list small,
.supplier-quote-list em {
  color: #7e918a;
  font-size: 11px;
  font-style: normal;
}

.supplier-quote-list article > div:nth-child(2) {
  align-items: flex-end;
}

.supplier-quote-list article > div:nth-child(2) strong {
  color: #bd7722;
  font-size: 17px;
}

.purchase-detail-lines {
  display: grid;
  gap: 7px;
}

.purchase-detail-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 10px;
  background: #f7faf8;
  border-radius: 7px;
}

.purchase-detail-lines span {
  color: #7d908a;
  font-size: 12px;
}

.purchase-detail-lines strong {
  color: #3b5851;
  font-size: 12px;
  text-align: right;
}

.compact-timeline {
  max-height: 200px;
  overflow-y: auto;
}

.scan-guide {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #eaf6f1, #f8fbfa);
  border: 1px solid #d9ebe4;
  border-radius: 11px;
}

.scan-guide > span {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2f897a;
  border-radius: 13px;
}

.scan-guide strong {
  color: #315149;
  font-size: 15px;
}

.scan-guide p {
  margin: 4px 0 0;
  color: #6d817b;
  font-size: 12.5px;
  line-height: 1.6;
}

.workorder-feedback-panel {
  display: grid;
  gap: 12px;
}

.feedback-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: #f5faf8;
  border: 1px solid #dfebe6;
  border-radius: 10px;
}

.feedback-summary > span {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: #2f897a;
  border-radius: 10px;
}

.feedback-summary > div {
  flex: 1;
}

.feedback-summary strong {
  color: #35534b;
  font-size: 14px;
}

.feedback-summary p {
  margin: 3px 0 0;
  color: #748883;
  font-size: 12px;
}

.feedback-list {
  display: grid;
  gap: 9px;
}

.feedback-card {
  padding: 13px;
  background: #fff;
  border: 1px solid #e4ece8;
  border-left: 4px solid #d9a247;
  border-radius: 9px;
}

.feedback-card.resolved {
  border-left-color: #2e947f;
}

.feedback-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.feedback-head > span:first-child {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #b27226;
  background: #fbf2e2;
  border-radius: 8px;
}

.feedback-head > span.danger {
  color: #bd5148;
  background: #fbeae7;
}

.feedback-head > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.feedback-head strong {
  color: #38564e;
  font-size: 13px;
}

.feedback-head small {
  color: #82938d;
  font-size: 11px;
}

.feedback-card > p {
  margin: 10px 0;
  color: #5e746e;
  font-size: 13px;
  line-height: 1.7;
}

.feedback-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

.feedback-meta span,
.feedback-resolution {
  padding: 5px 8px;
  color: #6e827c;
  background: #f4f8f6;
  border-radius: 6px;
  font-size: 11px;
}

.feedback-resolution {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  color: #287b6d;
  background: #ebf6f1;
}

@media (max-width: 1180px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-chart-card,
  .dashboard-provider-card,
  .dashboard-cost-card {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .dashboard-kpi-grid,
  .dashboard-cost-strip,
  .sourcing-detail-summary {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-provider-row {
    grid-template-columns: minmax(140px, 1fr) repeat(2, 60px);
  }

  .dashboard-provider-row > span:nth-child(4),
  .dashboard-provider-row > span:nth-child(5),
  .dashboard-provider-row > span:nth-child(6) {
    display: none;
  }

  .parts-readiness-head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .readiness-missing-list > button {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .readiness-missing-list > button > span:not(.part-symbol),
  .readiness-missing-list > button > em {
    display: none;
  }

  .supplier-quote-list article {
    grid-template-columns: 1fr auto;
  }

  .supplier-quote-list article > div:nth-child(2) {
    align-items: flex-start;
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .dashboard-kpi-grid,
  .dashboard-cost-strip,
  .sourcing-detail-summary {
    grid-template-columns: 1fr;
  }

  .dashboard-bar-chart {
    gap: 7px;
  }

  .dashboard-bar-group > small {
    display: none;
  }

  .dashboard-main-grid > .surface-section {
    padding: 13px;
  }
}

.maintenance-package-modal {
  width: min(860px, 96vw);
  max-height: min(900px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(7, 33, 29, 0.28);
}

.maintenance-package-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid #e5ece8;
}

.maintenance-package-modal > header h2 {
  margin: 4px 0;
  color: #244f48;
  font-size: 23px;
}

.maintenance-package-modal > header p {
  margin: 0;
  color: #71857f;
  font-size: 13px;
}

.maintenance-package-body {
  min-height: 0;
  overflow-y: auto;
  padding: 19px 24px 24px;
}

.maintenance-package-summary {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.maintenance-package-summary > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 13px;
  background: #f5f9f7;
  border: 1px solid #e5ece8;
  border-radius: 10px;
}

.maintenance-package-summary span {
  color: #71857f;
  font-size: 12px;
}

.maintenance-package-summary strong {
  color: #315149;
  font-size: 18px;
}

.maintenance-package-summary small {
  overflow: hidden;
  color: #84958f;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.package-readiness-score {
  color: #2a7568;
  background: #eef8f4 !important;
  border-color: #d7ebe4 !important;
}

.package-readiness-score.warning {
  color: #a66c25;
  background: #fcf5e8 !important;
  border-color: #f0dfbf !important;
}

.package-readiness-score strong {
  color: inherit;
  font-size: 28px;
}

.package-readiness-score strong small {
  color: inherit;
  font-size: 13px;
}

.maintenance-package-section {
  margin-top: 16px;
}

.maintenance-package-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.maintenance-package-checks > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) auto;
  align-items: center;
  gap: 3px 8px;
  padding: 10px;
  background: #f8faf9;
  border: 1px solid #e6ede9;
  border-radius: 8px;
}

.maintenance-package-checks > div.warning {
  background: #fcf8ef;
  border-color: #eee0c5;
}

.maintenance-package-checks span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #43625a;
  font-size: 12px;
  font-weight: 650;
}

.maintenance-package-checks strong {
  color: #3a5951;
  font-size: 12px;
}

.maintenance-package-checks small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #81938d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-blocker-list {
  display: grid;
  gap: 6px;
}

.maintenance-blocker-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: #fcf7ee;
  border: 1px solid #efe0c6;
  border-radius: 8px;
}

.maintenance-blocker-list > div.severity-high {
  background: #fdf0ee;
  border-color: #f0d4d0;
}

.maintenance-blocker-list p {
  margin: 0;
  color: #655b4d;
  font-size: 12.5px;
  line-height: 1.55;
}

.maintenance-blocker-list strong {
  min-width: 25px;
  padding: 3px 6px;
  color: #a55d2b;
  text-align: center;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  font-size: 11px;
}

.maintenance-package-orders {
  display: grid;
  gap: 6px;
}

.maintenance-package-orders > div,
.maintenance-package-orders > button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(90px, auto) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid #e5ece8;
  border-radius: 8px;
}

.maintenance-package-orders > button:hover {
  border-color: #8dc2b6;
  background: #f8fcfa;
}

.maintenance-package-orders > div > div,
.maintenance-package-orders > button > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.maintenance-package-orders strong {
  overflow: hidden;
  color: #38574f;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-package-orders small {
  color: #84958f;
  font-size: 11px;
}

.maintenance-package-orders em {
  color: #667b75;
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.maintenance-package-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 70px;
  color: #738881;
  background: #f7faf8;
  border: 1px dashed #dce7e2;
  border-radius: 9px;
  font-size: 12.5px;
}

.maintenance-package-modal > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 24px;
  background: #fff;
  border-top: 1px solid #e3ebe7;
}

.conflict-empty {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px;
  color: #347b6e;
  background: #eff8f4;
  border-radius: 8px;
  font-size: 12px;
}

@media (max-width: 720px) {
  .schedule-panel .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .schedule-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .maintenance-package-modal {
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }

  .maintenance-package-modal > header,
  .maintenance-package-body,
  .maintenance-package-modal > footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .maintenance-package-summary,
  .maintenance-package-checks {
    grid-template-columns: 1fr 1fr;
  }

  .maintenance-package-orders > div,
  .maintenance-package-orders > button {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .maintenance-package-orders em {
    display: none;
  }
}
.member-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.active-role-banner {
  margin: 16px 0;
  padding: 13px 16px;
  border: 1px solid #cbe3dc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #355f58;
  background: #f0f8f5;
}

.active-role-banner span {
  margin-left: auto;
  color: #167565;
  font-weight: 700;
}

.member-role-select {
  min-width: 150px;
  min-height: 36px;
  border: 1px solid #cfddd8;
  border-radius: 9px;
  padding: 0 10px;
  color: #244b45;
  background: #fff;
}

.member-row.pending {
  background: #fffaf0;
}

.invitation-pending-section,
.role-catalog-section {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #e2ebe7;
}

.role-card-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-card {
  min-height: 150px;
  padding: 17px;
  border: 1px solid #dbe7e3;
  border-radius: 14px;
  background: #fbfdfc;
}

.role-card > div {
  display: grid;
  gap: 5px;
}

.role-card span {
  color: #168274;
  font-size: 12px;
  font-weight: 700;
}

.role-card strong {
  color: #173f3b;
  font-size: 17px;
}

.role-card p {
  min-height: 42px;
  color: #647873;
  line-height: 1.6;
}

.role-card small {
  color: #375f58;
  font-weight: 700;
}

.role-card footer {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.organization-role-modal {
  width: min(860px, calc(100vw - 32px));
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding: 4px;
}

.permission-grid label {
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid #dce8e4;
  border-radius: 11px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fbfdfc;
}

.permission-grid label:has(input:checked) {
  border-color: #36a08f;
  background: #edf8f4;
}

.permission-grid input {
  margin-top: 3px;
}

.permission-grid span {
  display: grid;
  gap: 3px;
}

.permission-grid strong {
  color: #234d46;
  font-size: 14px;
}

.permission-grid small,
.form-help {
  color: #748781;
  font-size: 12px;
}

.organization-invite-result .small-modal-body {
  display: grid;
  gap: 16px;
}

@media (max-width: 900px) {
  .role-card-grid {
    grid-template-columns: 1fr;
  }

  .permission-grid {
    grid-template-columns: 1fr;
  }

  .member-header-actions {
    flex-wrap: wrap;
  }

  .member-role-select {
    min-width: 120px;
  }

  .member-row {
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .member-row > div {
    min-width: calc(100% - 56px);
  }

  .member-permission {
    flex: 0 0 100%;
  }
}