:root {
  --bg: #fff8ec;
  --panel: #ffffff;
  --panel-soft: #fffaf0;
  --text: #14243d;
  --muted: #5c6a80;
  --faint: #f1dfbf;
  --line: #e7c986;
  --brand: #172b49;
  --blue: #f5a400;
  --green: #19a866;
  --orange: #f58220;
  --red: #df1f2d;
  --gray: #77849a;
  --service: #f5a400;
  --service-deep: #f58220;
  --service-soft: #fff2c8;
  --service-red: #df1f2d;
  --navy: #172b49;
  --shadow: 0 16px 40px rgba(128, 82, 18, 0.11);
  --radius: 8px;
  --font-ui: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-size-body: 14px;
  --font-weight-normal: 400;
  --font-weight-label: 500;
  --font-weight-heading: 600;
  font-family: var(--font-ui);
}

/* V1.2 install plan deepening: main-page action cards and full-screen secondary work pages. */
.install-secondary-panel {
  border: 1px solid #f0d190;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(15, 35, 64, 0.06);
}

.install-secondary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.install-secondary-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 10px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid #f2c46b;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf7, #fff7e1);
  color: #08224a;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(222, 151, 20, 0.2);
}

.install-secondary-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(222, 151, 20, 0.14), inset 0 -3px 0 rgba(222, 151, 20, 0.25);
}

.install-secondary-card strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-secondary-card em {
  justify-self: end;
  font-style: normal;
  font-size: 24px;
  font-weight: 800;
}

.install-secondary-card small {
  grid-column: 2 / 4;
  overflow: hidden;
  color: #53637a;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-secondary-code {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
}

.install-secondary-code.blue { background: #1565d8; }
.install-secondary-code.red { background: #ee3f55; }
.install-secondary-code.orange { background: #f59e0b; }
.install-secondary-code.green { background: #07936d; }

.upload-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 22, 45, 0.46);
  backdrop-filter: blur(6px);
}

.upload-confirm-card {
  width: min(440px, 100%);
  padding: 26px;
  border: 1px solid #f2c46b;
  border-radius: 18px;
  background: #fff;
  color: #08224a;
  box-shadow: 0 26px 70px rgba(8, 22, 45, 0.26);
  text-align: center;
}

.upload-confirm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffd966, #ff9d16);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.upload-confirm-card h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.upload-confirm-status {
  min-height: 22px;
  margin: 8px 0 16px;
  color: #53637a;
  font-size: 14px;
  line-height: 1.45;
}

.upload-confirm-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef3f8;
}

.upload-confirm-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1565d8, #ffb21a);
  transition: width 0.12s ease;
}

.upload-confirm-percent {
  margin: 8px 0 14px;
  color: #08224a;
  font-size: 18px;
  font-weight: 800;
}

.upload-confirm-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #f2d79a;
  border-radius: 10px;
  background: #fffaf0;
  font-size: 13px;
}

.upload-confirm-summary span {
  color: #a15b00;
  font-weight: 700;
}

.upload-confirm-file-list {
  display: grid;
  gap: 8px;
  max-height: 168px;
  margin: 12px 0 18px;
  padding: 0;
  overflow: auto;
  list-style: none;
  text-align: left;
}

.upload-confirm-file-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #e1e9f3;
  border-radius: 9px;
  background: #f8fbff;
}

.upload-confirm-file-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.upload-confirm-file-list em {
  color: #53637a;
  font-style: normal;
  font-size: 12px;
}

.upload-confirm-button {
  width: 100%;
  min-height: 46px;
  border: 1px solid #f0a400;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd966, #ffa617);
  color: #08224a;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.upload-confirm-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.upload-confirm-modal.is-complete .upload-confirm-icon {
  background: linear-gradient(180deg, #19bf7c, #07875f);
}

@media (max-width: 760px) {
  .upload-confirm-modal {
    align-items: flex-end;
    padding: 10px;
  }

  .upload-confirm-card {
    padding: 20px;
    border-radius: 16px;
  }

  .upload-confirm-card h2 {
    font-size: 19px;
  }
}

.install-secondary-content {
  display: grid;
  gap: 16px;
}

.install-secondary-head,
.install-secondary-kpis,
.install-secondary-actions,
.install-secondary-table-panel,
.install-secondary-work-grid article {
  border: 1px solid #e1e9f3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 35, 64, 0.05);
}

.install-secondary-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 86px 20px 22px;
}

.install-secondary-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff3c4;
  color: #a15b00;
  font-weight: 700;
  font-size: 12px;
}

.install-secondary-head h1 {
  margin: 8px 0 4px;
  font-size: 28px;
  line-height: 1.1;
}

.install-secondary-head p {
  margin: 0;
  max-width: 760px;
  color: #53637a;
  font-size: 14px;
}

.install-secondary-head .desktop-home-button,
.install-secondary-head .desktop-return-button {
  position: absolute;
  top: 18px;
}

.install-secondary-head .desktop-home-button { right: 54px; }
.install-secondary-head .desktop-return-button { right: 18px; }

.install-secondary-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.install-secondary-kpis article {
  min-height: 96px;
  padding: 16px;
  border: 1px solid #f2d79a;
  border-radius: 12px;
  background: #fffaf0;
}

.install-secondary-kpis span,
.install-secondary-kpis small {
  display: block;
  color: #53637a;
  font-size: 12px;
  font-weight: 600;
}

.install-secondary-kpis strong {
  display: block;
  margin: 8px 0 5px;
  font-size: 30px;
  line-height: 1;
}

.install-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.install-secondary-actions button {
  min-height: 42px;
  border: 1px solid #f0a400;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd865, #f8a800);
  color: #08224a;
  font-weight: 800;
  cursor: pointer;
}

.install-secondary-table-panel {
  padding: 16px;
}

.install-secondary-table-wrap {
  overflow: auto;
}

.install-secondary-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.install-secondary-table th,
.install-secondary-table td {
  padding: 12px;
  border-bottom: 1px solid #e8edf5;
  text-align: left;
  vertical-align: top;
}

.install-secondary-table th {
  background: #f7f9fc;
  color: #53637a;
  font-weight: 700;
}

.install-secondary-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e7fff3;
  color: #007a4b;
  font-weight: 700;
}

.install-secondary-work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.install-secondary-work-grid article {
  padding: 16px;
}

.install-secondary-work-grid strong {
  display: block;
  margin-bottom: 7px;
  font-size: 15px;
}

.install-secondary-work-grid p {
  margin: 0;
  color: #53637a;
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 761px) {
  .erp-layout.is-primary-split.install-secondary-layout .install-secondary-content {
    width: min(1380px, 100%) !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 760px) {
  .install-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .install-secondary-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 74px;
    padding: 10px;
  }

  .install-secondary-code {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 12px;
  }

  .install-secondary-card strong {
    font-size: 13px;
  }

  .install-secondary-card em {
    font-size: 20px;
  }

  .install-secondary-card small {
    font-size: 10px;
  }

  .install-secondary-layout .install-secondary-content {
    display: block !important;
    height: auto !important;
    min-height: calc(100svh - 58px);
    padding: 8px !important;
    overflow: auto !important;
  }

  .install-secondary-head {
    padding: 12px 78px 12px 12px;
  }

  .install-secondary-head h1 {
    font-size: 21px;
  }

  .install-secondary-head p {
    font-size: 12px;
  }

  .install-secondary-kpis,
  .install-secondary-actions,
  .install-secondary-work-grid {
    grid-template-columns: 1fr 1fr;
    margin-top: 8px;
  }

  .install-secondary-table-panel {
    margin-top: 8px;
  }
}

/* V1.2 desktop primary-page rule: every first-level ERP page uses a full-screen main workspace plus a secondary side screen. */
@media (min-width: 761px) {
  .erp-layout.is-primary-split {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf0 0%, #f8fafc 42%, #eef3f7 100%);
  }

  .erp-layout.is-primary-split .erp-main {
    min-width: 0;
    height: 100vh;
    overflow: hidden;
  }

  .erp-layout.is-primary-split .erp-content {
    height: calc(100vh - 64px);
    min-height: 0;
    overflow: auto;
    padding-bottom: 18px;
    scrollbar-width: thin;
  }

  .erp-layout.is-primary-split .desktop-secondary-dock {
    position: fixed;
    top: 82px;
    right: 14px;
    bottom: 14px;
    z-index: 35;
    display: flex;
    width: 254px;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(245, 164, 0, 0.48);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.97), rgba(255, 255, 255, 0.96)),
      #ffffff;
    box-shadow: 0 18px 42px rgba(128, 82, 18, 0.16);
    backdrop-filter: blur(10px);
  }

  .desktop-secondary-dock-head {
    display: grid;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(231, 201, 134, 0.7);
  }

  .desktop-secondary-dock-head span {
    width: fit-content;
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff2c8;
    color: #9a5c00;
    font-size: 11px;
    font-weight: 700;
  }

  .desktop-secondary-dock-head strong {
    color: var(--navy);
    font-size: 18px;
    font-weight: 700;
  }

  .desktop-secondary-dock-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
  }

  .desktop-secondary-dock-actions {
    display: grid;
    gap: 8px;
    overflow: auto;
    padding-right: 2px;
  }

  .desktop-secondary-dock-actions button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 10px 9px 12px;
    border: 1px solid rgba(245, 164, 0, 0.45);
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #fffaf0);
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    box-shadow: 0 8px 18px rgba(128, 82, 18, 0.08);
  }

  .desktop-secondary-dock-actions button:hover {
    border-color: #f5a400;
    background: linear-gradient(180deg, #fff7d9, #ffffff);
    transform: translateY(-1px);
  }

  .desktop-secondary-dock-actions i {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #f5a400;
    color: #ffffff;
    font-style: normal;
    font-weight: 800;
  }

  .desktop-secondary-dock footer {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(231, 201, 134, 0.7);
    color: #8a5a12;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
  }
}

/* V1.2 final owner desktop override: keep Owner dashboard in the approved full-screen split shell. */
@media (min-width: 761px) {
  .erp-layout.is-primary-split.owner-desktop-v12-shell {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f7f9fc !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-sidebar {
    display: flex !important;
    width: 260px !important;
    min-width: 260px !important;
    height: 100vh !important;
    overflow: hidden auto !important;
    background: linear-gradient(180deg, #092143, #123054) !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-main {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-topbar {
    position: static !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 14px 28px !important;
    overflow: visible !important;
    border-bottom: 1px solid #e8edf5 !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .owner-v11-desktop-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100vh - 72px) !important;
    min-height: 0 !important;
    padding: 22px 30px 26px !important;
    overflow: auto !important;
    background: #f7f9fc !important;
  }

  .owner-desktop-v12-shell .owner-v11-page {
    width: min(1280px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 18px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi {
    min-height: 146px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(7, 30, 72, 0.04) !important;
  }

  .owner-desktop-v12-shell .owner-v11-panel,
  .owner-desktop-v12-shell .owner-v11-section {
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(7, 30, 72, 0.04) !important;
  }

  .owner-desktop-v12-shell .owner-v11-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .owner-desktop-v12-shell .owner-v11-month-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-card {
    display: grid;
    min-height: 96px;
    align-content: start;
    gap: 5px;
    padding: 12px;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    background: #ffffff;
    color: #08254a;
    text-align: left;
    cursor: pointer;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-card b {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #f5a400;
    color: #ffffff;
    font-size: 12px;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-card strong {
    font-size: 14px;
    font-weight: 800;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-card span {
    font-size: 24px;
    font-weight: 850;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-card em {
    color: #00855a;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
  }

  .owner-desktop-v12-shell .owner-v11-flow {
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .owner-desktop-v12-shell .owner-v11-flow-node {
    min-height: 92px !important;
    padding: 11px 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-flow-node strong {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .owner-desktop-v12-shell .owner-v11-flow-node span {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .owner-desktop-v12-shell .owner-v11-team-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .owner-desktop-v12-shell .owner-v11-team-grid article,
  .owner-desktop-v12-shell .owner-v11-month-grid article {
    min-height: 84px !important;
    border-radius: 8px !important;
    background: #fffdfa !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-card {
    min-height: 74px !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding: 10px 12px !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-card p,
  .owner-desktop-v12-shell .owner-v11-menu-card span {
    white-space: nowrap !important;
  }
}

/* V1.2 owner desktop home: use the same approved primary split shell. */
@media (min-width: 761px) {
  .erp-layout.is-primary-split.owner-desktop-v12-shell {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #f7f9fc !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-sidebar {
    display: flex !important;
    width: 260px !important;
    min-width: 260px !important;
    height: 100vh !important;
    overflow: hidden auto !important;
    background: linear-gradient(180deg, #092143, #123054) !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-main {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-topbar {
    position: static !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 14px 28px !important;
    overflow: visible !important;
    border-bottom: 1px solid #e8edf5 !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .owner-v11-desktop-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100vh - 72px) !important;
    min-height: 0 !important;
    padding: 22px 30px 26px !important;
    overflow: auto !important;
    background: #f7f9fc !important;
  }

  .owner-desktop-v12-shell .owner-v11-page {
    width: min(1280px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 18px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi {
    min-height: 146px;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(7, 30, 72, 0.04);
  }

  .owner-desktop-v12-shell .owner-v11-panel,
  .owner-desktop-v12-shell .owner-v11-section {
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(7, 30, 72, 0.04);
  }

  .owner-desktop-v12-shell .owner-v11-bottom-nav {
    display: none !important;
  }
}

/* Final mobile sales-order workstation correction: keep the salesperson's daily work visible and tappable. */
@media (max-width: 760px) {
  .erp-layout:has(.sales-orders-content) {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf0 0%, #f5f7fb 46%, #eef3f8 100%);
  }

  .erp-layout:has(.sales-orders-content) .erp-topbar {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    height: 58px;
    min-height: 58px;
    padding: 8px 10px;
    border-bottom: 1px solid #f0d190;
  }

  .erp-layout:has(.sales-orders-content) .erp-topbar .topbar-user strong {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .erp-main,
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    height: calc(100vh - 0px);
    min-height: 0;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    height: calc(100vh - 58px) !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: 64px 150px minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "rail entry"
      "rail orders";
    gap: 8px;
    padding: 8px;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-content > section {
    min-width: 0;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-head {
    grid-area: head !important;
    min-height: 64px;
    margin: 0;
    padding: 9px 86px 9px 10px;
    border: 1px solid #f0b33c;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(15, 35, 65, 0.06);
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-head h1 {
    font-size: 19px;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-head p {
    max-width: 280px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-head .desktop-home-button,
  .erp-layout:has(.sales-orders-content) .sales-orders-head .desktop-return-button {
    top: 15px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-policy {
    grid-area: rail !important;
    display: grid !important;
    grid-template-rows: 192px 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-policy > div:first-child {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    overflow: hidden;
    padding: 0;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics article {
    min-height: 36px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 6px;
    padding: 7px 8px;
    border: 1px solid #d9e8f6;
    border-radius: 8px;
    background: #f8fbff;
    box-shadow: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics b {
    color: #52637a;
    font-size: 10px;
    line-height: 1.05;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
    color: #061b45;
    font-size: 17px;
    line-height: 1;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics span {
    color: #007a50;
    font-size: 9px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow {
    grid-area: rail !important;
    align-self: end;
    height: calc(100% - 200px);
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 200px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow article {
    min-height: 38px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    padding: 6px 7px;
    border: 1px solid #cfe7e4;
    border-radius: 8px;
    background: #f6fffd;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow article.has-orders {
    border-color: #85d8d0;
    background: #eafffb;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow span {
    width: 21px;
    height: 21px;
    background: #008b84;
    font-size: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow em {
    color: #061b45;
    font-size: 11px;
    font-weight: 700;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-command,
  .erp-layout:has(.sales-orders-content) .sales-data-pulse,
  .erp-layout:has(.sales-orders-content) .sales-order-alert-window {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    grid-area: entry !important;
    height: 150px;
    min-height: 0;
    margin: 0;
    padding: 8px;
    border: 1px solid #f0b33c;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 6px;
    height: 100%;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:first-of-type,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(4),
  .erp-layout:has(.sales-orders-content) .sales-update-form button {
    grid-column: 1 / -1;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title h2 {
    font-size: 14px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title span,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(2),
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(3),
  .erp-layout:has(.sales-orders-content) .sales-update-log {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form label {
    min-width: 0;
    gap: 3px;
    font-size: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form input,
  .erp-layout:has(.sales-orders-content) .sales-update-form select {
    min-height: 31px;
    border-radius: 8px;
    font-size: 11px;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form button {
    min-height: 32px;
    border-radius: 8px;
    font-size: 11px;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-layout {
    grid-area: orders !important;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-permission-panel,
  .erp-layout:has(.sales-orders-content) .sales-rules-panel {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-panel {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 34px minmax(0, 1fr);
    padding: 8px;
    border: 1px solid #f0b33c;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-panel .section-title {
    align-items: center;
    min-height: 30px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-panel .section-title h2 {
    font-size: 16px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-panel .section-title span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-wrap {
    min-height: 0;
    overflow-y: auto;
    border: 0;
    padding-right: 2px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table,
  .erp-layout:has(.sales-orders-content) .sales-order-table tbody {
    display: grid !important;
    width: 100%;
    min-width: 0;
    gap: 7px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table thead {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table tr {
    min-height: 106px;
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 66px;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    background: #fbfdff;
    box-shadow: 0 3px 10px rgba(15, 35, 65, 0.04);
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td {
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 11px;
    line-height: 1.25;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td::before {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    color: #52637a;
    font-size: 10px;
    word-break: break-word;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1;
    display: -webkit-box;
    overflow: hidden;
    color: #061b45;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 2;
    color: #061b45;
    font-size: 12px;
    font-weight: 800;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(9) {
    grid-column: 1 / 3;
    grid-row: 3;
    overflow: hidden;
    color: #36506f;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(10) {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(12) {
    grid-column: 3;
    grid-row: 2 / span 2;
    display: grid !important;
    gap: 4px;
    align-self: end;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(4),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(3),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(7),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(8),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(11) {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-stage-tag,
  .erp-layout:has(.sales-orders-content) .sales-risk-tag {
    max-width: 100%;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(12) .table-action {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0 4px;
    border-radius: 7px;
    font-size: 10px;
  }
}

/* Final owner dashboard flow: the expanded command center must push the 16-grid down instead of overlapping it. */
@media (min-width: 761px) {
  body:has(.desktop-workbench-layout),
  .desktop-workbench-layout,
  .desktop-workbench-layout .erp-main {
    height: 100vh !important;
    overflow: hidden !important;
  }

  .desktop-workbench-layout .desktop-content {
    height: calc(100vh - 54px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 8px 12px !important;
    overflow: hidden !important;
  }

  .desktop-workbench-layout .owner-command-hero {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 76px !important;
    padding: 8px 16px !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
  }

  .desktop-workbench-layout .owner-command-hero h1 {
    display: none !important;
  }

  .desktop-workbench-layout .owner-command-hero > div:first-child > p {
    display: block !important;
    max-width: 620px !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .desktop-workbench-layout .owner-command-hero .desktop-kicker {
    min-height: 20px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    line-height: 20px !important;
  }

  .desktop-workbench-layout .owner-command-hero .desktop-hero-logo {
    width: min(330px, 28vw) !important;
    max-height: 46px !important;
    margin: 0 !important;
  }

  .desktop-workbench-layout .owner-command-hero .desktop-hero-logo img {
    max-height: 46px !important;
  }

  .desktop-workbench-layout .owner-command-hero .desktop-owner-card {
    min-height: 52px !important;
    padding: 10px 14px !important;
  }

  .desktop-workbench-layout .owner-command-hero .desktop-owner-card strong {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .desktop-workbench-layout .owner-command-hero .desktop-owner-card span {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .desktop-workbench-layout .owner-today-strip,
  .desktop-workbench-layout .owner-dashboard-grid,
  .desktop-workbench-layout .owner-legacy-stats,
  .desktop-workbench-layout .desktop-module-section {
    flex: 0 0 auto !important;
  }

  .desktop-workbench-layout .owner-today-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .desktop-workbench-layout .owner-today-card {
    min-height: 54px !important;
    padding: 8px 12px !important;
  }

  .desktop-workbench-layout .owner-today-card span {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .desktop-workbench-layout .owner-today-card strong {
    font-size: 24px !important;
  }

  .desktop-workbench-layout .owner-today-card em {
    font-size: 11px !important;
  }

  .desktop-workbench-layout .owner-dashboard-grid {
    grid-template-columns: 1.05fr 0.88fr 0.72fr !important;
    grid-template-areas:
      "month tasks risk"
      "flow team risk" !important;
    gap: 8px !important;
  }

  .desktop-workbench-layout .owner-panel {
    padding: 10px !important;
    border-radius: 9px !important;
  }

  .desktop-workbench-layout .owner-panel .section-title {
    min-height: 20px !important;
    margin-bottom: 7px !important;
  }

  .desktop-workbench-layout .owner-panel .section-title h2 {
    font-size: 15px !important;
  }

  .desktop-workbench-layout .owner-panel .section-title span {
    font-size: 11px !important;
  }

  .desktop-workbench-layout .owner-month-grid {
    gap: 7px !important;
  }

  .desktop-workbench-layout .owner-month-grid button {
    min-height: 54px !important;
    padding: 8px !important;
  }

  .desktop-workbench-layout .owner-month-grid span,
  .desktop-workbench-layout .owner-month-grid em,
  .desktop-workbench-layout .owner-team-grid span,
  .desktop-workbench-layout .owner-team-grid em {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .desktop-workbench-layout .owner-month-grid strong,
  .desktop-workbench-layout .owner-team-grid strong {
    margin: 3px 0 1px !important;
    font-size: 16px !important;
  }

  .desktop-workbench-layout .owner-task-list,
  .desktop-workbench-layout .owner-risk-list {
    gap: 6px !important;
  }

  .desktop-workbench-layout .owner-task-card {
    min-height: 37px !important;
    padding: 7px 9px !important;
  }

  .desktop-workbench-layout .owner-task-card strong,
  .desktop-workbench-layout .owner-risk-item strong {
    font-size: 12px !important;
  }

  .desktop-workbench-layout .owner-task-card span,
  .desktop-workbench-layout .owner-risk-item span {
    font-size: 10px !important;
  }

  .desktop-workbench-layout .owner-flow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .desktop-workbench-layout .owner-flow-node {
    min-height: 44px !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    grid-template-rows: 15px 15px !important;
    padding: 6px !important;
    gap: 2px 6px !important;
  }

  .desktop-workbench-layout .owner-flow-node b {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  .desktop-workbench-layout .owner-flow-node strong {
    font-size: 11px !important;
  }

  .desktop-workbench-layout .owner-flow-node span {
    font-size: 9px !important;
  }

  .desktop-workbench-layout .owner-flow-node em {
    font-size: 15px !important;
  }

  .desktop-workbench-layout .owner-risk-item {
    min-height: 55px !important;
    padding: 8px 34px 8px 9px !important;
    gap: 3px !important;
  }

  .desktop-workbench-layout .owner-risk-item em {
    top: 8px !important;
    right: 8px !important;
    width: 21px !important;
    height: 21px !important;
    font-size: 10px !important;
  }

  .desktop-workbench-layout .owner-team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .desktop-workbench-layout .owner-team-grid button {
    min-height: 52px !important;
    padding: 8px !important;
  }

  .desktop-workbench-layout .desktop-module-section {
    padding: 8px !important;
  }

  .desktop-workbench-layout .desktop-module-section .section-title {
    min-height: 18px !important;
    margin-bottom: 6px !important;
  }

  .desktop-workbench-layout .desktop-module-section .section-title h2 {
    font-size: 15px !important;
  }

  .desktop-workbench-layout .desktop-module-grid {
    height: auto !important;
    grid-template-rows: repeat(4, minmax(46px, auto)) !important;
    gap: 6px !important;
  }

  .desktop-workbench-layout .desktop-module-card {
    height: auto !important;
    min-height: 46px !important;
    grid-template-columns: 34px minmax(0, 1fr) 66px !important;
    gap: 8px !important;
    padding: 6px 9px !important;
  }

  .desktop-workbench-layout .desktop-module-card .module-mark {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
  }

  .desktop-workbench-layout .desktop-module-card h3 {
    margin: 0 0 2px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .desktop-workbench-layout .desktop-module-card p {
    font-size: 10px !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 1 !important;
  }

  .desktop-workbench-layout .module-card-foot {
    gap: 3px !important;
  }

  .desktop-workbench-layout .module-card-foot strong {
    max-width: 64px !important;
    font-size: 12px !important;
  }

  .desktop-workbench-layout .module-card-foot span {
    min-height: 19px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff 0, var(--bg) 42%, #fffdf8 100%);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  font-feature-settings: "tnum" 1, "lnum" 1;
  text-rendering: optimizeLegibility;
}

button,
select {
  font: inherit;
}

.page {
  min-height: 100vh;
  padding: 18px 22px 36px;
}

.shell {
  position: relative;
  max-width: 1760px;
  min-height: 820px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.topbar {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: start;
  gap: 18px;
}

.brand {
  color: var(--brand);
  line-height: 1;
}

.brand-logo {
  display: flex;
  align-items: center;
  width: 238px;
  max-width: 100%;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-logo-sidebar {
  width: 186px;
  padding: 6px 8px;
  border-radius: 6px;
  background: white;
}

.brand-logo-topbar {
  width: 132px;
  height: 36px;
  align-items: center;
}

.brand-logo-topbar img {
  max-height: 34px;
}

.control-button.primary,
.primary-row-action,
.permission-actions .primary-row-action,
.chat-composer .primary-row-action {
  color: #172b49 !important;
  border-color: var(--service) !important;
  background: linear-gradient(180deg, #ffd24f, var(--service)) !important;
  box-shadow: 0 10px 22px rgba(245, 164, 0, 0.24);
}

.brand-name {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 2px;
}

.brand-subtitle {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.headline {
  text-align: center;
}

.project-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brand);
  background: #fafdff;
  font-size: 13px;
  font-weight: 800;
}

h1 {
  margin: 6px 0 0;
  color: var(--brand);
  font-size: 30px;
  line-height: 1.16;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.legend,
.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-chip,
.control-button,
.select-control {
  min-height: 30px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  padding: 0 12px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.status-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.status-chip.not-started {
  color: var(--gray);
}

.status-chip.in-progress {
  color: var(--blue);
}

.status-chip.waiting {
  color: var(--orange);
}

.status-chip.done {
  color: var(--green);
}

.status-chip.overdue {
  color: var(--red);
}

.control-button {
  cursor: pointer;
  color: var(--brand);
}

.control-button.primary {
  color: white;
  border-color: #0d66d7;
  background: #0d66d7;
  box-shadow: 0 10px 22px rgba(13, 102, 215, 0.22);
}

.select-control {
  color: var(--brand);
  outline: none;
}

.board {
  margin-top: 24px;
}

.flow-row {
  display: grid;
  grid-template-columns: repeat(11, minmax(104px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.flow-row.bottom {
  grid-template-columns: repeat(11, minmax(104px, 1fr));
  margin-top: 42px;
}

.flow-node {
  position: relative;
  min-height: 214px;
  padding: 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 10px 24px rgba(41, 75, 113, 0.06);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.flow-node:hover,
.flow-node.active {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 16px 32px rgba(35, 110, 232, 0.14);
}

.flow-node.done {
  border-color: rgba(25, 168, 102, 0.7);
}

.flow-node.dimmed {
  opacity: 0.34;
}

.flow-node::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 10px;
  height: 2px;
  background: var(--blue);
}

.flow-node::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  right: -12px;
  border-left: 7px solid var(--blue);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.flow-row .flow-node:last-child::after,
.flow-row .flow-node:last-child::before {
  display: none;
}

.node-number {
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #637189;
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.flow-node.done .node-number {
  background: var(--green);
}

.flow-node.in-progress .node-number {
  background: var(--blue);
}

.flow-node.waiting .node-number {
  background: var(--orange);
}

.flow-node.overdue .node-number {
  background: var(--red);
}

.node-title {
  min-height: 34px;
  margin-left: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: #172840;
}

.node-icon {
  margin: 18px auto 8px;
  width: 48px;
  height: 48px;
  color: #657181;
  display: grid;
  place-items: center;
}

.node-icon svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.8;
}

.node-status {
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.node-activity-badges {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
}

.node-activity-badges span {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 6px;
  color: #0d66d7;
  background: #eaf4ff;
  font-size: 9.5px;
  font-weight: 900;
  white-space: nowrap;
}

.task-list {
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
  color: #344258;
  font-size: 11px;
  line-height: 1.72;
}

.task-list li {
  display: grid;
  grid-template-columns: 13px 1fr;
  gap: 4px;
}

.task-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.node-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #edf2f8;
  color: #32445c;
  font-size: 10.5px;
  line-height: 1.65;
}

.row-connector {
  display: none;
}

.row-connector::before {
  display: none;
}

.row-connector::after {
  display: none;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1fr 1.05fr 1.5fr;
  gap: 14px;
  margin-top: 10px;
}

.summary-panel,
.detail-panel {
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 14px;
}

.summary-panel h2,
.detail-panel h2 {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 16px;
  line-height: 1.2;
}

.summary-panel dl,
.detail-panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 8px;
  font-size: 13px;
}

.summary-panel dt,
.detail-panel dt {
  color: #344258;
  font-weight: 800;
}

.summary-panel dd,
.detail-panel dd {
  margin: 0;
  color: #172840;
}

.progress-wrap {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: center;
}

.donut {
  --pct: 0%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--green) 0 var(--pct), var(--blue) var(--pct) calc(var(--pct) + 16%), var(--orange) 0 100%);
}

.donut span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
}

.progress-copy {
  color: #273a52;
  font-size: 13px;
  line-height: 1.7;
}

.mini-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 6px;
}

.mini-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #344258;
  font-size: 12px;
}

.mini-key i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.detail-panel {
  margin-top: 14px;
  background: #fbfdff;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.detail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  font-size: 18px;
  font-weight: 900;
}

.detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

.detail-body ul {
  margin: 0;
  padding-left: 18px;
  color: #2b3d54;
  font-size: 13px;
  line-height: 1.8;
}

.empty-note {
  color: var(--muted);
  font-size: 13px;
}

.node-detail-page {
  min-height: 100vh;
  padding: 14px;
  overflow: hidden;
}

.node-detail-shell {
  height: calc(100vh - 28px);
  max-width: none;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.node-detail-head {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 92px;
  align-items: start;
  gap: 18px;
  padding-right: 96px;
}

.node-detail-title {
  text-align: center;
}

.node-detail-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.node-detail-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.node-detail-summary article {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #f6faff);
}

.node-detail-summary span {
  display: block;
  color: #5c6a80;
  font-size: 11px;
  font-weight: 900;
}

.node-detail-summary strong {
  display: block;
  margin-top: 8px;
  color: var(--brand);
  font-size: 18px;
  line-height: 1.1;
}

.node-detail-summary strong.done { color: var(--green); }
.node-detail-summary strong.in-progress { color: var(--blue); }
.node-detail-summary strong.waiting { color: var(--orange); }
.node-detail-summary strong.overdue { color: var(--red); }

.node-action-strip {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #f2c36e;
  border-radius: var(--radius);
  padding: 8px 10px;
  background: linear-gradient(180deg, #fffaf0, #ffffff);
}

.node-action-strip strong {
  color: var(--brand);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.node-action-strip span {
  min-width: 0;
  overflow: hidden;
  color: #76520d;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-action-strip div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.node-action-strip .table-action {
  min-height: 30px;
  border-color: #f0b13a;
  color: #9a5a00;
  background: #fff7df;
  font-weight: 800;
}

.node-detail-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-rows: minmax(188px, 0.48fr) minmax(0, 1fr) minmax(220px, 0.72fr);
  gap: 12px;
  overflow: hidden;
}

.node-detail-panel {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: 14px;
}

.node-events-panel {
  grid-row: span 2;
}

.node-files-panel,
.node-chat-panel {
  background: #fbfdff;
}

.node-report-panel {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #fffaf0, #ffffff);
  border-color: #f1b444;
}

.node-report-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
}

.node-report-layout textarea {
  width: 100%;
  min-height: 118px;
  max-height: 158px;
  resize: vertical;
  overflow: auto;
  border: 1px solid #f2c36e;
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  padding: 12px;
  font: 500 13px/1.5 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.node-report-actions {
  display: grid;
  align-content: start;
  gap: 10px;
}

.node-report-actions .primary-row-action {
  width: 100%;
  min-height: 42px;
}

.node-report-actions p {
  margin: 0;
  color: #76520d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.node-report-actions p.success {
  color: var(--green);
}

.node-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.node-panel-title h2 {
  margin: 0;
  color: var(--brand);
  font-size: 17px;
}

.node-panel-title span {
  color: #66758a;
  font-size: 11px;
  font-weight: 900;
}

.node-event-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.node-event-list li {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #e4edf8;
  border-radius: 8px;
  background: #f9fcff;
}

.node-event-list time {
  color: #66758a;
  font-size: 11px;
  font-weight: 900;
}

.node-event-list strong,
.node-approval-list strong,
.node-chat-list strong,
.node-file-card strong {
  color: #071f3d;
  font-weight: 900;
}

.node-event-list span {
  display: block;
  margin-top: 3px;
  color: #0d66d7;
  font-size: 11px;
  font-weight: 900;
}

.node-event-list p {
  margin: 6px 0 0;
  color: #3b4e68;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.node-task-output {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.node-task-output h3 {
  margin: 0 0 8px;
  color: #21375b;
  font-size: 13px;
}

.node-task-output ul {
  margin: 0;
  padding-left: 18px;
  color: #334861;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.75;
}

.node-file-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.node-file-card {
  position: relative;
  min-height: 118px;
  display: grid;
  align-content: end;
  gap: 5px;
  border: 1px dashed #bcd4f4;
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(13, 102, 215, 0.12), transparent 46%),
    #f8fbff;
  cursor: pointer;
}

.node-file-card span,
.node-file-card small {
  color: #5c6a80;
  font-size: 10px;
  font-weight: 900;
}

.node-file-card strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.node-file-card i {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.node-approval-list,
.node-chat-list {
  display: grid;
  gap: 9px;
}

.node-approval-list div,
.node-chat-list p {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f7fbff;
}

.node-approval-list span,
.node-approval-list b {
  display: inline-flex;
  margin: 6px 6px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  color: #0d66d7;
  background: #eaf4ff;
  font-size: 10px;
  font-weight: 900;
}

.node-chat-list strong {
  display: block;
  margin-bottom: 4px;
}

.node-chat-list p {
  color: #344861;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.node-file-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 20, 38, 0.58);
}

.node-file-preview-dialog {
  position: relative;
  width: min(760px, 94vw);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: 16px;
  border-radius: 10px;
  padding: 18px;
  background: white;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.node-file-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: #111827;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.node-file-preview-image {
  min-height: 360px;
  display: grid;
  align-content: end;
  gap: 8px;
  border: 1px dashed #aac8ee;
  border-radius: 8px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(13, 102, 215, 0.18), transparent 50%),
    linear-gradient(180deg, #f8fbff, #eef6ff);
}

.node-file-preview-image span,
.node-file-preview-image small {
  color: #5c6a80;
  font-size: 12px;
  font-weight: 900;
}

.node-file-preview-image strong {
  color: #071f3d;
  font-size: 18px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.node-file-preview-meta {
  align-self: end;
  padding: 16px 8px 8px;
}

.node-file-preview-meta h2 {
  margin: 0 0 10px;
  color: var(--brand);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.node-file-preview-meta p {
  margin: 0;
  color: #40536f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.list-page {
  height: 100vh;
  padding: 14px;
  overflow: hidden;
}

.project-list-shell {
  height: calc(100vh - 28px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 1880px;
  margin: 0 auto;
  padding: 16px 18px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.list-topbar {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 18px;
}

.list-heading {
  text-align: center;
}

.list-heading h1 {
  margin: 0;
}

.list-heading p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.list-actions {
  display: flex;
  justify-content: flex-end;
}

.list-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.list-metrics div {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.list-metrics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.list-metrics strong {
  color: var(--brand);
  font-size: 20px;
}

.project-table-wrap {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}

.project-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.project-table thead {
  background: #f2f7ff;
  color: var(--brand);
}

.project-table th,
.project-table td {
  height: 24px;
  padding: 2px 8px;
  border-bottom: 1px solid #e9f0f9;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-table th {
  font-size: 11px;
  font-weight: 900;
}

.project-table tbody tr {
  cursor: default;
}

.project-table tbody tr:hover {
  background: #f8fbff;
}

.project-table .status-chip {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.project-table th:nth-child(1),
.project-table td:nth-child(1) {
  width: 104px;
}

.project-table th:nth-child(2),
.project-table td:nth-child(2) {
  width: 150px;
}

.project-table th:nth-child(6),
.project-table td:nth-child(6) {
  width: 132px;
}

.project-table th:nth-child(7),
.project-table td:nth-child(7) {
  width: 106px;
  overflow: visible;
}

.project-table th:nth-child(12),
.project-table td:nth-child(12) {
  width: 88px;
}

.table-progress {
  display: inline-block;
  width: 44px;
  height: 7px;
  margin-right: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9f7;
  vertical-align: middle;
}

.table-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.table-action {
  min-height: 22px;
  padding: 0 8px;
  font-size: 11px;
}

.list-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

.list-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.erp-layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  overflow: hidden;
  background: #fff8ec;
}

.erp-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 28px 16px 18px;
  color: white;
  background:
    linear-gradient(160deg, rgba(23, 43, 73, 0.98) 0%, rgba(32, 50, 82, 0.97) 52%, rgba(19, 33, 56, 1) 100%),
    linear-gradient(90deg, var(--service), var(--service-deep));
}

.sidebar-logo {
  display: flex;
  align-items: center;
}

.sidebar-title {
  margin-top: 24px;
  display: grid;
  gap: 7px;
}

.sidebar-title strong {
  max-width: 190px;
  font-size: 22px;
  line-height: 1.15;
}

.sidebar-title span {
  font-size: 13px;
  opacity: 0.9;
}

.sidebar-nav {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.sidebar-nav button,
.collapse-menu {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 7px;
  padding: 0 14px;
  color: white;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.sidebar-nav button span {
  width: 22px;
  font-weight: 900;
}

.sidebar-nav button.active {
  color: #172b49;
  background: linear-gradient(90deg, #ffd24f, var(--service));
  box-shadow: inset 3px 0 0 var(--service-red), 0 8px 18px rgba(245, 164, 0, 0.22);
}

.collapse-menu {
  margin-top: auto;
}

.erp-main {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
}

.erp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 26px;
  border-bottom: 1px solid #e5ecf5;
  background: white;
  color: #061b45;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-brand-area {
  flex: 0 0 auto;
  min-width: 132px;
}

.login-user-switch {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.login-user-switch .avatar {
  flex: 0 0 34px;
}

.login-user-name {
  max-width: 140px;
  overflow: hidden;
  color: #061b45;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-button {
  height: 34px;
  border: 1px solid #f0b342;
  border-radius: 8px;
  background: #fff8ea;
  color: #7a3a00;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.logout-button:hover {
  background: #ffbf2f;
  color: #061b45;
}

.business-action-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 28px));
  border: 1px solid #f0b342;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff8ea;
  color: #061b45;
  box-shadow: 0 14px 32px rgba(15, 29, 54, 0.18);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.business-action-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(255, 191, 47, 0.24), transparent 32%),
    linear-gradient(145deg, #fff8ea 0%, #f7fbff 54%, #ffffff 100%);
  color: #061b45;
}

.login-card {
  width: min(100%, 430px);
  border: 1px solid #f0b342;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(21, 35, 60, 0.16);
  padding: 28px;
}

.login-brand {
  display: grid;
  gap: 10px;
}

.brand-logo-login {
  width: min(320px, 78vw);
}

.brand-logo-login img {
  width: 100%;
  height: auto;
  display: block;
}

.login-brand span {
  width: max-content;
  border-radius: 999px;
  background: #fff2c9;
  color: #7a3a00;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}

.login-copy {
  margin-top: 18px;
}

.login-copy h1 {
  margin: 0;
  color: #061b45;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
}

.login-copy p {
  margin: 8px 0 0;
  color: #42526d;
  font-size: 14px;
  line-height: 1.55;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: #061b45;
  font-size: 13px;
  font-weight: 700;
}

.login-form select,
.login-form input {
  width: 100%;
  height: 46px;
  border: 1px solid #f0b342;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.login-account-preview {
  display: grid;
  gap: 4px;
  border: 1px solid #ffd27a;
  border-radius: 9px;
  background: #fff8ea;
  padding: 10px 12px;
  color: #061b45;
  font-size: 13px;
}

.login-account-preview strong {
  font-size: 14px;
  font-weight: 700;
}

.login-account-preview span {
  color: #56657d;
  font-weight: 500;
}

.login-account-preview em {
  color: #a34f00;
  font-style: normal;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.login-account-preview.is-empty {
  border-color: #ffc5c5;
  background: #fff5f5;
}

.login-submit {
  height: 48px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #ffbf2f 0%, #ff8a26 100%);
  color: #061b45;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(234, 129, 0, 0.22);
}

.login-error {
  border: 1px solid #ff9b9b;
  border-radius: 8px;
  background: #fff1f1;
  color: #d7272f;
  padding: 9px 10px;
  font-size: 13px;
}

.login-pilot-note {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  border-radius: 9px;
  background: #fff8ea;
  padding: 12px;
  color: #42526d;
  font-size: 12px;
  line-height: 1.45;
}

.login-pilot-note strong {
  color: #7a3a00;
}

.icon-button {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #061b45;
  font-size: 24px;
  cursor: pointer;
}

.notification i {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f23e45;
  color: white;
  font-size: 10px;
  font-style: normal;
}

.avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #315a94;
  color: white;
  font-size: 13px;
  font-weight: 900;
}

.topbar-right .select-control {
  width: 118px;
}

.erp-content {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 16px 18px 16px;
  overflow: hidden;
}

.project-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.project-toolbar h1 {
  margin: 0 12px 0 0;
  color: #061b45;
  font-size: 26px;
  white-space: nowrap;
}

.toolbar-controls {
  min-width: 0;
  display: grid;
  grid-template-columns: 180px 160px repeat(5, minmax(96px, 1fr)) 102px 64px;
  gap: 10px;
  align-items: center;
}

.project-toolbar input,
.project-toolbar select {
  width: 100%;
  height: 34px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  padding: 0 14px;
  color: #12284d;
  background: white;
  font-size: 12px;
  font-weight: 700;
  outline: none;
}

.project-toolbar label {
  position: relative;
}

.project-toolbar label span {
  position: absolute;
  right: 10px;
  top: 8px;
  color: #061b45;
}

.create-button,
.logout-button {
  height: 34px;
  border: 0;
  border-radius: 6px;
  font-weight: 900;
  cursor: pointer;
}

.create-button {
  color: white;
  background: #071f3d;
}

.logout-button {
  color: #f23e45;
  background: white;
  border: 1px solid #e6edf6;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-cards article {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border: 1px solid #dfe8f4;
  border-radius: 7px;
  background: white;
}

.metric-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 900;
}

.metric-icon.blue { color: #1977ff; background: #e8f2ff; }
.metric-icon.red { color: #ff3f45; background: #ffecec; }
.metric-icon.orange { color: #f6a51a; background: #fff3dd; }
.metric-icon.green { color: #19a866; background: #e5f9ef; }

.dashboard-cards b {
  display: block;
  color: #23365b;
  font-size: 13px;
}

.dashboard-cards strong {
  display: inline-block;
  margin-top: 6px;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.dashboard-cards em {
  margin-left: 14px;
  color: #0c9b58;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.desktop-content {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  overflow: auto;
  background: #f4f7fb;
}

.desktop-workbench-layout {
  grid-template-columns: minmax(0, 1fr);
}

.desktop-workbench-layout .erp-sidebar {
  display: none;
}

.desktop-workbench-layout .erp-main {
  grid-template-rows: 54px minmax(0, 1fr);
}

.desktop-workbench-layout .erp-topbar {
  min-height: 54px;
  padding: 0 22px;
}

.desktop-workbench-layout .desktop-content {
  height: calc(100vh - 54px);
  grid-template-rows: 104px 64px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf0 0%, #f7f9fc 34%, #f3f6fa 100%);
}

.desktop-workbench-layout .desktop-hero {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  padding: 14px 18px;
}

.desktop-workbench-layout .desktop-kicker {
  min-height: 22px;
}

.desktop-workbench-layout .desktop-hero h1 {
  margin: 9px 0 5px;
  font-size: 30px;
}

.desktop-workbench-layout .desktop-hero p {
  font-size: 13px;
}

.desktop-workbench-layout .desktop-owner-card {
  padding: 14px 16px;
}

.desktop-workbench-layout .desktop-owner-card strong {
  font-size: 22px;
}

.desktop-workbench-layout .desktop-stats {
  gap: 10px;
}

.desktop-workbench-layout .desktop-stats article {
  min-height: 0;
  padding: 10px 14px;
}

.desktop-workbench-layout .desktop-stats strong {
  margin: 4px 0;
  font-size: 24px;
}

.desktop-workbench-layout .desktop-module-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 12px;
  overflow: hidden;
}

.desktop-workbench-layout .desktop-module-grid {
  min-height: 0;
  height: 100%;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.desktop-workbench-layout .desktop-module-card {
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
  gap: 8px;
  padding: 12px;
}

.desktop-workbench-layout .module-mark {
  width: 36px;
  height: 36px;
}

.desktop-workbench-layout .desktop-module-card h3 {
  margin-bottom: 3px;
  font-size: 15px;
}

.desktop-workbench-layout .desktop-module-card p {
  -webkit-line-clamp: 1;
  font-size: 11px;
  line-height: 1.3;
}

.desktop-workbench-layout .module-card-foot {
  padding-top: 6px;
}

.desktop-hero {
  min-height: 156px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: stretch;
  padding: 24px;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(7,31,61,0.96), rgba(14,72,130,0.88)),
    radial-gradient(circle at 80% 20%, rgba(30,126,229,0.35), transparent 36%);
  color: white;
}

.desktop-kicker {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  color: #d9ecff;
  font-size: 12px;
  font-weight: 900;
}

.desktop-hero h1 {
  margin: 14px 0 8px;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: 0;
}

.desktop-hero p {
  max-width: 720px;
  margin: 0;
  color: #d8e7f8;
  font-size: 15px;
  font-weight: 800;
}

.desktop-owner-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  background: rgba(255,255,255,0.1);
}

.desktop-owner-card strong {
  font-size: 24px;
}

.desktop-owner-card span {
  color: #d8e7f8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.desktop-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.desktop-stats article {
  min-height: 94px;
  padding: 16px;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
  box-shadow: 0 10px 24px rgba(28, 54, 87, 0.05);
}

.desktop-stats b,
.desktop-stats span {
  display: block;
  color: #5d6e86;
  font-size: 12px;
  font-weight: 900;
}

.desktop-stats strong {
  display: block;
  margin: 7px 0;
  color: #061b45;
  font-size: 30px;
  line-height: 1;
}

.desktop-module-section {
  min-height: 0;
  padding: 16px;
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.desktop-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.desktop-module-card {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 88px;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #f0d190;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(190, 128, 18, 0.18), 0 8px 18px rgba(15, 35, 65, 0.055);
  text-align: left;
  cursor: pointer;
  appearance: none;
  font: inherit;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.desktop-module-card > div:nth-child(2) {
  min-width: 0;
  display: grid;
  align-content: center;
}

.desktop-module-card h3 {
  margin: 0 0 4px;
  overflow: hidden;
  color: #061b45;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-module-card p {
  margin: 0;
  color: #53657f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.desktop-module-card.is-coming {
  background: #f8fafc;
  cursor: default;
  filter: saturate(0.72);
  opacity: 0.84;
}

.desktop-module-card:not(.is-coming):hover {
  border-color: #ffb31a;
  background: #fffaf0;
  transform: translateY(-2px);
  box-shadow: 0 3px 0 rgba(190, 128, 18, 0.22), 0 14px 24px rgba(15, 35, 65, 0.09);
}

.desktop-module-card:not(.is-coming):active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(190, 128, 18, 0.2), 0 6px 14px rgba(15, 35, 65, 0.07);
}

.module-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 6px 12px rgba(15, 35, 70, 0.12);
}

.tone-emerald { --module-accent: #f5a400; --module-bg1: #fff8dc; --module-bg2: #ffe69a; --module-base: #d9a72b; --module-border: #e7bf55; --module-ink: #7a4b00; }
.tone-blue { --module-accent: #172b49; --module-bg1: #fff3c4; --module-bg2: #ffd24f; --module-base: #cc951a; --module-border: #dfb247; --module-ink: #172b49; }
.tone-indigo { --module-accent: #f58220; --module-bg1: #fff2df; --module-bg2: #ffc680; --module-base: #d78b3f; --module-border: #e8aa6b; --module-ink: #8a3a00; }
.tone-sky { --module-accent: #df1f2d; --module-bg1: #fff0dc; --module-bg2: #ffc957; --module-base: #d39920; --module-border: #e1b244; --module-ink: #9b1b22; }
.tone-violet { --module-accent: #f5a400; --module-bg1: #fff9e8; --module-bg2: #ffe17a; --module-base: #d9a72b; --module-border: #e7bf55; --module-ink: #7a4b00; }
.tone-cyan { --module-accent: #172b49; --module-bg1: #fff4d0; --module-bg2: #ffd86a; --module-base: #d1a12c; --module-border: #dfb753; --module-ink: #172b49; }
.tone-amber { --module-accent: #f5a400; --module-bg1: #fff8e4; --module-bg2: #ffe7a8; --module-base: #e4c06f; --module-border: #eacb84; --module-ink: #8a5600; }
.tone-slate { --module-accent: #273957; --module-bg1: #fff6df; --module-bg2: #ffe0a3; --module-base: #d2a768; --module-border: #dec08c; --module-ink: #273957; }
.tone-orange { --module-accent: #f58220; --module-bg1: #fff2e7; --module-bg2: #ffd7b7; --module-base: #e6ad7f; --module-border: #edba91; --module-ink: #a53b00; }
.tone-purple { --module-accent: #df1f2d; --module-bg1: #fff3d4; --module-bg2: #ffd05f; --module-base: #d39624; --module-border: #e0b14d; --module-ink: #9b1b22; }
.tone-lime { --module-accent: #f5a400; --module-bg1: #fffbe8; --module-bg2: #ffe893; --module-base: #d9af48; --module-border: #e7c36e; --module-ink: #6c4b00; }
.tone-rose { --module-accent: #df1f2d; --module-bg1: #fff1dd; --module-bg2: #ffc76d; --module-base: #d89538; --module-border: #e6b266; --module-ink: #9b1b22; }
.tone-teal { --module-accent: #f58220; --module-bg1: #fff6e3; --module-bg2: #ffdc94; --module-base: #daa24d; --module-border: #e7bd75; --module-ink: #874200; }
.tone-navy { --module-accent: #172b49; --module-bg1: #fff2c8; --module-bg2: #ffd24f; --module-base: #c9971f; --module-border: #ddb141; --module-ink: #172b49; }
.tone-red { --module-accent: #df1f2d; --module-bg1: #fff0dc; --module-bg2: #ffc457; --module-base: #d08b24; --module-border: #dfaa4a; --module-ink: #9b1b22; }
.tone-zinc { --module-accent: #6a5a42; --module-bg1: #fff8e6; --module-bg2: #ead5a7; --module-base: #c7aa71; --module-border: #d4bc89; --module-ink: #51442f; }

.project-pill,
.select-control,
.control-button,
.table-action,
.mobile-parent-back,
.permission-scope,
.permission-chip,
.node-activity-badges span,
.node-event-list span,
.node-approval-list span,
.node-approval-list b,
.approval-chain-grid span,
.sales-status,
.message-status {
  border-color: #f0d190;
}

.table-action,
.permission-scope,
.permission-chip,
.node-activity-badges span,
.node-event-list span,
.node-approval-list span,
.node-approval-list b,
.approval-chain-grid span {
  color: #8a5600;
  background: var(--service-soft);
}

.permission-tabs button.active,
.lead-submit,
.pagination button.active,
.message-list-top button,
.group-avatar,
.chat-header-actions .project-board-action,
.chat-composer .primary-row-action {
  color: #172b49;
  background: linear-gradient(180deg, #ffd24f, var(--service)) !important;
  border-color: var(--service) !important;
}

.desktop-module-card .module-mark {
  color: white;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0)),
    var(--module-accent);
}

.module-card-foot {
  min-width: 0;
  display: grid;
  justify-items: end;
  align-content: center;
  gap: 5px;
  padding: 0;
  border-top: 0;
}

.module-card-foot strong {
  max-width: 86px;
  color: #061b45;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.module-card-foot span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid #f0d190;
  border-radius: 999px;
  padding: 0 9px;
  color: #8a4f00;
  background: #fff7e6;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.desktop-return-button,
.desktop-home-button {
  position: absolute;
  top: 14px;
  z-index: 10;
  display: inline-flex;
  width: 38px;
  height: 38px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: #171717;
  background: transparent;
  font-size: 0;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.desktop-return-button {
  right: 18px;
}

.desktop-home-button {
  right: 60px;
}

.desktop-return-button:hover,
.desktop-home-button:hover,
.board-back-button:hover,
.board-home-button:hover {
  transform: translateY(-1px);
}

.return-icon,
.home-icon {
  display: block;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.16));
}

.return-icon-circle,
.home-icon-circle {
  fill: #171717;
}

.return-icon-arrow {
  fill: #ffffff;
}

.home-icon-roof,
.home-icon-house {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.erp-content .project-table-wrap {
  border-color: transparent;
  background: white;
}

.erp-content .project-table {
  font-size: 11px;
}

.erp-content .project-table thead {
  background: white;
}

.erp-content .project-table th,
.erp-content .project-table td {
  height: 23px;
  padding: 1px 6px;
  border-bottom: 1px solid #e7edf5;
  color: #071f3d;
}

.erp-content .project-table th {
  color: #263b61;
  font-size: 10.5px;
}

.erp-content .project-table th:nth-child(1),
.erp-content .project-table td:nth-child(1) { width: 30px; }
.erp-content .project-table th:nth-child(2),
.erp-content .project-table td:nth-child(2) { width: 104px; }
.erp-content .project-table th:nth-child(3),
.erp-content .project-table td:nth-child(3) { width: 96px; }
.erp-content .project-table th:nth-child(4),
.erp-content .project-table td:nth-child(4) { width: 130px; }
.erp-content .project-table th:nth-child(5),
.erp-content .project-table td:nth-child(5) { width: 92px; }
.erp-content .project-table th:nth-child(6),
.erp-content .project-table td:nth-child(6) { width: 100px; }
.erp-content .project-table th:nth-child(7),
.erp-content .project-table td:nth-child(7) { width: 74px; }
.erp-content .project-table th:nth-child(8),
.erp-content .project-table td:nth-child(8) { width: 95px; overflow: visible; }
.erp-content .project-table th:nth-child(9),
.erp-content .project-table td:nth-child(9) { width: 86px; }
.erp-content .project-table th:nth-child(10),
.erp-content .project-table td:nth-child(10) { width: 76px; }
.erp-content .project-table th:nth-child(11),
.erp-content .project-table td:nth-child(11) { width: 82px; }
.erp-content .project-table th:nth-child(12),
.erp-content .project-table td:nth-child(12) { width: 70px; }
.erp-content .project-table th:nth-child(13),
.erp-content .project-table td:nth-child(13) { width: 82px; }
.erp-content .project-table th:nth-child(14),
.erp-content .project-table td:nth-child(14) { width: 44px; }
.erp-content .project-table th:nth-child(15),
.erp-content .project-table td:nth-child(15) { width: 44px; }
.erp-content .project-table th:nth-child(16),
.erp-content .project-table td:nth-child(16) { width: 52px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.status-pill.in-progress { color: #126fe8; background: #e9f3ff; }
.status-pill.waiting { color: #f0a21d; background: #fff4df; }
.status-pill.done { color: #15965b; background: #e7f9ef; }
.status-pill.not-started { color: #667489; background: #eef2f7; }
.status-pill.overdue { color: #ff3f45; background: #ffecec; }

.delay-yes { color: #ff3f45 !important; font-weight: 900; }
.delay-no { color: #10a35b !important; font-weight: 900; }
.risk-level { color: #f07f18 !important; font-weight: 900; }

.leads-content {
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
}

.leads-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.leads-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.leads-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.role-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #23365b;
  font-size: 12px;
  font-weight: 900;
}

.leads-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lead-report-top-button,
.lead-generate-report-button,
.lead-new-top-button {
  min-height: 34px;
  border: 1px solid #f0b13a;
  border-radius: 8px;
  padding: 0 12px;
  color: #172b49;
  background: linear-gradient(180deg, #ffd24f, #ffb31a);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.lead-generate-report-button {
  color: #fff;
  background: linear-gradient(180deg, #ff9b32, #f07813);
  border-color: #f07813;
}

.lead-new-top-button {
  color: #fff;
  background: linear-gradient(180deg, #1976f3, #0d66d7);
  border-color: #0d66d7;
}

.lead-manager-action-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.lead-manager-action-bar button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  padding: 0 10px;
  color: #172b49;
  background: #fff8e8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.lead-manager-action-bar b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #172b49;
  background: #ffd24f;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.lead-admin-content {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.lead-admin-card-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
}

.lead-admin-card,
.lead-admin-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 12px;
  align-items: center;
  border: 1px solid #f0d190;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.lead-admin-card h3 {
  margin: 6px 0 4px;
  color: #061b45;
  font-size: 15px;
  font-weight: 600;
}

.lead-admin-card p,
.lead-admin-card small {
  display: block;
  margin-top: 3px;
  color: #53657f;
  font-size: 12px;
  font-weight: 500;
}

.lead-admin-card select {
  min-height: 34px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  padding: 0 10px;
  color: #12284d;
  background: white;
  font-size: 12px;
  font-weight: 600;
}

.compact-lead-card {
  grid-template-columns: minmax(0, 1fr) 130px;
}

.mobile-parent-back {
  display: none;
  min-height: 34px;
  border: 1px solid #0d66d7;
  border-radius: 6px;
  padding: 0 12px;
  color: #0d66d7;
  background: #f4f9ff;
  font-size: 12px;
  font-weight: 900;
}

.page .mobile-parent-back {
  display: inline-flex;
}

.desktop-return-button.mobile-parent-back,
.desktop-home-button.mobile-parent-back,
.board-back-button.mobile-parent-back,
.board-home-button.mobile-parent-back {
  border: 0;
  border-radius: 999px;
  padding: 0;
  color: #171717;
  background: transparent;
}

.board-back-button,
.board-home-button {
  position: absolute;
  top: 14px;
  z-index: 10;
  display: inline-flex;
  width: 38px;
  height: 38px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  margin: 0;
  padding: 0;
  color: #171717;
  background: transparent;
  font-size: 0;
  line-height: 1;
}

.board-back-button {
  right: 14px;
}

.board-home-button {
  right: 56px;
}

.role-switcher select,
.lead-form-grid input,
.lead-form-grid select,
.lead-form-grid textarea,
.approval-actions select {
  min-height: 34px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  padding: 0 10px;
  color: #12284d;
  background: white;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.lead-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.lead-metrics article,
.lead-entry-card,
.approval-panel {
  border: 1px solid #dfe8f4;
  border-radius: 7px;
  background: white;
}

.lead-metrics article {
  min-height: 72px;
  padding: 13px 15px;
}

.lead-metrics b,
.section-title span {
  color: #65758d;
  font-size: 12px;
  font-weight: 900;
}

.lead-metrics strong {
  display: block;
  margin-top: 6px;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.lead-metrics em {
  color: #0c9b58;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.permissions-content {
  display: block;
  overflow: auto;
  background: #f4f7fb;
}

.permissions-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 92px;
}

.permissions-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.permissions-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.permission-policy,
.role-overview-panel,
.permission-matrix-panel,
.workflow-rules-panel,
.permission-config-panel,
.permission-setting-card {
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.permission-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 470px;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding: 13px 16px;
  box-shadow: 0 10px 24px rgba(9, 36, 76, 0.04);
}

.permission-policy h2 {
  margin: 0 0 5px;
  color: #061b45;
  font-size: 18px;
}

.permission-policy p {
  max-width: 780px;
  margin: 0;
  color: #4d5f78;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.permission-policy-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.permission-policy-metrics article {
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
}

.permission-policy-metrics b,
.permission-policy-metrics span {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 900;
}

.permission-policy-metrics strong {
  display: block;
  margin: 5px 0 3px;
  color: #061b45;
  font-size: 23px;
  line-height: 1;
}

.permission-tabs {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #dfe8f4;
  border-radius: 9px;
  background: white;
}

.permission-tabs button {
  min-width: 116px;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  color: #28415f;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.permission-tabs button.active {
  color: white;
  background: linear-gradient(180deg, #1674e7, #0c5fc7);
  box-shadow: 0 8px 18px rgba(13, 102, 215, 0.18);
}

.permission-tab-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.permissions-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 12px;
}

.permission-center-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
}

.permission-side-stack {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.role-overview-panel,
.permission-matrix-panel,
.workflow-rules-panel,
.permission-config-panel,
.permission-setting-card {
  padding: 13px;
}

.permission-section-block {
  box-shadow: 0 8px 22px rgba(9, 36, 76, 0.035);
}

.role-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.role-list article {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.role-list article.is-owner {
  border-color: #b7d4ff;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #0d66d7;
}

.role-list strong {
  display: block;
  color: #061b45;
  font-size: 13px;
}

.role-list p {
  margin: 5px 0 0;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.permission-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid #e4ecf6;
  border-radius: 8px;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.permission-table th,
.permission-table td {
  height: 36px;
  padding: 6px 9px;
  border-bottom: 1px solid #e7edf5;
  color: #071f3d;
  text-align: left;
  vertical-align: middle;
}

.permission-table th {
  color: #263b61;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 900;
}

.permission-table tr:last-child td {
  border-bottom: 0;
}

.permission-table .owner-row td {
  background: #f2f8ff;
}

.user-permission-table th:last-child,
.user-permission-table td:last-child {
  width: 174px;
}

.permission-title-row {
  align-items: center;
}

.permission-actions,
.user-action-row,
.permission-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.permission-actions button,
.user-action-row button,
.permission-card-head button {
  min-height: 28px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  padding: 0 9px;
  color: #123057;
  background: white;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.permission-actions .primary-row-action {
  color: white;
  border-color: #0d66d7;
  background: #0d66d7;
}

.user-action-row {
  flex-wrap: wrap;
}

.user-action-row button {
  min-height: 24px;
  padding: 0 7px;
}

.user-action-row button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.node-permission-table th:first-child,
.node-permission-table td:first-child {
  width: 130px;
}

.permission-scope,
.permission-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin: 2px 4px 2px 0;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.permission-scope {
  color: #0d66d7;
  background: #eaf4ff;
}

.permission-chip {
  color: #28415f;
  background: #eef2f7;
}

.permission-setting-card h3 {
  margin: 0 0 10px;
  color: #061b45;
  font-size: 15px;
}

.permission-card-head {
  justify-content: space-between;
  margin-bottom: 10px;
}

.permission-card-head h3 {
  margin: 0;
}

.user-form-preview {
  display: grid;
  gap: 8px;
}

.user-form-preview label {
  display: grid;
  gap: 4px;
}

.user-form-preview span {
  color: #52647e;
  font-size: 10px;
  font-weight: 900;
}

.user-form-preview input,
.user-form-preview select {
  width: 100%;
  min-height: 30px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  padding: 0 8px;
  color: #071f3d;
  background: white;
  font-size: 11px;
  font-weight: 900;
  outline: none;
}

.permission-setting-card p {
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 7px;
  background: #f8fbff;
}

.permission-setting-card p:last-child {
  margin-bottom: 0;
}

.permission-setting-card p strong,
.permission-setting-card p span {
  display: block;
}

.permission-setting-card p strong {
  color: #071f3d;
  font-size: 12px;
}

.permission-setting-card p span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.permission-setting-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.permission-setting-card li {
  padding: 9px 10px;
  border-radius: 7px;
  color: #23365b;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

.permission-setting-card.danger {
  border-color: #ffd2d2;
  background: #fffafa;
}

.permission-setting-card.danger li {
  color: #af1f2d;
  background: #fff0f0;
}

.permission-toggle-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, 92px);
  gap: 0;
  overflow: hidden;
  border: 1px solid #e4ecf6;
  border-radius: 8px;
  background: #fbfdff;
}

.permission-toggle-grid > * {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-bottom: 1px solid #e7edf5;
  color: #23365b;
  font-size: 11px;
  font-weight: 900;
}

.permission-toggle-grid > strong {
  justify-content: flex-start;
  background: white;
}

.permission-toggle-head {
  color: #52647e;
  background: #f4f8fd;
}

.permission-switch {
  width: 32px;
  height: 18px;
  position: relative;
  border-radius: 999px;
  background: #d8e1ec;
}

.permission-switch::after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 5px rgba(20, 40, 70, 0.18);
}

.permission-switch.on {
  background: #0d66d7;
}

.permission-switch.on::after {
  left: 16px;
}

.approval-chain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.approval-chain-grid article {
  min-height: 126px;
  padding: 12px;
  border: 1px solid #e3ebf6;
  border-radius: 8px;
  background: #fbfdff;
}

.approval-chain-grid strong {
  display: block;
  color: #061b45;
  font-size: 13px;
}

.approval-chain-grid p {
  margin: 7px 0 0;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.approval-chain-grid span {
  display: block;
  margin-top: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  color: #0d66d7;
  background: #eaf4ff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.workflow-rules-panel ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workflow-rules-panel li {
  min-height: 74px;
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  color: #23365b;
  background: #fbfdff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.workflow-rules-panel li::before {
  content: counter(list-item);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: white;
  background: #0d66d7;
  font-size: 11px;
  font-weight: 900;
}

.permissions-content .section-title {
  margin-bottom: 9px;
}

.permissions-content .section-title h2 {
  font-size: 16px;
}

@media (max-width: 1280px) {
  .permission-policy {
    grid-template-columns: 1fr;
  }

  .permission-policy-metrics {
    max-width: 520px;
  }

  .role-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow-rules-panel ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sales-orders-content {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f4f7fb;
}

.sales-orders-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.sales-orders-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.sales-orders-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.sales-order-policy,
.sales-order-command,
.sales-order-flow article,
.sales-permission-panel,
.sales-order-table-panel,
.sales-rules-panel {
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.sales-order-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.sales-order-policy h2 {
  margin: 0 0 8px;
  color: #061b45;
  font-size: 20px;
}

.sales-order-policy p {
  margin: 0 0 8px;
  color: #4d5f78;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.sales-order-policy strong {
  color: #0d66d7;
  font-size: 12px;
  line-height: 1.5;
}

.sales-order-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.sales-order-metrics article {
  min-height: 74px;
  padding: 11px;
  border-radius: 7px;
  background: #f7fbff;
}

.sales-order-metrics b,
.sales-order-metrics span {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 900;
}

.sales-order-metrics strong {
  display: block;
  margin: 7px 0;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.sales-order-command {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
}

.sales-order-command label {
  display: grid;
  gap: 5px;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.sales-order-command input,
.sales-order-command select,
.sales-order-command button {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  padding: 0 10px;
  color: #071f3d;
  background: white;
  font-size: 12px;
  font-weight: 700;
}

.sales-order-command button {
  min-width: 112px;
  cursor: pointer;
}

.sales-data-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-data-pulse article,
.sales-live-entry {
  border: 1px solid #f0d190;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
}

.sales-data-pulse article {
  min-height: 86px;
  padding: 14px;
}

.sales-data-pulse span,
.sales-data-pulse small {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.sales-data-pulse strong {
  display: block;
  margin: 7px 0;
  overflow: hidden;
  color: #061b45;
  font-size: 20px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-live-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  padding: 14px;
}

.sales-update-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.sales-update-form .section-title {
  grid-column: 1 / -1;
}

.sales-update-form label {
  display: grid;
  gap: 5px;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.sales-update-form input,
.sales-update-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  padding: 0 10px;
  color: #071f3d;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sales-update-form button {
  min-height: 38px;
  white-space: nowrap;
}

.sales-update-log {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.sales-update-log article {
  padding: 9px 10px;
  border: 1px solid #ead39f;
  border-radius: 8px;
  background: #fff;
}

.sales-update-log b,
.sales-update-log strong,
.sales-update-log span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-update-log b {
  color: #b56400;
  font-size: 11px;
}

.sales-update-log strong {
  margin-top: 3px;
  color: #061b45;
  font-size: 12px;
}

.sales-update-log span {
  margin-top: 3px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
}

.sales-order-alert-window {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  background: #fff;
}

.sales-order-alert-list {
  display: grid;
  gap: 7px;
  min-height: 0;
  overflow: auto;
}

.sales-order-alert-list button {
  position: relative;
  width: 100%;
  display: grid;
  gap: 3px;
  border: 1px solid #e7c986;
  border-radius: 8px;
  padding: 9px 30px 9px 10px;
  text-align: left;
  background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
  cursor: pointer;
}

.sales-order-alert-list strong,
.sales-order-alert-list span,
.sales-order-alert-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-order-alert-list strong {
  color: #061b45;
  font-size: 12px;
}

.sales-order-alert-list span {
  color: #8a5600;
  font-size: 10px;
  font-weight: 800;
}

.sales-order-alert-list em {
  color: #53657f;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.sales-order-alert-list b {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #df1f2d;
  font-size: 10px;
}

.sales-order-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.sales-order-flow article {
  min-height: 74px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: #fbfdff;
}

.sales-order-flow article.has-orders {
  border-color: #bfe1dd;
  background: #f0fffc;
}

.sales-order-flow span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #087c7a;
  font-size: 11px;
  font-weight: 900;
}

.sales-order-flow strong {
  color: #061b45;
  font-size: 12px;
}

.sales-order-flow em {
  color: #087c7a;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.sales-orders-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 12px;
}

.sales-permission-panel,
.sales-order-table-panel,
.sales-rules-panel {
  padding: 14px;
}

.sales-permission-list {
  display: grid;
  gap: 8px;
}

.sales-permission-list article {
  padding: 10px 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.sales-permission-list article.is-owner {
  border-color: #b7d4ff;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #0d66d7;
}

.sales-permission-list article.tone-manager { box-shadow: inset 3px 0 0 #f5aa14; }
.sales-permission-list article.tone-staff { box-shadow: inset 3px 0 0 #19a866; }
.sales-permission-list article.tone-finance { box-shadow: inset 3px 0 0 #7450c4; }
.sales-permission-list article.tone-market { box-shadow: inset 3px 0 0 #ff7a1a; }

.sales-permission-list strong {
  display: block;
  color: #061b45;
  font-size: 13px;
}

.sales-permission-list p {
  margin: 5px 0 0;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.sales-approval-box {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e7edf5;
}

.sales-approval-box article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fffaf0;
}

.sales-approval-box strong,
.sales-approval-box span {
  display: block;
}

.sales-approval-box strong {
  color: #061b45;
  font-size: 12px;
}

.sales-approval-box span {
  grid-column: 1;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.sales-approval-box button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.sales-order-table-wrap {
  min-height: 0;
  overflow: auto;
}

.sales-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.sales-order-table th,
.sales-order-table td {
  height: 40px;
  padding: 7px 8px;
  border-bottom: 1px solid #e7edf5;
  color: #071f3d;
  text-align: left;
  white-space: nowrap;
}

.sales-order-table td small {
  display: block;
  margin-top: 2px;
  color: #65758d;
  font-size: 10px;
  font-weight: 700;
}

.sales-order-table th {
  color: #263b61;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 900;
}

.sales-stage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.sales-stage-tag.quotation { color: #126fe8; background: #e9f3ff; }
.sales-stage-tag.negotiation { color: #087c7a; background: #e0f7f5; }
.sales-stage-tag.confirmed { color: #15965b; background: #e7f9ef; }
.sales-stage-tag.contract { color: #7450c4; background: #f1ebff; }
.sales-stage-tag.deposit { color: #e88913; background: #fff2dd; }
.sales-stage-tag.converted { color: #0d8e51; background: #e5f9ef; }

.sales-risk-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.sales-risk-tag.normal { color: #15965b; background: #e7f9ef; }
.sales-risk-tag.follow { color: #b85e00; background: #fff1df; }
.sales-risk-tag.high { color: #ef4444; background: #ffecec; }

.sales-rules-panel ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-rules-panel li {
  min-height: 92px;
  padding: 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  color: #23365b;
  background: #fbfdff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.sales-rules-panel li::before {
  content: counter(list-item);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: white;
  background: #087c7a;
  font-size: 11px;
  font-weight: 900;
}

.create-project-content {
  display: block;
  overflow: auto;
  background: #f4f7fb;
}

.create-project-content > section + section {
  margin-top: 12px;
}

.create-project-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.create-project-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.create-project-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.create-project-policy,
.legacy-project-form,
.bulk-import-panel,
.import-batch-panel,
.create-permission-panel {
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.create-project-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.create-project-policy h2 {
  margin: 0 0 8px;
  color: #061b45;
  font-size: 20px;
}

.create-project-policy p {
  margin: 0 0 8px;
  color: #4d5f78;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.create-project-policy strong {
  color: #0d66d7;
  font-size: 12px;
  line-height: 1.5;
}

.create-project-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.create-project-metrics article {
  min-height: 74px;
  padding: 11px;
  border-radius: 7px;
  background: #fffaf0;
}

.create-project-metrics b,
.create-project-metrics span {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.create-project-metrics strong {
  display: block;
  margin: 7px 0;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.create-project-workspace {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) 390px;
  gap: 12px;
}

.legacy-project-form,
.bulk-import-panel,
.import-batch-panel,
.create-permission-panel {
  padding: 14px;
}

.legacy-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.legacy-form-grid label {
  display: grid;
  gap: 5px;
  color: #263d62;
  font-size: 11px;
  font-weight: 800;
}

.legacy-form-grid label.wide {
  grid-column: span 2;
}

.legacy-form-grid input,
.legacy-form-grid select,
.legacy-form-grid textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  padding: 0 10px;
  color: #071f3d;
  background: white;
  font-size: 12px;
  font-weight: 700;
}

.legacy-form-grid textarea {
  min-height: 72px;
  padding-top: 9px;
  resize: vertical;
}

.legacy-form-grid input[type="file"] {
  padding: 8px 10px;
  border-style: dashed;
  background: #f8fbff;
}

.create-form-actions,
.bulk-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.upload-dropzone {
  min-height: 138px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px dashed #f0bc48;
  border-radius: 8px;
  background: #fffaf0;
}

.upload-dropzone strong {
  color: #061b45;
  font-size: 16px;
}

.upload-dropzone span {
  color: #53657f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.upload-dropzone input {
  width: 100%;
  color: #263d62;
  font-size: 12px;
  font-weight: 700;
}

.validation-stack {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.validation-stack article {
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.validation-stack strong,
.validation-stack span {
  display: block;
}

.validation-stack strong {
  color: #061b45;
  font-size: 12px;
}

.validation-stack span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.create-project-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 12px;
}

.import-batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-batch-table th,
.import-batch-table td {
  height: 38px;
  padding: 7px 8px;
  border-bottom: 1px solid #e7edf5;
  color: #071f3d;
  text-align: left;
  white-space: nowrap;
}

.import-batch-table th {
  color: #263b61;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 900;
}

.import-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: #b85e00;
  background: #fff1df;
  font-size: 10px;
  font-weight: 900;
}

.create-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.create-permission-grid article {
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.create-permission-grid article.is-owner {
  border-color: #b7d4ff;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #0d66d7;
}

.create-permission-grid strong,
.create-permission-grid span {
  display: block;
}

.create-permission-grid strong {
  color: #061b45;
  font-size: 12px;
}

.create-permission-grid span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.create-permission-panel ol {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: #263d62;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.install-plan-content {
  display: block;
  overflow: auto;
  background: #f4f7fb;
}

.install-plan-content > section + section {
  margin-top: 12px;
}

.install-plan-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.install-plan-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.install-plan-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.install-plan-policy,
.install-stage-flow article,
.install-side-panel,
.install-table-panel,
.install-permission-panel,
.install-rules-panel {
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.install-plan-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.install-plan-policy h2 {
  margin: 0 0 8px;
  color: #061b45;
  font-size: 20px;
}

.install-plan-policy p {
  margin: 0 0 8px;
  color: #4d5f78;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.install-plan-policy strong {
  color: #0d66d7;
  font-size: 12px;
  line-height: 1.5;
}

.install-plan-policy > div,
.install-plan-policy p,
.install-plan-policy strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.install-plan-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.install-plan-metrics article {
  min-height: 74px;
  padding: 11px;
  border-radius: 7px;
  background: #fffaf0;
}

.install-plan-metrics b,
.install-plan-metrics span {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.install-plan-metrics strong {
  display: block;
  margin: 7px 0;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.install-stage-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.install-stage-flow article {
  min-height: 74px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: #fbfdff;
}

.install-stage-flow article.has-items {
  border-color: #f0d190;
  background: #fffaf0;
}

.install-stage-flow span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #f5aa14;
  font-size: 11px;
  font-weight: 900;
}

.install-stage-flow strong {
  color: #061b45;
  font-size: 12px;
}

.install-stage-flow em {
  color: #b85e00;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.install-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
}

.install-side-panel,
.install-table-panel,
.install-permission-panel,
.install-rules-panel {
  padding: 14px;
}

.install-today-list,
.install-issue-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.install-today-list article,
.install-issue-list article {
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.install-issue-list article.is-blocked {
  border-color: #ffd2d2;
  background: #fff4f4;
}

.install-today-list strong,
.install-today-list span,
.install-today-list em,
.install-issue-list strong,
.install-issue-list span {
  display: block;
}

.install-today-list strong,
.install-issue-list strong {
  color: #061b45;
  font-size: 12px;
}

.install-today-list span,
.install-issue-list span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.install-today-list em {
  margin-top: 5px;
  color: #b85e00;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.install-issue-list button {
  margin-top: 8px;
}

.install-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  gap: 8px;
  margin-bottom: 12px;
}

.install-command-row input,
.install-command-row select,
.install-command-row button {
  min-height: 36px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  padding: 0 10px;
  color: #071f3d;
  background: white;
  font-size: 12px;
  font-weight: 700;
}

.install-table-wrap {
  overflow: auto;
}

.install-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.install-table th,
.install-table td {
  height: 40px;
  padding: 7px 8px;
  border-bottom: 1px solid #e7edf5;
  color: #071f3d;
  text-align: left;
  white-space: nowrap;
}

.install-table th {
  color: #263b61;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 900;
}

.install-stage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.install-stage-tag.ready { color: #667489; background: #eef2f7; }
.install-stage-tag.scheduled { color: #126fe8; background: #e9f3ff; }
.install-stage-tag.installing { color: #b85e00; background: #fff1df; }
.install-stage-tag.blocked { color: #ef4444; background: #ffecec; }
.install-stage-tag.accepted { color: #087c7a; background: #e0f7f5; }
.install-stage-tag.closed { color: #15965b; background: #e7f9ef; }

.install-progress {
  width: 74px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef6;
}

.install-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #f5aa14;
}

.install-table small {
  display: block;
  margin-top: 2px;
  color: #65758d;
  font-size: 10px;
  font-weight: 700;
}

.install-table td:last-child {
  display: flex;
  gap: 6px;
}

.install-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 12px;
}

.install-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.install-permission-grid article {
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.install-permission-grid article.is-owner {
  border-color: #b7d4ff;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #0d66d7;
}

.install-permission-grid strong,
.install-permission-grid span {
  display: block;
}

.install-permission-grid strong {
  color: #061b45;
  font-size: 12px;
}

.install-permission-grid span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.install-rules-panel ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #263d62;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.delivery-plan-content {
  display: block;
  overflow: auto;
  background: #f4f7fb;
}

.delivery-plan-content > section + section {
  margin-top: 12px;
}

.delivery-plan-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.delivery-plan-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.delivery-plan-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.delivery-plan-policy,
.delivery-stage-flow article,
.delivery-side-panel,
.delivery-table-panel,
.delivery-permission-panel,
.delivery-rules-panel {
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.delivery-plan-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.delivery-plan-policy h2 {
  margin: 0 0 8px;
  color: #061b45;
  font-size: 20px;
}

.delivery-plan-policy p {
  margin: 0 0 8px;
  color: #4d5f78;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.delivery-plan-policy strong {
  color: #0d66d7;
  font-size: 12px;
  line-height: 1.5;
}

.delivery-plan-policy > div,
.delivery-plan-policy p,
.delivery-plan-policy strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.delivery-plan-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.delivery-plan-metrics article {
  min-height: 74px;
  padding: 11px;
  border-radius: 7px;
  background: #f0fffc;
}

.delivery-plan-metrics b,
.delivery-plan-metrics span {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.delivery-plan-metrics strong {
  display: block;
  margin: 7px 0;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.delivery-stage-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.delivery-stage-flow article {
  min-height: 74px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 12px;
  background: #fbfdff;
}

.delivery-stage-flow article.has-items {
  border-color: #bfe1dd;
  background: #f0fffc;
}

.delivery-stage-flow span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #087c7a;
  font-size: 11px;
  font-weight: 900;
}

.delivery-stage-flow strong {
  color: #061b45;
  font-size: 12px;
}

.delivery-stage-flow em {
  color: #087c7a;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
}

.delivery-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
}

.delivery-side-panel,
.delivery-table-panel,
.delivery-permission-panel,
.delivery-rules-panel {
  padding: 14px;
}

.delivery-today-list,
.delivery-issue-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.delivery-today-list article,
.delivery-issue-list article {
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.delivery-issue-list article {
  border-color: #f4d59b;
  background: #fffaf0;
}

.delivery-today-list strong,
.delivery-today-list span,
.delivery-today-list em,
.delivery-issue-list strong,
.delivery-issue-list span {
  display: block;
}

.delivery-today-list strong,
.delivery-issue-list strong {
  color: #061b45;
  font-size: 12px;
}

.delivery-today-list span,
.delivery-issue-list span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.delivery-today-list em {
  margin-top: 5px;
  color: #087c7a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.delivery-issue-list button {
  margin-top: 8px;
}

.delivery-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  gap: 8px;
  margin-bottom: 12px;
}

.delivery-command-row input,
.delivery-command-row select,
.delivery-command-row button {
  min-height: 36px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  padding: 0 10px;
  color: #071f3d;
  background: white;
  font-size: 12px;
  font-weight: 700;
}

.delivery-table-wrap {
  overflow: auto;
}

.delivery-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.delivery-table th,
.delivery-table td {
  height: 40px;
  padding: 7px 6px;
  border-bottom: 1px solid #e7edf5;
  color: #071f3d;
  text-align: left;
  white-space: nowrap;
}

.delivery-table th:nth-child(3),
.delivery-table td:nth-child(3) {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delivery-table th:nth-child(4),
.delivery-table td:nth-child(4) {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delivery-table th:nth-child(9),
.delivery-table td:nth-child(9) {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delivery-table .table-action {
  min-width: 42px;
  padding: 0 6px;
}

.delivery-table th {
  color: #263b61;
  background: #f8fbff;
  font-size: 11px;
  font-weight: 900;
}

.delivery-stage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.delivery-stage-tag.ready { color: #667489; background: #eef2f7; }
.delivery-stage-tag.packing { color: #b85e00; background: #fff1df; }
.delivery-stage-tag.loading { color: #126fe8; background: #e9f3ff; }
.delivery-stage-tag.transit { color: #087c7a; background: #e0f7f5; }
.delivery-stage-tag.delivered { color: #7450c4; background: #f1ebff; }
.delivery-stage-tag.signed { color: #15965b; background: #e7f9ef; }
.delivery-stage-tag.facebook { color: #126fe8; background: #e9f3ff; }
.delivery-stage-tag.triage { color: #b85e00; background: #fff1df; }
.delivery-stage-tag.assigned { color: #7450c4; background: #f1ebff; }
.delivery-stage-tag.fixing { color: #087c7a; background: #e0f7f5; }
.delivery-stage-tag.legacy { color: #ef4444; background: #ffecec; }
.delivery-stage-tag.finalPayment { color: #9a5b00; background: #fff3d6; }
.delivery-stage-tag.closed { color: #15965b; background: #e7f9ef; }

.after-sales-layout .delivery-plan-metrics strong {
  font-size: 21px;
  white-space: nowrap;
}

.after-sales-layout .delivery-plan-metrics article {
  min-width: 0;
}

.delivery-table td:last-child {
  display: flex;
  gap: 6px;
}

.delivery-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 12px;
}

.delivery-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.delivery-permission-grid article {
  padding: 10px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.delivery-permission-grid article.is-owner {
  border-color: #b7d4ff;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #0d66d7;
}

.delivery-permission-grid strong,
.delivery-permission-grid span {
  display: block;
}

.delivery-permission-grid strong {
  color: #061b45;
  font-size: 12px;
}

.delivery-permission-grid span {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.delivery-rules-panel ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #263d62;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.message-center-content {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: auto;
  background: #f4f7fb;
}

.message-center-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.message-center-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 28px;
}

.message-center-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 800;
}

.message-policy,
.message-group-panel,
.chat-panel,
.node-file-panel,
.message-permission-panel,
.message-workflow-rules {
  border: 1px solid #dfe8f4;
  border-radius: 8px;
  background: white;
}

.message-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.message-policy h2 {
  margin: 0 0 8px;
  color: #061b45;
  font-size: 20px;
}

.message-policy p {
  margin: 0 0 8px;
  color: #4d5f78;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}

.message-policy strong {
  color: #0d66d7;
  font-size: 12px;
  line-height: 1.5;
}

.message-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.message-metrics article {
  min-height: 74px;
  padding: 11px;
  border-radius: 7px;
  background: #f7fbff;
}

.message-metrics b,
.message-metrics span {
  display: block;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 900;
}

.message-metrics strong {
  display: block;
  margin: 7px 0;
  color: #061b45;
  font-size: 24px;
  line-height: 1;
}

.message-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(420px, 1fr) 320px;
  gap: 12px;
}

.message-group-panel,
.chat-panel,
.node-file-panel,
.message-permission-panel,
.message-workflow-rules {
  padding: 14px;
}

.message-group-list {
  display: grid;
  gap: 8px;
}

.message-group-list article {
  padding: 10px 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.message-group-list article.active {
  border-color: #bfe1dd;
  background: #effffc;
  box-shadow: inset 3px 0 0 #087c7a;
}

.message-group-list strong,
.message-group-list span,
.message-group-list small {
  display: block;
}

.message-group-list strong {
  color: #061b45;
  font-size: 12px;
}

.message-group-list span,
.message-group-list small {
  margin-top: 5px;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
}

.chat-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e7edf5;
}

.chat-header h2 {
  margin: 0;
  color: #061b45;
  font-size: 18px;
}

.chat-header span {
  display: block;
  margin-top: 4px;
  color: #607088;
  font-size: 12px;
  font-weight: 900;
}

.chat-thread {
  min-height: 280px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding-right: 4px;
}

.chat-thread article {
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f8fd;
}

.chat-thread article.system-message {
  max-width: 92%;
  border: 1px dashed #bfd7f5;
  background: #fbfdff;
}

.chat-thread strong {
  color: #061b45;
  font-size: 12px;
}

.chat-thread p {
  margin: 5px 0 8px;
  color: #263b61;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.chat-attachment-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px;
  border-radius: 6px;
  background: white;
}

.chat-attachment-strip span {
  color: #53657f;
  font-size: 11px;
  font-weight: 900;
}

.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e7edf5;
}

.chat-composer input,
.chat-composer button {
  min-height: 34px;
  border: 1px solid #d9e4f2;
  border-radius: 6px;
  padding: 0 10px;
  color: #12284d;
  background: white;
  font-size: 12px;
  font-weight: 900;
}

.node-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.node-file-thumb {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  padding: 10px;
  text-align: left;
  background: #fbfdff;
  cursor: pointer;
}

.node-file-thumb span {
  width: 34px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: white;
  background: #087c7a;
  font-size: 10px;
  font-weight: 900;
}

.node-file-thumb strong {
  color: #061b45;
  font-size: 11px;
  line-height: 1.35;
}

.node-file-thumb em {
  color: #667489;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.message-file-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 27, 69, 0.58);
}

.message-file-preview-card {
  position: relative;
  width: min(720px, 94vw);
  max-height: min(680px, 86vh);
  display: grid;
  grid-template-columns: minmax(220px, 0.95fr) minmax(260px, 1.05fr);
  gap: 16px;
  overflow: auto;
  border: 1px solid #f0b13a;
  border-radius: 14px;
  padding: 16px;
  background: #fffaf0;
  box-shadow: 0 24px 80px rgba(6, 27, 69, 0.28);
}

.message-file-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: #171717;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.message-file-preview-visual {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  border: 1px solid #f4c66a;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 179, 26, 0.18), rgba(255, 255, 255, 0.88)),
    repeating-linear-gradient(45deg, rgba(240, 177, 58, 0.12) 0 10px, transparent 10px 20px);
}

.message-file-preview-visual span {
  width: 74px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: #087c7a;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(8, 124, 122, 0.18);
}

.message-file-preview-visual strong {
  max-width: 86%;
  color: #061b45;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.message-file-preview-info {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 28px;
}

.message-file-preview-info h2 {
  margin: 0;
  color: #061b45;
  font-size: 22px;
  font-weight: 700;
}

.message-file-preview-info dl {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid #f2d28d;
  border-radius: 10px;
  background: white;
}

.message-file-preview-info dt,
.message-file-preview-info dd,
.message-file-preview-info p {
  margin: 0;
  color: #53657f;
  font-size: 13px;
  line-height: 1.5;
}

.message-file-preview-info dt {
  font-weight: 700;
}

.message-file-preview-info dd {
  color: #061b45;
  font-weight: 700;
}

.participant-rule-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.participant-rule-card h3 {
  margin: 0 0 8px;
  color: #061b45;
  font-size: 14px;
}

.participant-rule-card ul {
  margin: 0;
  padding-left: 16px;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.55;
}

.message-rules-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 12px;
}

.message-permission-list {
  display: grid;
  gap: 8px;
}

.message-permission-list article {
  padding: 10px 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  background: #fbfdff;
}

.message-permission-list article.is-owner {
  border-color: #b7d4ff;
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #0d66d7;
}

.message-permission-list strong {
  display: block;
  color: #061b45;
  font-size: 13px;
}

.message-permission-list p {
  margin: 5px 0 0;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
}

.message-workflow-rules ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.message-workflow-rules li {
  min-height: 86px;
  padding: 12px;
  border: 1px solid #e3ebf6;
  border-radius: 7px;
  color: #23365b;
  background: #fbfdff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.message-workflow-rules li::before {
  content: counter(list-item);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: white;
  background: #087c7a;
  font-size: 11px;
  font-weight: 900;
}

.message-center-content {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #e9edf2;
}

.message-module-dock {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #dce3ec;
  background: #fff8e8;
}

.message-module-dock button {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid #f0c46b;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20, 37, 61, 0.06);
  cursor: pointer;
}

.message-module-dock button:hover,
.message-module-dock button.active {
  border-color: #ffb31a;
  background: #fff4d8;
}

.message-module-dock b {
  width: 34px;
  height: 34px;
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: #0d66d7;
  font-size: 11px;
  font-weight: 700;
}

.message-module-dock strong,
.message-module-dock span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-module-dock strong {
  color: #061b45;
  font-size: 13px;
  font-weight: 700;
}

.message-module-dock span {
  color: #65758d;
  font-size: 11px;
  font-weight: 500;
}

.message-module-dock em {
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  color: #061b45;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.message-module-dock .tone-orange b,
.message-module-dock .tone-yellow b {
  background: linear-gradient(135deg, #ffb31a, #ff8a00);
}

.message-module-dock .tone-red b {
  background: #e04f5f;
}

.message-module-dock .tone-green b {
  background: #087c7a;
}

.message-module-dock .tone-purple b {
  background: #8b5cf6;
}

.message-module-dock .tone-slate b {
  background: #5d6e86;
}

.message-facebook-bridge {
  display: grid;
  grid-template-columns: 230px minmax(320px, 0.95fr) minmax(420px, 1.2fr) 160px;
  gap: 10px;
  align-items: stretch;
  padding: 10px 12px;
  border-bottom: 1px solid #dce3ec;
  background: #fff8e8;
}

.facebook-bridge-title,
.facebook-page-status article,
.facebook-inbox-preview article {
  border: 1px solid #f0c46b;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
}

.facebook-bridge-title {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px 12px;
}

.facebook-bridge-title strong {
  color: #061b45;
  font-size: 15px;
  font-weight: 900;
}

.facebook-bridge-title span,
.facebook-page-status span,
.facebook-inbox-preview span,
.facebook-inbox-preview p {
  color: #65758d;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.facebook-page-status,
.facebook-inbox-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.facebook-page-status article {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 9px;
}

.facebook-page-status b,
.facebook-page-status strong,
.facebook-inbox-preview b {
  display: block;
  overflow: hidden;
  color: #061b45;
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facebook-page-status strong {
  color: #ff8a00;
}

.facebook-inbox-preview article {
  min-width: 0;
  padding: 8px;
}

.facebook-inbox-preview p {
  display: -webkit-box;
  min-height: 30px;
  margin: 4px 0 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.facebook-inbox-preview .table-action {
  width: 100%;
  min-height: 24px;
}

.facebook-bridge-actions {
  display: grid;
  gap: 8px;
}

.facebook-bridge-actions button {
  border: 1px solid #ffb31a;
  border-radius: 8px;
  color: #061b45;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.facebook-bridge-actions button:first-child {
  color: white;
  background: #1877f2;
  border-color: #1877f2;
}

.facebook-bridge-actions .cctv-open-button {
  color: #071f3d;
  border-color: #d29205;
  background: linear-gradient(135deg, #ffcc39, #ff9f1f);
  box-shadow: inset 0 -3px 0 rgba(134, 83, 0, 0.16);
}

.cctv-content {
  min-height: calc(100vh - 58px);
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 190, 54, 0.16), transparent 28%),
    var(--app-bg);
}

.cctv-head {
  border: 1px solid #f0d190;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
}

.cctv-overview,
.cctv-location-grid,
.cctv-workspace {
  display: grid;
  gap: 12px;
  border: 1px solid #f0d190;
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.06);
}

.cctv-overview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cctv-overview article,
.cctv-location-grid article {
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff8ea);
}

.cctv-overview b,
.cctv-overview span,
.cctv-location-grid span,
.cctv-location-grid em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.cctv-overview strong,
.cctv-location-grid b {
  display: block;
  margin: 6px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cctv-location-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cctv-location-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.cctv-location-grid strong {
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}

.cctv-location-grid em {
  grid-column: 1 / -1;
  color: var(--orange-strong);
}

.cctv-workspace {
  grid-template-columns: minmax(0, 1fr) 330px;
}

.cctv-table-panel,
.cctv-rule-panel {
  min-width: 0;
}

.cctv-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 220px auto;
  gap: 10px;
  margin: 12px 0;
}

.cctv-command-row input,
.cctv-command-row select {
  min-height: 38px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--navy);
  background: #fff;
  font-weight: 500;
}

.cctv-table-wrap {
  overflow: auto;
  border: 1px solid #f0d190;
  border-radius: 10px;
  background: #fff;
}

.cctv-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 13px;
}

.cctv-table th,
.cctv-table td {
  border-bottom: 1px solid #f0d190;
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

.cctv-table th {
  background: #fff7e6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.cctv-table td strong {
  color: var(--navy);
  font-weight: 600;
}

.cctv-status {
  display: inline-flex;
  min-width: 62px;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}

.cctv-status.online {
  color: #07864f;
  background: #e5f8ee;
}

.cctv-status.warning {
  color: #c96a00;
  background: #fff1d8;
}

.cctv-status.offline {
  color: #d64545;
  background: #ffe8e8;
}

.cctv-status.maintenance {
  color: #1667d9;
  background: #e7f1ff;
}

.cctv-rule-panel {
  border: 1px solid #f0d190;
  border-radius: 10px;
  padding: 14px;
  background: #fbfdff;
}

.cctv-rule-panel ol {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding-left: 20px;
}

.cctv-rule-panel li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.message-cctv-head-button {
  position: absolute;
  top: 12px;
  right: 140px;
  min-width: 58px;
  min-height: 34px;
  border: 1px solid #d29205;
  border-radius: 999px;
  color: #071f3d;
  background: linear-gradient(135deg, #ffcc39, #ff9f1f);
  box-shadow: inset 0 -3px 0 rgba(134, 83, 0, 0.16);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.message-subpage-content {
  height: calc(100vh - 58px);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #edf1f5;
}

.message-subpage-head {
  flex-shrink: 0;
}

.message-module-dock-sub {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: #fff;
}

.message-sub-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 12px;
  padding: 12px;
  overflow: hidden;
}

.facebook-sub-grid {
  grid-template-columns: minmax(520px, 0.95fr) minmax(0, 1.05fr);
}

.message-sub-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid #f0d190;
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 37, 61, 0.05);
}

.message-sub-panel .section-title {
  margin-bottom: 0;
}

.subpage-card-grid {
  min-height: 0;
  overflow: auto;
}

.subpage-card-grid.facebook-page-status {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subpage-list,
.message-sub-list,
.participant-roster-wide {
  min-height: 0;
  overflow: auto;
}

.message-sub-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.message-sub-actions button,
.message-writeback-actions-wide button {
  min-height: 38px;
  border: 1px solid #ffb31a;
  border-radius: 8px;
  color: #061b45;
  background: #fff8e8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.message-sub-actions .primary-row-action {
  color: white;
  border-color: #0d66d7;
  background: #0d66d7;
}

.node-file-grid-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  align-items: start;
  overflow: auto;
}

.node-file-grid-wide .node-file-thumb {
  min-height: 126px;
}

.message-sub-list {
  align-content: start;
}

.message-archive-summary.message-sub-list article {
  min-height: 86px;
}

.message-writeback-actions-wide {
  align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-reminder-list {
  min-height: 0;
  overflow: auto;
}

.message-center-head {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 0 104px 0 18px;
  border-bottom: 1px solid #dce3ec;
  background: #f7f8fa;
}

.message-center-head h1 {
  font-size: 22px;
}

.message-center-head p {
  max-width: 820px;
  margin-top: 2px;
  overflow: hidden;
  color: #738194;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-center-kpis {
  display: grid;
  grid-template-columns: repeat(4, 92px);
  gap: 8px;
}

.message-center-kpis article {
  min-height: 42px;
  display: grid;
  align-content: center;
  padding: 6px 10px;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
}

.message-center-kpis strong {
  color: #061b45;
  font-size: 18px;
  line-height: 1;
}

.message-center-kpis span {
  margin-top: 3px;
  color: #65758d;
  font-size: 10px;
  font-weight: 600;
}

.message-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 330px minmax(500px, 1fr) 360px;
  gap: 0;
  border-top: 0;
  background: white;
}

.message-group-panel,
.chat-panel,
.node-file-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.message-group-panel {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-right: 1px solid #dfe5ee;
  background: #f4f5f7;
}

.message-list-top {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid #e2e7ef;
}

.message-list-top strong {
  color: #071f3d;
  font-size: 16px;
}

.message-list-top div span {
  display: block;
  margin-top: 2px;
  color: #7b8796;
  font-size: 11px;
  font-weight: 600;
}

.message-list-top button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: #0d66d7;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.message-search {
  display: block;
  padding: 10px 12px;
}

.message-search input {
  width: 100%;
  height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  color: #263b61;
  background: #e7ebf1;
  font-size: 12px;
  font-weight: 800;
  outline: none;
}

.message-filter-strip {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  border-bottom: 1px solid #e2e7ef;
}

.message-filter-strip button {
  min-height: 26px;
  border: 1px solid #d9e2ee;
  border-radius: 999px;
  padding: 0 10px;
  color: #53657f;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.message-filter-strip button.active {
  border-color: #ffb31a;
  color: #061b45;
  background: #fff4d8;
}

.message-group-list {
  height: calc(100% - 112px);
  display: block;
  overflow: auto;
}

.message-group-list article {
  position: relative;
  min-height: 84px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e5eaf1;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.message-group-list article.active {
  border-color: #dfe5ee;
  background: #dce4ee;
  box-shadow: none;
}

.group-avatar {
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
  border-radius: 8px;
  color: white !important;
  background: #0d66d7;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.message-group-list strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-group-list span:not(.group-avatar),
.message-group-list small {
  margin-top: 4px;
  overflow: hidden;
  color: #69778a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-group-list article > em {
  align-self: start;
  color: #7b8796;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.message-group-list article > b {
  position: absolute;
  right: 12px;
  bottom: 9px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: #087c7a;
  background: #e0f7f5;
  font-size: 10px;
  font-weight: 600;
}

.message-group-list article > b.needs-action {
  color: #b85e00;
  background: #fff1df;
}

.chat-panel {
  min-height: 0;
  gap: 0;
  padding: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-right: 1px solid #dfe5ee;
  background: #eef1f5;
}

.chat-header {
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid #dfe5ee;
  background: #f7f8fa;
}

.chat-header h2 {
  max-width: 520px;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header span {
  margin-top: 3px;
  font-size: 11px;
}

.chat-header-actions {
  display: flex;
  gap: 8px;
}

.chat-node-context {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #dfe5ee;
  background: #fbfcfe;
}

.chat-node-context article {
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  background: #fff;
}

.chat-node-context article.is-warning {
  border-color: #f4d59b;
  background: #fffaf0;
}

.chat-node-context b,
.chat-node-context span {
  display: block;
  color: #65758d;
  font-size: 11px;
  font-weight: 600;
}

.chat-node-context strong {
  display: block;
  margin: 4px 0;
  color: #061b45;
  font-size: 15px;
  font-weight: 600;
}

.project-board-action {
  color: #087c7a !important;
  border-color: #bfe1dd !important;
  background: #effffc !important;
}

.chat-thread {
  min-height: 0;
  padding: 18px 22px;
  overflow: auto;
  background: #eef1f5;
}

.chat-thread article {
  max-width: 70%;
  margin-bottom: 12px;
  border-radius: 7px;
  background: white;
  box-shadow: 0 4px 16px rgba(30, 55, 86, 0.06);
}

.chat-thread article:nth-child(3) {
  margin-left: auto;
  background: #d9f7cf;
}

.chat-thread article.finance-message {
  margin-left: auto;
  background: #d9f7cf;
}

.chat-thread strong small {
  margin-left: 6px;
  color: #7b8796;
  font-size: 10px;
  font-weight: 500;
}

.chat-thread article.system-message {
  max-width: 78%;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #d8e3f2;
  background: #f9fbfd;
  box-shadow: none;
}

.chat-attachment-strip {
  background: #f4f6f9;
}

.chat-composer {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #dfe5ee;
  background: #f7f8fa;
}

.chat-composer input,
.chat-composer button {
  min-height: 36px;
  border-color: #d6dde8;
  background: white;
}

.chat-composer .primary-row-action {
  color: white;
  border-color: #0d66d7;
  background: #0d66d7;
}

.node-file-panel {
  min-height: 0;
  padding: 0;
  overflow: auto;
  background: #fbfcfe;
}

.project-chat-profile {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px 18px 18px;
  border-bottom: 1px solid #e3eaf3;
  text-align: center;
}

.project-chat-profile span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: white;
  background: #0d66d7;
  font-size: 17px;
  font-weight: 900;
}

.project-chat-profile strong {
  color: #071f3d;
  font-size: 15px;
}

.project-chat-profile em {
  color: #69778a;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.project-profile-board-button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: #0d66d7;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.message-side-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e3eaf3;
}

.message-side-status article {
  min-height: 58px;
  display: grid;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  background: #fff;
}

.message-side-status strong,
.message-side-status span {
  display: block;
}

.message-side-status strong {
  color: #061b45;
  font-size: 14px;
}

.message-side-status span {
  margin-top: 4px;
  color: #65758d;
  font-size: 11px;
  font-weight: 600;
}

.message-risk-panel,
.message-archive-summary {
  border-bottom: 1px solid #e3eaf3;
}

.message-fact-panel {
  padding-bottom: 14px;
  border-bottom: 1px solid #e3eaf3;
}

.message-fact-panel article {
  display: grid;
  gap: 4px;
  margin: 0 14px 8px;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.message-fact-panel strong {
  color: #061b45;
  font-size: 12px;
  font-weight: 700;
}

.message-fact-panel span {
  color: #65758d;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.message-risk-list,
.message-archive-summary {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.message-risk-list article,
.message-archive-summary article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.message-risk-list article.risk-high {
  border-color: #fecaca;
  background: #fff7f7;
}

.message-risk-list article.risk-medium {
  border-color: #f3c166;
  background: #fff9ec;
}

.message-risk-list strong,
.message-risk-list span,
.message-archive-summary strong,
.message-archive-summary span,
.message-archive-summary em {
  display: block;
}

.message-risk-list strong,
.message-archive-summary strong {
  color: #061b45;
  font-size: 12px;
  font-weight: 850;
}

.message-risk-list span,
.message-archive-summary span,
.message-archive-summary em {
  color: #65758d;
  font-size: 11px;
  font-weight: 650;
}

.message-archive-summary em {
  grid-column: 1 / -1;
  color: #ff8a00;
  font-style: normal;
}

.message-participant-manager {
  border-bottom: 1px solid #e3eaf3;
}

.participant-roster {
  display: grid;
  gap: 8px;
  padding: 0 14px 12px;
}

.participant-roster article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  background: #fff;
}

.participant-roster article.is-required {
  border-color: #f3c166;
  background: #fff9ec;
}

.participant-roster strong,
.participant-roster span,
.participant-roster small {
  display: block;
}

.participant-roster strong {
  color: #061b45;
  font-size: 12px;
  font-weight: 800;
}

.participant-roster span,
.participant-roster small {
  color: #65758d;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.message-participant-manager > .project-profile-board-button {
  width: calc(100% - 28px);
  margin: 0 14px 14px;
  background: #ffb31a;
  color: #061b45;
}

.node-file-panel .section-title,
.participant-rule-card {
  margin: 0;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid #e3eaf3;
  border-radius: 0;
  background: transparent;
}

.node-file-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.node-file-thumb {
  min-height: 78px;
  border-radius: 6px;
  background: white;
}

.node-file-thumb strong {
  max-height: 30px;
  overflow: hidden;
}

.node-file-thumb small {
  color: #7b8796;
  font-size: 10px;
  font-weight: 600;
}

.message-approval-stack {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.message-approval-stack h3 {
  margin: 0;
  color: #061b45;
  font-size: 14px;
}

.message-approval-stack article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  padding: 10px;
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  background: #fff;
}

.message-approval-stack strong {
  color: #061b45;
  font-size: 12px;
}

.message-approval-stack span {
  grid-column: 1;
  color: #65758d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.message-approval-stack button {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}

.participant-rule-card h3 {
  font-size: 13px;
}

.participant-rule-card li {
  margin-bottom: 6px;
}

.message-control-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 0.9fr;
  gap: 12px;
  min-height: 0;
}

.message-control-card {
  min-width: 0;
  border: 1px solid #dbe5f1;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(11, 34, 64, 0.05);
}

.message-task-list,
.message-sync-log {
  display: grid;
  gap: 8px;
}

.message-task-list > div,
.message-sync-log p,
.message-reminder-list li {
  border: 1px solid #e1e8f1;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
}

.message-task-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  border-left: 4px solid #8da2bb;
}

.message-task-list > div.priority-high {
  border-left-color: #ef4444;
  background: #fff6f4;
}

.message-task-list > div.priority-medium {
  border-left-color: #ffb31a;
  background: #fff9ec;
}

.message-task-list strong,
.message-task-list span,
.message-task-list em,
.message-sync-log b,
.message-sync-log span {
  display: block;
}

.message-task-list strong {
  color: #061b45;
  font-size: 13px;
  font-weight: 850;
}

.message-task-list span,
.message-task-list em,
.message-sync-log span,
.message-reminder-list li {
  color: #65758d;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.message-task-list em {
  color: #0d66d7;
  font-style: normal;
}

.message-task-list button {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
}

.message-reminder-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.message-sync-log p {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}

.message-sync-log b {
  color: #ff8a00;
  font-size: 12px;
}

.message-writeback-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.message-writeback-actions button {
  min-height: 34px;
  border: 1px solid #f0bd55;
  border-radius: 8px;
  color: #061b45;
  background: #fff8e8;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.message-writeback-actions button:nth-child(2) {
  color: white;
  background: #0d66d7;
  border-color: #0d66d7;
}

.lead-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.88fr);
  gap: 12px;
}

.lead-workspace.specialist-view {
  grid-template-columns: minmax(0, 1fr);
}

.lead-entry-card,
.approval-panel {
  min-height: 220px;
  padding: 14px;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-title h2 {
  margin: 0;
  color: #061b45;
  font-size: 18px;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.lead-detail-status {
  display: grid;
  gap: 3px;
  margin: 8px 0 10px;
  border: 1px solid #dce6f3;
  border-radius: 8px;
  background: #f7fbff;
  padding: 8px 10px;
}

.lead-detail-status strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.lead-detail-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.lead-detail-status.is-locked {
  border-color: #ffd38a;
  background: #fff7e8;
}

.lead-duplicate-alert {
  margin: 0 0 10px;
  border: 1px solid #ffcf7a;
  border-radius: 8px;
  background: #fff8e8;
  color: #8a5200;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.lead-duplicate-alert.is-empty {
  display: none;
}

.lead-ai-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  border: 1px solid #f0c46b;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(135deg, #fffaf0, #fff4dc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.lead-ai-panel.tone-hot {
  border-color: #ff9f1a;
  background: linear-gradient(135deg, #fff3db, #ffe1ad);
}

.lead-ai-panel.tone-warm {
  border-color: #f0c46b;
}

.lead-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lead-ai-head div {
  display: grid;
  gap: 2px;
}

.lead-ai-head span {
  color: #8a5600;
  font-size: 11px;
  font-weight: 700;
}

.lead-ai-head strong {
  color: #061b45;
  font-size: 16px;
  font-weight: 600;
}

.lead-ai-head em {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #172b49;
  background: linear-gradient(180deg, #ffd24f, #ffb31a);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lead-ai-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.lead-ai-grid article {
  min-height: 74px;
  display: grid;
  align-content: start;
  gap: 5px;
  border: 1px solid #f3d89b;
  border-radius: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.lead-ai-grid b {
  color: #061b45;
  font-size: 12px;
  font-weight: 600;
}

.lead-ai-grid span {
  color: #43536f;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.lead-ai-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.lead-ai-actions button {
  min-height: 32px;
  border: 1px solid #f0b13a;
  border-radius: 8px;
  padding: 0 12px;
  color: #7a4300;
  background: #fff8e8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.lead-ai-actions button:last-child {
  color: #172b49;
  background: linear-gradient(180deg, #ffd24f, #ffb31a);
}

.lead-entry-card.is-locked input,
.lead-entry-card.is-locked select,
.lead-entry-card.is-locked textarea {
  background: #f2f5f9;
  color: #667489;
  cursor: not-allowed;
}

.lead-form-grid label {
  display: grid;
  gap: 5px;
  color: #263d62;
  font-size: 11px;
  font-weight: 900;
}

.lead-form-grid input,
.lead-form-grid select,
.lead-form-grid textarea {
  width: 100%;
}

.file-upload-field input[type="file"] {
  min-height: 34px;
  padding: 7px 10px;
  border-style: dashed;
  background: #f8fbff;
  color: #405271;
  cursor: pointer;
}

.evidence-action {
  min-width: 84px;
  color: #0d66d7 !important;
  border-color: #cfe0f8 !important;
  background: #f4f9ff !important;
}

.lead-form-grid textarea {
  min-height: 68px;
  padding-top: 8px;
  resize: vertical;
}

.lead-notes {
  grid-column: span 2;
}

.lead-submit {
  width: 100%;
  margin-top: 12px;
}

.approval-list {
  display: grid;
  gap: 10px;
}

.approval-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #e2eaf5;
  border-radius: 7px;
  background: #fbfdff;
}

.approval-card h3 {
  margin: 6px 0 3px;
  color: #061b45;
  font-size: 15px;
}

.approval-card p,
.approval-card small {
  margin: 0;
  color: #617088;
  font-size: 11px;
  font-weight: 800;
}

.approval-actions {
  display: grid;
  gap: 7px;
}

.primary-row-action {
  color: white !important;
  border-color: #0d66d7 !important;
  background: #0d66d7 !important;
}

.danger-action {
  margin-left: 5px;
  color: #ef4444 !important;
}

.lead-tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.lead-blue { color: #126fe8; background: #e9f3ff; }
.lead-orange { color: #e88913; background: #fff2dd; }
.lead-yellow { color: #c98700; background: #fff8d8; }
.lead-purple { color: #805ad5; background: #f1ebff; }
.lead-green { color: #15965b; background: #e7f9ef; }
.lead-gray { color: #667489; background: #eef2f7; }
.lead-red { color: #ff3f45; background: #ffecec; }

.lead-toast {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #bfe6d0;
  border-radius: 7px;
  color: #0d7c47;
  background: #f0fff6;
  font-size: 12px;
  font-weight: 900;
}

.lead-table-wrap {
  min-height: 0;
}

.marketing-performance-panel {
  padding: 14px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  background: #fff;
}

.marketing-report-entry {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  background: linear-gradient(135deg, #fffaf0, #fff4dc);
}

.marketing-report-entry div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.marketing-report-entry strong {
  color: #061b45;
  font-size: 15px;
  font-weight: 600;
}

.marketing-report-entry span {
  overflow: hidden;
  color: #64738b;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-report-entry button,
.marketing-report-actions button {
  min-height: 34px;
  border: 1px solid #f0b13a;
  border-radius: 8px;
  padding: 0 12px;
  color: #172b49;
  background: linear-gradient(180deg, #ffd24f, #ffb31a);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.marketing-performance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.marketing-report-card {
  min-width: 0;
  min-height: 138px;
  padding: 12px;
  border: 1px solid #e7c986;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
}

.marketing-report-card h3 {
  margin: 0 0 10px;
  color: #061b45;
  font-size: 15px;
}

.marketing-report-content {
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.report-subpage-head {
  position: relative;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  padding: 14px 92px 14px 16px;
  background: #fff;
}

.report-subpage-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 26px;
  font-weight: 600;
}

.report-subpage-head p {
  margin: 4px 0 0;
  color: #64738b;
  font-size: 13px;
  font-weight: 500;
}

.marketing-performance-panel.is-full-report {
  min-height: 0;
  overflow: auto;
}

.marketing-performance-panel.is-full-report .marketing-performance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-report-actions {
  display: grid;
  gap: 8px;
}

.marketing-channel-list,
.marketing-rank-list,
.marketing-month-bars {
  display: grid;
  gap: 7px;
}

.marketing-channel-list span,
.marketing-rank-list span,
.marketing-month-bars span {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  color: #53657f;
  font-size: 11px;
  font-weight: 700;
}

.marketing-channel-list b,
.marketing-rank-list b,
.marketing-month-bars b {
  min-width: 0;
  overflow: hidden;
  color: #263b61;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-channel-list strong,
.marketing-rank-list strong,
.marketing-month-bars strong {
  color: #061b45;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.marketing-rank-list em {
  grid-column: 1 / -1;
  margin-top: -4px;
  overflow: hidden;
  color: #8a5600;
  font-size: 10px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-month-bars span {
  grid-template-columns: 34px minmax(0, 1fr) 42px;
}

.marketing-month-bars i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd24f var(--bar), #eef2f7 var(--bar));
}

.lead-table {
  table-layout: auto;
}

.facebook-alert-window,
.facebook-assignment-window {
  min-width: 0;
  padding: 10px;
  border: 1px solid #f0d190;
  border-radius: 8px;
  background: #fff;
}

.facebook-alert-list,
.facebook-assignment-list {
  display: grid;
  gap: 7px;
}

.facebook-alert-list button {
  position: relative;
  width: 100%;
  display: grid;
  gap: 3px;
  border: 1px solid #e7c986;
  border-radius: 8px;
  padding: 9px 30px 9px 10px;
  text-align: left;
  background: linear-gradient(135deg, #fff 0%, #fff8e8 100%);
  cursor: pointer;
}

.facebook-alert-list strong,
.facebook-alert-list span,
.facebook-alert-list em,
.facebook-assignment-list strong,
.facebook-assignment-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facebook-alert-list strong {
  color: #061b45;
  font-size: 12px;
}

.facebook-alert-list span {
  color: #8a5600;
  font-size: 10px;
  font-weight: 800;
}

.facebook-alert-list em {
  color: #53657f;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.facebook-alert-list b {
  position: absolute;
  top: 9px;
  right: 9px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #df1f2d;
  font-size: 10px;
}

.facebook-assignment-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  background: #fbfdff;
}

.facebook-assignment-list strong,
.facebook-assignment-list span {
  display: block;
}

.facebook-assignment-list strong {
  color: #061b45;
  font-size: 11px;
}

.facebook-assignment-list span {
  margin-top: 2px;
  color: #53657f;
  font-size: 10px;
  font-weight: 700;
}

.facebook-assignment-list select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 1px solid #d9e4f2;
  border-radius: 7px;
  color: #071f3d;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.lead-table th,
.lead-table td {
  white-space: nowrap;
}

.erp-content .table-progress {
  width: 58px;
  height: 5px;
}

.erp-content .table-action {
  min-width: 44px;
  height: 22px;
  border: 1px solid #d9e4f2;
  border-radius: 5px;
  color: #071f3d;
  background: white;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.erp-content .list-footer {
  min-height: 50px;
  justify-content: space-between;
  padding: 0 22px;
  border: 1px solid #e2eaf5;
  border-radius: 7px;
  background: white;
}

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

.pagination button {
  min-width: 36px;
  height: 32px;
  border: 0;
  border-radius: 5px;
  color: #071f3d;
  background: white;
  font-weight: 900;
  cursor: pointer;
}

.pagination button.active {
  color: white;
  background: #1977ff;
}

@media (max-width: 1360px) {
  .topbar {
    grid-template-columns: 210px 1fr;
  }

  .actions {
    grid-column: 1 / -1;
    align-items: stretch;
  }

  .legend,
  .toolbar {
    justify-content: flex-start;
  }

  .flow-row,
  .flow-row.bottom {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden;
  }

  .erp-layout {
    height: auto;
    min-height: 100vh;
    display: block;
    overflow: visible;
    background: #f6f9fe;
  }

  .erp-sidebar {
    display: none;
  }

  .erp-main {
    height: auto;
    min-height: 100vh;
    display: block;
  }

  .erp-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 58px;
    padding: 0 14px;
  }

  .topbar-left {
    min-width: 0;
    gap: 8px;
  }

  .topbar-left strong {
    font-size: 14px;
  }

  .topbar-left span {
    display: none;
  }

  .topbar-right {
    min-width: 0;
    gap: 8px;
  }

  .topbar-right .icon-button,
  .topbar-right strong,
  .avatar {
    display: none;
  }

  .topbar-right .select-control {
    width: 104px !important;
    min-height: 34px;
    font-size: 12px;
  }

  .erp-content {
    display: block;
    min-height: 0;
    padding: 14px 10px 18px;
    overflow: visible;
  }

  .project-toolbar {
    display: block;
  }

  .toolbar-controls::-webkit-scrollbar,
  .dashboard-cards::-webkit-scrollbar {
    display: none;
  }

  .project-toolbar h1 {
    margin: 0 0 8px;
    font-size: 24px;
  }

  .project-toolbar .desktop-return-button {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 38px;
    min-height: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
  }

  .project-toolbar .desktop-home-button {
    position: absolute;
    top: 14px;
    right: 52px;
    width: 38px;
    min-height: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
  }

  .toolbar-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .project-toolbar input,
  .project-toolbar select,
  .create-button,
  .logout-button {
    height: 36px;
    min-width: 0;
    font-size: 12px;
  }

  .project-toolbar input,
  .project-toolbar select,
  .project-toolbar label {
    flex: 0 0 126px;
    scroll-snap-align: start;
  }

  .project-toolbar label {
    min-width: 0;
  }

  .create-button,
  .logout-button {
    flex: 0 0 126px;
    width: auto;
  }

  .dashboard-cards {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .dashboard-cards article {
    flex: 0 0 136px;
    min-height: 64px;
    gap: 8px;
    padding: 10px;
    scroll-snap-align: start;
  }

  .metric-icon {
    width: 30px;
    height: 30px;
    font-size: 14px;
    flex: 0 0 auto;
  }

  .dashboard-cards b {
    font-size: 11px;
  }

  .dashboard-cards strong {
    font-size: 20px;
  }

  .dashboard-cards em {
    display: block;
    margin: 2px 0 0;
    font-size: 10px;
  }

  .erp-content .project-table-wrap {
    margin-top: 6px;
    overflow-x: auto;
    overflow-y: visible;
    border: 0;
    background: transparent;
    scrollbar-width: thin;
  }

  .erp-content .project-table,
  .erp-content .project-table thead,
  .erp-content .project-table tbody,
  .erp-content .project-table td {
    display: block;
    width: 100%;
  }

  .erp-content .project-table thead {
    display: none;
  }

  .erp-content .project-table {
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
  }

  .erp-content .project-table tbody {
    display: grid;
    gap: 6px;
  }

  .erp-content .project-table tr {
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(82px, 1.2fr) 58px 76px 86px 50px 76px 48px;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid #dce7f5;
    border-radius: 7px;
    background: white;
    box-shadow: 0 4px 12px rgba(30, 64, 106, 0.05);
  }

  .erp-content .project-table td {
    width: auto !important;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.2;
    color: #10284f;
  }

  .erp-content .project-table td::before {
    content: none;
  }

  .erp-content .project-table td:nth-child(2),
  .erp-content .project-table td:nth-child(4),
  .erp-content .project-table td:nth-child(7),
  .erp-content .project-table td:nth-child(8),
  .erp-content .project-table td:nth-child(10),
  .erp-content .project-table td:nth-child(11),
  .erp-content .project-table td:nth-child(14),
  .erp-content .project-table td:nth-child(15) {
    display: none;
  }

  .erp-content .project-table td:nth-child(1) {
    display: block;
    order: 1;
    color: #6c7a92;
    font-weight: 900;
    text-align: center;
  }

  .erp-content .project-table td:nth-child(3) {
    order: 2;
    font-weight: 900;
  }

  .erp-content .project-table td:nth-child(5) {
    order: 3;
    color: #20385f;
  }

  .erp-content .project-table td:nth-child(6) {
    order: 5;
  }

  .erp-content .project-table td:nth-child(9) {
    order: 4;
    font-weight: 800;
  }

  .erp-content .project-table td:nth-child(12) {
    order: 6;
    color: #0d66d7;
    font-weight: 900;
  }

  .erp-content .project-table td:nth-child(13) {
    order: 7;
  }

  .erp-content .project-table td:nth-child(16) {
    order: 8;
  }

  .erp-content .table-action {
    width: 100%;
    height: 28px;
    margin-top: 0;
    padding: 0;
    color: white;
    background: #0d66d7;
    border-color: #0d66d7;
    border-radius: 5px;
    font-size: 11px;
  }

  .leads-content {
    display: block;
  }

  .leads-head {
    align-items: stretch;
    display: grid;
    gap: 10px;
  }

  .leads-head h1 {
    font-size: 24px;
  }

  .leads-head-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .mobile-parent-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .role-switcher {
    justify-content: space-between;
  }

  .lead-metrics {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .lead-metrics::-webkit-scrollbar {
    display: none;
  }

  .lead-metrics article {
    flex: 0 0 132px;
    min-height: 64px;
    padding: 10px;
  }

  .lead-metrics strong {
    font-size: 20px;
  }

  .sales-orders-content {
    display: block;
    overflow: visible;
  }

  .sales-orders-head {
    display: grid;
    gap: 8px;
    align-items: stretch;
  }

  .sales-orders-head h1 {
    font-size: 24px;
  }

  .sales-order-policy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
  }

  .sales-order-command {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
  }

  .sales-order-command label {
    gap: 4px;
    font-size: 10px;
  }

  .sales-order-command label:first-child,
  .sales-order-command button {
    grid-column: 1 / -1;
  }

  .sales-order-command input,
  .sales-order-command select,
  .sales-order-command button {
    min-height: 34px;
    font-size: 11px;
  }

  .sales-order-metrics {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .sales-order-metrics::-webkit-scrollbar {
    display: none;
  }

  .sales-order-metrics article {
    flex: 0 0 126px;
    min-height: 66px;
    padding: 10px;
  }

  .sales-order-metrics strong {
    font-size: 22px;
  }

  .sales-order-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }

  .sales-order-flow article {
    min-height: 58px;
    padding: 9px;
  }

  .sales-orders-layout {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }

  .sales-permission-panel {
    order: 2;
  }

  .sales-order-table-panel {
    order: 1;
  }

  .sales-permission-panel,
  .sales-order-table-panel,
  .sales-rules-panel {
    padding: 12px;
  }

  .sales-order-table,
  .sales-order-table thead,
  .sales-order-table tbody,
  .sales-order-table tr,
  .sales-order-table td {
    display: block;
    width: 100%;
  }

  .sales-order-table thead {
    display: none;
  }

  .sales-order-table tbody {
    display: grid;
    gap: 7px;
  }

  .sales-order-table tr {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    gap: 6px 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #fbfdff;
  }

  .sales-order-table td {
    height: auto;
    display: block;
    padding: 5px 0;
    border: 0;
    font-size: 11px;
    white-space: normal;
  }

  .sales-order-table td::before {
    content: "";
    display: none;
    color: #617088;
    font-size: 11px;
    font-weight: 900;
  }

  .sales-order-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    color: #5d6e86;
    font-size: 10px;
    font-weight: 900;
  }

  .sales-order-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
  }

  .sales-order-table td:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    color: #53657f;
    font-size: 10px;
    font-weight: 800;
  }

  .sales-order-table td:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
    color: #061b45;
    font-weight: 900;
  }

  .sales-order-table td:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }

  .sales-order-table td:nth-child(9) {
    grid-column: 1 / 3;
    grid-row: 3;
    color: #53657f;
    font-weight: 800;
  }

  .sales-order-table td:nth-child(10) {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }

  .sales-order-table td:nth-child(12) {
    grid-column: 3;
    grid-row: 3;
    display: grid;
    gap: 4px;
  }

  .sales-order-table td:nth-child(4),
  .sales-order-table td:nth-child(7),
  .sales-order-table td:nth-child(8),
  .sales-order-table td:nth-child(11) {
    display: none;
  }

  .sales-order-table td:nth-child(12) .table-action {
    width: 100%;
    min-width: 0;
    height: 24px;
    font-size: 10px;
  }

  .sales-rules-panel {
    margin-top: 10px;
  }

  .sales-rules-panel ol {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .sales-rules-panel li {
    min-height: 0;
  }

  .create-project-content {
    display: block;
    overflow: visible;
  }

  .create-project-head {
    display: grid;
    gap: 8px;
    align-items: stretch;
  }

  .create-project-head h1 {
    font-size: 24px;
  }

  .create-project-policy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
  }

  .create-project-metrics {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .create-project-metrics::-webkit-scrollbar {
    display: none;
  }

  .create-project-metrics article {
    flex: 0 0 126px;
    min-height: 66px;
    padding: 10px;
  }

  .create-project-metrics strong {
    font-size: 22px;
  }

  .create-project-workspace,
  .create-project-bottom {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .legacy-project-form,
  .bulk-import-panel,
  .import-batch-panel,
  .create-permission-panel {
    padding: 12px;
  }

  .legacy-form-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .legacy-form-grid label.wide {
    grid-column: auto;
  }

  .legacy-form-grid label {
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .legacy-form-grid .notes-line {
    align-items: start;
  }

  .legacy-form-grid input,
  .legacy-form-grid select,
  .legacy-form-grid textarea {
    min-height: 34px;
    font-size: 12px;
  }

  .create-form-actions,
  .bulk-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .create-form-actions button,
  .bulk-actions button {
    min-width: 0;
    width: 100%;
    height: 32px;
    font-size: 10px;
  }

  .upload-dropzone {
    min-height: 112px;
    padding: 12px;
  }

  .import-batch-table,
  .import-batch-table thead,
  .import-batch-table tbody,
  .import-batch-table tr,
  .import-batch-table td {
    display: block;
    width: 100%;
  }

  .import-batch-table thead {
    display: none;
  }

  .import-batch-table tbody {
    display: grid;
    gap: 7px;
  }

  .import-batch-table tr {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 70px;
    gap: 4px 8px;
    padding: 9px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #fbfdff;
  }

  .import-batch-table td {
    height: auto;
    padding: 3px 0;
    border: 0;
    font-size: 11px;
    white-space: normal;
  }

  .import-batch-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    font-weight: 900;
  }

  .import-batch-table td:nth-child(2) {
    grid-column: 2 / 4;
    grid-row: 1;
    font-weight: 800;
  }

  .import-batch-table td:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .import-batch-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  .import-batch-table td:nth-child(5) {
    display: none;
  }

  .import-batch-table td:nth-child(6) {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .import-batch-table td:nth-child(7) {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: center;
  }

  .import-batch-table .table-action {
    width: 100%;
  }

  .create-permission-grid {
    grid-template-columns: 1fr;
  }

  .install-plan-content {
    display: block;
    overflow: visible;
  }

  .install-plan-layout,
  .install-plan-layout .erp-main,
  .install-plan-content {
    overflow-x: hidden;
  }

  .install-plan-head {
    display: grid;
    gap: 8px;
    align-items: stretch;
  }

  .install-plan-head h1 {
    font-size: 24px;
  }

  .install-plan-policy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    min-width: 0;
  }

  .install-plan-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .install-plan-metrics article {
    min-width: 0;
    min-height: 66px;
    padding: 10px;
  }

  .install-plan-metrics strong {
    font-size: 22px;
  }

  .install-stage-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }

  .install-stage-flow article {
    min-height: 58px;
    padding: 9px;
  }

  .install-workspace,
  .install-bottom-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .install-side-panel,
  .install-table-panel,
  .install-permission-panel,
  .install-rules-panel {
    padding: 12px;
  }

  .install-command-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .install-command-row input,
  .install-command-row button {
    grid-column: 1 / -1;
  }

  .install-command-row input,
  .install-command-row select,
  .install-command-row button {
    min-height: 34px;
    font-size: 11px;
  }

  .install-table,
  .install-table thead,
  .install-table tbody,
  .install-table tr,
  .install-table td {
    display: block;
    width: 100%;
  }

  .install-table thead {
    display: none;
  }

  .install-table tbody {
    display: grid;
    gap: 7px;
  }

  .install-table tr {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 78px;
    gap: 5px 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #fbfdff;
  }

  .install-table td {
    height: auto;
    padding: 4px 0;
    border: 0;
    font-size: 11px;
    white-space: normal;
  }

  .install-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    color: #5d6e86;
    font-size: 10px;
    font-weight: 900;
  }

  .install-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
  }

  .install-table td:nth-child(5) {
    grid-column: 1 / 3;
    grid-row: 2;
    color: #53657f;
    font-weight: 800;
  }

  .install-table td:nth-child(6) {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    color: #53657f;
    font-size: 10px;
    font-weight: 800;
  }

  .install-table td:nth-child(7) {
    grid-column: 1;
    grid-row: 3;
  }

  .install-table td:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
  }

  .install-table td:nth-child(9) {
    grid-column: 1 / 3;
    grid-row: 4;
    color: #53657f;
  }

  .install-table td:nth-child(10) {
    grid-column: 3;
    grid-row: 2 / 5;
    align-self: center;
    display: grid;
    gap: 4px;
  }

  .install-table td:nth-child(3),
  .install-table td:nth-child(4) {
    display: none;
  }

  .install-table td:nth-child(10) .table-action {
    width: 100%;
    min-width: 0;
    height: 24px;
    font-size: 10px;
  }

  .install-permission-grid {
    grid-template-columns: 1fr;
  }

  .delivery-plan-content {
    display: block;
    overflow: visible;
  }

  .delivery-plan-layout,
  .delivery-plan-layout .erp-main,
  .delivery-plan-content {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .delivery-plan-content > section,
  .delivery-plan-policy,
  .delivery-stage-flow,
  .delivery-workspace,
  .delivery-bottom-grid {
    width: 100%;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .delivery-plan-content * {
    min-width: 0;
  }

  .delivery-plan-head {
    display: grid;
    gap: 8px;
    align-items: stretch;
  }

  .delivery-plan-head h1 {
    font-size: 24px;
  }

  .delivery-plan-head p,
  .delivery-plan-policy p,
  .delivery-plan-policy strong {
    display: none;
  }

  .delivery-plan-metrics strong {
    display: block;
  }

  .delivery-plan-policy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    min-width: 0;
  }

  .delivery-plan-head,
  .delivery-plan-head p,
  .delivery-plan-policy,
  .delivery-plan-policy p,
  .delivery-plan-policy strong,
  .delivery-stage-flow,
  .delivery-stage-flow strong {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .delivery-plan-head p,
  .delivery-plan-policy p,
  .delivery-plan-policy strong {
    white-space: normal !important;
    word-break: break-word;
  }

  .delivery-plan-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .delivery-plan-metrics article {
    min-width: 0;
    min-height: 66px;
    padding: 10px;
  }

  .delivery-plan-metrics strong {
    font-size: 22px;
  }

  .delivery-stage-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
  }

  .delivery-stage-flow article {
    min-height: 58px;
    padding: 9px;
    overflow: hidden;
  }

  .delivery-stage-flow strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .delivery-workspace,
  .delivery-bottom-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .delivery-side-panel,
  .delivery-table-panel,
  .delivery-permission-panel,
  .delivery-rules-panel {
    padding: 12px;
  }

  .delivery-command-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .delivery-command-row input,
  .delivery-command-row button {
    grid-column: 1 / -1;
  }

  .delivery-command-row input,
  .delivery-command-row select,
  .delivery-command-row button {
    min-height: 34px;
    font-size: 11px;
  }

  .delivery-table,
  .delivery-table thead,
  .delivery-table tbody,
  .delivery-table tr,
  .delivery-table td {
    display: block;
    width: 100%;
  }

  .delivery-table thead {
    display: none;
  }

  .delivery-table tbody {
    display: grid;
    gap: 7px;
  }

  .delivery-table tr {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 78px;
    gap: 5px 8px;
    align-items: center;
    padding: 9px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #fbfdff;
  }

  .delivery-table td {
    height: auto;
    padding: 4px 0;
    border: 0;
    font-size: 11px;
    white-space: normal;
  }

  .delivery-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    color: #5d6e86;
    font-size: 10px;
    font-weight: 900;
  }

  .delivery-table td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    color: #061b45;
    font-size: 13px;
    font-weight: 900;
  }

  .delivery-table td:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 2;
    color: #53657f;
    font-weight: 800;
  }

  .delivery-table td:nth-child(5) {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    color: #53657f;
    font-size: 10px;
    font-weight: 800;
  }

  .delivery-table td:nth-child(6) {
    grid-column: 1 / 3;
    grid-row: 3;
    color: #087c7a;
    font-weight: 800;
  }

  .delivery-table td:nth-child(7) {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
    color: #53657f;
    font-size: 10px;
    font-weight: 800;
  }

  .delivery-table td:nth-child(8) {
    grid-column: 1;
    grid-row: 4;
  }

  .delivery-table td:nth-child(9) {
    grid-column: 2;
    grid-row: 4;
    color: #53657f;
  }

  .delivery-table td:nth-child(10) {
    grid-column: 3;
    grid-row: 3 / 5;
    align-self: center;
    display: grid;
    gap: 4px;
  }

  .delivery-table td:nth-child(3) {
    display: none;
  }

  .delivery-table td:nth-child(10) .table-action {
    width: 100%;
    min-width: 0;
    height: 24px;
    font-size: 10px;
  }

  .delivery-permission-grid {
    grid-template-columns: 1fr;
  }

  .message-center-content {
    height: calc(100vh - 58px);
    height: calc(100svh - 58px);
    display: grid;
    grid-template-rows: 56px 64px minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #eef2f7;
  }

  .message-facebook-bridge {
    display: none;
  }

  .message-center-layout,
  .message-center-layout .erp-main {
    overflow: hidden;
  }

  .message-center-head {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 94px 0 14px;
    border-bottom: 1px solid #dce3ec;
    background: #f7f9fc;
  }

  .message-center-head h1 {
    font-size: 20px;
    line-height: 1.1;
  }

  .message-center-head p {
    max-width: 100%;
    margin-top: 2px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .message-center-kpis {
    display: none;
  }

  .message-module-dock {
    min-width: 0;
    height: 64px;
    display: flex;
    gap: 6px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    border-bottom: 1px solid #dce3ec;
    background: #fff8e8;
    scrollbar-width: none;
  }

  .message-module-dock::-webkit-scrollbar {
    display: none;
  }

  .message-module-dock button {
    position: relative;
    flex: 0 0 122px;
    width: 122px;
    min-width: 0;
    min-height: 0;
    height: 48px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 5px;
    align-items: center;
    padding: 6px;
    border-radius: 9px;
  }

  .message-module-dock b {
    width: 24px;
    height: 24px;
    grid-row: auto;
    border-radius: 7px;
    font-size: 9px;
  }

  .message-module-dock strong {
    max-width: 100%;
    align-self: center;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.12;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .message-module-dock span {
    display: none;
  }

  .message-module-dock em {
    position: static;
    min-width: 14px;
    color: #061b45;
    font-size: 13px;
    line-height: 1;
    text-align: right;
  }

  .message-policy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
  }

  .message-metrics {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .message-metrics::-webkit-scrollbar {
    display: none;
  }

  .message-metrics article {
    flex: 0 0 126px;
    min-height: 66px;
    padding: 10px;
  }

  .message-metrics strong {
    font-size: 22px;
  }

  .message-workspace {
    grid-template-columns: 96px minmax(0, 1fr);
    width: 100%;
    max-width: 100vw;
    gap: 0;
    height: 100%;
    min-height: 0;
    margin-top: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: white;
  }

  .message-group-panel,
  .chat-panel,
  .node-file-panel,
  .message-permission-panel,
  .message-workflow-rules {
    padding: 0;
  }

  .message-group-panel {
    min-width: 0;
    border: 0;
    border-right: 1px solid #dfe5ee;
    border-radius: 0;
    background: #f4f6f9;
  }

  .message-list-top {
    min-height: 42px;
    padding: 0 6px;
  }

  .message-list-top strong {
    font-size: 12px;
  }

  .message-list-top div span {
    display: none;
  }

  .message-list-top button {
    width: 26px;
    height: 26px;
    min-height: 26px;
    border-radius: 7px;
  }

  .message-search {
    display: none;
  }

  .message-filter-strip {
    display: none;
  }

  .message-group-list {
    height: calc(100% - 42px);
    max-height: none;
    overflow: auto;
  }

  .message-group-list article {
    min-height: 62px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    padding: 8px 5px;
  }

  .message-group-list article > em,
  .message-group-list article > b {
    display: none;
  }

  .message-group-list article.active {
    background: #dce6f2;
  }

  .group-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 10px;
  }

  .message-group-list strong {
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .message-group-list span:not(.group-avatar) {
    margin-top: 3px;
    font-size: 9px;
  }

  .message-group-list small {
    display: none;
  }

  .chat-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .chat-node-context {
    display: none;
  }

  .chat-thread {
    min-height: 0;
    max-height: none;
    padding: 10px 8px;
    overflow-x: hidden;
  }

  .chat-thread article,
  .chat-thread article.system-message {
    max-width: 94%;
    padding: 8px;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .chat-thread strong {
    font-size: 11px;
  }

  .chat-thread p {
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .chat-header {
    min-height: 44px;
    display: block;
    padding: 6px 8px;
    gap: 6px;
  }

  .chat-header h2 {
    max-width: 100%;
    font-size: 12px;
    white-space: normal;
    line-height: 1.2;
  }

  .chat-header span {
    margin-top: 2px;
    font-size: 10px;
  }

  .chat-header-actions {
    display: none;
  }

  .chat-attachment-strip {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    min-width: 0;
  }

  .chat-attachment-strip span {
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
  }

  .chat-attachment-strip .table-action {
    width: 100%;
    height: 24px;
    font-size: 10px;
  }

  .chat-composer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 6px;
    min-width: 0;
  }

  .chat-composer input {
    grid-column: 1 / -1;
  }

  .chat-composer input,
  .chat-composer button {
    min-width: 0;
    min-height: 28px;
    padding: 0 5px;
    font-size: 9px;
  }

  .chat-composer button:nth-of-type(3) {
    display: none;
  }

  .chat-composer .primary-row-action {
    grid-column: 1 / -1;
  }

  .node-file-panel {
    display: none;
  }

  .message-control-grid {
    display: none;
  }

  .node-file-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-rules-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .message-workflow-rules ol {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .message-workflow-rules li {
    min-height: 0;
  }

  .permissions-content {
    display: block;
    overflow: visible;
  }

  .permissions-head {
    display: grid;
    gap: 8px;
    align-items: stretch;
  }

  .permissions-head h1 {
    font-size: 24px;
  }

  .permission-policy {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
  }

  .permission-policy-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .permission-policy-metrics article {
    min-height: 70px;
    padding: 9px;
  }

  .permission-policy-metrics strong {
    font-size: 22px;
  }

  .permission-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .permission-tabs button {
    min-width: 0;
    min-height: 36px;
    border: 1px solid #d9e4f2;
    background: white;
    font-size: 12px;
  }

  .permissions-layout,
  .permission-center-grid {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }

  .role-overview-panel,
  .permission-matrix-panel,
  .workflow-rules-panel,
  .permission-config-panel,
  .permission-setting-card {
    padding: 12px;
  }

  .permission-tab-panel,
  .permission-side-stack {
    gap: 10px;
  }

  .permission-toggle-grid {
    min-width: 520px;
  }

  .permission-config-panel {
    overflow-x: auto;
  }

  .approval-chain-grid {
    grid-template-columns: 1fr;
  }

  .role-list {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .workflow-rules-panel ol {
    grid-template-columns: 1fr;
  }

  .permission-table,
  .permission-table thead,
  .permission-table tbody,
  .permission-table tr,
  .permission-table td {
    display: block;
    width: 100%;
  }

  .permission-table thead {
    display: none;
  }

  .permission-table tbody {
    display: grid;
    gap: 7px;
  }

  .permission-table tr {
    padding: 9px;
    border: 1px solid #e1eaf6;
    border-radius: 7px;
    background: #fbfdff;
  }

  .permission-table td {
    height: auto;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 0;
    border: 0;
    font-size: 12px;
  }

  .permission-table td::before {
    content: attr(data-label);
    color: #617088;
    font-size: 11px;
    font-weight: 900;
  }

  .workflow-rules-panel {
    margin-top: 10px;
  }

  .workflow-rules-panel ol {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .workflow-rules-panel li {
    min-height: 0;
  }

  .lead-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 8px;
  }

  .lead-entry-card,
  .approval-panel {
    min-height: 0;
    padding: 12px;
  }

  .section-title {
    display: grid;
    gap: 4px;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lead-form-grid label {
    min-height: 48px;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid #e8eef6;
    border-radius: 0;
    background: transparent;
    color: #1b3156;
    font-size: 13px;
    line-height: 1.2;
  }

  .lead-form-grid input,
  .lead-form-grid select,
  .lead-form-grid textarea {
    min-width: 0;
    min-height: 36px;
    border-color: #d2deee;
    background: white;
    color: #071f3d;
    font-size: 14px;
    font-weight: 850;
  }

  .lead-form-grid textarea {
    min-height: 64px;
    line-height: 1.45;
  }

  .file-upload-field input[type="file"] {
    min-height: 36px;
    padding: 7px;
    font-size: 12px;
  }

  .lead-notes {
    grid-column: auto;
    align-items: start;
  }

  .lead-submit {
    min-height: 38px;
    margin-top: 14px;
    font-size: 13px;
  }

  .approval-card {
    grid-template-columns: 1fr;
  }

  .lead-toast {
    margin-top: 8px;
  }

  .erp-content .lead-table-wrap {
    margin-top: 8px;
    overflow-x: auto;
    border: 1px solid #dce7f5;
    border-radius: 7px;
    background: white;
  }

  .erp-content .lead-table {
    min-width: 920px;
    display: table;
    border-collapse: collapse;
  }

  .erp-content .lead-table thead {
    display: table-header-group;
  }

  .erp-content .lead-table tbody {
    display: table-row-group;
  }

  .erp-content .lead-table tr {
    min-height: 0;
    display: table-row;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .erp-content .lead-table th,
  .erp-content .lead-table td,
  .erp-content .lead-table td:nth-child(n) {
    width: auto !important;
    height: 34px;
    display: table-cell;
    padding: 4px 8px;
    border-bottom: 1px solid #e7edf5;
    white-space: nowrap;
    font-size: 11px;
    text-align: left;
  }

  .erp-content .lead-table td::before {
    content: none;
  }

  .erp-content .lead-table .table-action {
    width: auto;
    height: 24px;
    padding: 0 7px;
  }

  .erp-content .list-footer {
    min-height: 54px;
    margin-top: 10px;
    padding: 0 12px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .erp-content .list-footer strong {
    width: 100%;
    text-align: center;
  }

  .desktop-content {
    display: block;
    min-height: 0;
    overflow: visible;
    padding: 14px 10px 18px;
  }

  .desktop-workbench-layout .desktop-content {
    height: auto;
    display: block;
    overflow: visible;
    padding: 14px 10px 18px;
  }

  .desktop-workbench-layout .desktop-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .desktop-workbench-layout .desktop-stats {
    gap: 8px;
  }

  .desktop-workbench-layout .desktop-module-section {
    display: block;
    padding: 12px;
    overflow: visible;
  }

  .desktop-workbench-layout .desktop-module-grid {
    height: auto;
    grid-template-rows: none;
    gap: 8px;
  }

  .desktop-workbench-layout .desktop-module-card {
    aspect-ratio: 1 / 1;
    padding: 9px;
  }

  .desktop-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
  }

  .desktop-hero h1 {
    margin-top: 10px;
    font-size: 28px;
  }

  .desktop-hero p {
    font-size: 13px;
  }

  .desktop-owner-card {
    padding: 13px;
  }

  .desktop-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .desktop-stats article {
    min-height: 82px;
    padding: 12px;
  }

  .desktop-stats strong {
    font-size: 24px;
  }

  .desktop-module-section {
    margin-top: 10px;
    padding: 12px;
  }

  .desktop-module-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .desktop-module-card {
    aspect-ratio: 1 / 1;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 6px;
    padding: 9px;
    border-radius: 9px;
    box-shadow:
      0 5px 0 var(--module-base, #c7d8ef),
      0 10px 18px rgba(15, 40, 80, 0.09),
      inset 0 1px 0 rgba(255,255,255,0.92);
  }

  .desktop-module-card > div:nth-child(2) {
    min-width: 0;
  }

  .module-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 11px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      0 4px 8px rgba(15, 35, 70, 0.12);
  }

  .desktop-module-card h3 {
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    word-break: break-word;
  }

  .desktop-module-card p {
    display: none;
  }

  .module-card-foot {
    min-width: 0;
    gap: 4px;
    padding-top: 6px;
  }

  .module-card-foot strong {
    font-size: 12px;
  }

  .module-card-foot span {
    font-size: 10px;
  }

  .pagination button {
    min-width: 34px;
    height: 32px;
  }

  .page {
    padding: 10px;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .node-detail-page {
    padding: 10px;
    overflow: visible;
  }

  .node-detail-shell {
    height: auto;
    min-height: calc(100vh - 20px);
    display: block;
    overflow: visible;
    padding: 14px;
  }

  .node-detail-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-right: 86px;
  }

  .node-detail-title {
    text-align: left;
  }

  .node-detail-title h1 {
    font-size: 23px;
  }

  .node-detail-title p {
    font-size: 12px;
    line-height: 1.35;
  }

  .node-detail-summary {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .node-detail-summary::-webkit-scrollbar {
    display: none;
  }

  .node-detail-summary article {
    flex: 0 0 126px;
    min-height: 66px;
    padding: 10px;
  }

  .node-detail-summary strong {
    font-size: 16px;
  }

  .node-action-strip {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 8px;
    padding: 9px;
  }

  .node-action-strip span {
    white-space: normal;
  }

  .node-action-strip div {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .node-action-strip div::-webkit-scrollbar {
    display: none;
  }

  .node-action-strip .table-action {
    flex: 0 0 auto;
    min-width: 112px;
  }

  .node-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 10px;
    margin-top: 10px;
    overflow: visible;
  }

  .node-detail-panel {
    overflow: visible;
    padding: 12px;
  }

  .node-report-panel {
    grid-column: auto;
  }

  .node-report-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .node-report-layout textarea {
    min-height: 210px;
    max-height: none;
    font-size: 13px;
  }

  .node-report-actions {
    gap: 6px;
  }

  .node-events-panel {
    grid-row: auto;
  }

  .node-panel-title {
    display: grid;
    gap: 3px;
  }

  .node-panel-title h2 {
    font-size: 16px;
  }

  .node-event-list li {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px;
  }

  .node-task-output {
    grid-template-columns: 1fr;
  }

  .node-file-cards {
    grid-template-columns: 1fr;
  }

  .node-file-card {
    min-height: 86px;
  }

  .node-file-preview {
    padding: 12px;
  }

  .node-file-preview-dialog {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .node-file-preview-image {
    min-height: 260px;
  }

  .shell {
    padding: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .topbar {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .brand-logo {
    width: min(220px, 58vw);
  }

  .brand-logo-sidebar {
    width: 168px;
  }

  .actions,
  .legend,
  .toolbar,
  .board,
  .flow-row,
  .summary-grid,
  .detail-panel {
    min-width: 0;
    max-width: 100%;
  }

  .board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 340px;
  }

  .select-control,
  .control-button {
    width: 100%;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }

  .headline {
    position: static;
    text-align: left;
    padding-right: 44px;
  }

  h1 {
    font-size: 24px;
  }

  .board-back-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    max-width: 38px;
    margin-top: 0;
    padding: 0;
    font-size: 0;
  }

  .board-home-button {
    position: absolute;
    top: 14px;
    right: 56px;
    width: 38px;
    height: 38px;
    min-height: 38px;
    max-width: 38px;
    margin-top: 0;
    padding: 0;
    font-size: 0;
  }

  .flow-row,
  .flow-row.bottom,
  .summary-grid,
  .detail-body {
    grid-template-columns: 1fr;
  }

  .flow-row,
  .flow-row.bottom {
    display: contents;
  }

  .flow-node {
    min-width: 0;
    min-height: 146px;
    overflow: visible;
    padding: 10px 5px 9px;
  }

  .node-number {
    top: 6px;
    left: 6px;
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
  }

  .node-title {
    min-height: 42px;
    margin-left: 0;
    padding: 25px 2px 0;
    font-size: 12px;
    line-height: 1.28;
    font-weight: 900;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .node-icon {
    width: 34px;
    height: 34px;
    margin: 12px auto 6px;
  }

  .node-icon svg {
    width: 31px;
    height: 31px;
    stroke-width: 1.9;
  }

  .node-status {
    font-size: 12px;
    line-height: 1.25;
  }

  .node-activity-badges {
    gap: 3px;
    margin-top: 6px;
  }

  .node-activity-badges span {
    min-height: 17px;
    padding: 0 4px;
    font-size: 8.5px;
  }

  .task-list,
  .node-meta {
    display: none;
  }

  .flow-node::after,
  .flow-node::before,
  .row-connector {
    display: none;
  }

  .flow-node:not(.mobile-row-end)::after {
    display: block;
    top: 50%;
    right: -7px;
    width: 7px;
    height: 2px;
    z-index: 2;
  }

  .flow-node:not(.mobile-row-end)::before {
    display: block;
    top: calc(50% - 4px);
    right: -9px;
    border-left-width: 6px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    z-index: 2;
  }

  .flow-row.bottom {
    margin-top: 18px;
  }

  .detail-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 761px) {
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    height: calc(100vh - 64px);
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-command,
  .erp-layout:has(.sales-orders-content) .sales-order-flow,
  .erp-layout:has(.sales-orders-content) .sales-permission-panel,
  .erp-layout:has(.sales-orders-content) .sales-rules-panel {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-head {
    min-height: 62px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-policy {
    grid-template-columns: minmax(0, 1fr) minmax(560px, 0.6fr);
    padding: 14px 18px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-policy h2 {
    font-size: 18px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-policy p {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics article {
    min-height: 72px;
  }

  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    min-height: 138px;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
    align-items: stretch;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form {
    grid-template-columns: 1.2fr 0.7fr 0.8fr 1.4fr auto;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-layout {
    min-height: 0;
    display: block;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-panel {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-wrap {
    min-height: 0;
    overflow: auto;
  }
}

@media (max-width: 390px) {
  .message-workspace {
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .message-group-list article {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    padding: 7px 5px;
  }

  .group-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 10px;
  }

  .message-group-list strong,
  .chat-header h2,
  .chat-thread p {
    font-size: 10px;
  }

  .chat-thread {
    padding: 8px 6px;
  }

  .flow-node {
    min-height: 142px;
    padding: 9px 4px 8px;
  }

  .node-number {
    min-width: 23px;
    height: 23px;
    font-size: 11.5px;
  }

  .node-title {
    min-height: 42px;
    padding-top: 24px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  .node-icon {
    width: 32px;
    height: 32px;
    margin: 10px auto 5px;
  }

  .node-icon svg {
    width: 29px;
    height: 29px;
  }

  .node-status {
    font-size: 11.5px;
  }
}

/* Service-industry warm theme: MR.DIY-like yellow/orange with navy structure. */
.control-button.primary,
.primary-row-action,
.permission-actions .primary-row-action,
.chat-composer .primary-row-action,
.lead-submit,
.pagination button.active,
.message-list-top button {
  color: #172b49 !important;
  border-color: var(--service) !important;
  background: linear-gradient(180deg, #ffd24f, var(--service)) !important;
  box-shadow: 0 10px 22px rgba(245, 164, 0, 0.24) !important;
}

.sidebar-nav button.active,
.permission-tabs button.active {
  color: #172b49 !important;
  background: linear-gradient(90deg, #ffd24f, var(--service)) !important;
  box-shadow: inset 3px 0 0 var(--service-red), 0 8px 18px rgba(245, 164, 0, 0.22) !important;
}

.flow-node:hover,
.flow-node.active {
  border-color: var(--service);
  box-shadow: 0 16px 32px rgba(245, 164, 0, 0.16);
}

.flow-node::after,
.row-connector::before {
  background: var(--service);
}

.flow-node::before {
  border-left-color: var(--service);
}

.table-action,
.permission-scope,
.permission-chip,
.node-activity-badges span,
.node-event-list span,
.node-approval-list span,
.node-approval-list b,
.approval-chain-grid span,
.message-status,
.sales-status {
  color: #8a5600 !important;
  background: var(--service-soft) !important;
}

.project-pill,
.select-control,
.control-button,
.table-action,
.mobile-parent-back,
.permission-scope,
.permission-chip,
.node-file-card,
.permission-tabs,
.permission-table-wrap,
.lead-entry-card,
.approval-panel,
.sales-order-table-panel,
.message-group-panel,
.chat-panel,
.node-detail-panel,
.summary-panel,
.detail-panel {
  border-color: #f0d190 !important;
}

.erp-content,
.permissions-content,
.sales-orders-content,
.leads-content,
.message-center-content,
.desktop-content,
.project-list-shell,
.shell,
.node-detail-shell {
  background-color: #fffaf0;
}

.desktop-hero {
  border-color: #f0d190 !important;
  background:
    linear-gradient(135deg, rgba(255, 210, 79, 0.96), rgba(245, 130, 32, 0.88)),
    radial-gradient(circle at 82% 18%, rgba(223, 31, 45, 0.2), transparent 36%) !important;
  color: #172b49 !important;
}

.desktop-kicker {
  color: #172b49 !important;
  background: rgba(255, 255, 255, 0.34) !important;
}

.desktop-hero h1,
.desktop-owner-card strong {
  color: #172b49 !important;
}

.desktop-hero p,
.desktop-owner-card span {
  color: #243b5f !important;
}

.desktop-owner-card {
  border-color: rgba(23, 43, 73, 0.22) !important;
  background: rgba(255, 255, 255, 0.28) !important;
}

/* Enterprise ERP typography system. */
html,
body,
button,
input,
select,
textarea,
table {
  font-family: var(--font-ui);
}

body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
}

button,
select,
input,
textarea,
.control-button,
.select-control,
.table-action,
.primary-row-action,
.sidebar-nav button,
.collapse-menu,
.permission-tabs button,
.permission-actions button,
.user-action-row button,
.permission-card-head button,
.lead-submit,
.chat-composer button {
  font-weight: var(--font-weight-label) !important;
  letter-spacing: 0;
}

.project-table,
.lead-table,
.sales-order-table,
.permission-table,
.node-permission-table,
.user-permission-table,
.message-group-list,
.node-event-list,
.node-chat-list,
.node-approval-list {
  font-size: 13px;
  font-weight: var(--font-weight-normal);
}

.project-table th,
.lead-table th,
.sales-order-table th,
.permission-table th,
.node-permission-table th,
.user-permission-table th,
.project-table td,
.lead-table td,
.sales-order-table td,
.permission-table td,
.node-permission-table td,
.user-permission-table td {
  font-size: 13px;
  font-weight: var(--font-weight-normal);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.project-table th,
.lead-table th,
.sales-order-table th,
.permission-table th,
.node-permission-table th,
.user-permission-table th,
.section-title span,
.lead-form-grid label,
.user-form-preview span,
.node-panel-title span,
.desktop-kicker,
.metric-label,
.status-chip,
.permission-chip,
.permission-scope {
  font-weight: var(--font-weight-label) !important;
}

h1,
.permissions-head h1,
.sales-orders-head h1,
.leads-head h1,
.message-center-head h1,
.project-toolbar h1,
.desktop-hero h1,
.node-detail-title h1,
.headline h1 {
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: var(--font-weight-heading) !important;
  letter-spacing: 0;
}

.section-title h2,
.summary-panel h2,
.detail-panel h2,
.node-panel-title h2,
.permission-setting-card h3,
.desktop-module-card h3,
.chat-header h2,
.message-list-top strong,
.lead-entry-card h2,
.approval-panel h2 {
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: var(--font-weight-heading) !important;
  letter-spacing: 0;
}

.desktop-stats strong,
.lead-metrics strong,
.sales-order-metrics strong,
.message-metrics strong,
.permission-policy-metrics strong,
.node-detail-summary strong,
.dashboard-cards strong,
.module-card-foot strong,
.donut span,
.amount-cell,
.finance-value,
.risk-level,
.project-table td,
.lead-table td,
.sales-order-table td,
.permission-table td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.summary-panel dl,
.detail-panel dl,
.lead-form-grid input,
.lead-form-grid select,
.lead-form-grid textarea,
.user-form-preview input,
.user-form-preview select,
.chat-thread p,
.node-event-list p,
.node-chat-list p {
  font-size: 14px;
  font-weight: var(--font-weight-normal);
}

.brand-name,
.brand-subtitle {
  font-family: var(--font-ui);
  letter-spacing: 0;
}

.desktop-return-button,
.desktop-home-button,
.board-back-button,
.board-home-button,
.icon-button {
  font-size: 0;
}

/* Finance receivables module. */
.finance-content {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: max-content;
  gap: 16px;
  min-height: calc(100vh - 76px);
  padding: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.82), rgba(245, 248, 252, 0.96)),
    var(--app-bg);
}

.finance-layout,
.finance-layout .erp-main {
  min-width: 0;
  overflow-x: hidden;
}

.finance-layout {
  display: block;
  width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

.finance-layout .erp-sidebar {
  display: none;
}

.finance-layout .erp-main {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
}

.finance-layout .erp-topbar {
  border-bottom: 1px solid #f0d190;
}

.finance-head,
.finance-policy,
.finance-cashflow-panel,
.finance-module-panel,
.finance-workspace,
.finance-subpage-summary,
.finance-subpage-workspace,
.finance-bottom-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.06);
}

.finance-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 96px 18px 20px;
}

.finance-head h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
}

.finance-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.finance-head .desktop-home-button,
.finance-head .desktop-return-button {
  position: absolute;
  top: 18px;
}

.finance-head .desktop-home-button {
  right: 56px;
}

.finance-head .desktop-return-button {
  right: 18px;
}

.finance-policy {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(520px, 1.5fr);
  gap: 18px;
  padding: 18px;
}

.finance-policy h2,
.finance-cashflow-panel h2,
.finance-module-panel h2,
.finance-subpage-workspace h2,
.finance-table-panel h2,
.finance-side-panel h2,
.finance-bottom-grid h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.finance-policy p {
  margin: 8px 0;
  color: var(--text);
  line-height: 1.55;
}

.finance-policy strong {
  display: block;
  color: var(--orange-strong);
  font-weight: 600;
  line-height: 1.45;
}

.finance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-metrics article {
  min-height: 92px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff7e6);
}

.finance-metrics b,
.finance-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.finance-metrics strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-stage-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  min-height: 66px;
  margin-bottom: 8px;
}

.finance-stage-flow article {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.finance-stage-flow span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.finance-stage-flow strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.finance-stage-flow em {
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.finance-stage-flow .has-items {
  border-color: #f0bc55;
  background: #fff9ea;
}

.finance-stage-flow .has-items span {
  background: var(--orange);
  color: #fff;
}

.finance-cashflow-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.finance-cashflow-panel .section-title span {
  max-width: 820px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.finance-cashflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-cashflow-grid article {
  min-height: 118px;
  border: 1px solid #f0d190;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(145deg, #fffaf0, #fff);
}

.finance-cashflow-grid span,
.finance-cashflow-grid p {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.finance-cashflow-grid strong {
  display: block;
  margin: 8px 0;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-payable-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.finance-payable-list article {
  display: grid;
  gap: 7px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.finance-payable-list strong,
.finance-payable-list span,
.finance-payable-list b {
  display: block;
}

.finance-payable-list strong {
  color: var(--navy);
  font-weight: 600;
}

.finance-payable-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.finance-payable-list b {
  color: var(--orange-strong);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-module-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.finance-module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-module-button {
  min-height: 132px;
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid #d29205;
  border-radius: 12px;
  padding: 14px;
  color: var(--navy);
  background: linear-gradient(145deg, #fffaf0, #fff), linear-gradient(135deg, #ffcc39, #ff9f1f);
  box-shadow: 0 12px 24px rgba(210, 146, 5, 0.14), inset 0 -4px 0 rgba(134, 83, 0, 0.12);
  text-align: left;
  cursor: pointer;
}

.finance-module-button span,
.finance-module-button em {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.finance-module-button strong {
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

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

.finance-subpage-content {
  min-height: calc(100vh - 58px);
}

.finance-subpage-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.finance-subpage-summary article {
  min-height: 96px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff8ea);
}

.finance-subpage-summary b,
.finance-subpage-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.finance-subpage-summary strong {
  display: block;
  margin: 7px 0 3px;
  color: var(--navy);
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-subpage-workspace {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.finance-context-note {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  border: 1px solid #f2bd4d;
  border-radius: 10px;
  padding: 9px 12px;
  background: linear-gradient(135deg, #fff7df, #ffffff);
  color: #061b45;
  font-size: 13px;
  font-weight: 500;
}

.finance-context-note strong {
  flex: 0 0 auto;
  color: #b75f00;
  font-size: 12px;
  font-weight: 600;
}

.finance-context-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-subpage-table {
  min-width: 980px;
}

.finance-subpage-table tr.is-selected td {
  background: #fff4cf;
  box-shadow: inset 0 1px 0 #f2bd4d, inset 0 -1px 0 #f2bd4d;
}

.finance-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  margin-top: 2px;
  padding: 14px;
}

.finance-side-panel,
.finance-table-panel {
  min-width: 0;
}

.finance-side-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.finance-table-panel {
  display: grid;
  gap: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
}

.finance-pending-list {
  display: grid;
  gap: 10px;
}

.finance-pending-list article,
.finance-balance-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.finance-pending-list strong,
.finance-pending-list span,
.finance-pending-list em {
  display: block;
}

.finance-pending-list strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.finance-pending-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.finance-pending-list em {
  margin: 8px 0;
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.finance-balance-card {
  background: linear-gradient(135deg, #082750, #164b85);
  color: #fff;
}

.finance-balance-card span,
.finance-balance-card p {
  color: rgba(255, 255, 255, 0.78);
}

.finance-balance-card strong {
  display: block;
  margin: 6px 0;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.finance-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 150px 120px;
  gap: 10px;
}

.finance-command-row input,
.finance-command-row select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.finance-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.finance-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.finance-table th,
.finance-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.finance-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff7e6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.finance-progress {
  width: 78px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef5;
}

.finance-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.finance-table small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.finance-stage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.finance-stage-tag.deposit,
.finance-stage-tag.progress,
.finance-stage-tag.final {
  background: #fff3d6;
  color: #b76a00;
}

.finance-stage-tag.confirmed {
  background: #e9f8ef;
  color: var(--green);
}

.finance-stage-tag.overdue {
  background: #ffe8e8;
  color: var(--red);
}

.finance-stage-tag.locked {
  background: #eef1f5;
  color: var(--muted);
}

.finance-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.finance-mobile-secondary {
  display: none;
}

.finance-bottom-grid > div {
  padding: 16px;
}

.finance-permission-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.finance-permission-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.finance-permission-grid .is-owner {
  border-color: #f0bc55;
  background: #fff8e6;
}

.finance-permission-grid strong,
.finance-permission-grid span {
  display: block;
}

.finance-permission-grid strong {
  color: var(--navy);
  font-weight: 600;
}

.finance-permission-grid span,
.finance-rules-panel li {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.finance-rules-panel ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.operations-layout {
  width: 100vw;
  min-width: 1180px;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

.operations-layout .erp-sidebar {
  display: none;
}

.operations-layout .erp-main {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
}

.operations-content {
  width: 100%;
  max-width: 100vw;
}

.operations-layout .erp-topbar {
  border-bottom: 1px solid #f0d190;
}

.operations-head,
.operations-policy,
.operations-workspace,
.operations-vehicle-panel,
.operations-bottom-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.06);
}

.operations-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 96px 18px 20px;
}

.operations-head h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
}

.operations-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.operations-head .desktop-home-button,
.operations-head .desktop-return-button {
  position: absolute;
  top: 18px;
}

.operations-head .desktop-home-button {
  right: 56px;
}

.operations-head .desktop-return-button {
  right: 18px;
}

.operations-policy {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(520px, 1.5fr);
  gap: 18px;
  padding: 18px;
}

.operations-policy h2,
.operations-table-panel h2,
.operations-side-panel h2,
.operations-bottom-grid h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.operations-policy p {
  margin: 8px 0;
  color: var(--text);
  line-height: 1.55;
}

.operations-policy strong {
  display: block;
  color: var(--orange-strong);
  font-weight: 600;
  line-height: 1.45;
}

.operations-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.operations-metrics article {
  min-height: 92px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff7e6);
}

.operations-metrics b,
.operations-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.operations-metrics strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.operations-stage-flow {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  min-height: 66px;
  margin-bottom: 8px;
}

.operations-stage-flow article {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.operations-stage-flow span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.operations-stage-flow strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-stage-flow em {
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.operations-stage-flow .has-items {
  border-color: #f0bc55;
  background: #fff9ea;
}

.operations-stage-flow .has-items span {
  background: var(--orange);
  color: #fff;
}

.operations-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  margin-top: 2px;
  padding: 14px;
}

.operations-side-panel,
.operations-table-panel {
  min-width: 0;
}

.operations-side-panel,
.operations-table-panel {
  display: grid;
  align-content: start;
  gap: 12px;
}

.operations-issue-list {
  display: grid;
  gap: 10px;
}

.operations-issue-list article,
.operations-checklist {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.operations-issue-list article.is-blocked {
  border-color: #f4b0b0;
  background: #fff3f3;
}

.operations-issue-list strong,
.operations-issue-list span,
.operations-issue-list em,
.operations-checklist strong,
.operations-checklist span {
  display: block;
}

.operations-issue-list strong,
.operations-checklist strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.operations-issue-list span,
.operations-checklist span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.operations-issue-list em {
  margin: 8px 0;
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.operations-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 150px 120px;
  gap: 10px;
}

.operations-command-row input,
.operations-command-row select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.operations-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.operations-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.operations-table th,
.operations-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.operations-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff7e6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.operations-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.operations-stage-tag,
.operations-doc-tag,
.operations-risk-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.operations-stage-tag.setup,
.operations-stage-tag.material,
.operations-stage-tag.procurement {
  background: #fff3d6;
  color: #b76a00;
}

.operations-stage-tag.warehouse,
.operations-stage-tag.logistics {
  background: #e7f5ff;
  color: #126fe8;
}

.operations-stage-tag.install,
.operations-stage-tag.close {
  background: #e9f8ef;
  color: var(--green);
}

.operations-doc-tag.ready,
.operations-risk-tag.normal {
  background: #e9f8ef;
  color: var(--green);
}

.operations-doc-tag.missing,
.operations-risk-tag.blocked {
  background: #ffe8e8;
  color: var(--red);
}

.operations-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.operations-bottom-grid > div {
  padding: 16px;
}

.operations-permission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.operations-permission-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.operations-permission-grid .is-owner {
  border-color: #f0bc55;
  background: #fff8e6;
}

.operations-permission-grid strong,
.operations-permission-grid span {
  display: block;
}

.operations-permission-grid strong {
  color: var(--navy);
  font-weight: 600;
}

.operations-permission-grid span,
.operations-rules-panel li {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.operations-rules-panel ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.operations-vehicle-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.operations-vehicle-panel .section-title span {
  max-width: 760px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.operations-vehicle-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: stretch;
}

.operations-vehicle-entry-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.operations-vehicle-entry-metrics article {
  min-height: 88px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff8ea);
}

.operations-vehicle-entry-metrics b,
.operations-vehicle-entry-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.operations-vehicle-entry-metrics strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.operations-module-button {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 88px;
  border: 1px solid #d29205;
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #ffcc39, #ff9f1f);
  box-shadow: 0 12px 24px rgba(210, 146, 5, 0.2), inset 0 -4px 0 rgba(134, 83, 0, 0.18);
  color: var(--navy);
  text-align: left;
  cursor: pointer;
}

.operations-module-button span,
.operations-module-button em {
  display: block;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.operations-module-button strong {
  display: block;
  font-size: 20px;
  font-weight: 600;
}

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

.operations-vehicle-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.operations-vehicle-metrics article {
  min-height: 82px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff8ea);
}

.operations-vehicle-metrics b,
.operations-vehicle-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.operations-vehicle-metrics strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

.operations-vehicle-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.operations-vehicle-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: 13px;
}

.operations-vehicle-table th,
.operations-vehicle-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  text-align: left;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.operations-vehicle-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff7e6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.operations-vehicle-table td strong {
  color: var(--navy);
  font-weight: 600;
}

.operations-vehicle-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
}

.operations-vehicle-status.running {
  background: #e7f1ff;
  color: #1667d9;
}

.operations-vehicle-status.standby {
  background: #eef3f8;
  color: var(--muted);
}

.operations-vehicle-status.service {
  background: #fff1d8;
  color: #c96a00;
}

.operations-vehicle-status.offline {
  background: #ffe8e8;
  color: #d64545;
}

.operations-vehicle-rules {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #fbfdff;
}

.operations-vehicle-rules h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

.operations-vehicle-rules ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.operations-vehicle-rules li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.procurement-layout {
  width: 100vw;
  min-width: 1180px;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

.procurement-layout .erp-sidebar {
  display: none;
}

.procurement-layout .erp-main {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
}

.procurement-content {
  width: 100%;
  max-width: 100vw;
}

.procurement-layout .erp-topbar {
  border-bottom: 1px solid #f0d190;
}

.procurement-head,
.procurement-policy,
.procurement-source-grid article,
.procurement-workspace,
.procurement-bottom-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.06);
}

.procurement-head {
  position: relative;
  padding: 18px 96px 18px 20px;
}

.procurement-head h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
}

.procurement-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.procurement-head .desktop-home-button,
.procurement-head .desktop-return-button {
  position: absolute;
  top: 18px;
}

.procurement-head .desktop-home-button {
  right: 56px;
}

.procurement-head .desktop-return-button {
  right: 18px;
}

.procurement-policy {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(520px, 1.5fr);
  gap: 18px;
  padding: 18px;
}

.procurement-policy h2,
.procurement-table-panel h2,
.procurement-side-panel h2,
.procurement-bottom-grid h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.procurement-policy p {
  margin: 8px 0;
  line-height: 1.55;
}

.procurement-policy strong {
  display: block;
  color: var(--orange-strong);
  font-weight: 600;
  line-height: 1.45;
}

.procurement-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.procurement-metrics article,
.procurement-source-grid article {
  min-height: 88px;
  border-color: #f3d79f;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff7e6);
}

.procurement-metrics b,
.procurement-metrics span,
.procurement-source-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.procurement-metrics strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.procurement-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.procurement-source-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

.procurement-stage-flow {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  min-height: 66px;
}

.procurement-stage-flow article {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.procurement-stage-flow span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

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

.procurement-stage-flow em {
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.procurement-stage-flow .has-items {
  border-color: #f0bc55;
  background: #fff9ea;
}

.procurement-stage-flow .has-items span {
  background: var(--orange);
  color: #fff;
}

.procurement-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}

.procurement-side-panel,
.procurement-table-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.procurement-issue-list {
  display: grid;
  gap: 10px;
}

.procurement-issue-list article,
.procurement-cost-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.procurement-issue-list strong,
.procurement-issue-list span,
.procurement-issue-list em,
.procurement-cost-card span,
.procurement-cost-card strong,
.procurement-cost-card p {
  display: block;
}

.procurement-issue-list strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.procurement-issue-list span,
.procurement-cost-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.procurement-issue-list em {
  margin: 8px 0;
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.procurement-cost-card {
  background: linear-gradient(135deg, #082750, #164b85);
  color: #fff;
}

.procurement-cost-card span,
.procurement-cost-card p {
  color: rgba(255, 255, 255, 0.78);
}

.procurement-cost-card strong {
  margin: 6px 0;
  font-size: 24px;
  font-weight: 600;
}

.procurement-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 150px 120px;
  gap: 10px;
}

.procurement-command-row input,
.procurement-command-row select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.procurement-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.procurement-table {
  width: 100%;
  min-width: 1220px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.procurement-table th,
.procurement-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.procurement-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff7e6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.procurement-source-tag,
.procurement-stage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}

.procurement-source-tag.china {
  background: #fff3d6;
  color: #b76a00;
}

.procurement-source-tag.local {
  background: #e7f5ff;
  color: #126fe8;
}

.procurement-stage-tag {
  background: #edf4ff;
  color: var(--blue);
}

.procurement-stage-tag.payment,
.procurement-stage-tag.shipping {
  background: #fff3d6;
  color: #b76a00;
}

.procurement-stage-tag.received,
.procurement-stage-tag.closed {
  background: #e9f8ef;
  color: var(--green);
}

.procurement-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.procurement-bottom-grid > div {
  padding: 16px;
}

.procurement-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.procurement-permission-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.procurement-permission-grid .is-owner {
  border-color: #f0bc55;
  background: #fff8e6;
}

.procurement-permission-grid strong,
.procurement-permission-grid span {
  display: block;
}

.procurement-permission-grid strong {
  color: var(--navy);
  font-weight: 600;
}

.procurement-permission-grid span,
.procurement-rules-panel li {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.procurement-rules-panel ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.design-layout {
  width: 100vw;
  min-width: 1180px;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

.design-layout .erp-sidebar {
  display: none;
}

.design-layout .erp-main {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
}

.design-content {
  width: 100%;
  max-width: 100vw;
}

.design-layout .erp-topbar {
  border-bottom: 1px solid #f0d190;
}

.design-head,
.design-policy,
.design-product-strip article,
.design-workspace,
.design-bottom-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.06);
}

.design-head {
  position: relative;
  padding: 18px 96px 18px 20px;
}

.design-head h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
}

.design-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.design-head .desktop-home-button,
.design-head .desktop-return-button {
  position: absolute;
  top: 18px;
}

.design-head .desktop-home-button {
  right: 56px;
}

.design-head .desktop-return-button {
  right: 18px;
}

.design-policy {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.5fr);
  gap: 18px;
  padding: 18px;
}

.design-policy h2,
.design-main-panel h2,
.design-side-panel h2,
.design-bottom-grid h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.design-policy p {
  margin: 8px 0;
  line-height: 1.55;
}

.design-policy strong {
  display: block;
  color: var(--orange-strong);
  font-weight: 600;
  line-height: 1.45;
}

.design-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.design-metrics article {
  min-height: 88px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff7e6);
}

.design-metrics b,
.design-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.design-metrics strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
}

.design-product-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.design-product-strip article {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
}

.design-product-strip span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange), var(--service));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.design-product-strip strong {
  color: var(--navy);
  font-weight: 600;
}

.design-workspace {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
}

.design-side-panel,
.design-main-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.design-task-list {
  display: grid;
  gap: 10px;
}

.design-task-list article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.design-task-list strong,
.design-task-list span,
.design-task-list em {
  display: block;
}

.design-task-list strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.design-task-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.design-task-list em {
  margin: 8px 0;
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.design-config-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.design-config-grid label {
  display: grid;
  gap: 6px;
}

.design-config-grid label.wide {
  grid-column: 1 / -1;
}

.design-config-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.design-config-grid input,
.design-config-grid select,
.design-config-grid textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.design-config-grid textarea {
  min-height: 64px;
  padding: 10px 12px;
  resize: vertical;
}

.design-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.design-preview-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fffaf0);
}

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

.design-preview-toolbar strong {
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.design-preview-toolbar span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.design-canvas {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  border: 1px dashed #e2c278;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(23, 43, 73, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(23, 43, 73, 0.05) 1px, transparent 1px),
    #fbfdff;
  background-size: 24px 24px;
}

.design-frame {
  position: relative;
  width: min(72%, 520px);
  height: 190px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 10px solid #172b49;
  background: rgba(126, 190, 255, 0.16);
}

.design-canvas[data-preview-color="white"] .design-frame { border-color: #f5f5f0; box-shadow: inset 0 0 0 1px #cbd5e1; }
.design-canvas[data-preview-color="champagne"] .design-frame { border-color: #c79a45; }
.design-canvas[data-preview-color="grey"] .design-frame { border-color: #4b5563; }
.design-canvas[data-preview-color="wood"] .design-frame { border-color: #8a5a2b; }

.design-panel {
  position: relative;
  border-left: 4px solid currentColor;
  color: inherit;
}

.design-panel:first-child {
  border-left: 0;
}

.design-panel span {
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(23, 43, 73, 0.36);
}

.design-opening-mark {
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff3d6;
  color: #b76a00;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.design-canvas[data-preview-product-key="casementWindow"] .design-panel:first-child::after,
.design-canvas[data-preview-product-key="swingDoor"] .design-panel:first-child::after,
.design-canvas[data-preview-product-key="courtyardGate"] .design-panel:first-child::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-left: 2px solid rgba(23, 43, 73, 0.55);
  border-bottom: 2px solid rgba(23, 43, 73, 0.55);
  transform: skewY(-22deg);
}

.design-canvas[data-preview-product-key="foldingDoor"] .design-frame {
  grid-template-columns: repeat(4, 1fr);
}

.design-canvas[data-preview-product-key="glassRailing"] .design-frame {
  height: 132px;
  grid-template-columns: repeat(4, 1fr);
  border-width: 6px 4px 12px;
}

.design-canvas[data-preview-product-key="showerRoom"] .design-frame {
  width: min(56%, 380px);
  height: 220px;
  border-width: 8px;
  border-radius: 4px 4px 20px 4px;
}

.design-canvas[data-preview-product-key="fixedWindow"] .design-opening-mark {
  background: #eef3f8;
  color: var(--muted);
}

.design-dim {
  position: absolute;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.design-dim.width {
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.design-dim.height {
  top: 50%;
  right: 18px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
}

.design-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.design-spec-grid article {
  border: 1px solid #f0d190;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.design-spec-grid b,
.design-spec-grid span {
  display: block;
}

.design-spec-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.design-spec-grid span {
  margin-top: 4px;
  color: var(--navy);
  font-weight: 600;
}

.design-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.design-bottom-grid > div {
  padding: 16px;
}

.design-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.design-permission-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.design-permission-grid .is-owner {
  border-color: #f0bc55;
  background: #fff8e6;
}

.design-permission-grid strong,
.design-permission-grid span {
  display: block;
}

.design-permission-grid strong {
  color: var(--navy);
  font-weight: 600;
}

.design-permission-grid span,
.design-rules-panel li {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.design-rules-panel ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.production-layout {
  width: 100vw;
  min-width: 1180px;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

.production-layout .erp-sidebar {
  display: none;
}

.production-layout .erp-main {
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
}

.production-content {
  width: 100%;
  max-width: 100vw;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: auto;
}

.production-layout .erp-topbar {
  border-bottom: 1px solid #f0d190;
}

.production-head,
.production-policy,
.production-workspace,
.production-bottom-grid > div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 35, 65, 0.06);
}

.production-head {
  position: relative;
  padding: 18px 96px 18px 20px;
}

.production-head h1 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
}

.production-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.production-head .desktop-home-button,
.production-head .desktop-return-button {
  position: absolute;
  top: 18px;
}

.production-head .desktop-home-button {
  right: 56px;
}

.production-head .desktop-return-button {
  right: 18px;
}

.production-policy {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 1.5fr);
  gap: 18px;
  padding: 18px;
}

.production-policy h2,
.production-table-panel h2,
.production-side-panel h2,
.production-bottom-grid h2 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.production-policy p {
  margin: 8px 0;
  line-height: 1.55;
}

.production-policy strong {
  display: block;
  color: var(--orange-strong);
  font-weight: 600;
  line-height: 1.45;
}

.production-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.production-metrics article {
  min-height: 88px;
  border: 1px solid #f3d79f;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(145deg, #fff, #fff7e6);
}

.production-metrics b,
.production-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.production-metrics strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--navy);
  font-size: 22px;
  font-weight: 600;
}

.production-stage-flow {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
  min-height: 66px;
}

.production-stage-flow article {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.production-stage-flow span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #eef3f8;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

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

.production-stage-flow em {
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.production-stage-flow .has-items {
  border-color: #f0bc55;
  background: #fff9ea;
}

.production-stage-flow .has-items span {
  background: var(--orange);
  color: #fff;
}

.production-workspace {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  min-height: 0;
  overflow: hidden;
}

.production-side-panel,
.production-table-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.production-side-panel {
  overflow: auto;
}

.production-table-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.production-issue-list {
  display: grid;
  gap: 10px;
}

.production-issue-list article,
.production-photo-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.production-issue-list strong,
.production-issue-list span,
.production-issue-list em,
.production-photo-card span,
.production-photo-card strong,
.production-photo-card p {
  display: block;
}

.production-issue-list strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.production-issue-list span,
.production-photo-card p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.production-issue-list em {
  margin: 8px 0;
  color: var(--orange-strong);
  font-style: normal;
  font-weight: 600;
}

.production-photo-card {
  background: linear-gradient(135deg, #082750, #164b85);
  color: #fff;
}

.production-photo-card span,
.production-photo-card p {
  color: rgba(255, 255, 255, 0.78);
}

.production-photo-card strong {
  margin: 6px 0;
  font-size: 24px;
  font-weight: 600;
}

.production-command-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 150px 126px;
  gap: 10px;
}

.production-command-row input,
.production-command-row select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
}

.production-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.production-table {
  width: 100%;
  min-width: 1280px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.production-table th,
.production-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 9px;
  color: var(--text);
  text-align: left;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.production-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff7e6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.production-progress {
  width: 84px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef5;
}

.production-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.production-table small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.production-stage-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  background: #edf4ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
}

.production-stage-tag.drawing,
.production-stage-tag.cutting,
.production-stage-tag.machining,
.production-stage-tag.request,
.production-stage-tag.quote,
.production-stage-tag.assigned,
.production-stage-tag.siteReady {
  background: #fff3d6;
  color: #b76a00;
}

.production-stage-tag.qc,
.production-stage-tag.issue {
  background: #f1ebff;
  color: #7450c4;
}

.production-stage-tag.installing {
  background: #eaf2ff;
  color: var(--blue);
}

.production-stage-tag.released,
.production-stage-tag.accepted,
.production-stage-tag.paid,
.production-stage-tag.closed {
  background: #e9f8ef;
  color: var(--green);
}

.production-bottom-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

.production-bottom-grid > div {
  padding: 16px;
}

.production-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.production-permission-grid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fbfdff;
}

.production-permission-grid .is-owner {
  border-color: #f0bc55;
  background: #fff8e6;
}

.production-permission-grid strong,
.production-permission-grid span {
  display: block;
}

.production-permission-grid strong {
  color: var(--navy);
  font-weight: 600;
}

.production-permission-grid span,
.production-rules-panel li {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.production-rules-panel ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 20px;
}

.outsourced-install-layout .production-content {
  grid-template-rows: auto auto auto auto auto;
}

.outsourced-install-layout .production-workspace {
  overflow: visible;
}

.outsourced-install-layout .production-side-panel {
  overflow: visible;
}

.outsourced-install-layout .production-table-panel {
  grid-template-rows: auto auto auto;
}

.outsourced-install-layout .production-table-wrap {
  min-height: 360px;
}

.outsourced-module-dock {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.outsourced-module-dock button {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 8px;
  border: 1px solid #f0d190;
  border-radius: 10px;
  padding: 10px;
  text-align: left;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 35, 65, 0.05);
  cursor: pointer;
}

.outsourced-module-dock button.active,
.outsourced-module-dock button:hover {
  border-color: #ffb31a;
  background: #fff8e8;
}

.outsourced-module-dock b {
  width: 32px;
  height: 32px;
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 8px;
  color: #172b49;
  background: linear-gradient(180deg, #ffd24f, var(--service));
  font-size: 11px;
  font-weight: 700;
}

.outsourced-module-dock strong,
.outsourced-module-dock span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outsourced-module-dock strong {
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}

.outsourced-module-dock span {
  color: var(--muted);
  font-size: 11px;
}

.outsourced-module-dock em {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--navy);
  font-style: normal;
  font-weight: 600;
}

.outsourced-sub-content {
  min-height: calc(100vh - 58px);
  grid-template-rows: auto auto minmax(0, 1fr);
}

.outsourced-sub-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
  overflow: hidden;
}

.outsourced-sub-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  overflow: auto;
  background: #fff;
}

.outsourced-sub-panel.wide {
  overflow: hidden;
}

.outsourced-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: auto;
}

.outsourced-card-grid article {
  min-height: 126px;
  display: grid;
  gap: 6px;
  border: 1px solid #f0d190;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.outsourced-card-grid strong,
.outsourced-card-grid span,
.outsourced-card-grid b,
.outsourced-card-grid em {
  display: block;
}

.outsourced-card-grid strong {
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}

.outsourced-card-grid span,
.outsourced-card-grid em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.outsourced-card-grid b {
  color: var(--orange-strong);
  font-weight: 600;
}

.outsourced-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.outsourced-permission-list {
  grid-template-columns: 1fr;
}

@media (max-width: 980px) {
  .production-layout {
    min-width: 0;
  }

  .production-policy,
  .production-workspace,
  .production-bottom-grid {
    grid-template-columns: 1fr;
  }

  .production-metrics,
  .production-stage-flow,
  .production-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .design-layout {
    min-width: 0;
  }

  .design-policy,
  .design-workspace,
  .design-bottom-grid {
    grid-template-columns: 1fr;
  }

  .design-metrics,
  .design-product-strip,
  .design-config-grid,
  .design-spec-grid,
  .design-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .procurement-layout {
    min-width: 0;
  }

  .procurement-policy,
  .procurement-source-grid,
  .procurement-workspace,
  .procurement-bottom-grid {
    grid-template-columns: 1fr;
  }

  .procurement-metrics,
  .procurement-stage-flow,
  .procurement-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .operations-layout {
    min-width: 0;
  }

  .operations-policy,
  .operations-workspace,
  .operations-vehicle-entry,
  .operations-vehicle-layout,
  .operations-bottom-grid {
    grid-template-columns: 1fr;
  }

  .operations-metrics,
  .operations-stage-flow,
  .operations-vehicle-entry-metrics,
  .operations-vehicle-metrics,
  .operations-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-vehicle-panel {
    padding: 14px;
  }

  .operations-vehicle-table {
    min-width: 940px;
  }
}

@media (max-width: 980px) {
  .finance-policy,
  .finance-cashflow-panel,
  .finance-module-grid,
  .finance-workspace,
  .finance-subpage-summary,
  .finance-bottom-grid {
    grid-template-columns: 1fr;
  }

  .finance-metrics,
  .finance-stage-flow,
  .finance-cashflow-grid,
  .finance-payable-list,
  .finance-module-grid,
  .finance-permission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .cctv-overview,
  .cctv-location-grid,
  .cctv-workspace {
    grid-template-columns: 1fr;
  }

  .cctv-command-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cctv-layout {
    width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .cctv-layout .erp-sidebar {
    display: none;
  }

  .cctv-layout .erp-main,
  .cctv-layout .erp-content {
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .message-cctv-head-button {
    top: 12px;
    right: 94px;
    min-width: 48px;
    min-height: 32px;
    font-size: 10px;
  }

  .cctv-content {
    height: auto;
    min-height: calc(100svh - 58px);
    display: grid;
    gap: 10px;
    padding: 10px;
    overflow: auto;
  }

  .cctv-head {
    min-height: 82px;
    padding-right: 146px;
  }

  .cctv-overview,
  .cctv-location-grid,
  .cctv-workspace,
  .cctv-rule-panel {
    padding: 12px;
    border-radius: 10px;
  }

  .cctv-overview {
    grid-template-columns: 1fr;
  }

  .cctv-location-grid {
    grid-template-columns: 1fr;
  }

  .cctv-table {
    min-width: 780px;
  }

  .cctv-table-wrap {
    max-width: 100%;
  }

  .finance-layout .erp-main {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .finance-layout .erp-topbar {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 10px !important;
    overflow-x: hidden !important;
  }

  .finance-layout .topbar-left {
    min-width: 0;
    overflow: hidden;
  }

  .finance-layout .topbar-right {
    min-width: 0;
    gap: 6px;
  }

  .finance-layout .topbar-right .icon-button,
  .finance-layout .topbar-right .avatar,
  .finance-layout .topbar-right > strong {
    display: none;
  }

  .finance-layout .topbar-right .select-control {
    width: 104px;
    min-width: 104px;
  }

  .finance-layout .topbar,
  .finance-layout .erp-topbar {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .finance-content {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    gap: 10px;
    padding: 10px;
    overflow-x: hidden;
  }

  .finance-head,
  .finance-policy,
  .finance-cashflow-panel,
  .finance-module-panel,
  .finance-subpage-summary,
  .finance-subpage-workspace,
  .finance-workspace,
  .finance-mobile-secondary {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .finance-head {
    min-height: 92px;
    padding: 14px 98px 14px 14px;
  }

  .finance-head h1 {
    font-size: 24px;
  }

  .finance-head p {
    font-size: 13px;
  }

  .finance-head .desktop-home-button,
  .finance-head .desktop-return-button {
    position: absolute !important;
    top: 14px !important;
    z-index: 30;
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
  }

  .finance-head .desktop-home-button {
    right: 46px !important;
  }

  .finance-head .desktop-return-button {
    right: 8px !important;
  }

  .finance-policy,
  .finance-cashflow-panel,
  .finance-module-panel,
  .finance-subpage-summary,
  .finance-subpage-workspace,
  .finance-workspace,
  .finance-bottom-grid > div {
    padding: 12px;
    border-radius: 10px;
  }

  .finance-policy {
    display: block;
  }

  .finance-policy > div:first-child,
  .finance-bottom-grid {
    display: none;
  }

  .finance-mobile-secondary {
    display: block;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .finance-mobile-secondary summary {
    min-height: 46px;
    padding: 0 14px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 46px;
    cursor: pointer;
  }

  .finance-secondary-body {
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding: 12px;
  }

  .finance-secondary-body h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 600;
  }

  .finance-secondary-body p,
  .finance-secondary-body strong,
  .finance-secondary-body li {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
  }

  .finance-secondary-body strong {
    display: block;
    color: var(--orange-strong);
  }

  .finance-secondary-body ol {
    margin: 0;
    padding-left: 18px;
  }

  .finance-metrics {
    grid-template-columns: 1fr;
  }

  .finance-metrics article {
    min-height: 80px;
    padding: 10px;
  }

  .finance-metrics strong {
    font-size: 20px;
  }

  .finance-stage-flow {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: auto;
  }

  .finance-stage-flow article {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 78px;
  }

  .finance-cashflow-grid,
  .finance-payable-list {
    grid-template-columns: 1fr;
  }

  .finance-module-grid,
  .finance-subpage-summary {
    grid-template-columns: 1fr;
  }

  .finance-module-button {
    min-height: 106px;
  }

  .finance-cashflow-grid article {
    min-height: 98px;
  }

  .finance-workspace {
    gap: 12px;
  }

  .finance-command-row {
    grid-template-columns: 1fr;
  }

  .finance-command-row input,
  .finance-command-row .primary-row-action {
    grid-column: 1;
  }

  .finance-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
    background: transparent;
  }

  .finance-table thead {
    display: none;
  }

  .finance-table tbody,
  .finance-table tr,
  .finance-table td {
    display: block;
    width: 100%;
  }

  .finance-table tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }

  .finance-table td {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    border: 0;
    padding: 6px 0;
    font-size: 13px;
  }

  .finance-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 500;
  }

  .finance-table td:last-child {
    grid-template-columns: 1fr 1fr;
  }

  .finance-table td:last-child::before {
    display: none;
  }

  .finance-progress {
    width: 100%;
  }

  .finance-permission-grid {
    grid-template-columns: 1fr;
  }
}

/* Workbench brand image. */
.desktop-hero-logo {
  width: min(520px, 52vw);
  max-width: 100%;
  margin: 10px 0 6px;
}

.desktop-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.desktop-workbench-layout .desktop-content {
  grid-template-rows: 148px 74px minmax(0, 1fr);
}

.desktop-workbench-layout .desktop-hero h1 {
  margin: 2px 0 4px;
  font-size: 18px;
}

@media (max-width: 720px) {
  .desktop-hero-logo {
    width: min(234px, 60vw);
    margin: 8px 0 6px;
  }

  .desktop-workbench-layout .desktop-hero h1 {
    display: none;
  }

  .desktop-workbench-layout .desktop-hero > div:first-child > p {
    display: none;
  }
}

/* Marketing leads redesign based on mobile acquisition form reference. */
.lead-entry-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.lead-entry-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lead-entry-title > span {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1f6fff, #0b56f0);
}

.lead-entry-title svg,
.lead-quick-button svg,
.lead-control > svg,
.lead-clear-button svg,
.lead-submit svg,
.lead-metrics article > span svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.lead-entry-title h2 {
  margin: 0;
}

.lead-entry-title p {
  margin: 6px 0 0;
  color: #586a84;
  font-size: 14px;
  font-weight: 500;
}

.lead-quick-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid #1f6fff;
  border-radius: 8px;
  color: #1f6fff;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}

.lead-form-grid .lead-field {
  min-height: 62px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #edf1f6;
  color: #061b45;
  font-size: 15px;
  font-weight: 600 !important;
}

.lead-field-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.lead-field.is-required .lead-field-label::after {
  content: "*";
  margin-left: 7px;
  color: #df1f2d;
  font-weight: 600;
}

.lead-control {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(15, 35, 70, 0.04);
}

.lead-control > svg {
  color: #3f4e6b;
}

.lead-control select,
.lead-control input,
.lead-control textarea {
  min-height: 46px;
  width: 100%;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: #061b45;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
}

.lead-control-unit {
  grid-template-columns: 28px minmax(0, 1fr) 52px;
  padding-right: 0;
  overflow: hidden;
}

.lead-control-unit em {
  align-self: stretch;
  display: grid;
  place-items: center;
  color: #061b45;
  background: #f6f8fb;
  font-style: normal;
  font-weight: 600;
}

.lead-file-control {
  grid-template-columns: 28px auto minmax(0, 1fr);
}

.lead-file-control input {
  min-height: 32px;
  color: #1f6fff;
  font-size: 13px;
}

.lead-file-control small {
  color: #6a7890;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.lead-textarea-control {
  min-height: 116px;
  display: block;
  padding: 14px 18px;
}

.lead-textarea-control textarea {
  min-height: 76px;
  line-height: 1.55;
  resize: vertical;
}

.lead-textarea-control small {
  display: block;
  text-align: right;
  color: #6a7890;
  font-size: 13px;
  font-weight: 600;
}

.lead-form-actions {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}

.lead-clear-button,
.lead-submit {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600 !important;
}

.lead-clear-button {
  border: 1px solid #dfe6ef;
  color: #5f6b7e;
  background: #f8fafc;
}

.lead-submit {
  margin-top: 0;
  color: #fff !important;
  border-color: #155df7 !important;
  background: linear-gradient(135deg, #1f7aff, #0757f6) !important;
  box-shadow: 0 12px 28px rgba(31, 111, 255, 0.22) !important;
}

.lead-submit svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 720px) {
  .lead-page-layout {
    background: #fff;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .lead-page-layout .erp-main {
    background: #fff;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .lead-page-layout .erp-topbar {
    min-height: 120px;
    align-items: center;
    padding: 22px 26px 20px;
    color: #fff;
    border-bottom: 0;
    background: linear-gradient(135deg, #072c5e, #001b43);
  }

  .lead-page-layout .erp-topbar .hamburger,
  .lead-page-layout .erp-topbar .topbar-profile,
  .lead-page-layout .erp-topbar .language-select {
    color: #fff;
  }

  .lead-page-layout .erp-topbar .language-select {
    min-height: 44px;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.08);
  }

  .lead-page-layout .erp-topbar .topbar-tools {
    gap: 10px;
  }

  .lead-page-layout .erp-topbar .topbar-search,
  .lead-page-layout .erp-topbar .topbar-bell,
  .lead-page-layout .erp-topbar .user-avatar {
    display: none;
  }

  .lead-page-layout .desktop-home-button,
  .lead-page-layout .desktop-return-button {
    position: fixed !important;
    top: 78px;
    width: 42px;
    height: 42px;
  }

  .lead-page-layout .desktop-home-button {
    right: 70px;
  }

  .lead-page-layout .desktop-return-button {
    right: 22px;
  }

  .lead-page-layout .desktop-home-button .home-icon,
  .lead-page-layout .desktop-return-button .return-icon {
    width: 42px;
    height: 42px;
  }

  .leads-content {
    padding: 28px 24px 32px;
    background: #fff !important;
  }

  .leads-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }

  .leads-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  .leads-head h1 {
    color: #061b45;
    font-size: 28px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .leads-head p {
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    color: #4e6079;
    background: #eef2f7;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
  }

  .leads-head-actions {
    display: flex;
    justify-content: flex-end;
  }

  .role-switcher {
    gap: 10px;
  }

  .role-switcher span {
    color: #4e6079;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }

  .role-switcher select {
    min-width: 126px;
    min-height: 48px;
    padding: 0 18px;
    border-color: #e1e7ef;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 35, 70, 0.08);
    color: #061b45;
    font-size: 15px;
    font-weight: 600;
  }

  .lead-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 20px;
    overflow: visible;
  }

  .lead-metrics article {
    position: relative;
    min-height: 132px;
    flex: initial;
    display: grid;
    align-content: start;
    gap: 7px;
    padding: 18px 18px 16px 72px;
    border: 1px solid #e3e9f1;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 35, 70, 0.08);
  }

  .lead-metrics article > span {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
  }

  .lead-metrics .metric-trend > span {
    color: #1f6fff;
    background: #eaf0ff;
  }

  .lead-metrics .metric-pending > span {
    color: #00a95b;
    background: #e7f8ed;
  }

  .lead-metrics .metric-project > span {
    color: #f58220;
    background: #fff1df;
  }

  .lead-metrics .metric-assigned > span {
    color: #8d4cff;
    background: #f1e8ff;
  }

  .lead-metrics b {
    color: #40516e;
    font-size: 15px;
    font-weight: 500;
  }

  .lead-metrics strong {
    margin: 0;
    color: #061b45;
    font-size: 30px;
    line-height: 1;
    font-weight: 600;
  }

  .lead-metrics em {
    color: #005cff;
    font-size: 14px;
    font-weight: 600;
  }

  .metric-pending em {
    color: #00a95b;
  }

  .metric-project em {
    color: #f06a00;
  }

  .metric-assigned em {
    color: #7b2cff;
  }

  .lead-workspace {
    display: block;
  }

  .lead-entry-card {
    padding: 30px 28px 22px;
    border: 1px solid #e3e9f1 !important;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 35, 70, 0.08);
  }

  .lead-entry-head {
    margin-bottom: 26px;
  }

  .lead-entry-title h2 {
    color: #061b45;
    font-size: 28px !important;
    line-height: 1.1;
  }

  .lead-entry-title p {
    max-width: 460px;
    font-size: 14px;
    line-height: 1.45;
  }

  .lead-quick-button {
    min-width: 140px;
    margin-top: 2px;
    color: #1f6fff;
    background: #fff;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lead-form-grid .lead-field {
    grid-template-columns: 172px minmax(0, 1fr);
    min-height: 74px;
    gap: 22px;
    font-size: 17px;
  }

  .lead-control {
    min-height: 64px;
    grid-template-columns: 28px minmax(0, 1fr);
    border-radius: 9px;
  }

  .lead-control select,
  .lead-control input {
    min-height: 62px;
    font-size: 17px;
  }

  .lead-control > svg {
    width: 24px;
    height: 24px;
  }

  .lead-control-unit {
    grid-template-columns: 28px minmax(0, 1fr) 62px;
  }

  .lead-file-control {
    min-height: 64px;
    grid-template-columns: 28px auto minmax(0, 1fr);
  }

  .lead-file-control input {
    min-height: 36px;
    font-size: 14px;
  }

  .lead-file-control small {
    font-size: 13px;
  }

  .lead-textarea-control {
    min-height: 132px;
    padding: 16px 18px;
  }

  .lead-textarea-control textarea {
    min-height: 88px;
    font-size: 16px;
  }

  .lead-form-actions {
    grid-template-columns: 192px minmax(0, 1fr);
    gap: 18px;
    margin-top: 22px;
  }

  .lead-clear-button,
  .lead-submit {
    min-height: 64px;
    font-size: 18px;
  }
}

@media (min-width: 521px) and (max-width: 760px) {
  .lead-page-layout .erp-topbar {
    min-height: 120px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: linear-gradient(135deg, #072c5e, #001b43);
  }

  .lead-page-layout .topbar-left {
    min-width: 0;
    gap: 12px;
  }

  .lead-page-layout .topbar-left .icon-button {
    color: #fff;
    font-size: 26px;
  }

  .lead-page-layout .topbar-left > span {
    display: none;
  }

  .lead-page-layout .topbar-left strong {
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
  }

  .lead-page-layout .lead-topbar .lead-topbar-actions {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .lead-page-layout .lead-topbar .topbar-right .select-control {
    position: static;
    width: 104px;
    min-width: 104px !important;
    max-width: 104px;
    min-height: 42px;
    color: #061b45;
    background: #fff;
  }

  .lead-page-layout .lead-topbar .desktop-home-button,
  .lead-page-layout .lead-topbar .desktop-return-button {
    position: static !important;
    width: 42px;
    height: 42px;
    display: grid !important;
    place-items: center;
  }

  .lead-page-layout .lead-topbar .desktop-home-button .home-icon,
  .lead-page-layout .lead-topbar .desktop-return-button .return-icon {
    width: 42px;
    height: 42px;
  }

  .leads-content {
    display: block;
    padding: 32px 24px 36px;
    overflow-x: hidden;
  }

  .leads-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
  }

  .leads-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .leads-head h1 {
    font-size: 28px;
    white-space: nowrap;
  }

  .leads-head p {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2f7;
    white-space: nowrap;
  }

  .leads-head-actions {
    min-width: 0;
  }

  .role-switcher {
    gap: 8px;
  }

  .role-switcher span {
    white-space: nowrap;
  }

  .role-switcher select {
    min-width: 126px;
    min-height: 48px;
  }

  .lead-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 26px;
    overflow: visible;
  }

  .lead-metrics article {
    min-height: 112px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon number"
      "icon sub";
    align-content: center;
    gap: 4px 12px;
    padding: 16px 18px;
  }

  .lead-metrics article > span {
    grid-area: icon;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
  }

  .lead-metrics b {
    grid-area: label;
    font-size: 14px;
    white-space: normal;
    writing-mode: horizontal-tb;
  }

  .lead-metrics strong {
    grid-area: number;
    margin: 0;
    font-size: 28px;
    line-height: 1;
  }

  .lead-metrics em {
    grid-area: sub;
    font-size: 13px;
    writing-mode: horizontal-tb;
  }

  .lead-entry-card {
    padding: 28px 28px 22px;
  }

  .lead-entry-head {
    align-items: flex-start;
  }

  .lead-entry-title h2 {
    font-size: 28px !important;
  }

  .lead-form-grid {
    grid-template-columns: 1fr;
  }

  .lead-form-grid .lead-field {
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 72px;
    gap: 18px;
  }

  .lead-control {
    min-width: 0;
    min-height: 62px;
  }

  .lead-control select,
  .lead-control input {
    min-width: 0;
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .lead-page-layout .erp-topbar {
    min-height: 88px;
    display: flex;
    justify-content: space-between;
    padding: 12px 18px;
  }

  .lead-page-layout .topbar-left {
    min-width: 0;
    gap: 12px;
  }

  .lead-page-layout .topbar-left .icon-button {
    width: 34px;
    height: 34px;
    color: #fff;
    font-size: 28px;
    line-height: 1;
  }

  .lead-page-layout .topbar-left > span {
    display: none;
  }

  .lead-page-layout .topbar-left strong {
    color: #fff;
    font-size: 15px;
    white-space: nowrap;
  }

  .lead-page-layout .topbar-right {
    min-width: 0;
    margin-right: 80px;
  }

  .lead-page-layout .topbar-right .icon-button,
  .lead-page-layout .topbar-right .notification,
  .lead-page-layout .topbar-right .avatar,
  .lead-page-layout .topbar-right > strong {
    display: none;
  }

  .lead-page-layout .topbar-right .select-control {
    width: 90px;
    min-width: 90px !important;
    max-width: 90px;
    min-height: 38px;
    padding: 0 10px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
  }

  .lead-page-layout .desktop-home-button,
  .lead-page-layout .desktop-return-button {
    position: fixed !important;
    display: grid !important;
    place-items: center;
    top: 28px;
    width: 32px;
    height: 32px;
    z-index: 9999;
  }

  .lead-page-layout .desktop-home-button {
    right: 48px;
  }

  .lead-page-layout .desktop-return-button {
    right: 8px;
  }

  .lead-page-layout .desktop-home-button .home-icon,
  .lead-page-layout .desktop-return-button .return-icon {
    width: 32px;
    height: 32px;
  }

  .leads-content {
    padding: 22px 14px 28px;
    overflow-x: hidden;
  }

  .lead-page-layout .leads-content,
  .lead-page-layout .lead-workspace,
  .lead-page-layout .lead-entry-card,
  .lead-page-layout .lead-form-grid,
  .lead-page-layout .lead-field,
  .lead-page-layout .lead-control {
    max-width: 100%;
    min-width: 0;
  }

  .leads-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .leads-title-row {
    display: grid;
    gap: 10px;
  }

  .leads-head h1 {
    font-size: 26px;
  }

  .leads-head p {
    padding: 5px 10px;
    font-size: 13px;
  }

  .leads-head-actions {
    justify-content: flex-start;
  }

  .lead-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .lead-metrics article {
    min-height: 104px;
    padding: 14px 12px 12px 54px;
  }

  .lead-metrics article > span {
    top: 14px;
    left: 12px;
    width: 34px;
    height: 34px;
  }

  .lead-metrics b {
    font-size: 13px;
  }

  .lead-metrics strong {
    font-size: 24px;
  }

  .lead-entry-card {
    padding: 20px 14px 18px;
  }

  .lead-entry-head {
    display: grid;
    gap: 14px;
  }

  .lead-entry-title {
    gap: 10px;
  }

  .lead-entry-title > span {
    width: 38px;
    height: 38px;
  }

  .lead-entry-title h2 {
    font-size: 24px !important;
  }

  .lead-quick-button {
    width: 100%;
    justify-content: center;
  }

  .lead-form-grid .lead-field {
    min-height: 70px;
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 10px;
    font-size: 14px;
  }

  .lead-control {
    min-height: 52px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    padding: 0 9px;
  }

  .lead-control select,
  .lead-control input {
    min-width: 0;
    min-height: 50px;
    font-size: 14px;
  }

  .lead-control > svg {
    width: 20px;
    height: 20px;
  }

  .lead-control-unit {
    grid-template-columns: 22px minmax(0, 1fr) 42px;
  }

  .lead-file-control {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    padding: 8px 10px;
  }

  .lead-file-control small {
    grid-column: 2;
    white-space: normal;
    font-size: 11px;
  }

  .lead-textarea-control {
    min-height: 112px;
  }

  .lead-form-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lead-clear-button,
  .lead-submit {
    min-height: 52px;
    font-size: 15px;
  }
}

.lead-page-layout .lead-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 206px;
  flex: 0 0 206px;
}

.lead-page-layout .lead-topbar .lead-topbar-actions {
  width: 206px !important;
  min-width: 206px !important;
  max-width: 206px !important;
  flex: 0 0 206px !important;
  justify-content: flex-end;
}

.lead-page-layout .lead-topbar .desktop-home-button,
.lead-page-layout .lead-topbar .desktop-return-button {
  position: static !important;
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
  flex: 0 0 auto;
  z-index: auto;
}

.lead-page-layout .lead-topbar .desktop-home-button .home-icon,
.lead-page-layout .lead-topbar .desktop-return-button .return-icon {
  width: 42px;
  height: 42px;
}

@media (max-width: 520px) {
  .lead-page-layout .lead-topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 168px;
    column-gap: 10px;
    align-items: center;
  }

  .lead-page-layout .lead-topbar .topbar-left {
    grid-column: 1;
  }

  .lead-page-layout .lead-topbar .topbar-right {
    width: 168px;
    flex: 0 0 168px;
    margin-right: 0;
    gap: 8px;
  }

  .lead-page-layout .lead-topbar .lead-topbar-actions {
    grid-column: 3;
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    flex: 0 0 168px !important;
  }

  .lead-page-layout .lead-topbar .topbar-right .select-control {
    position: fixed;
    top: 26px;
    left: 218px;
    width: 86px;
    min-width: 86px !important;
    max-width: 86px;
    z-index: 9999;
  }

  .lead-page-layout .lead-topbar .desktop-home-button,
  .lead-page-layout .lead-topbar .desktop-return-button {
    position: fixed !important;
    top: 28px;
    width: 32px;
    height: 32px;
    z-index: 9999;
  }

  .lead-page-layout .lead-topbar .desktop-home-button {
    left: 313px;
    right: auto;
  }

  .lead-page-layout .lead-topbar .desktop-return-button {
    left: 353px;
    right: auto;
  }

  .lead-page-layout .lead-topbar .desktop-home-button .home-icon,
  .lead-page-layout .lead-topbar .desktop-return-button .return-icon {
    width: 32px;
    height: 32px;
  }
}

/* Full-screen lead entry workspace: prioritize complete data input. */
@media (min-width: 761px) {
  .lead-page-layout .erp-main {
    min-height: 100vh;
  }

  .lead-page-layout .erp-topbar {
    min-height: 56px;
  }

  .lead-page-layout .leads-content {
    height: calc(100vh - 56px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 18px 22px;
    overflow: hidden;
  }

  .lead-page-layout .leads-head {
    align-items: center;
    margin: 0;
  }

  .lead-page-layout .leads-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .lead-page-layout .leads-head h1 {
    font-size: 26px;
  }

  .lead-page-layout .leads-head p {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef2f7;
  }

  .lead-page-layout .lead-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .lead-page-layout .lead-metrics article {
    min-height: 74px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
      "icon label"
      "icon number"
      "icon sub";
    align-content: center;
    gap: 2px 10px;
    padding: 10px 12px;
  }

  .lead-page-layout .lead-metrics article > span {
    grid-area: icon;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
  }

  .lead-page-layout .lead-metrics b {
    grid-area: label;
    font-size: 12px;
    line-height: 1.2;
  }

  .lead-page-layout .lead-metrics strong {
    grid-area: number;
    margin: 0;
    font-size: 22px;
  }

  .lead-page-layout .lead-metrics em {
    grid-area: sub;
    font-size: 11px;
  }

  .lead-page-layout .lead-workspace {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .lead-page-layout .lead-entry-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 18px 22px;
    overflow: hidden;
  }

  .lead-page-layout .lead-entry-head {
    margin-bottom: 14px;
  }

  .lead-page-layout .lead-entry-title > span {
    width: 36px;
    height: 36px;
  }

  .lead-page-layout .lead-entry-title h2 {
    font-size: 22px !important;
  }

  .lead-page-layout .lead-entry-title p {
    margin-top: 4px;
    font-size: 13px;
  }

  .lead-page-layout .lead-quick-button {
    min-height: 38px;
    padding: 0 14px;
  }

  .lead-page-layout .lead-form-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 8px;
    overflow: auto;
    padding-right: 4px;
  }

  .lead-page-layout .lead-form-grid .lead-field {
    min-height: 54px;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid #edf1f6;
    font-size: 13px;
  }

  .lead-page-layout .lead-control {
    min-height: 42px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    padding: 0 12px;
  }

  .lead-page-layout .lead-control > svg {
    width: 19px;
    height: 19px;
  }

  .lead-page-layout .lead-control select,
  .lead-page-layout .lead-control input {
    min-height: 40px;
    font-size: 14px;
  }

  .lead-page-layout .lead-control-unit {
    grid-template-columns: 24px minmax(0, 1fr) 48px;
  }

  .lead-page-layout .lead-file-control {
    grid-template-columns: 24px auto minmax(0, 1fr);
  }

  .lead-page-layout .lead-file-control small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lead-page-layout .lead-notes {
    grid-column: span 2;
    align-items: start;
  }

  .lead-page-layout .lead-textarea-control {
    min-height: 92px;
    padding: 10px 12px;
  }

  .lead-page-layout .lead-textarea-control textarea {
    min-height: 56px;
    font-size: 14px;
  }

  .lead-page-layout .lead-form-actions {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
  }

  .lead-page-layout .lead-clear-button,
  .lead-page-layout .lead-submit {
    min-height: 46px;
    font-size: 15px;
  }

  .lead-page-layout .lead-table-wrap {
    display: none;
  }
}

@media (max-width: 760px) {
  .outsourced-install-layout {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .outsourced-install-layout .erp-sidebar {
    display: none;
  }

  .outsourced-install-layout .erp-main {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  .outsourced-install-layout .production-content {
    height: calc(100vh - 58px);
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "metrics modules"
      "stages modules"
      "table table";
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, #fffaf0 0%, #f6f8fb 50%, #eef3f8 100%);
  }

  .outsourced-install-layout .production-head {
    grid-area: head;
    min-height: 82px;
    padding: 12px 86px 12px 12px;
  }

  .outsourced-install-layout .production-head h1 {
    font-size: 20px;
  }

  .outsourced-install-layout .production-head p {
    max-width: 270px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .outsourced-install-layout .production-policy {
    grid-area: metrics;
    min-height: 0;
    display: block;
    padding: 8px;
    overflow: hidden;
  }

  .outsourced-install-layout .production-policy > div:first-child {
    display: none;
  }

  .outsourced-install-layout .production-metrics {
    height: 100%;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 7px;
    overflow-y: auto;
  }

  .outsourced-install-layout .production-metrics article {
    min-height: 62px;
    padding: 8px;
  }

  .outsourced-install-layout .production-metrics b,
  .outsourced-install-layout .production-metrics span {
    font-size: 10px;
  }

  .outsourced-install-layout .production-metrics strong {
    margin: 2px 0;
    font-size: 19px;
  }

  .outsourced-install-layout .production-stage-flow {
    grid-area: stages;
    max-height: 180px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .outsourced-install-layout .production-stage-flow article {
    min-height: 34px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 6px;
  }

  .outsourced-install-layout .production-stage-flow span {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .outsourced-install-layout .production-stage-flow strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .outsourced-install-layout .outsourced-module-dock {
    grid-area: modules;
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 7px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .outsourced-install-layout .outsourced-module-dock button {
    min-height: 54px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    padding: 8px;
    box-shadow: none;
  }

  .outsourced-install-layout .outsourced-module-dock b {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }

  .outsourced-install-layout .outsourced-module-dock strong {
    font-size: 11px;
  }

  .outsourced-install-layout .outsourced-module-dock span {
    font-size: 9px;
  }

  .outsourced-install-layout .outsourced-module-dock em {
    font-size: 11px;
  }

  .outsourced-install-layout .production-workspace {
    grid-area: table;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .outsourced-install-layout .production-side-panel,
  .outsourced-install-layout .production-bottom-grid {
    display: none !important;
  }

  .outsourced-install-layout .production-table-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    overflow: hidden;
  }

  .outsourced-install-layout .production-table-panel .section-title h2 {
    font-size: 16px;
  }

  .outsourced-install-layout .production-command-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .outsourced-install-layout .production-command-row select:nth-of-type(2) {
    display: none;
  }

  .outsourced-install-layout .production-command-row input,
  .outsourced-install-layout .production-command-row select,
  .outsourced-install-layout .production-command-row button {
    min-height: 32px;
    font-size: 10px;
  }

  .outsourced-install-layout .production-table-wrap {
    min-height: 0;
    overflow-y: auto;
    border: 0;
  }

  .outsourced-install-layout .production-table,
  .outsourced-install-layout .production-table thead,
  .outsourced-install-layout .production-table tbody,
  .outsourced-install-layout .production-table tr,
  .outsourced-install-layout .production-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .outsourced-install-layout .production-table thead {
    display: none;
  }

  .outsourced-install-layout .production-table tbody {
    display: grid;
    gap: 7px;
  }

  .outsourced-install-layout .production-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    border: 1px solid #e7edf5;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
  }

  .outsourced-install-layout .production-table td {
    border: 0;
    padding: 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .outsourced-install-layout .production-table td:nth-child(1) {
    grid-column: 1;
    font-size: 12px;
    font-weight: 700;
  }

  .outsourced-install-layout .production-table td:nth-child(2) {
    grid-column: 1;
    color: #52647d;
  }

  .outsourced-install-layout .production-table td:nth-child(3) {
    grid-column: 1 / -1;
    color: #52647d;
  }

  .outsourced-install-layout .production-table td:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-weight: 700;
  }

  .outsourced-install-layout .production-table td:nth-child(6) {
    grid-column: 1;
  }

  .outsourced-install-layout .production-table td:nth-child(7),
  .outsourced-install-layout .production-table td:nth-child(8),
  .outsourced-install-layout .production-table td:nth-child(9) {
    grid-column: 1 / -1;
  }

  .outsourced-install-layout .production-table td:nth-child(4),
  .outsourced-install-layout .production-table td:nth-child(10),
  .outsourced-install-layout .production-table td:nth-child(11) {
    display: none;
  }

  .outsourced-install-layout .production-table td:nth-child(12) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .outsourced-install-layout .production-table td:nth-child(12) .table-action {
    min-height: 24px;
    font-size: 9px;
  }

  .outsourced-sub-content {
    height: calc(100vh - 58px);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 8px;
  }

  .outsourced-sub-layout .outsourced-module-dock {
    grid-area: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 132px;
  }

  .outsourced-sub-grid {
    min-height: 0;
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .outsourced-sub-panel {
    min-height: auto;
    overflow: visible;
    padding: 12px;
  }

  .outsourced-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Desktop marketing leads: prioritize lead list and keep entry form compact. */
@media (min-width: 761px) {
  .lead-page-layout .erp-main {
    min-height: 100vh;
    min-height: 0;
    overflow: auto;
  }

  .lead-page-layout .leads-content {
    min-height: calc(100vh - 58px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    padding: 18px 22px 14px;
    overflow: visible;
    background: linear-gradient(180deg, #fffaf0 0%, #f6f8fb 38%, #eef3f8 100%);
  }

  .lead-page-layout .leads-head {
    min-height: 44px;
    margin: 0;
  }

  .lead-page-layout .leads-head h1 {
    font-size: 26px;
  }

  .lead-page-layout .lead-mobile-shell {
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    overflow: visible;
  }

  .lead-page-layout .lead-mobile-rail {
    min-height: 0;
    display: block;
  }

  .lead-page-layout .lead-mobile-list {
    display: none;
  }

  .lead-page-layout .lead-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
  }

  .lead-page-layout .lead-metrics article {
    min-height: 76px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 3px 10px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: none;
  }

  .lead-page-layout .lead-metrics article > span {
    width: 30px;
    height: 30px;
  }

  .lead-page-layout .lead-metrics b {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .lead-metrics strong {
    margin: 0;
    font-size: 24px;
  }

  .lead-page-layout .lead-metrics em {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .lead-workspace {
    min-height: 0;
    display: grid;
    overflow: visible;
  }

  .lead-page-layout .lead-entry-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 8px;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 14px 16px;
    overflow: visible;
    background: #fff;
  }

  .lead-page-layout .lead-entry-head {
    min-height: 46px;
    margin: 0;
  }

  .lead-page-layout .lead-entry-title {
    gap: 10px;
  }

  .lead-page-layout .lead-entry-title > span {
    width: 34px;
    height: 34px;
  }

  .lead-page-layout .lead-entry-title h2 {
    margin: 0;
    font-size: 22px !important;
  }

  .lead-page-layout .lead-entry-title p {
    margin-top: 3px;
    font-size: 12px;
  }

  .lead-page-layout .lead-quick-button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
  }

  .lead-page-layout .lead-detail-status {
    margin: 0;
    padding: 6px 10px;
  }

  .lead-page-layout .lead-duplicate-alert {
    margin: 0;
    padding: 6px 10px;
  }

  .lead-page-layout .lead-form-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    overflow: visible;
    padding-right: 4px;
  }

  .lead-page-layout .lead-form-grid .lead-field {
    min-height: 44px;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid #edf1f6;
  }

  .lead-page-layout .lead-field-label {
    font-size: 12px;
  }

  .lead-page-layout .lead-control {
    min-height: 40px;
    grid-template-columns: 22px minmax(0, 1fr);
    border-radius: 8px;
    padding: 0 10px;
  }

  .lead-page-layout .lead-control select,
  .lead-page-layout .lead-control input {
    min-height: 38px;
    font-size: 13px;
  }

  .lead-page-layout .lead-file-control small {
    overflow: hidden;
    max-width: 240px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .lead-notes {
    grid-column: 1 / -1;
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .lead-page-layout .lead-textarea-control {
    min-height: 54px;
    padding: 8px 10px;
  }

  .lead-page-layout .lead-textarea-control textarea {
    min-height: 38px;
    font-size: 13px;
  }

  .lead-page-layout .lead-form-actions {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    margin-top: 0;
  }

  .lead-page-layout .lead-clear-button,
  .lead-page-layout .lead-submit {
    min-height: 38px;
    margin: 0;
    border-radius: 8px;
    font-size: 13px;
  }

  .lead-page-layout .lead-toast {
    min-height: 38px;
    display: flex;
    align-items: center;
    margin: 0;
    border-radius: 8px;
    padding: 0 14px;
  }

  .lead-page-layout .lead-table-wrap {
    min-height: 0;
    display: block !important;
    overflow: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .lead-page-layout .lead-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    font-size: 13px;
  }

  .lead-page-layout .lead-table th,
  .lead-page-layout .lead-table td {
    height: 38px;
    border-bottom: 1px solid #edf1f6;
    padding: 7px 9px;
    white-space: nowrap;
  }

  .lead-page-layout .lead-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff7e6;
    color: #53657f;
    font-size: 12px;
    font-weight: 600;
  }
}

@media (min-width: 521px) and (max-width: 760px) {
  .lead-page-layout .leads-content {
    min-height: calc(100vh - 120px);
  }

  .lead-page-layout .lead-form-grid .lead-field {
    grid-template-columns: 150px minmax(0, 1fr);
    min-height: 64px;
  }

  .lead-page-layout .lead-control {
    min-height: 54px;
  }

  .lead-page-layout .lead-control select,
  .lead-page-layout .lead-control input {
    min-height: 52px;
  }
}

/* Mobile full-screen two-column leads workstation. */
.lead-mobile-shell,
.lead-mobile-rail {
  display: contents;
}

.lead-mobile-list {
  display: none;
}

@media (min-width: 761px) {
  .lead-page-layout .lead-mobile-shell {
    min-height: max-content;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
  }

  .lead-page-layout .lead-mobile-rail {
    min-height: 0;
    display: grid;
    gap: 12px;
  }

  .lead-page-layout .lead-mobile-rail .lead-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-page-layout .lead-workspace {
    min-height: max-content;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: visible;
  }

  .lead-page-layout .lead-entry-card {
    min-height: max-content;
    height: auto;
    grid-template-rows: auto auto auto max-content auto;
    overflow: visible;
  }

  .lead-page-layout .lead-entry-card .lead-form-grid {
    height: auto;
    min-height: max-content;
    overflow: visible;
  }

  .lead-page-layout .lead-entry-card .lead-form-actions {
    position: static;
    align-self: start;
  }
}

@media (max-width: 760px) {
  .lead-page-layout {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .lead-page-layout .erp-sidebar {
    display: none;
  }

  .lead-page-layout .erp-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .lead-page-layout .erp-topbar {
    position: relative;
    height: 58px;
    min-height: 58px;
    border-bottom: 1px solid #f0d190;
  }

  .lead-page-layout .leads-content {
    height: calc(100vh - 58px);
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }

  .lead-page-layout .leads-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(86px, 1fr) 86px 76px 76px 116px;
    gap: 5px;
    align-items: center;
    margin: 0;
  }

  .lead-page-layout .leads-title-row {
    min-width: 0;
  }

  .lead-page-layout .leads-head h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
  }

  .lead-page-layout .leads-head p {
    display: none;
  }

  .lead-page-layout .leads-head-actions {
    min-width: 0;
  }

  .lead-page-layout .lead-report-top-button {
    position: static;
    width: 86px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 10px;
  }

  .lead-page-layout .lead-generate-report-button {
    position: static;
    width: 76px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 10px;
  }

  .lead-page-layout .lead-new-top-button {
    position: static;
    width: 76px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 10px;
  }

  .lead-page-layout .role-switcher {
    display: block;
  }

  .lead-page-layout .role-switcher span {
    display: none;
  }

  .lead-page-layout .role-switcher select {
    width: 100%;
    min-height: 34px;
    border-radius: 8px;
    font-size: 12px;
  }

  .lead-page-layout .lead-mobile-shell {
    min-height: 0;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
  }

  .lead-page-layout .lead-manager-action-bar {
    min-height: 36px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lead-page-layout .lead-manager-action-bar::-webkit-scrollbar {
    display: none;
  }

  .lead-page-layout .lead-manager-action-bar button {
    min-height: 34px;
    padding: 0 9px;
    font-size: 11px;
  }

  .lead-page-layout .lead-mobile-rail {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(118px, 0.7fr) minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
  }

  .lead-page-layout .lead-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .lead-page-layout .lead-metrics article {
    min-width: 0;
    min-height: 62px;
    border-radius: 8px;
    padding: 7px;
    box-shadow: none;
  }

  .lead-page-layout .lead-metrics article > span {
    width: 22px;
    height: 22px;
    margin: 0 0 3px;
  }

  .lead-page-layout .lead-metrics article > span svg {
    width: 13px;
    height: 13px;
  }

  .lead-page-layout .lead-metrics b {
    display: block;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.1;
  }

  .lead-page-layout .lead-metrics strong {
    display: block;
    margin: 1px 0 0;
    font-size: 17px;
    line-height: 1;
  }

  .lead-page-layout .lead-metrics em {
    display: none;
  }

  .lead-page-layout .lead-mobile-list {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
  }

  .lead-page-layout .lead-mobile-list .section-title {
    display: flex;
    margin-bottom: 2px;
  }

  .lead-page-layout .lead-mobile-list h2 {
    margin: 0;
    font-size: 13px;
  }

  .lead-page-layout .lead-mobile-list article {
    border-bottom: 1px solid #edf1f6;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
  }

  .lead-page-layout .lead-mobile-list article.active {
    border: 1px solid var(--orange);
    background: #fff8e6;
  }

  .lead-page-layout .lead-mobile-list article.is-locked {
    opacity: 0.82;
  }

  .lead-page-layout .lead-mobile-list article:last-child {
    border-bottom: 0;
  }

  .lead-page-layout .lead-mobile-list strong,
  .lead-page-layout .lead-mobile-list span,
  .lead-page-layout .lead-mobile-list em,
  .lead-page-layout .lead-mobile-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .lead-mobile-list strong {
    color: var(--navy);
    font-size: 11px;
  }

  .lead-page-layout .lead-mobile-list span {
    margin-top: 2px;
    color: var(--text);
    font-size: 11px;
  }

  .lead-page-layout .lead-mobile-list em {
    margin-top: 2px;
    color: var(--orange-strong);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
  }

  .lead-page-layout .lead-mobile-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
  }

  .lead-page-layout .lead-workspace {
    min-height: 0;
    display: block;
    overflow: hidden;
  }

  .lead-page-layout .lead-entry-card {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 10px;
    padding: 10px;
  }

  .lead-page-layout .lead-entry-card.is-locked {
    background: #fbfcfe;
  }

  .lead-page-layout .lead-detail-status {
    display: grid;
    gap: 2px;
    margin: 0 0 6px;
    border: 1px solid #dce6f3;
    border-radius: 8px;
    background: #f7fbff;
    padding: 6px 8px;
  }

  .lead-page-layout .lead-detail-status strong {
    color: var(--navy);
    font-size: 11px;
  }

  .lead-page-layout .lead-detail-status span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
  }

  .lead-page-layout .lead-detail-status.is-locked {
    border-color: #ffd38a;
    background: #fff7e8;
  }

  .lead-page-layout .lead-duplicate-alert {
    margin: 0 0 6px;
    border: 1px solid #ffcf7a;
    border-radius: 8px;
    background: #fff8e8;
    color: #8a5200;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
  }

  .lead-page-layout .lead-duplicate-alert.is-empty {
    display: none;
  }

  .lead-page-layout .lead-ai-panel {
    gap: 6px;
    margin: 0 0 6px;
    border-radius: 8px;
    padding: 7px;
  }

  .lead-page-layout .lead-ai-head strong {
    font-size: 13px;
  }

  .lead-page-layout .lead-ai-head span {
    font-size: 9px;
  }

  .lead-page-layout .lead-ai-head em {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .lead-page-layout .lead-ai-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .lead-page-layout .lead-ai-grid::-webkit-scrollbar {
    display: none;
  }

  .lead-page-layout .lead-ai-grid article {
    flex: 0 0 132px;
    min-height: 58px;
    gap: 3px;
    padding: 7px;
  }

  .lead-page-layout .lead-ai-grid b {
    font-size: 10px;
  }

  .lead-page-layout .lead-ai-grid span {
    font-size: 9px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .lead-page-layout .lead-ai-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .lead-page-layout .lead-ai-actions button {
    min-height: 30px;
    padding: 0 6px;
    font-size: 10px;
  }

  .lead-page-layout .lead-entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 8px;
  }

  .lead-page-layout .lead-entry-title {
    min-width: 0;
  }

  .lead-page-layout .lead-entry-title > span {
    display: none;
  }

  .lead-page-layout .lead-entry-title h2 {
    margin: 0;
    font-size: 18px !important;
  }

  .lead-page-layout .lead-entry-title p {
    margin-top: 2px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .lead-quick-button {
    display: none;
  }

  .lead-page-layout .lead-form-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    overflow-y: auto;
    padding: 0 2px 0 0;
  }

  .lead-page-layout .lead-form-grid .lead-field {
    min-height: 44px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #edf1f6;
  }

  .lead-page-layout .lead-field-label {
    font-size: 11px;
    line-height: 1.15;
  }

  .lead-page-layout .lead-control {
    min-height: 38px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 6px;
    border-radius: 8px;
    padding: 0 8px;
  }

  .lead-page-layout .lead-control > svg {
    width: 15px;
    height: 15px;
  }

  .lead-page-layout .lead-control select,
  .lead-page-layout .lead-control input {
    min-height: 36px;
    font-size: 12px;
  }

  .lead-page-layout .lead-entry-card.is-locked .lead-control {
    background: #f2f5f9;
  }

  .lead-page-layout .lead-entry-card.is-locked .lead-control select,
  .lead-page-layout .lead-entry-card.is-locked .lead-control input,
  .lead-page-layout .lead-entry-card.is-locked .lead-textarea-control textarea {
    color: #667489;
    cursor: not-allowed;
  }

  .lead-page-layout .lead-control-unit {
    grid-template-columns: 18px minmax(0, 1fr) 32px;
  }

  .lead-page-layout .lead-file-control {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .lead-page-layout .lead-file-control small {
    display: none;
  }

  .lead-page-layout .lead-notes {
    grid-column: auto;
  }

  .lead-page-layout .lead-textarea-control {
    min-height: 70px;
    padding: 6px 8px;
  }

  .lead-page-layout .lead-textarea-control textarea {
    min-height: 46px;
    font-size: 12px;
  }

  .lead-page-layout .lead-form-actions {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    margin-top: 8px;
  }

  .lead-page-layout .lead-clear-button,
  .lead-page-layout .lead-submit {
    min-height: 40px;
    border-radius: 8px;
  }

  .lead-page-layout .lead-clear-button {
    width: 42px;
    padding: 0;
    font-size: 0;
  }

  .lead-page-layout .lead-submit {
    font-size: 13px;
  }

  .lead-page-layout .approval-panel,
  .lead-page-layout .lead-table-wrap,
  .lead-page-layout .facebook-assignment-window {
    display: none !important;
  }

  .lead-admin-layout .erp-sidebar {
    display: none;
  }

  .lead-admin-layout .erp-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .lead-admin-layout .lead-admin-content {
    height: calc(100vh - 58px);
    height: calc(100svh - 58px);
    min-height: 0;
    grid-template-rows: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .lead-admin-layout .report-subpage-head {
    min-height: 72px;
    padding: 8px 78px 8px 10px;
    border-radius: 8px;
  }

  .lead-admin-layout .report-subpage-head h1 {
    font-size: 18px;
  }

  .lead-admin-layout .report-subpage-head p {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-admin-layout .report-subpage-head > .table-action {
    display: none;
  }

  .lead-admin-layout .lead-admin-card-list {
    gap: 8px;
  }

  .lead-admin-layout .lead-admin-card,
  .lead-admin-layout .lead-admin-empty {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .lead-admin-layout .approval-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .lead-admin-layout .approval-actions select {
    grid-column: 1 / -1;
  }

  .lead-admin-layout .compact-lead-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lead-page-layout .marketing-report-entry {
    min-height: 52px;
    padding: 8px;
    border-radius: 8px;
  }

  .lead-page-layout .marketing-report-entry strong {
    font-size: 12px;
  }

  .lead-page-layout .marketing-report-entry span {
    max-width: 210px;
    font-size: 9px;
  }

  .lead-page-layout .marketing-report-entry button {
    min-height: 32px;
    padding: 0 9px;
    font-size: 10px;
    white-space: nowrap;
  }

  .marketing-report-layout .erp-sidebar {
    display: none;
  }

  .marketing-report-layout .erp-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .marketing-report-layout .marketing-report-content {
    height: calc(100vh - 58px);
    height: calc(100svh - 58px);
    min-height: 0;
    display: grid;
    grid-template-rows: 72px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }

  .marketing-report-layout .report-subpage-head {
    min-height: 72px;
    padding: 8px 78px 8px 10px;
    border-radius: 8px;
  }

  .marketing-report-layout .report-subpage-head h1 {
    font-size: 18px;
  }

  .marketing-report-layout .report-subpage-head p {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marketing-report-layout .report-subpage-head > .table-action {
    display: none;
  }

  .marketing-report-layout .marketing-performance-panel {
    min-height: 0;
    overflow: auto;
    padding: 8px;
  }

  .marketing-report-layout .marketing-performance-panel .section-title {
    display: grid;
    gap: 3px;
  }

  .marketing-report-layout .marketing-performance-panel .section-title h2 {
    font-size: 15px;
  }

  .marketing-report-layout .marketing-performance-panel .section-title span {
    font-size: 10px;
  }

  .marketing-report-layout .marketing-performance-grid,
  .marketing-report-layout .marketing-performance-panel.is-full-report .marketing-performance-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .marketing-report-layout .marketing-report-card {
    min-height: 0;
    padding: 10px;
  }
}

/* Mobile full-screen sales orders workstation. */
@media (max-width: 760px) {
  .erp-layout:has(.sales-orders-content) {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .erp-sidebar {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .erp-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .erp-topbar {
    position: relative;
    height: 58px;
    min-height: 58px;
    border-bottom: 1px solid #f0d190;
  }

  .sales-orders-content {
    height: calc(100vh - 58px);
    min-height: 0;
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto 172px minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "policy command"
      "flow table";
    gap: 8px;
    padding: 8px;
    overflow: hidden !important;
  }

  .sales-orders-head {
    grid-area: head;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    margin: 0;
    padding: 10px 86px 10px 10px;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .sales-orders-head h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
  }

  .sales-orders-head p {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-orders-head .desktop-home-button,
  .sales-orders-head .desktop-return-button {
    position: absolute !important;
    top: 18px !important;
    z-index: 3;
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
  }

  .sales-orders-head .desktop-home-button {
    right: 50px !important;
  }

  .sales-orders-head .desktop-return-button {
    right: 10px !important;
  }

  .sales-order-policy {
    grid-area: policy;
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 8px;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .sales-order-policy > div:first-child {
    display: none;
  }

  .sales-order-metrics {
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    overflow-y: auto;
    padding: 0;
  }

  .sales-order-metrics article {
    min-width: 0;
    min-height: 56px;
    border-radius: 8px;
    padding: 7px;
    box-shadow: none;
  }

  .sales-order-metrics b,
  .sales-order-metrics span {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-order-metrics strong {
    display: block;
    margin: 2px 0;
    font-size: 17px;
    line-height: 1;
  }

  .sales-order-flow {
    grid-area: flow;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 6px;
    max-height: none;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(0);
  }

  .sales-order-flow article {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 40px;
    border-radius: 8px;
    padding: 7px 8px;
  }

  .sales-order-flow span {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .sales-order-flow strong {
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-order-flow em {
    margin-top: 0;
    font-size: 12px;
  }

  .sales-order-command {
    grid-area: command;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 6px;
    margin: 0;
    padding: 8px;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .sales-order-command label {
    min-width: 0;
    gap: 3px;
    font-size: 10px;
  }

  .sales-order-command label:first-child {
    grid-column: 1 / -1;
  }

  .sales-order-command label:nth-child(4) {
    display: none;
  }

  .sales-order-command button {
    grid-column: auto;
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
  }

  .sales-order-command input,
  .sales-order-command select {
    min-height: 34px;
    border-radius: 8px;
    font-size: 11px;
  }

  .sales-orders-layout {
    grid-area: table;
    min-height: 0;
    display: block !important;
    margin: 0;
    overflow: hidden;
  }

  .sales-permission-panel,
  .sales-rules-panel {
    display: none !important;
  }

  .sales-order-table-panel {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }

  .sales-order-table-panel .section-title {
    min-height: 28px;
  }

  .sales-order-table-panel .section-title h2 {
    font-size: 16px;
  }

  .sales-order-table-panel .section-title span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-order-table-wrap {
    min-height: 0;
    overflow-y: auto;
    border: 0;
  }

  .sales-order-table tbody {
    display: grid;
    gap: 7px;
  }

  .sales-order-table tr {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 62px;
    gap: 5px 7px;
    align-items: center;
    padding: 8px;
    border: 1px solid #e1eaf6;
    border-radius: 8px;
    background: #fbfdff;
  }

  .sales-order-table td {
    min-width: 0;
    padding: 3px 0;
    font-size: 11px;
  }

  .sales-order-table td:nth-child(1) {
    font-size: 10px;
  }

  .sales-order-table td:nth-child(2) {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-order-table td:nth-child(5) {
    font-size: 12px;
  }

  .sales-order-table td:nth-child(9) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-order-table td:nth-child(12) {
    display: grid;
    gap: 4px;
  }

  .sales-order-table td:nth-child(12) .table-action {
    width: 100%;
    min-width: 0;
    height: 24px;
    padding: 0 4px;
    font-size: 10px;
  }
}

/* Mobile full-screen project list workstation. */
@media (max-width: 760px) {
  .erp-layout:has(.project-toolbar) {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.project-toolbar) .erp-sidebar {
    display: none;
  }

  .erp-layout:has(.project-toolbar) .erp-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.project-toolbar) .erp-topbar {
    position: relative;
    height: 58px;
    min-height: 58px;
    border-bottom: 1px solid #f0d190;
  }

  .erp-layout:has(.project-toolbar) .erp-content {
    height: calc(100vh - 58px);
    min-height: 0;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "toolbar toolbar"
      "stats table"
      "stats footer";
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }

  .project-toolbar {
    grid-area: toolbar;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 118px;
    margin: 0;
    padding: 10px 86px 10px 10px;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .project-toolbar h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
  }

  .project-toolbar .desktop-home-button,
  .project-toolbar .desktop-return-button {
    position: absolute !important;
    top: 12px !important;
    z-index: 3;
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
  }

  .project-toolbar .desktop-home-button {
    right: 50px !important;
  }

  .project-toolbar .desktop-return-button {
    right: 10px !important;
  }

  .project-toolbar .toolbar-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
    padding: 0;
  }

  .project-toolbar .toolbar-controls label,
  .project-toolbar .toolbar-controls input,
  .project-toolbar .toolbar-controls select,
  .project-toolbar .toolbar-controls button {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: 11px;
  }

  .project-toolbar .toolbar-controls label:first-child {
    grid-column: 1 / -1;
  }

  .project-toolbar .toolbar-controls select:nth-of-type(n + 3),
  .project-toolbar .logout-button {
    display: none;
  }

  .dashboard-cards {
    grid-area: stats;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 7px;
    margin: 0;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: none;
  }

  .dashboard-cards::-webkit-scrollbar {
    display: none;
  }

  .dashboard-cards article {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    box-shadow: none;
  }

  .dashboard-cards .metric-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .dashboard-cards b,
  .dashboard-cards em {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-cards strong {
    display: block;
    margin: 2px 0;
    font-size: 18px;
    line-height: 1;
  }

  .erp-content .project-table-wrap {
    grid-area: table;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }

  .erp-content .project-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    table-layout: auto;
  }

  .erp-content .project-table thead {
    display: none !important;
  }

  .erp-content .project-table tbody {
    width: 100%;
    min-width: 0;
  }

  .erp-content .project-table tbody {
    display: grid;
    gap: 7px;
  }

  .erp-content .project-table tr {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 54px;
    grid-template-rows: auto auto auto;
    gap: 4px 6px;
    align-items: center;
    min-height: 88px;
    padding: 8px;
    border: 1px solid #e1eaf6;
    border-radius: 8px;
    background: #fbfdff;
  }

  .erp-content .project-table td {
    min-width: 0;
    padding: 3px 0;
    border: 0;
    font-size: 11px;
  }

  .erp-content .project-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }

  .erp-content .project-table td:nth-child(2) {
    display: none;
  }

  .erp-content .project-table td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-content .project-table td:nth-child(5) {
    grid-column: 3;
    grid-row: 1;
    overflow: hidden;
    text-align: right;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-content .project-table td:nth-child(6) {
    grid-column: 2 / 4;
    grid-row: 2;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-content .project-table td:nth-child(8) {
    display: none;
  }

  .erp-content .project-table td:nth-child(9) {
    grid-column: 2;
    grid-row: 3;
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
  }

  .erp-content .project-table td:nth-child(12) {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
    color: var(--orange-strong);
    font-size: 12px;
    font-weight: 600;
  }

  .erp-content .project-table td:nth-child(13) {
    grid-column: 2;
    grid-row: 4;
    color: var(--muted);
    font-size: 11px;
  }

  .erp-content .project-table td:nth-child(16) {
    grid-column: 3;
    grid-row: 3 / 5;
    align-self: center;
  }

  .erp-content .project-table td:nth-child(4),
  .erp-content .project-table td:nth-child(7),
  .erp-content .project-table td:nth-child(8),
  .erp-content .project-table td:nth-child(10),
  .erp-content .project-table td:nth-child(11),
  .erp-content .project-table td:nth-child(14),
  .erp-content .project-table td:nth-child(15) {
    display: none;
  }

  .erp-content .project-table .table-action {
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 6px;
    font-size: 11px;
  }

  .erp-content .list-footer {
    grid-area: footer;
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    margin: 0;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 6px 8px;
    background: #fff;
  }

  .erp-content .list-footer strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-content .list-footer > span {
    display: none;
  }

  .erp-content .pagination {
    display: flex;
    gap: 4px;
  }

  .erp-content .pagination button {
    width: 28px;
    height: 28px;
    min-height: 28px;
    font-size: 11px;
  }
}

/* Mobile full-screen user access workstation. */
@media (max-width: 760px) {
  .erp-layout:has(.permissions-content) {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.permissions-content) .erp-sidebar {
    display: none;
  }

  .erp-layout:has(.permissions-content) .erp-main {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.permissions-content) .erp-topbar {
    position: relative;
    height: 58px;
    min-height: 58px;
    border-bottom: 1px solid #f0d190;
  }

  .permissions-content {
    height: calc(100vh - 58px);
    min-height: 0;
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "rail panel";
    gap: 8px;
    padding: 8px;
    overflow: hidden !important;
  }

  .permissions-head {
    grid-area: head;
    position: relative;
    display: block;
    min-height: 78px;
    margin: 0;
    padding: 12px 86px 12px 12px;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .permissions-head h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.15;
  }

  .permissions-head p {
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .permissions-head .desktop-home-button,
  .permissions-head .desktop-return-button {
    position: absolute !important;
    top: 18px !important;
    z-index: 3;
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
  }

  .permissions-head .desktop-home-button {
    right: 50px !important;
  }

  .permissions-head .desktop-return-button {
    right: 10px !important;
  }

  .permission-policy {
    grid-area: rail;
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .permission-policy > div:first-child {
    display: none;
  }

  .permission-policy-metrics {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 7px;
    overflow-y: auto;
  }

  .permission-policy-metrics article {
    min-width: 0;
    min-height: 68px;
    border-radius: 8px;
    padding: 8px;
    box-shadow: none;
  }

  .permission-policy-metrics b,
  .permission-policy-metrics span {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .permission-policy-metrics strong {
    display: block;
    margin: 3px 0;
    font-size: 20px;
    line-height: 1;
  }

  .permission-tabs {
    grid-area: rail;
    align-self: end;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    max-height: 208px;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fffaf0;
  }

  .permission-tabs button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    justify-content: flex-start;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 11px;
    text-align: left;
  }

  .permission-tab-panel {
    grid-area: panel;
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }

  .permission-tab-panel,
  .permission-center-grid,
  .permission-section-block {
    height: 100%;
    min-height: 0;
  }

  .permission-center-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: hidden;
  }

  .permission-side-stack,
  .role-overview-panel,
  .workflow-rules-panel,
  .permission-config-panel {
    display: none !important;
  }

  .permission-matrix-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
  }

  .permission-matrix-panel .section-title {
    min-height: 30px;
  }

  .permission-matrix-panel .section-title h2 {
    margin: 0;
    font-size: 16px;
  }

  .permission-matrix-panel .section-title span,
  .permission-title-row span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .permission-table-wrap {
    min-height: 0;
    overflow-y: auto;
    border: 0;
  }

  .permission-table,
  .node-permission-table,
  .user-permission-table {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .permission-table thead,
  .node-permission-table thead,
  .user-permission-table thead {
    display: none !important;
  }

  .permission-table tbody,
  .node-permission-table tbody,
  .user-permission-table tbody {
    display: grid;
    width: 100%;
    gap: 7px;
  }

  .permission-table tr,
  .node-permission-table tr,
  .user-permission-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    width: 100%;
    min-width: 0;
    border: 1px solid #e1eaf6;
    border-radius: 8px;
    padding: 8px;
    background: #fbfdff;
  }

  .permission-table td,
  .node-permission-table td,
  .user-permission-table td {
    display: block;
    min-width: 0;
    border: 0;
    padding: 2px 0;
    font-size: 11px;
    line-height: 1.3;
  }

  .permission-table td::before,
  .node-permission-table td::before,
  .user-permission-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 600;
  }

  .permission-table td:first-child,
  .node-permission-table td:first-child,
  .user-permission-table td:first-child {
    color: var(--navy);
    font-size: 13px;
    font-weight: 600;
  }

  .permission-chip,
  .permission-scope {
    display: inline-flex;
    margin: 2px 3px 0 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .permission-actions {
    display: none;
  }

  .user-action-row {
    display: flex;
    gap: 4px;
  }

  .user-action-row button {
    min-height: 26px;
    border-radius: 6px;
    padding: 0 7px;
    font-size: 10px;
  }
}

/* Mobile full-screen install and delivery workstations. */
@media (max-width: 760px) {
  html:has(.install-plan-content),
  html:has(.delivery-plan-content),
  body:has(.install-plan-content),
  body:has(.delivery-plan-content) {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .erp-layout:has(.install-plan-content),
  .erp-layout:has(.delivery-plan-content),
  .install-plan-layout,
  .delivery-plan-layout {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.install-plan-content) .erp-sidebar,
  .erp-layout:has(.delivery-plan-content) .erp-sidebar,
  .install-plan-layout .erp-sidebar,
  .delivery-plan-layout .erp-sidebar {
    display: none;
  }

  .erp-layout:has(.install-plan-content) .erp-main,
  .erp-layout:has(.delivery-plan-content) .erp-main,
  .install-plan-layout .erp-main,
  .delivery-plan-layout .erp-main {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.install-plan-content) .erp-topbar,
  .erp-layout:has(.delivery-plan-content) .erp-topbar,
  .install-plan-layout .erp-topbar,
  .delivery-plan-layout .erp-topbar {
    position: relative;
    display: block;
    height: 58px;
    min-height: 58px;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px solid #f0d190;
  }

  .erp-layout:has(.install-plan-content) .topbar-left,
  .erp-layout:has(.delivery-plan-content) .topbar-left,
  .install-plan-layout .topbar-left,
  .delivery-plan-layout .topbar-left {
    position: fixed;
    left: 14px;
    top: 0;
    height: 58px;
    display: flex;
    align-items: center;
    max-width: 170px;
    overflow: hidden;
  }

  .erp-layout:has(.install-plan-content) .topbar-right,
  .erp-layout:has(.delivery-plan-content) .topbar-right,
  .install-plan-layout .topbar-right,
  .delivery-plan-layout .topbar-right {
    position: fixed;
    right: 12px;
    top: 12px;
    z-index: 20;
    display: block;
    width: 92px;
    overflow: hidden;
  }

  .erp-layout:has(.install-plan-content) .topbar-right .select-control,
  .erp-layout:has(.delivery-plan-content) .topbar-right .select-control,
  .install-plan-layout .topbar-right .select-control,
  .delivery-plan-layout .topbar-right .select-control {
    width: 92px !important;
    min-width: 92px;
    font-size: 11px;
  }

  .erp-layout:has(.install-plan-content) *,
  .erp-layout:has(.delivery-plan-content) *,
  .install-plan-layout *,
  .delivery-plan-layout * {
    min-width: 0;
  }

  .install-plan-content,
  .delivery-plan-content {
    height: calc(100vh - 58px);
    height: calc(100svh - 58px);
    min-height: 0;
    display: grid !important;
    grid-template-columns: 110px minmax(0, calc(100vw - 150px));
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "rail workspace";
    gap: 8px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 8px;
    overflow: hidden !important;
    background: linear-gradient(180deg, #fffaf0 0%, #f6f8fb 48%, #eef3f8 100%);
  }

  .install-plan-content > section,
  .delivery-plan-content > section,
  .install-plan-policy,
  .delivery-plan-policy,
  .install-stage-flow,
  .delivery-stage-flow,
  .install-workspace,
  .delivery-workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
  }

  .install-plan-head,
  .delivery-plan-head {
    grid-area: head;
    position: relative;
    display: block;
    min-height: 72px;
    margin: 0;
    padding: 12px 86px 12px 12px;
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .install-plan-head h1,
  .delivery-plan-head h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.12;
  }

  .install-plan-head p,
  .delivery-plan-head p {
    display: block;
    max-width: 275px;
    margin: 4px 0 0;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-plan-head .desktop-home-button,
  .install-plan-head .desktop-return-button,
  .delivery-plan-head .desktop-home-button,
  .delivery-plan-head .desktop-return-button {
    position: fixed !important;
    top: 86px !important;
    z-index: 3;
    display: inline-flex !important;
    width: 30px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
  }

  .install-plan-head .desktop-home-button,
  .delivery-plan-head .desktop-home-button {
    right: 44px !important;
  }

  .install-plan-head .desktop-return-button,
  .delivery-plan-head .desktop-return-button {
    right: 8px !important;
  }

  .install-plan-head .home-icon,
  .install-plan-head .return-icon,
  .delivery-plan-head .home-icon,
  .delivery-plan-head .return-icon {
    width: 30px;
    height: 30px;
  }

  .install-plan-policy,
  .delivery-plan-policy {
    grid-area: rail;
    min-height: 0;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .install-plan-policy > div:first-child,
  .delivery-plan-policy > div:first-child {
    display: none;
  }

  .install-plan-metrics,
  .delivery-plan-metrics {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
  }

  .install-plan-metrics article,
  .delivery-plan-metrics article {
    min-width: 0;
    min-height: 66px;
    padding: 8px;
    border-radius: 8px;
    box-shadow: none;
  }

  .install-plan-metrics b,
  .install-plan-metrics span,
  .delivery-plan-metrics b,
  .delivery-plan-metrics span {
    display: block;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-plan-metrics strong,
  .delivery-plan-metrics strong {
    display: block;
    margin: 3px 0;
    font-size: 20px;
    line-height: 1;
  }

  .install-stage-flow,
  .delivery-stage-flow {
    grid-area: rail;
    align-self: end;
    max-height: 214px;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fffaf0;
  }

  .install-stage-flow article,
  .delivery-stage-flow article {
    min-height: 36px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border-radius: 8px;
  }

  .install-stage-flow span,
  .delivery-stage-flow span {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .install-stage-flow strong,
  .delivery-stage-flow strong {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-stage-flow em,
  .delivery-stage-flow em {
    font-size: 13px;
  }

  .install-workspace,
  .delivery-workspace {
    grid-area: workspace;
    width: calc(100vw - 150px);
    max-width: calc(100vw - 150px);
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .install-side-panel,
  .delivery-side-panel,
  .install-bottom-grid,
  .delivery-bottom-grid {
    display: none !important;
  }

  .install-table-panel,
  .delivery-table-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #f0d190;
    border-radius: 10px;
    background: #fff;
  }

  .install-table-panel .section-title,
  .delivery-table-panel .section-title {
    min-height: 30px;
  }

  .install-table-panel .section-title h2,
  .delivery-table-panel .section-title h2 {
    margin: 0;
    font-size: 16px;
  }

  .install-table-panel .section-title span,
  .delivery-table-panel .section-title span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-command-row,
  .delivery-command-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .install-command-row input,
  .delivery-command-row input {
    grid-column: 1 / -1;
  }

  .install-command-row button,
  .delivery-command-row button {
    grid-column: 1 / -1;
  }

  .install-command-row input,
  .install-command-row select,
  .install-command-row button,
  .delivery-command-row input,
  .delivery-command-row select,
  .delivery-command-row button {
    min-width: 0;
    min-height: 32px;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 10px;
  }

  .install-table-wrap,
  .delivery-table-wrap {
    min-height: 0;
    overflow-y: auto;
    border: 0;
  }

  .install-table,
  .delivery-table,
  .install-table thead,
  .delivery-table thead,
  .install-table tbody,
  .delivery-table tbody,
  .install-table tr,
  .delivery-table tr,
  .install-table td,
  .delivery-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .install-table thead,
  .delivery-table thead {
    display: none;
  }

  .install-table tbody,
  .delivery-table tbody {
    display: grid;
    gap: 7px;
  }

  .install-table tr,
  .delivery-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 7px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid #e8edf5;
    border-radius: 8px;
    background: #fbfdff;
  }

  .install-table td,
  .delivery-table td {
    height: auto;
    min-width: 0;
    padding: 2px 0;
    border: 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-table td:nth-child(1),
  .delivery-table td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
  }

  .install-table td:nth-child(2),
  .delivery-table td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    color: #52647d;
    font-size: 10px;
    font-weight: 600;
  }

  .install-table td:nth-child(3),
  .install-table td:nth-child(4),
  .delivery-table td:nth-child(3) {
    display: none;
  }

  .install-table td:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
    color: #52647d;
    font-weight: 600;
  }

  .install-table td:nth-child(6) {
    grid-column: 1;
    grid-row: 4;
    text-align: left;
    color: #52647d;
    font-size: 10px;
    font-weight: 700;
  }

  .install-table td:nth-child(7) {
    grid-column: 1;
    grid-row: 5;
    justify-self: start;
  }

  .install-table td:nth-child(8) {
    grid-column: 1;
    grid-row: 6;
  }

  .install-table td:nth-child(9) {
    grid-column: 1;
    grid-row: 7;
    color: #52647d;
  }

  .install-table td:nth-child(10) {
    grid-column: 1;
    grid-row: 8;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .delivery-table td:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
    color: #52647d;
    font-weight: 600;
  }

  .delivery-table td:nth-child(5) {
    grid-column: 1;
    grid-row: 4;
    text-align: left;
    color: #52647d;
    font-size: 10px;
    font-weight: 700;
  }

  .delivery-table td:nth-child(6) {
    grid-column: 1;
    grid-row: 5;
    color: #087c7a;
    font-weight: 700;
  }

  .delivery-table td:nth-child(7) {
    grid-column: 1;
    grid-row: 6;
    text-align: left;
    color: #52647d;
    font-size: 10px;
    font-weight: 700;
  }

  .delivery-table td:nth-child(8) {
    grid-column: 1;
    grid-row: 7;
    justify-self: start;
  }

  .delivery-table td:nth-child(9) {
    grid-column: 1;
    grid-row: 8;
    color: #52647d;
  }

  .delivery-table td:nth-child(10) {
    grid-column: 1;
    grid-row: 9;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .install-progress {
    height: 5px;
  }

  .install-table small {
    font-size: 9px;
  }

  .install-stage-tag,
  .delivery-stage-tag {
    max-width: 64px;
    overflow: hidden;
    padding: 3px 6px;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .install-table td:nth-child(10) .table-action,
  .delivery-table td:nth-child(10) .table-action {
    width: 100%;
    min-width: 0;
    height: 24px;
    border-radius: 6px;
    padding: 0 5px;
    font-size: 9px;
  }
}

@media (max-width: 760px) {
  .erp-topbar {
    height: 58px;
    min-height: 58px;
    gap: 8px;
    padding: 0 10px;
  }

  .topbar-left {
    min-width: 0;
    gap: 8px;
  }

  .topbar-left span {
    display: none;
  }

  .topbar-left strong {
    max-width: 78px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-right {
    min-width: 0;
    gap: 6px;
  }

  .topbar-right > strong {
    display: none;
  }

  .topbar-right .select-control,
  .lead-topbar-actions .select-control {
    width: 96px;
    height: 34px;
    min-height: 34px;
    font-size: 11px;
  }

  .login-shell {
    min-height: 100dvh;
    place-items: stretch;
    padding: 14px;
  }

  .login-card {
    width: 100%;
    min-height: calc(100dvh - 28px);
    display: grid;
    align-content: center;
    padding: 20px;
  }

  .brand-logo-login {
    width: 62vw;
    max-width: 260px;
  }

  .login-copy h1 {
    font-size: 24px;
  }

  .login-form select,
  .login-form input,
  .login-submit {
    height: 48px;
    font-size: 15px;
  }

  .topbar-right .login-user-switch,
  .lead-topbar-actions .login-user-switch {
    min-width: 0;
    width: auto;
    gap: 5px;
  }

  .topbar-right .login-user-switch .avatar,
  .lead-topbar-actions .login-user-switch .avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 10px;
  }

  .topbar-right .login-user-name,
  .lead-topbar-actions .login-user-name {
    max-width: 72px;
    font-size: 11px;
  }

  .topbar-right .logout-button,
  .lead-topbar-actions .logout-button {
    width: 42px;
    height: 30px;
    padding: 0;
    font-size: 10px;
  }

  .install-plan-layout .topbar-right,
  .delivery-plan-layout .topbar-right {
    left: 286px;
    right: auto;
  }

  .install-plan-head .desktop-home-button,
  .delivery-plan-head .desktop-home-button {
    left: 318px !important;
    right: auto !important;
  }

  .install-plan-head .desktop-return-button,
  .delivery-plan-head .desktop-return-button {
    left: 354px !important;
    right: auto !important;
  }
}

/* Desktop workbench cleanup: stable button-like menu cards without text overlap. */
@media (min-width: 761px) {
  .desktop-workbench-layout .desktop-content {
    grid-template-rows: 140px 64px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #fffaf0 0%, #f7f9fc 36%, #f3f6fa 100%);
  }

  .desktop-workbench-layout .desktop-hero {
    min-height: 0;
    height: 140px;
    align-items: center;
    overflow: hidden;
  }

  .desktop-workbench-layout .desktop-hero-logo {
    width: min(430px, 40vw);
    max-height: 86px;
    margin: 4px 0 0;
    overflow: hidden;
  }

  .desktop-workbench-layout .desktop-hero-logo img {
    max-height: 86px;
    object-fit: contain;
  }

  .desktop-workbench-layout .desktop-hero h1,
  .desktop-workbench-layout .desktop-hero > div:first-child > p {
    display: none;
  }

  .desktop-workbench-layout .desktop-owner-card {
    min-height: 0;
    align-content: center;
  }

  .desktop-workbench-layout .desktop-stats {
    align-items: stretch;
  }

  .desktop-workbench-layout .desktop-stats article {
    min-height: 0;
    overflow: hidden;
  }

  .desktop-workbench-layout .desktop-module-section {
    padding: 12px;
    border-color: #e6edf6;
    background: #fff;
    box-shadow: none;
  }

  .desktop-workbench-layout .desktop-module-grid {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .desktop-workbench-layout .desktop-module-card {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 88px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 12px;
    border: 1px solid #f0d190;
    border-radius: 9px;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(190, 128, 18, 0.18), 0 8px 18px rgba(15, 35, 65, 0.055);
  }

  .desktop-workbench-layout .desktop-module-card > div:nth-child(2) {
    min-width: 0;
    display: grid;
    align-content: center;
  }

  .desktop-workbench-layout .desktop-module-card h3 {
    margin: 0 0 4px;
    overflow: hidden;
    color: #061b45;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }

  .desktop-workbench-layout .desktop-module-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #53657f;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .desktop-workbench-layout .module-card-foot {
    min-width: 0;
    display: grid;
    justify-items: end;
    align-content: center;
    gap: 5px;
    padding: 0;
    border-top: 0;
  }

  .desktop-workbench-layout .module-card-foot strong {
    max-width: 86px;
    overflow: hidden;
    color: #061b45;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .desktop-workbench-layout .module-card-foot span {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #f0d190;
    border-radius: 999px;
    padding: 0 9px;
    color: #8a4f00;
    background: #fff7e6;
    font-size: 11px;
    font-weight: 600;
  }

  .desktop-workbench-layout .desktop-module-card:not(.is-coming):hover {
    border-color: #ffb31a;
    background: #fffaf0;
    transform: translateY(-2px);
    box-shadow: 0 3px 0 rgba(190, 128, 18, 0.22), 0 14px 24px rgba(15, 35, 65, 0.09);
  }
}

@media (max-width: 760px) {
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    grid-template-areas:
      "head head"
      "policy entry"
      "alerts table"
      "flow table";
    grid-template-columns: 118px minmax(0, 1fr);
    grid-template-rows: auto 172px minmax(118px, 0.6fr) minmax(0, 1fr);
  }

  .erp-layout:has(.sales-orders-content) .sales-order-command,
  .erp-layout:has(.sales-orders-content) .sales-data-pulse {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    grid-area: entry;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    display: block;
    overflow: auto;
    margin: 0;
    border: 1px solid #f0d190;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-alert-window {
    grid-area: alerts;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
    border-radius: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-alert-window .section-title h2 {
    font-size: 13px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-alert-list {
    max-height: 112px;
    overflow-y: auto;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-alert-list button {
    padding: 8px 26px 8px 8px;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title {
    min-height: 0;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title h2 {
    font-size: 13px;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title span,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(2),
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(3),
  .erp-layout:has(.sales-orders-content) .sales-update-log {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form input,
  .erp-layout:has(.sales-orders-content) .sales-update-form select,
  .erp-layout:has(.sales-orders-content) .sales-update-form button {
    min-width: 0;
    min-height: 32px;
    border-radius: 8px;
    font-size: 11px;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-layout,
  .erp-layout:has(.sales-orders-content) .sales-order-table-panel,
  .erp-layout:has(.sales-orders-content) .sales-order-table-wrap,
  .erp-layout:has(.sales-orders-content) .sales-order-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table tr {
    width: 100%;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(2),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(5),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(6),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(9) {
    grid-column: 2;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(12) {
    display: none;
  }

  .lead-page-layout .marketing-performance-panel {
    margin: 0;
    padding: 8px;
    overflow: hidden;
  }

  .lead-page-layout .marketing-performance-panel .section-title h2 {
    font-size: 14px;
  }

  .lead-page-layout .marketing-performance-panel .section-title span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .marketing-performance-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .lead-page-layout .marketing-report-card {
    min-width: 166px;
    min-height: 118px;
    padding: 10px;
  }

  .lead-page-layout .marketing-report-card h3 {
    font-size: 13px;
  }

  .lead-page-layout .facebook-alert-window,
  .lead-page-layout .facebook-assignment-window {
    min-height: 0;
    overflow: hidden;
    padding: 8px;
  }

  .lead-page-layout .facebook-alert-window {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .lead-page-layout .facebook-alert-list {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    gap: 6px;
  }

  .lead-page-layout .facebook-alert-window .section-title h2,
  .lead-page-layout .facebook-assignment-window .section-title h2 {
    font-size: 13px;
  }

  .lead-page-layout .facebook-alert-list button {
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    padding: 7px 24px 7px 8px;
  }

  .lead-page-layout .facebook-alert-list strong {
    grid-column: 1;
    font-size: 11px;
  }

  .lead-page-layout .facebook-alert-list span {
    grid-column: 1;
    color: #8a5600;
    font-size: 9px;
  }

  .lead-page-layout .facebook-alert-list em {
    display: none;
  }

  .lead-page-layout .facebook-alert-list b {
    top: 7px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
  }

  .lead-page-layout .facebook-assignment-list article {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .lead-page-layout .facebook-assignment-list article:nth-child(n+4) {
    display: none;
  }

  .marketing-report-layout.lead-page-layout .marketing-performance-grid,
  .marketing-report-layout.lead-page-layout .marketing-performance-panel.is-full-report .marketing-performance-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
  }

  .marketing-report-layout.lead-page-layout .marketing-report-card {
    min-width: 0;
    min-height: 0;
    padding: 10px;
  }
}

@media (max-width: 760px) {
  .desktop-workbench-layout .desktop-module-grid {
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 8px;
  }

  .desktop-workbench-layout .desktop-module-card {
    height: auto;
    min-height: 106px;
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 34px minmax(30px, auto) auto;
    align-items: stretch;
    gap: 5px;
    padding: 8px;
    overflow: hidden;
  }

  .desktop-workbench-layout .desktop-module-card > div:nth-child(2) {
    min-width: 0;
    min-height: 0;
    display: block;
    align-content: initial;
  }

  .desktop-workbench-layout .module-mark {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: 11px;
  }

  .desktop-workbench-layout .desktop-module-card h3 {
    display: block;
    margin: 0;
    overflow: visible;
    color: #061b45;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
  }

  .desktop-workbench-layout .desktop-module-card p {
    display: none;
  }

  .desktop-workbench-layout .module-card-foot {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-items: stretch;
    gap: 4px;
    padding: 0;
  }

  .desktop-workbench-layout .module-card-foot strong {
    max-width: 100%;
    align-self: center;
    overflow: hidden;
    color: #061b45;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-workbench-layout .module-card-foot span {
    min-height: 20px;
    padding: 0 7px;
    font-size: 9px;
    line-height: 1;
  }
}

@media (max-width: 760px) {
  .lead-page-layout .lead-mobile-rail {
    grid-template-rows: auto minmax(118px, 0.7fr) minmax(0, 1fr);
  }

  .lead-page-layout .lead-metrics {
    grid-template-columns: 1fr !important;
    gap: 5px;
  }

  .lead-page-layout .lead-metrics article {
    min-height: 34px !important;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 6px;
    padding: 5px 6px !important;
  }

  .lead-page-layout .lead-metrics article > span {
    position: static !important;
    inset: auto !important;
    width: 22px !important;
    height: 22px !important;
    grid-row: 1 / 3;
    margin: 0 !important;
  }

  .lead-page-layout .lead-metrics b {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    overflow: hidden;
    color: #42526d;
    font-size: 10px !important;
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lead-page-layout .lead-metrics strong {
    grid-column: 2;
    grid-row: 2;
    display: block !important;
    margin: 0 !important;
    color: #061b45;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }

  .lead-page-layout .lead-metrics em {
    display: none !important;
  }
}

/* Final desktop lead-entry correction: keep the whole customer entry form visible before the lead table. */
@media (min-width: 761px) {
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    display: block;
    overflow: auto;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-content > section {
    margin-bottom: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-alert-window,
  .erp-layout:has(.sales-orders-content) .sales-orders-layout {
    position: relative;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-alert-window {
    z-index: 4;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-layout {
    z-index: 1;
  }

  .lead-page-layout .lead-mobile-shell,
  .lead-page-layout .lead-workspace {
    height: max-content !important;
    min-height: max-content !important;
    overflow: visible !important;
  }

  .lead-page-layout #leadEntryForm {
    display: block;
    height: max-content !important;
    min-height: max-content !important;
    overflow: visible !important;
  }

  .lead-page-layout #leadEntryForm > * + * {
    margin-top: 8px;
  }

  .lead-page-layout #leadEntryForm .lead-form-grid {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .lead-page-layout #leadEntryForm .lead-form-actions {
    position: static;
    margin-top: 12px;
  }

  .lead-page-layout .lead-table-wrap {
    position: relative;
    z-index: 4;
    height: 320px !important;
    min-height: 260px !important;
    overflow: auto !important;
  }

  .lead-page-layout .lead-table td:last-child {
    position: relative;
    z-index: 6;
    min-width: 118px;
    white-space: nowrap;
  }

  .lead-page-layout .lead-table td:last-child .table-action {
    position: relative;
    z-index: 8;
    pointer-events: auto;
  }
}

/* Final mobile message-center correction: keep chat bubbles readable after multi-user collaboration records. */
@media (max-width: 760px) {
  .message-center-layout .chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  .message-center-layout .chat-thread {
    display: block !important;
    align-content: initial !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 8px 92px !important;
    background: #eef2f7 !important;
  }

  .message-center-layout .chat-thread article,
  .message-center-layout .chat-thread article.system-message,
  .message-center-layout .chat-thread article.finance-message,
  .message-center-layout .chat-thread article.collab-message {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 94% !important;
    height: auto !important;
    min-height: 58px !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin: 0 0 10px 0 !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  .message-center-layout .chat-thread article.finance-message,
  .message-center-layout .chat-thread article:nth-child(3n) {
    margin-left: auto !important;
  }

  .message-center-layout .chat-thread article.system-message {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .message-center-layout .chat-thread strong,
  .message-center-layout .chat-thread p,
  .message-center-layout .chat-thread small {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .message-center-layout .chat-thread strong {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .message-center-layout .chat-thread p {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
  }

  .message-center-layout .chat-attachment-strip {
    height: auto !important;
    min-height: 30px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .message-center-layout .chat-composer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fffaf0;
    border-top: 1px solid #f0d190;
  }
}

/* Last-pass mobile sales-order override. */
@media (max-width: 760px) {
  .erp-layout:has(.sales-orders-content .sales-team-overview) .sales-orders-content,
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    height: calc(100vh - 58px) !important;
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-rows: 64px 150px minmax(0, 1fr) !important;
    grid-template-areas:
      "head head"
      "rail entry"
      "rail orders" !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-head {
    grid-area: head !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 9px 86px 9px 10px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-policy {
    grid-area: rail !important;
    display: grid !important;
    grid-template-rows: 192px 1fr !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics article {
    min-height: 36px !important;
    padding: 7px 8px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow {
    grid-area: rail !important;
    height: calc(100% - 200px) !important;
    margin: 200px 0 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-command,
  .erp-layout:has(.sales-orders-content) .sales-data-pulse,
  .erp-layout:has(.sales-orders-content) .sales-order-alert-window {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    grid-area: entry !important;
    height: 150px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 76px !important;
    gap: 6px !important;
    height: 100% !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:first-of-type,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(4),
  .erp-layout:has(.sales-orders-content) .sales-update-form button {
    grid-column: 1 / -1 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-status {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #007a50;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form .section-title span,
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(2),
  .erp-layout:has(.sales-orders-content) .sales-update-form label:nth-of-type(3),
  .erp-layout:has(.sales-orders-content) .sales-update-log {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-layout {
    grid-area: orders !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table-panel {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table tr {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) 66px !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px 8px !important;
    min-height: 106px !important;
    padding: 9px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(2) {
    display: -webkit-box !important;
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;
    overflow: hidden !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(3) {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(5) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(6) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(9) {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(10) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(12) {
    grid-column: 3 !important;
    grid-row: 2 / span 2 !important;
    display: grid !important;
    gap: 4px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(4),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(7),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(8),
  .erp-layout:has(.sales-orders-content) .sales-order-table td:nth-child(11) {
    display: none !important;
  }
}

/* Sales quote upload and approval archive. */
.sales-quote-form {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.sales-quote-form .section-title,
.sales-quote-form .quote-note-field,
.sales-quote-actions {
  grid-column: 1 / -1;
}

.sales-quote-form label {
  display: grid;
  gap: 5px;
  color: #5d6e86;
  font-size: 11px;
  font-weight: 800;
}

.sales-quote-form input,
.sales-quote-form select,
.sales-quote-form textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  padding: 0 10px;
  color: #071f3d;
  background: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
}

.sales-quote-form textarea {
  min-height: 56px;
  padding: 9px 10px;
  line-height: 1.35;
  resize: vertical;
}

.sales-quote-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.sales-quote-actions button {
  min-height: 38px;
}

.sales-quote-archive-list {
  display: grid;
  gap: 7px;
}

.sales-quote-archive-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
}

.sales-quote-archive-list article b,
.sales-quote-archive-list article strong,
.sales-quote-archive-list article span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-quote-archive-list article button {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.sales-update-log-title {
  margin-top: 8px;
}

.sales-followup-dashboard {
  border: 1px solid #f0d190;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.sales-followup-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sales-followup-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  border: 1px solid #dfeaf6;
  border-radius: 8px;
  padding: 9px;
  background: #fbfdff;
}

.sales-followup-list strong,
.sales-followup-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-followup-list strong {
  color: #061b45;
  font-size: 12px;
}

.sales-followup-list span,
.sales-followup-list b {
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
}

.sales-followup-list button {
  grid-column: 1 / -1;
}

.sales-team-overview {
  border: 1px solid #f0d190;
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #fffaf0 0%, #fff 100%);
}

.sales-team-overview-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.sales-team-overview-list article {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid #f3d79a;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.sales-team-overview-list article.needs-manager {
  border-color: #f7a83b;
  background: #fff7e8;
}

.sales-team-overview-list strong,
.sales-team-overview-list span,
.sales-team-overview-list b,
.sales-team-overview-list em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-team-overview-list strong {
  color: #061b45;
  font-size: 13px;
  font-weight: 900;
}

.sales-team-overview-list span,
.sales-team-overview-list em {
  color: #52647d;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.sales-team-overview-list b {
  color: #b45309;
  font-size: 12px;
  font-weight: 900;
}

@media (min-width: 761px) {
  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) minmax(320px, 0.85fr);
    align-items: start;
  }
}

@media (max-width: 760px) {
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    grid-template-rows: 64px 116px 330px minmax(0, 1fr) !important;
    grid-template-areas:
      "head head"
      "rail follow"
      "rail entry"
      "rail orders" !important;
  }

  .erp-layout:has(.sales-orders-content .sales-team-overview) .sales-orders-content {
    grid-template-rows: 64px 92px 104px 278px minmax(0, 1fr) !important;
    grid-template-areas:
      "head head"
      "team team"
      "rail follow"
      "rail entry"
      "rail orders" !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview {
    grid-area: team;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview .section-title {
    min-height: 20px;
    margin-bottom: 5px;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview .section-title h2 {
    font-size: 14px;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview .section-title span {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list article {
    min-width: 128px;
    gap: 2px;
    padding: 6px;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list em {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list article:nth-child(n+5) {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-dashboard {
    grid-area: follow;
    min-height: 0;
    margin: 0;
    padding: 8px;
    overflow: hidden;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-dashboard .section-title {
    min-height: 24px;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-dashboard .section-title h2 {
    font-size: 14px;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-dashboard .section-title span {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-list article {
    min-width: 172px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-list article:nth-child(n+4) {
    display: none;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-list button {
    min-height: 24px;
    font-size: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    height: 330px !important;
    padding: 8px !important;
    overflow-y: auto !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 6px !important;
    height: auto;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form .section-title {
    grid-column: 1 / -1;
    display: block !important;
    min-height: 0;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form .section-title h2 {
    overflow: hidden;
    font-size: 16px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form .section-title span {
    display: block;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form label {
    gap: 3px;
    font-size: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form label:first-of-type,
  .erp-layout:has(.sales-orders-content) .sales-quote-form label:nth-of-type(3),
  .erp-layout:has(.sales-orders-content) .sales-quote-form .quote-note-field,
  .erp-layout:has(.sales-orders-content) .sales-quote-actions {
    grid-column: 1 / -1;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form input,
  .erp-layout:has(.sales-orders-content) .sales-quote-form select,
  .erp-layout:has(.sales-orders-content) .sales-quote-form textarea {
    min-height: 30px;
    border-radius: 8px;
    font-size: 11px;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form textarea {
    min-height: 34px;
    padding: 7px 8px;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-actions {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 6px;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-actions button {
    min-height: 30px;
    padding: 0 7px;
    font-size: 10px;
  }

  .erp-layout:has(.sales-orders-content) .sales-update-form,
  .erp-layout:has(.sales-orders-content) .sales-update-log {
    display: none !important;
  }
}

/* Sales project daily report full-screen page. */
.sales-report-page {
  min-height: calc(100vh - 70px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

.sales-report-head,
.sales-report-context article,
.sales-daily-report-form,
.sales-report-history {
  border: 1px solid #f0d190;
  border-radius: 8px;
  background: #fff;
}

.sales-report-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 16px;
}

.sales-report-head h1 {
  margin: 0;
  color: #061b45;
  font-size: 26px;
  line-height: 1.1;
}

.sales-report-head p {
  margin: 5px 0 0;
  color: #53657f;
  font-size: 13px;
  font-weight: 700;
}

.sales-report-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.sales-report-context article {
  min-height: 82px;
  padding: 13px;
}

.sales-report-context span,
.sales-report-context small {
  display: block;
  overflow: hidden;
  color: #53657f;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-report-context strong {
  display: block;
  margin: 6px 0;
  overflow: hidden;
  color: #061b45;
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-report-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
  overflow: hidden;
}

.sales-daily-report-form,
.sales-report-history {
  min-height: 0;
  padding: 14px;
  overflow: auto;
}

.sales-daily-report-form {
  display: grid;
  gap: 10px;
  align-content: start;
}

.sales-daily-report-form label {
  display: grid;
  gap: 5px;
  color: #53657f;
  font-size: 12px;
  font-weight: 800;
}

.sales-daily-report-form input,
.sales-daily-report-form select,
.sales-daily-report-form textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  padding: 0 11px;
  color: #061b45;
  background: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}

.sales-daily-report-form textarea {
  min-height: 150px;
  padding: 10px 11px;
  line-height: 1.5;
  resize: vertical;
}

.sales-report-history {
  display: grid;
  align-content: start;
  gap: 10px;
}

.sales-report-history article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #dfeaf6;
  border-radius: 8px;
  background: #fbfdff;
}

.sales-report-history b,
.sales-report-history strong {
  display: block;
  color: #061b45;
}

.sales-report-history p {
  margin: 6px 0 0;
  color: #36506f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.sales-report-history footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-report-history footer span {
  min-height: 24px;
  border-radius: 999px;
  padding: 5px 9px;
  color: #8a5600;
  background: #fff3cc;
  font-size: 11px;
  font-weight: 800;
}

.sales-report-history .empty-report {
  color: #53657f;
  background: #fffaf0;
}

@media (max-width: 760px) {
  .erp-layout:has(.sales-report-page) {
    height: 100vh;
    overflow: hidden;
    background: #fffaf0;
  }

  .erp-layout:has(.sales-report-page) .erp-sidebar {
    display: none;
  }

  .erp-layout:has(.sales-report-page) .erp-main {
    height: 100vh;
    overflow: hidden;
  }

  .erp-layout:has(.sales-report-page) .erp-topbar {
    height: 58px;
    min-height: 58px;
    padding: 8px 10px;
  }

  .sales-report-page {
    height: calc(100vh - 58px);
    min-height: 0;
    grid-template-rows: 72px 158px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }

  .sales-report-head {
    min-height: 72px;
    padding: 10px 86px 10px 10px;
    border-color: #f0b33c;
  }

  .sales-report-head h1 {
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-report-head p {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sales-report-head .desktop-home-button,
  .sales-report-head .desktop-return-button {
    position: absolute !important;
    top: 17px !important;
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
  }

  .sales-report-head .desktop-home-button {
    right: 50px !important;
  }

  .sales-report-head .desktop-return-button {
    right: 10px !important;
  }

  .sales-report-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sales-report-context article {
    min-height: 74px;
    padding: 8px;
  }

  .sales-report-context strong {
    margin: 2px 0;
    font-size: 13px;
  }

  .sales-report-context small {
    font-size: 10px;
    line-height: 1.2;
  }

  .sales-report-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }

  .sales-daily-report-form {
    max-height: 372px;
    padding: 10px;
  }

  .sales-daily-report-form .section-title h2,
  .sales-report-history .section-title h2 {
    font-size: 16px;
  }

  .sales-daily-report-form textarea {
    min-height: 92px;
  }

  .sales-report-history {
    padding: 10px;
  }
}

/* Sales participation controls inside project workflow nodes 2-11. */
.node-sales-panel {
  grid-column: span 2;
}

.node-sales-form {
  display: grid;
  gap: 10px;
}

.node-sales-form label {
  display: grid;
  gap: 5px;
  color: #53657f;
  font-size: 12px;
  font-weight: 800;
}

.node-sales-form select,
.node-sales-form textarea,
.node-sales-form input[type="file"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d9e4f2;
  border-radius: 8px;
  padding: 0 10px;
  color: #061b45;
  background: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}

.node-sales-form textarea {
  min-height: 92px;
  padding: 10px;
  line-height: 1.45;
  resize: vertical;
}

.node-sales-upload-row,
.node-sales-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.node-sales-manager-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 9px;
  background: #fff8e8;
}

.node-sales-manager-check input {
  width: 16px;
  height: 16px;
}

#nodeSalesStatus {
  margin: 0;
  color: #53657f;
  font-size: 12px;
  font-weight: 800;
}

#nodeSalesStatus.success {
  color: #008b54;
}

#customerNoticeText {
  min-height: 80px;
  color: #36506f;
  background: #fbfdff;
}

.node-sales-history {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.node-sales-history > strong {
  color: #061b45;
  font-size: 14px;
}

.node-sales-history article {
  display: grid;
  gap: 5px;
  border: 1px solid #dfeaf6;
  border-radius: 8px;
  padding: 9px;
  background: #fbfdff;
}

.node-sales-history b,
.node-sales-history span,
.node-sales-history small {
  display: block;
  color: #53657f;
  font-size: 12px;
  font-weight: 800;
}

.node-sales-history p {
  margin: 0;
  color: #061b45;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .node-sales-panel {
    grid-column: 1 !important;
  }

  .node-sales-upload-row,
  .node-sales-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .node-sales-form textarea {
    min-height: 84px;
  }

  #customerNoticeText {
    min-height: 70px;
  }
}

/* Final sales-order overflow guard: inner carousels may scroll, the whole workbench must not. */
body:has(.sales-orders-content),
.erp-layout:has(.sales-orders-content),
.erp-layout:has(.sales-orders-content) .erp-main,
.erp-layout:has(.sales-orders-content) .sales-orders-content {
  overflow-x: hidden !important;
}

.erp-layout:has(.sales-orders-content) .sales-orders-content > section {
  max-width: 100%;
  min-width: 0;
}

/* Mobile sales-order workstation: compact manager widgets and protect the quote/order workspace. */
@media (max-width: 760px) {
  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    height: calc(100vh - 58px) !important;
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    grid-template-rows: 64px 236px minmax(0, 1fr) !important;
    grid-template-areas:
      "head head"
      "rail entry"
      "rail orders" !important;
    gap: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-followup-dashboard {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview {
    grid-area: team !important;
    height: 74px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview .section-title {
    height: 18px !important;
    min-height: 0 !important;
    margin: 0 0 4px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview .section-title h2 {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview .section-title span {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list {
    height: 40px !important;
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 2px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list article {
    min-width: 112px !important;
    height: 38px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: 17px 15px !important;
    gap: 0 5px !important;
    padding: 4px 6px !important;
    border-radius: 7px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list strong {
    grid-column: 1 / -1;
    font-size: 11px !important;
    line-height: 15px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list span,
  .erp-layout:has(.sales-orders-content) .sales-team-overview-list b {
    font-size: 9px !important;
    line-height: 13px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-team-overview-list em {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-live-entry {
    grid-area: entry !important;
    height: 236px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form .section-title h2 {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form .section-title span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #607189 !important;
    font-size: 9px !important;
    line-height: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form label {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    font-size: 10px !important;
    gap: 2px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form label span {
    overflow: hidden !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form input,
  .erp-layout:has(.sales-orders-content) .sales-quote-form select,
  .erp-layout:has(.sales-orders-content) .sales-quote-form textarea {
    min-height: 28px !important;
    font-size: 10px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-form textarea {
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-actions {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    gap: 5px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-quote-actions button {
    min-height: 28px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-layout {
    grid-area: orders !important;
  }

  .erp-layout:has(.sales-orders-content .sales-team-overview) .sales-orders-content {
    grid-template-rows: 64px 74px 236px minmax(0, 1fr) !important;
    grid-template-areas:
      "head head"
      "team team"
      "entry entry"
      "rail orders" !important;
  }

  .erp-layout:has(.sales-orders-content) .erp-topbar {
    display: grid !important;
    grid-template-columns: 146px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  .erp-layout:has(.sales-orders-content) .topbar-brand-area {
    min-width: 0 !important;
    width: 146px !important;
  }

  .erp-layout:has(.sales-orders-content) .brand-logo-topbar {
    width: 136px !important;
    height: 42px !important;
  }

  .erp-layout:has(.sales-orders-content) .brand-logo-topbar img {
    max-height: 36px !important;
  }

  .erp-layout:has(.sales-orders-content) .topbar-right {
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .topbar-right .icon-button,
  .erp-layout:has(.sales-orders-content) .topbar-right .login-user-switch,
  .erp-layout:has(.sales-orders-content) .topbar-right > strong {
    display: none !important;
  }

  .erp-layout:has(.sales-orders-content) .topbar-right .logout-button {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 32px !important;
    font-size: 10px !important;
  }

  .erp-layout:has(.sales-orders-content) .topbar-right .select-control {
    flex: 0 0 102px !important;
    width: 102px !important;
    min-width: 102px !important;
    height: 34px !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, 36px) !important;
    gap: 6px !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics article {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 28px !important;
    grid-template-rows: 15px 13px !important;
    align-items: center !important;
    gap: 0 4px !important;
    border-radius: 8px !important;
    padding: 4px 7px !important;
    overflow: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics b,
  .erp-layout:has(.sales-orders-content) .sales-order-metrics span {
    grid-column: 1;
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics b {
    grid-row: 1;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics span {
    grid-row: 2;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-metrics strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow article {
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow article:active {
    transform: translateY(1px);
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow article.active {
    border-color: #f59e0b !important;
    background: #fff7dc !important;
    box-shadow: inset 3px 0 0 #f59e0b, 0 5px 12px rgba(245, 158, 11, 0.18) !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-order-flow article.active span {
    background: #f59e0b !important;
    color: #071f45 !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-empty-state-row,
  .erp-layout:has(.sales-orders-content) .sales-empty-state-row td {
    display: block !important;
    width: 100% !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-empty-state-row td {
    border: 1px dashed #f0b33c !important;
    border-radius: 9px !important;
    padding: 14px !important;
    color: #7a4a00 !important;
    background: #fff8e8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }
}

/* Owner command center: the desktop homepage is a business dashboard, not only a launcher. */
.owner-command-hero {
  min-height: 148px;
}

.owner-command-hero .desktop-hero-logo {
  max-width: 440px;
}

.owner-command-hero h1 {
  margin-top: 8px;
}

.owner-today-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.owner-today-card,
.owner-task-card,
.owner-flow-node,
.owner-risk-item,
.owner-month-grid button,
.owner-team-grid button {
  min-width: 0;
  border: 1px solid #f1c46f;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.owner-today-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  min-height: 82px;
  padding: 13px 14px;
  box-shadow: 0 10px 24px rgba(25, 37, 62, 0.06);
}

.owner-today-card span,
.owner-month-grid span,
.owner-team-grid span {
  color: #53657f;
  font-size: 12px;
  font-weight: 600;
}

.owner-today-card strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #061b45;
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.owner-today-card em,
.owner-month-grid em,
.owner-team-grid em {
  overflow: hidden;
  color: #008b54;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-today-card.tone-orange em {
  color: #c86a00;
}

.owner-today-card.tone-purple em {
  color: #6b42e8;
}

.owner-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  grid-template-areas:
    "month tasks"
    "flow risk"
    "team risk";
  gap: 12px;
}

.owner-panel {
  min-width: 0;
  border: 1px solid #f1c46f;
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(25, 37, 62, 0.055);
}

.owner-month-panel {
  grid-area: month;
}

.owner-task-panel {
  grid-area: tasks;
}

.owner-flow-panel {
  grid-area: flow;
}

.owner-risk-panel {
  grid-area: risk;
}

.owner-team-panel {
  grid-area: team;
}

.owner-panel .section-title {
  min-height: 28px;
  margin-bottom: 10px;
}

.owner-panel .section-title h2 {
  color: #061b45;
  font-size: 18px;
  font-weight: 600;
}

.owner-panel .section-title span {
  color: #637089;
  font-size: 12px;
}

.owner-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.owner-month-grid button {
  min-height: 78px;
  border: 1px solid #e3edf8;
  border-radius: 9px;
  padding: 10px;
  background: linear-gradient(145deg, #fff, #fffaf0);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
}

.owner-month-grid strong,
.owner-team-grid strong {
  display: block;
  overflow: hidden;
  margin: 5px 0 2px;
  color: #061b45;
  font-size: 20px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.owner-task-list,
.owner-risk-list {
  display: grid;
  gap: 8px;
}

.owner-task-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  background: #fffaf0;
}

.owner-task-card strong,
.owner-risk-item strong {
  overflow: hidden;
  color: #061b45;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-task-card span {
  color: #b75f00;
  font-size: 12px;
  font-weight: 600;
}

.owner-task-card.high {
  border-color: #ffb020;
  background: #fff3d2;
}

.owner-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.owner-flow-node {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: 18px 18px;
  align-items: center;
  gap: 3px 8px;
  min-height: 58px;
  padding: 8px;
  border-color: #dfeaf6;
}

.owner-flow-node b {
  grid-row: 1 / span 2;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: #eef4fb;
  color: #53657f;
  font-size: 12px;
  font-weight: 700;
}

.owner-flow-node strong,
.owner-flow-node span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-flow-node strong {
  color: #061b45;
  font-size: 13px;
  font-weight: 600;
}

.owner-flow-node span {
  color: #637089;
  font-size: 11px;
  font-weight: 600;
}

.owner-flow-node em {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #c86a00;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.owner-flow-node.has-value {
  border-color: #f0bc55;
  background: #fff8e8;
}

.owner-flow-node.has-value b {
  background: #f5a400;
  color: #fff;
}

.owner-risk-item {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 76px;
  padding: 11px 42px 11px 12px;
  border-color: #ffd18d;
  background: #fffaf0;
}

.owner-risk-item span {
  color: #53657f;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.owner-risk-item em {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.owner-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.owner-team-grid button {
  min-height: 72px;
  padding: 10px;
  border-color: #dfeaf6;
  background: #fbfdff;
}

.owner-team-grid button:hover,
.owner-month-grid button:hover,
.owner-risk-item:hover,
.owner-task-card:hover,
.owner-flow-node:hover,
.owner-today-card:hover {
  border-color: #f5a400;
  box-shadow: 0 12px 26px rgba(245, 158, 11, 0.16);
}

.owner-legacy-stats {
  display: none;
}

@media (min-width: 1100px) {
  .desktop-workbench-layout .desktop-content {
    gap: 12px;
  }

  .desktop-workbench-layout .desktop-module-section {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .owner-command-hero {
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 168px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .owner-command-hero > div:first-child {
    min-width: 0 !important;
    display: grid !important;
    align-content: center !important;
  }

  .owner-command-hero .desktop-kicker {
    grid-row: 2 !important;
    width: max-content !important;
    max-width: 112px !important;
    min-height: 20px !important;
    margin: 3px 0 0 18px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    line-height: 20px !important;
    justify-self: start !important;
  }

  .owner-command-hero .desktop-hero-logo {
    grid-row: 1 !important;
    width: 148px !important;
    max-width: 148px !important;
    max-height: 48px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .owner-command-hero .desktop-hero-logo img {
    max-height: 46px !important;
    object-fit: contain !important;
  }

  .owner-command-hero h1,
  .owner-command-hero > div:first-child > p {
    display: none !important;
  }

  .owner-command-hero .desktop-owner-card {
    width: 100% !important;
    min-height: 58px !important;
    margin-top: 0 !important;
    padding: 8px 9px !important;
    align-content: center !important;
  }

  .owner-command-hero .desktop-owner-card strong {
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .owner-command-hero .desktop-owner-card span {
    display: -webkit-box !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    font-size: 9px !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .owner-today-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .owner-today-card {
    min-height: 74px;
    padding: 10px;
  }

  .owner-today-card strong {
    font-size: 25px;
  }

  .owner-dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tasks"
      "month"
      "flow"
      "risk"
      "team";
    gap: 10px;
  }

  .owner-panel {
    padding: 12px;
  }

  .owner-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .owner-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.owner-detail-layout {
  width: 100vw;
  min-width: 1180px;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.owner-detail-layout .erp-sidebar {
  display: none;
}

.owner-detail-layout .erp-main {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.owner-detail-content {
  height: calc(100vh - 54px);
  display: grid;
  grid-template-rows: 86px 82px minmax(0, 1fr) 54px;
  gap: 10px;
  padding: 10px 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffaf0 0%, #f4f7fb 100%);
}

.owner-detail-head,
.owner-detail-summary article,
.owner-detail-main,
.owner-detail-actions {
  border: 1px solid #f1c46f;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
}

.owner-detail-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 40px 40px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.owner-detail-head span {
  color: #c86a00;
  font-size: 12px;
  font-weight: 600;
}

.owner-detail-head h1 {
  margin: 2px 0;
  color: #061b45;
  font-size: 24px;
  font-weight: 600;
}

.owner-detail-head p {
  margin: 0;
  color: #53657f;
  font-size: 13px;
  font-weight: 500;
}

.owner-detail-head .desktop-home-button,
.owner-detail-head .desktop-return-button {
  position: static;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

.owner-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.owner-detail-summary article {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 12px;
}

.owner-detail-summary span,
.owner-detail-summary em {
  display: block;
  overflow: hidden;
  color: #53657f;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-detail-summary strong {
  margin: 3px 0;
  color: #061b45;
  font-size: 22px;
  font-weight: 600;
}

.owner-detail-main {
  min-height: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr);
  padding: 12px;
  overflow: hidden;
}

.owner-detail-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid #dfeaf6;
  border-radius: 9px;
}

.owner-detail-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}

.owner-detail-table th,
.owner-detail-table td {
  border-bottom: 1px solid #e8eef6;
  padding: 10px 9px;
  color: #061b45;
  text-align: left;
  vertical-align: middle;
}

.owner-detail-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff7e6;
  color: #53657f;
  font-size: 12px;
  font-weight: 600;
}

.owner-detail-table td span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #fff4d8;
  color: #a95a00;
  font-size: 12px;
  font-weight: 600;
}

.owner-detail-empty-row td {
  height: 120px;
  color: #637089;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.owner-detail-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.owner-detail-actions button {
  border: 1px solid #f0bc55;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff7e6, #fff);
  color: #061b45;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 760px) {
  .owner-detail-layout {
    min-width: 0;
  }

  .owner-detail-content {
    height: calc(100vh - 58px);
    grid-template-rows: 96px 62px minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 8px;
  }

  .owner-detail-head {
    grid-template-columns: minmax(0, 1fr) 34px 34px;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 9px 82px 9px 10px;
  }

  .owner-detail-head > .table-action {
    display: none;
  }

  .owner-detail-head h1 {
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .owner-detail-head p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .owner-detail-head .desktop-home-button,
  .owner-detail-head .desktop-return-button {
    position: absolute;
    top: 22px;
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .owner-detail-head .desktop-home-button {
    right: 48px;
  }

  .owner-detail-head .desktop-return-button {
    right: 10px;
  }

  .owner-detail-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .owner-detail-summary article {
    padding: 8px;
  }

  .owner-detail-summary span,
  .owner-detail-summary em {
    font-size: 10px;
  }

  .owner-detail-summary strong {
    font-size: 18px;
  }

  .owner-detail-main {
    padding: 10px;
  }

  .owner-detail-table,
  .owner-detail-table tbody,
  .owner-detail-table tr {
    display: block;
  }

  .owner-detail-table thead {
    display: none;
  }

  .owner-detail-table tr {
    margin-bottom: 8px;
    border: 1px solid #dfeaf6;
    border-radius: 9px;
    padding: 8px;
    background: #fbfdff;
  }

  .owner-detail-table td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    border-bottom: 0;
    padding: 3px 0;
    font-size: 12px;
  }

  .owner-detail-table td::before {
    content: attr(data-label);
    color: #53657f;
    font-weight: 600;
  }

  .owner-detail-table td:last-child {
    grid-template-columns: 1fr;
  }

  .owner-detail-table td:last-child::before {
    display: none;
  }

  .owner-detail-table td:last-child .table-action {
    width: 100%;
    min-height: 30px;
  }

  .owner-detail-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 5px;
  }

  .owner-detail-actions button {
    overflow: hidden;
    padding: 0 5px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* V1.1 mobile topbar safety: keep the HIPHI logo, logout, and language selector visible. */
@media (max-width: 760px) {
  .message-file-preview-modal {
    align-items: start;
    padding: 10px;
  }

  .message-file-preview-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .message-file-preview-visual {
    min-height: 180px;
  }

  .message-file-preview-info {
    padding-right: 0;
  }

  .message-file-preview-info h2 {
    font-size: 18px;
  }

  .message-file-preview-info dl {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .erp-topbar {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-brand-area {
    min-width: 0 !important;
    width: 150px !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .brand-logo-topbar {
    width: 140px !important;
    height: 42px !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .brand-logo-topbar img {
    max-height: 36px !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-right {
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-right .icon-button,
  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-right .login-user-switch,
  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-right > strong {
    display: none !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-right .logout-button {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  .erp-layout:not(.lead-page-layout):not(:has(.sales-orders-content)) .topbar-right .select-control {
    flex: 0 0 102px !important;
    width: 102px !important;
    min-width: 102px !important;
    height: 34px !important;
    font-size: 11px !important;
  }
}
/* HR Center V1.1 */
.hr-layout .erp-main {
  background: linear-gradient(180deg, #fff8ea 0%, #f6f8fb 46%, #eef3f8 100%);
}

.hr-content,
.hr-subpage-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 18px;
}

.hr-head,
.hr-policy,
.hr-module-panel,
.hr-task-panel,
.hr-approval-panel,
.hr-formula-panel,
.hr-subpage-workspace {
  border: 1px solid #f3ad2e;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 28px rgba(15, 35, 64, 0.06);
}

.hr-head {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  position: relative;
}

.hr-head h1 {
  margin: 0;
  color: #071f49;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
}

.hr-head p {
  margin: 4px 0 0;
  color: #52647d;
  font-size: 14px;
  font-weight: 500;
}

.hr-head .desktop-home-button {
  margin-left: auto;
}

.hr-policy {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(480px, 1.2fr);
  gap: 14px;
  padding: 16px;
}

.hr-policy h2,
.hr-module-panel h2,
.hr-task-panel h2,
.hr-approval-panel h2,
.hr-formula-panel h2,
.hr-subpage-workspace h2 {
  color: #071f49;
}

.hr-policy p,
.hr-policy strong {
  display: block;
  color: #263d5c;
  font-size: 13px;
  line-height: 1.55;
}

.hr-policy strong {
  margin-top: 8px;
  color: #a45400;
}

.hr-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hr-metric-grid article,
.hr-cycle-strip article,
.hr-formula-grid article,
.hr-subpage-summary article {
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  padding: 12px;
}

.hr-metric-grid span,
.hr-cycle-strip span,
.hr-subpage-summary span {
  display: block;
  color: #516681;
  font-size: 12px;
  font-weight: 700;
}

.hr-metric-grid strong,
.hr-subpage-summary strong {
  display: block;
  color: #071f49;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 6px;
}

.hr-metric-grid em,
.hr-cycle-strip em,
.hr-subpage-summary em {
  display: block;
  margin-top: 5px;
  color: #00864b;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.hr-cycle-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hr-cycle-strip strong {
  display: block;
  margin-top: 5px;
  color: #071f49;
  font-size: 18px;
}

.hr-module-panel,
.hr-formula-panel,
.hr-subpage-workspace,
.hr-salary-simulation,
.hr-subpage-simulation {
  padding: 14px;
}

.hr-salary-simulation,
.hr-subpage-simulation {
  border: 1px solid #f3ad2e;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
  box-shadow: 0 10px 28px rgba(15, 35, 64, 0.06);
}

.hr-salary-flow {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.hr-salary-step {
  min-height: 108px;
  border: 1px solid #f4b63e;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px;
  color: #071f49;
  cursor: pointer;
}

.hr-salary-step b,
.hr-linked-step-grid b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5a400;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
}

.hr-salary-step strong {
  font-size: 13px;
  line-height: 1.25;
}

.hr-salary-step span {
  color: #52647d;
  font-size: 12px;
  font-weight: 700;
}

.hr-salary-step em {
  color: #00864b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.hr-salary-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.hr-salary-operation-grid article {
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.hr-salary-operation-grid strong {
  display: block;
  color: #071f49;
  font-size: 14px;
}

.hr-salary-operation-grid p {
  margin: 6px 0 0;
  color: #52647d;
  font-size: 12px;
  line-height: 1.45;
}

.hr-linked-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.hr-linked-step-grid article {
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.hr-linked-step-grid strong {
  display: block;
  color: #071f49;
  font-size: 13px;
}

.hr-linked-step-grid span {
  display: block;
  margin-top: 4px;
  color: #52647d;
  font-size: 12px;
  line-height: 1.35;
}

.hr-linked-step-grid em {
  grid-column: 2;
  color: #b45309;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.hr-module-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.hr-module-card {
  min-height: 138px;
  border: 1px solid #f0ad27;
  border-radius: 8px;
  background: linear-gradient(150deg, #fffdfa 0%, #fff4d7 100%);
  box-shadow: inset 0 -4px 0 rgba(206, 135, 0, 0.28), 0 8px 16px rgba(15, 35, 64, 0.05);
  color: #071f49;
  text-align: left;
  padding: 12px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  cursor: pointer;
}

.hr-module-card b {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  background: #f5a400;
  box-shadow: 0 8px 14px rgba(245, 164, 0, 0.24);
}

.hr-module-card.tone-emerald b { background: #059669; }
.hr-module-card.tone-blue b { background: #1769e0; }
.hr-module-card.tone-violet b { background: #7c3aed; }
.hr-module-card.tone-rose b { background: #e11d48; }
.hr-module-card.tone-slate b { background: #334155; }

.hr-module-card strong {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

.hr-module-card span {
  color: #52647d;
  font-size: 12px;
  line-height: 1.35;
}

.hr-module-card em {
  justify-self: end;
  color: #a45400;
  font-style: normal;
  font-weight: 800;
}

.hr-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 12px;
}

.hr-task-panel,
.hr-approval-panel {
  padding: 14px;
}

.hr-task-list,
.hr-approval-list {
  display: grid;
  gap: 8px;
}

.hr-task-list article,
.hr-approval-list article {
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.hr-task-list article.is-urgent {
  border-color: #ffb020;
  background: #fff8e5;
}

.hr-task-list strong,
.hr-approval-list strong {
  display: block;
  color: #071f49;
  font-size: 13px;
}

.hr-task-list span,
.hr-approval-list span {
  display: block;
  color: #52647d;
  font-size: 12px;
  margin-top: 2px;
}

.hr-task-list em,
.hr-approval-list em,
.hr-status {
  color: #b45309;
  background: #fff3c4;
  border: 1px solid #f8c85a;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.hr-status.urgent {
  background: #ffe4e6;
  border-color: #fda4af;
  color: #be123c;
}

.hr-approval-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.hr-formula-grid,
.hr-subpage-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.hr-formula-grid strong {
  display: block;
  color: #071f49;
  font-size: 14px;
}

.hr-formula-grid span {
  display: block;
  margin-top: 5px;
  color: #53647a;
  font-size: 12px;
  line-height: 1.35;
}

.hr-command-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 180px auto auto;
  gap: 10px;
  margin-bottom: 12px;
}

.hr-command-row input,
.hr-command-row select {
  min-height: 38px;
  border: 1px solid #cfe0ef;
  border-radius: 8px;
  padding: 0 12px;
  color: #071f49;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}

.hr-table-wrap {
  overflow: auto;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  background: #fff;
}

.hr-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.hr-table th,
.hr-table td {
  border-bottom: 1px solid #e6edf4;
  padding: 10px;
  text-align: left;
  color: #071f49;
  font-size: 13px;
  vertical-align: middle;
}

.hr-table th {
  background: #fff7e5;
  color: #54657d;
  font-size: 12px;
}

.hr-table td span {
  display: block;
  color: #61728a;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .hr-policy,
  .hr-workspace-grid {
    grid-template-columns: 1fr;
  }
  .hr-module-grid,
  .hr-formula-grid,
  .hr-subpage-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hr-layout {
    min-height: 100vh;
    background: #fff8ea;
  }
  .hr-layout .erp-sidebar {
    display: none;
  }
  .hr-layout .erp-main {
    min-height: 100vh;
    width: 100%;
  }
  .hr-layout .erp-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 56px;
    padding: 8px 10px;
  }
  .hr-content,
  .hr-subpage-content {
    padding: 8px;
    gap: 8px;
  }
  .hr-head {
    min-height: 62px;
    padding: 10px;
  }
  .hr-head h1 {
    font-size: 22px;
  }
  .hr-head p {
    font-size: 12px;
    line-height: 1.35;
  }
  .hr-policy {
    padding: 10px;
    gap: 8px;
  }
  .hr-policy p,
  .hr-policy strong {
    font-size: 12px;
  }
  .hr-metric-grid,
  .hr-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .hr-metric-grid article {
    padding: 9px;
  }
  .hr-metric-grid strong {
    font-size: 20px;
  }
  .hr-cycle-strip,
  .hr-workspace-grid,
  .hr-formula-grid,
  .hr-subpage-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hr-module-panel,
  .hr-task-panel,
  .hr-approval-panel,
  .hr-formula-panel,
  .hr-subpage-workspace,
  .hr-salary-simulation,
  .hr-subpage-simulation {
    padding: 10px;
  }
  .hr-salary-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hr-salary-step {
    min-height: 96px;
  }
  .hr-salary-operation-grid,
  .hr-linked-step-grid {
    grid-template-columns: 1fr;
  }
  .hr-module-card {
    min-height: 112px;
    padding: 10px;
  }
  .hr-task-list article,
  .hr-approval-list article {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hr-command-row {
    grid-template-columns: 1fr 1fr;
  }
  .hr-command-row input {
    grid-column: 1 / -1;
  }
  .hr-table {
    min-width: 0;
  }
  .hr-table thead {
    display: none;
  }
  .hr-table,
  .hr-table tbody,
  .hr-table tr,
  .hr-table td {
    display: block;
    width: 100%;
  }
  .hr-table tr {
    border: 1px solid #dbe6f2;
    border-radius: 8px;
    margin: 8px;
    padding: 8px;
    background: #fff;
  }
  .hr-table td {
    border-bottom: 0;
    padding: 6px 4px;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    font-size: 12px;
  }
  .hr-table td::before {
    content: attr(data-label);
    color: #52647d;
    font-weight: 700;
  }
}

/* V1.1 LAN mobile lead-page fix: prevent real-phone horizontal overflow. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .lead-page-layout,
  .lead-page-layout .erp-main,
  .lead-page-layout .leads-content {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  .lead-page-layout .erp-topbar {
    width: 100vw !important;
    max-width: 100vw !important;
    grid-template-columns: 42px minmax(82px, 1fr) 52px 94px 40px 40px !important;
    gap: 5px !important;
    padding: 0 7px !important;
    overflow: hidden !important;
  }

  .lead-page-layout .erp-topbar .hamburger {
    width: 36px !important;
    min-width: 36px !important;
  }

  .lead-page-layout .topbar-profile,
  .lead-page-layout .login-user-switch {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .topbar-right,
  .lead-page-layout .topbar-tools {
    min-width: 0 !important;
    gap: 4px !important;
  }

  .lead-page-layout .topbar-right > strong,
  .lead-page-layout .login-user-name {
    display: none !important;
  }

  .lead-page-layout .logout-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  .lead-page-layout .language-select,
  .lead-page-layout .select-control {
    width: 94px !important;
    min-width: 94px !important;
    height: 34px !important;
    font-size: 11px !important;
  }

  .lead-page-layout .desktop-home-button,
  .lead-page-layout .desktop-return-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .lead-page-layout .leads-content {
    height: calc(100vh - 58px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    padding: 7px !important;
    gap: 7px !important;
  }

  .lead-page-layout .leads-head {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(58px, 0.8fr) 64px 64px 64px 82px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .lead-page-layout .leads-head h1 {
    font-size: 18px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .lead-report-top-button,
  .lead-page-layout .lead-generate-report-button,
  .lead-page-layout .lead-new-top-button {
    width: 64px !important;
    min-width: 0 !important;
    min-height: 32px !important;
    padding: 0 4px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .role-switcher select {
    width: 82px !important;
    min-width: 82px !important;
    min-height: 32px !important;
    padding: 0 7px !important;
    font-size: 10px !important;
  }

  .lead-page-layout .lead-manager-action-bar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }

  .lead-page-layout .lead-manager-action-bar button {
    flex: 0 0 auto !important;
    min-width: 88px !important;
    max-width: 108px !important;
  }

  .lead-page-layout .lead-mobile-shell {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-mobile-rail,
  .lead-page-layout .lead-workspace,
  .lead-page-layout .lead-entry-card,
  .lead-page-layout .lead-form-grid,
  .lead-page-layout .lead-field,
  .lead-page-layout .lead-control,
  .lead-page-layout .lead-ai-panel,
  .lead-page-layout .lead-ai-grid,
  .lead-page-layout .lead-ai-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .lead-page-layout .lead-mobile-rail {
    grid-template-rows: auto minmax(126px, 0.45fr) minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .lead-page-layout .lead-metrics article {
    min-height: 40px !important;
    padding: 5px !important;
  }

  .lead-page-layout .lead-mobile-list {
    padding: 7px !important;
  }

  .lead-page-layout .lead-mobile-list strong {
    font-size: 10px !important;
  }

  .lead-page-layout .lead-mobile-list span {
    font-size: 10px !important;
  }

  .lead-page-layout .lead-mobile-list small {
    font-size: 8px !important;
  }

  .lead-page-layout .lead-entry-card {
    padding: 9px !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-entry-title h2 {
    font-size: 17px !important;
  }

  .lead-page-layout .lead-entry-title p {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .lead-page-layout .lead-ai-panel {
    overflow: hidden !important;
  }

  .lead-page-layout .lead-ai-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-ai-grid article {
    flex: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 6px !important;
  }

  .lead-page-layout .lead-ai-grid article:nth-child(n+3) {
    display: none !important;
  }

  .lead-page-layout .lead-ai-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lead-page-layout .lead-ai-actions button {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .lead-form-grid .lead-field {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 42px !important;
  }

  .lead-page-layout .lead-field-label {
    font-size: 10px !important;
    word-break: keep-all !important;
  }

  .lead-page-layout .lead-control {
    width: 100% !important;
    grid-template-columns: 17px minmax(0, 1fr) !important;
    padding: 0 7px !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-control select,
  .lead-page-layout .lead-control input,
  .lead-page-layout .lead-control textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
  }

  .lead-page-layout .lead-control-unit {
    grid-template-columns: 17px minmax(0, 1fr) 28px !important;
    padding-right: 0 !important;
  }

  .lead-page-layout .lead-control-unit em {
    min-width: 28px !important;
    font-size: 11px !important;
  }

  .lead-page-layout .lead-file-control input {
    max-width: 100% !important;
    font-size: 10px !important;
  }

  .lead-page-layout .lead-form-actions {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
}

/* HIPHI ERP v1.1 owner home redesign */
.owner-home-v11 {
  min-height: 100vh;
  background: #fff;
  color: #061b43;
  overflow-x: hidden;
  padding-bottom: 92px;
}

.owner-v11-topbar {
  height: 76px;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto auto auto;
  align-items: center;
  gap: 22px;
  padding: 14px 32px;
  border-bottom: 1px solid #edf0f4;
  background: rgba(255, 255, 255, 0.98);
  position: sticky;
  top: 0;
  z-index: 30;
}

.owner-v11-logo {
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.owner-v11-logo img {
  width: 190px;
  max-width: 100%;
  display: block;
}

.owner-v11-topbar > strong {
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.owner-v11-topbar select,
.owner-v11-logout {
  min-height: 44px;
  border: 1px solid #dde3eb;
  border-radius: 12px;
  background: #fff;
  color: #061b43;
  font-size: 16px;
  font-weight: 500;
}

.owner-v11-topbar select {
  padding: 0 44px 0 18px;
}

.owner-v11-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: #a76a00;
  cursor: pointer;
}

.owner-v11-page {
  width: min(1100px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 22px 0 18px;
  display: grid;
  gap: 18px;
}

.owner-v11-kpis,
.owner-v11-two-col,
.owner-v11-month-grid,
.owner-v11-team-grid,
.owner-v11-flow,
.owner-v11-menu-grid {
  display: grid;
  gap: 16px;
}

.owner-v11-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.owner-v11-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.owner-v11-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.owner-v11-month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.owner-v11-team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.owner-v11-menu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.owner-v11-kpi,
.owner-v11-panel,
.owner-v11-section {
  border: 1px solid #edf0f4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(7, 30, 72, 0.06);
}

.owner-v11-kpi {
  min-height: 154px;
  padding: 22px 20px 18px;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 4px;
  cursor: pointer;
}

.owner-v11-kpi i,
.owner-v11-section-title i,
.owner-v11-panel-title i,
.owner-v11-menu-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.owner-v11-kpi svg,
.owner-v11-section-title svg,
.owner-v11-panel-title svg,
.owner-v11-menu-card svg,
.owner-v11-bottom-nav svg {
  width: 24px;
  height: 24px;
}

.owner-v11-kpi i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 4px;
}

.owner-v11-kpi span {
  font-size: 16px;
  font-weight: 600;
}

.owner-v11-kpi em,
.owner-v11-kpi small,
.owner-v11-mini-card span,
.owner-v11-risk-card span,
.owner-v11-month-grid em,
.owner-v11-team-grid em {
  font-style: normal;
  color: #5c6b82;
  font-size: 13px;
  font-weight: 500;
}

.owner-v11-kpi strong {
  font-size: 42px;
  line-height: 1;
  font-weight: 500;
  margin-top: 12px;
}

.owner-v11-kpi small { margin-top: 6px; }
.owner-v11-kpi.tone-blue i { color: #176bff; background: #eaf2ff; }
.owner-v11-kpi.tone-orange i { color: #ff7c18; background: #fff0df; }
.owner-v11-kpi.tone-green i { color: #0d9868; background: #e8f7f0; }
.owner-v11-kpi.tone-purple i { color: #7a45d9; background: #f2ecff; }

.owner-v11-panel,
.owner-v11-section {
  padding: 16px;
}

.owner-v11-panel-title,
.owner-v11-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #061b43;
  padding: 0;
  text-align: left;
}

.owner-v11-panel-title span,
.owner-v11-section-title h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.owner-v11-panel-title i,
.owner-v11-section-title i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #d79a10;
  background: #fff4ce;
}

.owner-v11-panel-title b,
.owner-v11-section-title button {
  border: 0;
  background: transparent;
  color: #6f7e94;
  font-size: 20px;
  cursor: pointer;
}

.owner-v11-section-title button {
  font-size: 14px;
  font-weight: 500;
}

.owner-v11-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.owner-v11-mini-card,
.owner-v11-risk-card {
  min-height: 88px;
  border: 1px solid #f0df9f;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdf7 0%, #fff9e7 100%);
  color: #061b43;
  text-align: left;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 8px;
  cursor: pointer;
}

.owner-v11-mini-card strong,
.owner-v11-risk-card strong {
  font-size: 17px;
  font-weight: 600;
}

.owner-v11-mini-card b {
  color: #cf7600;
  font-size: 22px;
  font-weight: 500;
}

.owner-v11-risk-card strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.owner-v11-risk-card em {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  background: #ef3340;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 14px;
}

.owner-v11-flow {
  align-items: center;
  margin-top: 16px;
}

.owner-v11-arrow { display: none; }

.owner-v11-flow-node {
  min-height: 96px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  gap: 4px;
  color: #061b43;
  cursor: pointer;
  position: relative;
}

.owner-v11-flow-node:not(:last-of-type)::after {
  content: "→";
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
  color: #1c2741;
  font-size: 22px;
}

.owner-v11-flow-node b {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}

.owner-v11-flow-node.tone-green b { background: #159947; }
.owner-v11-flow-node.tone-yellow b { background: #f7b500; }
.owner-v11-flow-node.tone-orange b { background: #ff8214; }
.owner-v11-flow-node.tone-red b { background: #ef3340; }
.owner-v11-flow-node strong { font-size: 15px; font-weight: 600; }
.owner-v11-flow-node span { font-size: 13px; color: #00855a; font-weight: 500; }

.owner-v11-month-grid,
.owner-v11-team-grid,
.owner-v11-menu-grid {
  margin-top: 16px;
}

.owner-v11-month-grid article,
.owner-v11-team-grid article {
  min-height: 104px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fffdf8;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: center;
}

.owner-v11-month-grid span,
.owner-v11-team-grid span {
  color: #5c6b82;
  font-size: 14px;
  font-weight: 500;
}

.owner-v11-month-grid strong,
.owner-v11-team-grid strong {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
}

.owner-v11-month-grid em,
.owner-v11-team-grid em { color: #00855a; }

.owner-v11-menu-card {
  min-height: 76px;
  border: 1px solid #edf0f4;
  border-radius: 14px;
  background: #fff;
  color: #061b43;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}

.owner-v11-menu-card i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #b9850d;
  background: #fff9e6;
  border: 1px solid #e7c56f;
}

.owner-v11-menu-card strong { font-size: 15px; font-weight: 600; }
.owner-v11-menu-card span { font-size: 13px; color: #061b43; font-weight: 500; }

.owner-v11-bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1100px, 100vw);
  height: 78px;
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #edf0f4;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 40;
  box-shadow: 0 -8px 24px rgba(7, 30, 72, 0.06);
}

.owner-v11-bottom-nav button {
  border: 0;
  background: transparent;
  color: #526176;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  position: relative;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.owner-v11-bottom-nav .active { color: #d89c13; }

.owner-v11-bottom-nav em {
  position: absolute;
  top: 12px;
  right: calc(50% - 24px);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ef3340;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  line-height: 20px;
}

@media (min-width: 761px) {
  .owner-home-v11 {
    padding-bottom: 0;
  }

  .owner-v11-bottom-nav {
    display: none;
  }
}

@media (max-width: 760px) {
  .owner-home-v11 { padding-bottom: 76px; }

  .owner-v11-topbar {
    height: 58px;
    grid-template-columns: 126px minmax(48px, 1fr) 104px 48px;
    gap: 6px;
    padding: 8px;
  }

  .owner-v11-logo img { width: 124px; }

  .owner-v11-topbar > strong {
    font-size: 12px;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .owner-v11-topbar select {
    min-height: 36px;
    border-radius: 9px;
    padding: 0 24px 0 10px;
    font-size: 12px;
  }

  .owner-v11-logout {
    min-height: 36px;
    border-radius: 9px;
    padding: 0 6px;
    font-size: 12px;
    justify-content: center;
  }

  .owner-v11-logout span { display: none; }

  .owner-v11-page {
    width: 100%;
    padding: 12px 12px 84px;
    gap: 12px;
  }

  .owner-v11-kpis { gap: 8px; }

  .owner-v11-kpi {
    min-height: 118px;
    border-radius: 12px;
    padding: 10px 8px;
  }

  .owner-v11-kpi i {
    width: 30px;
    height: 30px;
  }

  .owner-v11-kpi svg { width: 18px; height: 18px; }
  .owner-v11-kpi span { font-size: 11px; line-height: 1.2; }
  .owner-v11-kpi em,
  .owner-v11-kpi small { font-size: 10px; line-height: 1.15; }
  .owner-v11-kpi strong { font-size: 28px; margin-top: 4px; }

  .owner-v11-two-col { gap: 8px; }
  .owner-v11-panel,
  .owner-v11-section { border-radius: 14px; padding: 10px; }

  .owner-v11-panel-title span,
  .owner-v11-section-title h2 {
    gap: 6px;
    font-size: 16px;
  }

  .owner-v11-panel-title i,
  .owner-v11-section-title i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }

  .owner-v11-panel-title svg,
  .owner-v11-section-title svg { width: 15px; height: 15px; }
  .owner-v11-panel-title b,
  .owner-v11-section-title button { font-size: 13px; }

  .owner-v11-mini-grid {
    gap: 7px;
    margin-top: 9px;
  }

  .owner-v11-mini-card,
  .owner-v11-risk-card {
    min-height: 72px;
    border-radius: 10px;
    padding: 8px;
    gap: 4px;
  }

  .owner-v11-mini-card strong,
  .owner-v11-risk-card strong { font-size: 12px; line-height: 1.2; }
  .owner-v11-mini-card b { font-size: 17px; }
  .owner-v11-mini-card span,
  .owner-v11-risk-card span { font-size: 10px; line-height: 1.2; }

  .owner-v11-risk-card em {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .owner-v11-flow {
    gap: 7px;
    margin-top: 10px;
  }

  .owner-v11-flow-node {
    min-height: 76px;
    border-radius: 10px;
    gap: 2px;
  }

  .owner-v11-flow-node:not(:last-of-type)::after {
    right: -10px;
    font-size: 13px;
  }

  .owner-v11-flow-node b {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .owner-v11-flow-node strong { font-size: 11px; line-height: 1.15; }
  .owner-v11-flow-node span { font-size: 10px; line-height: 1.1; text-align: center; }

  .owner-v11-month-grid,
  .owner-v11-team-grid {
    gap: 8px;
    margin-top: 10px;
  }

  .owner-v11-month-grid article,
  .owner-v11-team-grid article {
    min-height: 78px;
    border-radius: 10px;
    padding: 8px 6px;
    gap: 3px;
  }

  .owner-v11-month-grid span,
  .owner-v11-team-grid span { font-size: 10px; line-height: 1.15; }
  .owner-v11-month-grid strong,
  .owner-v11-team-grid strong { font-size: 20px; }
  .owner-v11-month-grid em,
  .owner-v11-team-grid em { font-size: 9px; line-height: 1.1; }

  .owner-v11-menu-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .owner-v11-menu-card {
    min-height: 62px;
    border-radius: 10px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 8px 4px;
    gap: 3px;
  }

  .owner-v11-menu-card i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .owner-v11-menu-card svg { width: 17px; height: 17px; }

  .owner-v11-menu-card strong {
    max-width: 100%;
    font-size: 10px;
    line-height: 1.15;
    white-space: normal;
  }

  .owner-v11-menu-card span { font-size: 10px; }
  .owner-v11-bottom-nav { height: 68px; }
  .owner-v11-bottom-nav button { font-size: 11px; }
  .owner-v11-bottom-nav svg { width: 22px; height: 22px; }
}

/* HIPHI ERP v1.1 market leads redesign */
.lead-page-layout {
  background: #f6f8fb;
}

.lead-page-layout .lead-topbar {
  background: #062a5a !important;
  color: #fff !important;
  min-height: 70px;
  border-bottom: 0;
  box-shadow: 0 8px 22px rgba(6, 42, 90, 0.16);
}

.lead-page-layout .lead-topbar .topbar-left {
  gap: 18px;
  display: flex !important;
  align-items: center !important;
}

.lead-page-layout .lead-topbar .topbar-left .icon-button {
  color: #fff;
  font-size: 30px;
  width: 44px;
  height: 44px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,0.22);
  border-radius: 0;
  padding-right: 18px;
}

.lead-topbar-title {
  display: grid !important;
  gap: 2px;
  color: #fff !important;
  min-width: 98px;
}

.lead-topbar-title strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
}

.lead-topbar-title span {
  font-size: 13px;
  opacity: 0.86;
  letter-spacing: 0.02em;
}

.lead-page-layout .lead-topbar .login-user-switch {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  display: inline-flex !important;
  min-width: 92px;
  justify-content: center;
}

.lead-page-layout .lead-topbar .avatar {
  display: none;
}

.lead-page-layout .lead-topbar .login-user-name {
  display: inline !important;
  max-width: 88px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.lead-page-layout .lead-topbar .logout-button {
  color: #fff;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
}

.lead-page-layout .lead-topbar .logout-button::before {
  content: "↪";
  margin-right: 8px;
  font-size: 18px;
}

.lead-page-layout .lead-topbar .select-control,
.lead-page-layout .lead-topbar .desktop-home-button,
.lead-page-layout .lead-topbar .desktop-return-button {
  display: none !important;
}

.lead-v12-content {
  max-width: 1180px;
  padding: 18px 24px 18px;
  display: grid;
  gap: 14px;
}

.lead-v12-content .leads-head {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lead-v12-content .leads-title-row {
  display: none;
}

.lead-v12-content .lead-report-top-button,
.lead-v12-content .lead-generate-report-button,
.lead-v12-content .lead-new-top-button {
  min-height: 54px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(255, 168, 0, 0.16);
}

.lead-v12-content .lead-report-top-button {
  border: 1px solid #f3d588;
  background: #fffdf5;
  color: #8b6500;
}

.lead-v12-content .lead-generate-report-button {
  border: 0;
  background: linear-gradient(180deg, #ff8b22, #ff7600);
  color: #fff;
}

.lead-v12-content .lead-new-top-button {
  border: 0;
  background: linear-gradient(180deg, #1686ff, #0864f4);
  color: #fff;
}

.lead-v12-content .leads-head-actions {
  min-width: 130px;
}

.lead-v12-content .role-switcher {
  height: 54px;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  background: #fff;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.lead-v12-content .role-switcher span {
  display: none;
}

.lead-v12-content .role-switcher select {
  border: 0;
  height: 42px;
  font-size: 15px;
  font-weight: 600;
}

.lead-v12-content .lead-manager-action-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lead-v12-content .lead-manager-action-bar button {
  min-height: 52px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(7, 30, 72, 0.05);
  color: #061b43;
  font-size: 15px;
}

.lead-v12-content .lead-manager-action-bar b {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f7bd26;
  color: #061b43;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.lead-v12-content .lead-mobile-shell {
  display: grid;
  grid-template-columns: 1fr !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 14px;
}

.lead-v12-content .lead-mobile-rail {
  display: grid;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  order: 1;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 12px;
}

.lead-v12-content .lead-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  gap: 10px;
}

.lead-v12-content .lead-metrics article {
  min-height: 78px;
  border: 1px solid #edf0f4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(7, 30, 72, 0.05);
  grid-template-columns: 34px 1fr;
  padding: 12px;
}

.lead-v12-content .lead-metrics article > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff6df;
  color: #f2a400;
}

.lead-v12-content .lead-metrics strong {
  font-size: 26px;
  line-height: 1;
}

.lead-v12-content .lead-metrics b {
  font-size: 13px;
}

.lead-v12-content .lead-metrics em {
  display: none;
}

.lead-v12-content .facebook-alert-window,
.lead-v12-content .facebook-assignment-window,
.lead-v12-content .lead-mobile-list {
  display: none;
}

.lead-v12-content .lead-workspace {
  display: grid;
  grid-template-columns: 1fr !important;
  order: 2;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  gap: 14px;
}

.lead-v12-content .lead-entry-card {
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(7, 30, 72, 0.05);
  padding: 20px;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  grid-template-rows: none !important;
}

.lead-page-layout .lead-v12-content #leadEntryForm {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  grid-template-rows: none !important;
}

.lead-page-layout .lead-v12-content #leadEntryForm .lead-ai-panel,
.lead-page-layout .lead-v12-content #leadEntryForm .lead-form-grid {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.lead-v12-content .lead-entry-head {
  margin-bottom: 12px;
}

.lead-v12-content .lead-entry-title > span,
.lead-v12-content .lead-quick-button {
  display: none;
}

.lead-v12-content .lead-entry-title h2 {
  font-size: 24px;
  font-weight: 600;
}

.lead-v12-content .lead-entry-title p {
  font-size: 13px;
  color: #718098;
}

.lead-v12-content .lead-detail-status,
.lead-v12-content .lead-duplicate-alert {
  display: none;
}

.lead-v12-content .lead-ai-panel {
  order: -1;
  border: 1px solid #f2d583;
  border-radius: 14px;
  background: #fff9e9;
  box-shadow: 0 8px 20px rgba(244, 178, 31, 0.12);
  padding: 16px;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.lead-v12-content .lead-ai-head {
  align-items: center;
}

.lead-v12-content .lead-ai-head span {
  display: none;
}

.lead-v12-content .lead-ai-head strong {
  font-size: 20px;
}

.lead-v12-content .lead-ai-head strong::before {
  content: "✨ AI火眼助手 / ";
}

.lead-v12-content .lead-ai-head em {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f7b51f;
  color: #061b43;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.lead-v12-content .lead-ai-head em::after {
  content: "评分";
  writing-mode: vertical-rl;
  font-size: 11px;
  margin-left: 6px;
}

.lead-v12-content .lead-ai-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lead-v12-content .lead-ai-grid article {
  border: 1px solid #f2d583;
  border-radius: 10px;
  background: rgba(255,255,255,0.72);
  padding: 12px;
}

.lead-v12-content .lead-ai-grid article:nth-child(n+3) {
  display: none;
}

.lead-v12-content .lead-ai-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.lead-v12-content .lead-ai-actions button {
  min-height: 42px;
  border: 1px solid #f2bf41;
  border-radius: 9px;
  background: #fff9e9;
  color: #9b6400;
  font-weight: 600;
}

.lead-v12-content .lead-ai-actions button:last-child {
  background: linear-gradient(180deg, #ffc743, #ffa60a);
  color: #061b43;
}

.lead-v12-content .lead-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 34px;
  row-gap: 10px;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.lead-v12-content .lead-form-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #254f7f;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #eef2f6;
}

.lead-v12-content .lead-form-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.lead-v12-content .lead-form-section-title svg {
  width: 18px;
  height: 18px;
}

.lead-v12-content .lead-field {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lead-v12-content .lead-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #061b43;
}

.lead-v12-content .lead-control {
  min-height: 42px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  padding: 0 10px;
}

.lead-v12-content .lead-control > svg {
  width: 20px;
  height: 20px;
  color: #4f647f;
}

.lead-v12-content .lead-control select,
.lead-v12-content .lead-control input,
.lead-v12-content .lead-control textarea {
  font-size: 13px;
  font-weight: 500;
}

.lead-v12-content .lead-notes {
  grid-column: 1 / -1;
}

.lead-v12-content .lead-textarea-control {
  min-height: 96px;
}

.lead-v12-content .lead-form-actions {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.lead-v12-content .lead-clear-button {
  min-height: 56px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e1e7ef;
  color: #66758a;
  font-size: 0;
}

.lead-v12-content .lead-clear-button svg {
  width: 24px;
  height: 24px;
}

.lead-v12-content .lead-submit {
  min-height: 56px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1686ff, #0864f4);
  box-shadow: 0 8px 18px rgba(8,100,244,0.22);
  font-size: 17px;
  font-weight: 600;
}

.lead-v12-bottom-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 14px;
}

.lead-v12-list-panel {
  border: 1px solid #e8edf3;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(7,30,72,0.05);
  padding: 14px;
}

.lead-v12-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.lead-v12-panel-title svg {
  width: 18px;
  height: 18px;
  color: #2f7ecb;
}

.lead-v12-panel-title h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  flex: 1;
}

.lead-v12-panel-title button {
  border: 0;
  background: transparent;
  color: #2f7ecb;
  font-weight: 600;
}

.lead-v12-alert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.lead-v12-alert-grid button,
.lead-v12-lead-list button {
  border: 1px solid #e6ebf2;
  background: #fff;
  border-radius: 9px;
  min-height: 44px;
  color: #061b43;
  cursor: pointer;
}

.lead-v12-alert-grid button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
}

.lead-v12-alert-grid span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
}

.lead-v12-alert-grid b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f02f48;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lead-v12-lead-list {
  display: grid;
  gap: 8px;
}

.lead-v12-lead-list button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 16px;
  grid-template-areas:
    "no status arrow"
    "client sales arrow";
  gap: 2px 8px;
  text-align: left;
  padding: 8px 10px;
}

.lead-v12-lead-list strong { grid-area: no; }
.lead-v12-lead-list span { grid-area: client; color: #5c6b82; }
.lead-v12-lead-list em { grid-area: status; color: #10a66b; font-style: normal; font-weight: 600; }
.lead-v12-lead-list small { grid-area: sales; color: #5c6b82; }
.lead-v12-lead-list b { grid-area: arrow; align-self: center; color: #061b43; }

@media (max-width: 760px) {
  .lead-page-layout .lead-topbar {
    min-height: 64px;
    padding: 0 12px !important;
  }

  .lead-page-layout .lead-topbar .topbar-left {
    gap: 12px;
  }

  .lead-page-layout .lead-topbar .topbar-left .icon-button {
    width: 38px;
    height: 38px;
    font-size: 26px;
    padding-right: 12px;
  }

  .lead-topbar-title strong {
    font-size: 20px;
  }

  .lead-topbar-title span {
    font-size: 11px;
  }

  .lead-page-layout .lead-topbar .login-user-switch {
    max-width: 96px;
    padding: 7px 9px;
  }

  .lead-page-layout .lead-topbar .logout-button {
    padding: 0 4px;
    font-size: 13px;
  }

  .lead-v12-content {
    width: 100%;
    max-width: 100vw;
    padding: 12px 12px 18px !important;
    gap: 11px;
    overflow-x: hidden;
  }

  .lead-v12-content .leads-head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .lead-v12-content .leads-head-actions {
    display: none;
  }

  .lead-v12-content .lead-report-top-button,
  .lead-v12-content .lead-generate-report-button,
  .lead-v12-content .lead-new-top-button {
    min-height: 44px;
    border-radius: 8px;
    font-size: 13px;
    padding: 0 6px;
    white-space: nowrap;
  }

  .lead-v12-content .lead-manager-action-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .lead-v12-content .lead-manager-action-bar button {
    min-height: 44px;
    font-size: 12px;
    padding: 0 6px;
  }

  .lead-v12-content .lead-manager-action-bar b {
    width: 24px;
    height: 24px;
    margin-left: 4px;
  }

  .lead-v12-content .lead-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    gap: 8px;
  }

  .lead-v12-content .lead-metrics article {
    grid-column: auto !important;
    width: auto !important;
    min-height: 62px;
    grid-template-columns: 26px 1fr;
    padding: 8px;
    border-radius: 10px;
  }

  .lead-v12-content .lead-metrics article > span {
    width: 26px;
    height: 26px;
  }

  .lead-v12-content .lead-metrics article > span svg {
    width: 16px;
    height: 16px;
  }

  .lead-v12-content .lead-metrics b {
    font-size: 11px;
    line-height: 1.15;
  }

  .lead-v12-content .lead-metrics strong {
    font-size: 22px;
  }

  .lead-v12-content .lead-ai-panel {
    border-radius: 12px;
    padding: 12px;
  }

  .lead-v12-content .lead-ai-head strong {
    font-size: 17px;
  }

  .lead-v12-content .lead-ai-head em {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .lead-v12-content .lead-ai-grid {
    gap: 8px;
  }

  .lead-v12-content .lead-ai-grid article {
    padding: 9px;
  }

  .lead-v12-content .lead-ai-grid b {
    font-size: 12px;
  }

  .lead-v12-content .lead-ai-grid span {
    font-size: 11px;
  }

  .lead-v12-content .lead-ai-actions {
    gap: 8px;
  }

  .lead-v12-content .lead-ai-actions button {
    min-height: 38px;
    font-size: 12px;
  }

  .lead-v12-content .lead-entry-card {
    border-radius: 12px;
    padding: 14px;
  }

  .lead-v12-content .lead-entry-title h2 {
    font-size: 20px;
  }

  .lead-v12-content .lead-entry-title p {
    font-size: 12px;
  }

  .lead-v12-content .lead-form-grid {
    grid-template-columns: 1fr;
    row-gap: 9px;
  }

  .lead-v12-content .lead-form-section-title {
    font-size: 13px;
    margin-top: 6px;
    padding-top: 9px;
  }

  .lead-v12-content .lead-field {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
  }

  .lead-v12-content .lead-field-label {
    font-size: 12px;
  }

  .lead-v12-content .lead-control {
    min-height: 38px;
    border-radius: 8px;
    padding: 0 8px;
  }

  .lead-v12-content .lead-control > svg {
    width: 17px;
    height: 17px;
  }

  .lead-v12-content .lead-control select,
  .lead-v12-content .lead-control input,
  .lead-v12-content .lead-control textarea {
    font-size: 12px;
  }

  .lead-v12-content .lead-textarea-control {
    min-height: 78px;
  }

  .lead-v12-bottom-panels {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .lead-v12-list-panel {
    border-radius: 11px;
    padding: 10px;
  }

  .lead-v12-panel-title h3 {
    font-size: 14px;
  }

  .lead-v12-panel-title button {
    font-size: 11px;
  }

  .lead-v12-alert-grid {
    gap: 7px;
  }

  .lead-v12-alert-grid button {
    min-height: 38px;
    padding: 0 8px;
  }

  .lead-v12-alert-grid span {
    font-size: 11px;
  }

  .lead-v12-alert-grid b {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .lead-v12-lead-list button {
    min-height: 52px;
    padding: 7px 8px;
  }

  .lead-v12-lead-list strong,
  .lead-v12-lead-list em {
    font-size: 11px;
  }

  .lead-v12-lead-list span,
  .lead-v12-lead-list small {
    font-size: 10px;
  }

  .lead-v12-content .lead-form-actions {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .lead-v12-content .lead-clear-button,
  .lead-v12-content .lead-submit {
    min-height: 48px;
  }

  .lead-v12-content .lead-submit {
    font-size: 14px;
  }
}
/* HIPHI ERP v1.2 foundation upgrade */
.owner-v12-section {
  border-color: #f5b12a;
  background:
    linear-gradient(135deg, rgba(255, 248, 231, 0.94), rgba(255, 255, 255, 0.98)),
    #fff;
}

.owner-v12-section > p {
  margin: 10px 0 14px;
  max-width: 980px;
  color: #465873;
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.owner-v12-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.owner-v12-grid article {
  min-height: 86px;
  border: 1px solid #f0df9f;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  display: grid;
  align-content: center;
  gap: 5px;
}

.owner-v12-grid span,
.owner-v12-grid em {
  color: #5c6b82;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.owner-v12-grid strong {
  color: #061b43;
  font-size: 28px;
  line-height: 1;
  font-weight: 600;
}

.owner-v12-grid .tone-blue { box-shadow: inset 4px 0 0 #176bff; }
.owner-v12-grid .tone-orange { box-shadow: inset 4px 0 0 #ff9f17; }
.owner-v12-grid .tone-green { box-shadow: inset 4px 0 0 #08a56a; }
.owner-v12-grid .tone-purple { box-shadow: inset 4px 0 0 #8b5cf6; }

.owner-v12-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.owner-v12-actions button {
  min-height: 42px;
  border: 1px solid #f0b336;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff8e5, #fff1bf);
  color: #8a5300;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 720px) {
  .owner-v12-section > p {
    font-size: 12px;
    line-height: 1.45;
  }

  .owner-v12-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .owner-v12-grid article {
    min-height: 72px;
    padding: 10px;
    border-radius: 12px;
  }

  .owner-v12-grid strong {
    font-size: 22px;
  }

  .owner-v12-actions {
    grid-template-columns: 1fr;
  }
}

/* V1.2 desktop ERP page standard inspired by the approved HR reference screen. */
@media (min-width: 761px) {
  .erp-layout.is-primary-split {
    grid-template-columns: 260px minmax(0, 1fr);
    background: #f7f9fc;
  }

  .erp-layout.is-primary-split .erp-sidebar {
    width: 260px;
    padding-top: 28px;
    padding-bottom: 18px;
    background: linear-gradient(180deg, #092143, #123054);
    box-shadow: 16px 0 36px rgba(15, 35, 65, 0.16);
  }

  .erp-layout.is-primary-split .sidebar-nav {
    margin-top: 24px;
  }

  .erp-layout.is-primary-split .erp-topbar {
    height: 72px;
    min-height: 72px;
    padding: 14px 28px;
    border-bottom: 1px solid #e8edf5;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 28px rgba(15, 35, 65, 0.04);
  }

  .erp-layout.is-primary-split .erp-content {
    height: calc(100vh - 72px);
    padding: 22px 30px 26px;
    background: #f7f9fc;
  }

  .erp-layout.is-primary-split .erp-content > section {
    border-radius: 8px;
    border-color: #e6ebf3;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 35, 65, 0.06);
  }

  .erp-layout.is-primary-split .sidebar-nav button.active {
    border-color: #f6b51d;
    background: linear-gradient(135deg, #ffd45a, #f5a400);
    color: #08254a;
    box-shadow: 0 12px 28px rgba(245, 164, 0, 0.28);
  }

  .hr-layout.is-primary-split .hr-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    overflow: auto;
  }

  .hr-layout.is-primary-split .hr-head {
    display: flex;
    min-height: 0;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .hr-layout.is-primary-split .hr-head h1 {
    margin: 0;
    color: #08254a;
    font-size: 30px;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-head p {
    margin: 6px 0 0;
    color: #536783;
    font-size: 15px;
    font-weight: 600;
  }

  .hr-layout.is-primary-split .hr-head .desktop-home-button,
  .hr-layout.is-primary-split .hr-head .desktop-return-button {
    display: none;
  }

  .hr-layout.is-primary-split .hr-policy {
    display: grid;
    grid-template-columns: 1.05fr 1.55fr;
    gap: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .hr-layout.is-primary-split .hr-policy > div:first-child {
    position: relative;
    min-height: 214px;
    padding: 30px 34px 26px 92px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 35, 65, 0.06);
  }

  .hr-layout.is-primary-split .hr-policy > div:first-child::before {
    content: "HR";
    position: absolute;
    top: 28px;
    left: 28px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d4eb3, #092b68);
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-policy h2 {
    margin: 0 0 14px;
    color: #08254a;
    font-size: 22px;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-policy p {
    margin: 0;
    color: #3f5575;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
  }

  .hr-layout.is-primary-split .hr-policy strong {
    display: block;
    margin-top: 22px;
    color: #e85d04;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.7;
  }

  .hr-layout.is-primary-split .hr-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .hr-layout.is-primary-split .hr-metric-grid article {
    position: relative;
    min-height: 102px;
    align-content: center;
    padding: 18px 18px 16px 82px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 35, 65, 0.06);
  }

  .hr-layout.is-primary-split .hr-metric-grid article::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 22px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: #eaf2ff;
  }

  .hr-layout.is-primary-split .hr-metric-grid article:nth-child(2)::before,
  .hr-layout.is-primary-split .hr-metric-grid article:nth-child(5)::before {
    background: #f3edff;
  }

  .hr-layout.is-primary-split .hr-metric-grid article:nth-child(3)::before,
  .hr-layout.is-primary-split .hr-metric-grid article:nth-child(6)::before {
    background: #fff0db;
  }

  .hr-layout.is-primary-split .hr-metric-grid span {
    color: #63728a;
    font-size: 13px;
    font-weight: 700;
  }

  .hr-layout.is-primary-split .hr-metric-grid strong {
    color: #08254a;
    font-size: 28px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-metric-grid em {
    color: #00965f;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-cycle-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .hr-layout.is-primary-split .hr-cycle-strip article {
    position: relative;
    min-height: 98px;
    padding: 22px 24px 18px 92px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 35, 65, 0.06);
  }

  .hr-layout.is-primary-split .hr-cycle-strip article::before {
    content: "✓";
    position: absolute;
    top: 26px;
    left: 28px;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1769e0;
    font-weight: 900;
  }

  .hr-layout.is-primary-split .hr-cycle-strip article:nth-child(2)::before {
    background: #fff0db;
    color: #f5a400;
  }

  .hr-layout.is-primary-split .hr-cycle-strip span {
    color: #29527e;
    font-size: 13px;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-cycle-strip strong {
    display: block;
    margin-top: 4px;
    color: #08254a;
    font-size: 24px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-cycle-strip em {
    display: block;
    margin-top: 6px;
    color: #00965f;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-salary-simulation {
    padding: 20px 22px 18px;
  }

  .hr-layout.is-primary-split .section-title h2 {
    color: #08254a;
    font-size: 22px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .section-title span {
    color: #536783;
    font-size: 13px;
    font-weight: 700;
  }

  .hr-layout.is-primary-split .hr-salary-flow {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 11px;
    overflow: visible;
  }

  .hr-layout.is-primary-split .hr-salary-step {
    position: relative;
    min-height: 102px;
    padding: 14px 12px 12px;
    border: 1px solid #f1c777;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fffdf8);
    box-shadow: none;
  }

  .hr-layout.is-primary-split .hr-salary-step:not(:last-child)::after {
    content: "›";
    position: absolute;
    top: 41px;
    right: -11px;
    color: #1769e0;
    font-size: 22px;
    font-weight: 900;
  }

  .hr-layout.is-primary-split .hr-salary-step b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    background: #f5a400;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-salary-step strong {
    margin-top: 8px;
    color: #08254a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
  }

  .hr-layout.is-primary-split .hr-salary-step span {
    color: #44607e;
    font-size: 12px;
    font-weight: 700;
  }

  .hr-layout.is-primary-split .hr-salary-step em {
    color: #00965f;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
  }

  .hr-layout.is-primary-split .hr-salary-operation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
  }

  .hr-layout.is-primary-split .hr-salary-operation-grid article {
    min-height: 64px;
    padding: 16px 20px 16px 64px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #ffffff;
  }

  .hr-layout.is-primary-split .hr-salary-operation-grid strong {
    color: #08254a;
    font-size: 15px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-salary-operation-grid p {
    margin: 4px 0 0;
    color: #536783;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
  }

  .hr-layout.is-primary-split .hr-module-panel {
    padding: 18px 22px;
  }

  .hr-layout.is-primary-split .hr-module-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
  }

  .hr-layout.is-primary-split .hr-module-card {
    display: grid;
    min-height: 130px;
    align-content: start;
    gap: 8px;
    padding: 16px 14px 14px;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    text-align: left;
  }

  .hr-layout.is-primary-split .hr-module-card b {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: #f5a400;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-module-card strong {
    color: #08254a;
    font-size: 15px;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-module-card span {
    min-height: 40px;
    color: #536783;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
  }

  .hr-layout.is-primary-split .hr-module-card em {
    justify-self: end;
    color: #ff6b00;
    font-size: 18px;
    font-style: normal;
    font-weight: 850;
  }

  .hr-layout.is-primary-split .hr-workspace-grid,
  .hr-layout.is-primary-split .hr-formula-panel {
    display: none;
  }
}

/* V1.2 final desktop first-level page shell: restore the approved left navigation + full right workspace on every primary module. */
@media (min-width: 761px) {
  .erp-layout.is-primary-split.finance-layout,
  .erp-layout.is-primary-split.operations-layout,
  .erp-layout.is-primary-split.procurement-layout,
  .erp-layout.is-primary-split.design-layout,
  .erp-layout.is-primary-split.production-layout,
  .erp-layout.is-primary-split.outsourced-install-layout,
  .erp-layout.is-primary-split.install-plan-layout,
  .erp-layout.is-primary-split.delivery-plan-layout,
  .erp-layout.is-primary-split.after-sales-layout,
  .erp-layout.is-primary-split.create-project-layout,
  .erp-layout.is-primary-split.hr-layout,
  .erp-layout.is-primary-split.owner-desktop-v12-shell {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #f7f9fc !important;
  }

  .erp-layout.is-primary-split.finance-layout .erp-sidebar,
  .erp-layout.is-primary-split.operations-layout .erp-sidebar,
  .erp-layout.is-primary-split.procurement-layout .erp-sidebar,
  .erp-layout.is-primary-split.design-layout .erp-sidebar,
  .erp-layout.is-primary-split.production-layout .erp-sidebar,
  .erp-layout.is-primary-split.outsourced-install-layout .erp-sidebar,
  .erp-layout.is-primary-split.install-plan-layout .erp-sidebar,
  .erp-layout.is-primary-split.delivery-plan-layout .erp-sidebar,
  .erp-layout.is-primary-split.after-sales-layout .erp-sidebar,
  .erp-layout.is-primary-split.create-project-layout .erp-sidebar,
  .erp-layout.is-primary-split.hr-layout .erp-sidebar,
  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-sidebar {
    display: flex !important;
    width: 260px !important;
    min-width: 260px !important;
    height: 100vh !important;
    overflow: hidden auto !important;
    background: linear-gradient(180deg, #092143, #123054) !important;
  }

  .erp-layout.is-primary-split.finance-layout .erp-main,
  .erp-layout.is-primary-split.operations-layout .erp-main,
  .erp-layout.is-primary-split.procurement-layout .erp-main,
  .erp-layout.is-primary-split.design-layout .erp-main,
  .erp-layout.is-primary-split.production-layout .erp-main,
  .erp-layout.is-primary-split.outsourced-install-layout .erp-main,
  .erp-layout.is-primary-split.install-plan-layout .erp-main,
  .erp-layout.is-primary-split.delivery-plan-layout .erp-main,
  .erp-layout.is-primary-split.after-sales-layout .erp-main,
  .erp-layout.is-primary-split.create-project-layout .erp-main,
  .erp-layout.is-primary-split.hr-layout .erp-main,
  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-main {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 72px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .erp-layout.is-primary-split.finance-layout .erp-content,
  .erp-layout.is-primary-split.operations-layout .erp-content,
  .erp-layout.is-primary-split.procurement-layout .erp-content,
  .erp-layout.is-primary-split.design-layout .erp-content,
  .erp-layout.is-primary-split.production-layout .erp-content,
  .erp-layout.is-primary-split.outsourced-install-layout .erp-content,
  .erp-layout.is-primary-split.install-plan-layout .erp-content,
  .erp-layout.is-primary-split.delivery-plan-layout .erp-content,
  .erp-layout.is-primary-split.after-sales-layout .erp-content,
  .erp-layout.is-primary-split.create-project-layout .erp-content,
  .erp-layout.is-primary-split.hr-layout .erp-content,
  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100vh - 72px) !important;
    min-height: 0 !important;
    padding: 22px 30px 26px !important;
    overflow: auto !important;
    background: #f7f9fc !important;
  }

  .erp-layout.is-primary-split.finance-layout .erp-topbar,
  .erp-layout.is-primary-split.operations-layout .erp-topbar,
  .erp-layout.is-primary-split.procurement-layout .erp-topbar,
  .erp-layout.is-primary-split.design-layout .erp-topbar,
  .erp-layout.is-primary-split.production-layout .erp-topbar,
  .erp-layout.is-primary-split.outsourced-install-layout .erp-topbar,
  .erp-layout.is-primary-split.install-plan-layout .erp-topbar,
  .erp-layout.is-primary-split.delivery-plan-layout .erp-topbar,
  .erp-layout.is-primary-split.after-sales-layout .erp-topbar,
  .erp-layout.is-primary-split.create-project-layout .erp-topbar,
  .erp-layout.is-primary-split.hr-layout .erp-topbar,
  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-topbar {
    position: static !important;
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 14px 28px !important;
    overflow: visible !important;
    border-bottom: 1px solid #e8edf5 !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .owner-desktop-v12-shell .owner-v11-page {
    width: min(1280px, 100%) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 18px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi {
    min-height: 146px !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(7, 30, 72, 0.04) !important;
  }

.owner-desktop-v12-shell .owner-v11-panel,
  .owner-desktop-v12-shell .owner-v11-section {
    border-radius: 8px !important;
    box-shadow: 0 8px 18px rgba(7, 30, 72, 0.04) !important;
  }
}

.erp-topbar .mobile-global-home,
.erp-topbar .mobile-global-back {
  display: none !important;
}

@media (max-width: 760px) {
  .erp-topbar .topbar-right,
  .lead-page-layout .lead-topbar .topbar-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .erp-topbar .topbar-right .mobile-global-home,
  .erp-topbar .topbar-right .mobile-global-back,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 36px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 3 !important;
  }

  .erp-topbar .topbar-right .mobile-global-home,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home {
    order: 90 !important;
  }

  .erp-topbar .topbar-right .mobile-global-back,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back {
    order: 91 !important;
  }

  .erp-topbar .topbar-right .mobile-global-home .home-icon,
  .erp-topbar .topbar-right .mobile-global-back .return-icon,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home .home-icon,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back .return-icon {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
  }

  .erp-topbar .topbar-right .mobile-global-home .home-icon-circle,
  .erp-topbar .topbar-right .mobile-global-back .return-icon-circle,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home .home-icon-circle,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back .return-icon-circle {
    fill: #161515 !important;
  }

  .erp-topbar .topbar-right .mobile-global-home .home-icon-roof,
  .erp-topbar .topbar-right .mobile-global-home .home-icon-house,
  .erp-topbar .topbar-right .mobile-global-back .return-icon-arrow,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home .home-icon-roof,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home .home-icon-house,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back .return-icon-arrow {
    stroke: #fff !important;
    fill: none !important;
  }

  .lead-page-layout .lead-topbar .select-control {
    display: none !important;
  }

  .erp-topbar,
  .lead-page-layout .lead-topbar {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
  }

  .erp-topbar .topbar-right,
  .lead-page-layout .lead-topbar .topbar-right {
    position: static !important;
    padding-right: 86px !important;
  }

  .erp-topbar .topbar-right .mobile-global-home,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home {
    position: absolute !important;
    top: 50% !important;
    right: 52px !important;
    transform: translateY(-50%) !important;
  }

  .erp-topbar .topbar-right .mobile-global-back,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
  }

  .erp-content .mobile-parent-back:not(.mobile-global-home):not(.mobile-global-back) {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .lead-page-layout .lead-topbar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-topbar .topbar-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 12px !important;
  }

  .lead-page-layout .lead-topbar .topbar-right {
    position: static !important;
    flex: 0 0 auto !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;
  }

  .lead-page-layout .lead-topbar .topbar-right .mobile-global-home,
  .lead-page-layout .lead-topbar .topbar-right .mobile-global-back,
  .lead-page-layout .lead-topbar .mobile-global-home,
  .lead-page-layout .lead-topbar .mobile-global-back {
    display: none !important;
  }

  .lead-page-layout .lead-topbar .login-user-switch {
    min-width: 96px !important;
    max-width: 108px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
  }

  .lead-page-layout .lead-topbar .logout-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 48px !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .lead-topbar .logout-button::before {
    margin-right: 2px !important;
  }

  .lead-page-layout .lead-v12-content .leads-head {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .lead-page-layout .lead-v12-content .lead-report-top-button,
  .lead-page-layout .lead-v12-content .lead-generate-report-button,
  .lead-page-layout .lead-v12-content .lead-new-top-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 760px) {
  .lead-page-layout .lead-topbar {
    padding: 0 12px !important;
  }

  .lead-page-layout .lead-topbar .topbar-left {
    flex: 0 1 150px !important;
    max-width: 150px !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .lead-page-layout .lead-topbar .topbar-left .icon-button {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  .lead-page-layout .lead-topbar .lead-topbar-title {
    min-width: 0 !important;
    max-width: 96px !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-topbar .lead-topbar-title strong {
    display: block !important;
    max-width: 96px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  .lead-page-layout .lead-topbar .lead-topbar-title span {
    display: none !important;
  }

  .lead-page-layout .lead-topbar .topbar-right {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .lead-page-layout .lead-topbar .lead-role-switch {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 36px !important;
    padding: 0 8px !important;
  }

  .lead-page-layout .lead-topbar .lead-role-switch .avatar {
    display: none !important;
  }

  .lead-page-layout .lead-topbar .lead-role-switch .login-user-name {
    display: block !important;
    max-width: 62px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .lead-page-layout .lead-topbar .logout-button {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 36px !important;
    font-size: 13px !important;
    justify-content: center !important;
  }
}

/* Market Leads V1.2 mobile reference layout */
@media (max-width: 760px) {
  .lead-page-layout {
    background: #fff !important;
  }

  .lead-page-layout .lead-topbar {
    min-height: 68px !important;
    background: #062b61 !important;
    border-bottom: 0 !important;
    box-shadow: 0 10px 26px rgba(6, 43, 97, 0.12) !important;
  }

  .lead-page-layout .lead-topbar .topbar-left .icon-button {
    color: #fff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0 !important;
  }

  .lead-page-layout .lead-topbar .lead-topbar-title strong {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
  }

  .lead-page-layout .lead-topbar .lead-role-switch {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .lead-page-layout .lead-topbar .logout-button {
    color: #fff !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .lead-v12-content {
    padding: 10px 20px 18px !important;
    gap: 12px !important;
    background: #fff !important;
  }

  .lead-v12-content .leads-head {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .lead-v12-content .leads-title-row,
  .lead-v12-content .leads-head-actions {
    display: none !important;
  }

  .lead-v12-content .lead-report-top-button,
  .lead-v12-content .lead-generate-report-button,
  .lead-v12-content .lead-new-top-button {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(15, 77, 170, 0.12) !important;
  }

  .lead-v12-content .lead-report-top-button {
    color: #8a5b00 !important;
    border: 1px solid #f4c65e !important;
    background: linear-gradient(180deg, #fffdfa, #fff6df) !important;
  }

  .lead-v12-content .lead-generate-report-button {
    color: #fff !important;
    border: 1px solid #ff9b16 !important;
    background: linear-gradient(180deg, #ff8c20, #ff6d0c) !important;
  }

  .lead-v12-content .lead-new-top-button {
    color: #fff !important;
    border: 1px solid #1474f8 !important;
    background: linear-gradient(180deg, #1688ff, #005bea) !important;
  }

  .lead-v12-stat-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .lead-v12-stat-strip article {
    min-height: 58px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    grid-template-areas: "icon label value" "icon label value" !important;
    align-items: center !important;
    column-gap: 7px !important;
    padding: 8px 10px !important;
    border: 1px solid #eef1f7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.05) !important;
  }

  .lead-v12-stat-strip span {
    grid-area: icon !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #f5a400 !important;
    background: #fff4d7 !important;
  }

  .lead-v12-stat-strip article:nth-child(2) span { color: #ff7a1a !important; background: #fff0e4 !important; }
  .lead-v12-stat-strip article:nth-child(3) span { color: #7e55f3 !important; background: #f1ecff !important; }
  .lead-v12-stat-strip article:nth-child(4) span { color: #127eea !important; background: #eaf4ff !important; }
  .lead-v12-stat-strip article:nth-child(5) span { color: #04a96d !important; background: #e9fbf3 !important; }
  .lead-v12-stat-strip article:nth-child(6) span { color: #ec4c80 !important; background: #fff0f5 !important; }

  .lead-v12-stat-strip svg {
    width: 17px !important;
    height: 17px !important;
  }

  .lead-v12-stat-strip b {
    grid-area: label !important;
    min-width: 0 !important;
    color: #102754 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lead-v12-stat-strip strong {
    grid-area: value !important;
    color: #061b43 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .lead-v12-content .lead-manager-action-bar,
  .lead-v12-content .lead-mobile-rail,
  .lead-v12-content .lead-table-wrap,
  .lead-v12-content .lead-detail-status,
  .lead-v12-content .lead-duplicate-alert,
  .lead-v12-content .lead-quick-button,
  .lead-v12-content .approval-panel {
    display: none !important;
  }

  .lead-v12-content .lead-mobile-shell,
  .lead-v12-content .lead-workspace {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .lead-v12-content .lead-entry-card {
    width: 100% !important;
    padding: 16px !important;
    border: 1px solid #eef1f7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 10px 30px rgba(20, 33, 61, 0.05) !important;
    overflow: visible !important;
  }

  .lead-v12-content .lead-entry-head {
    margin-bottom: 12px !important;
  }

  .lead-v12-content .lead-entry-title > span {
    display: none !important;
  }

  .lead-v12-content .lead-entry-title h2 {
    font-size: 19px !important;
    line-height: 1.1 !important;
    color: #061b43 !important;
  }

  .lead-v12-content .lead-entry-title p {
    margin-top: 4px !important;
    font-size: 12px !important;
    color: #6b7890 !important;
  }

  .lead-v12-content .lead-ai-panel {
    padding: 13px !important;
    margin: 0 0 14px !important;
    border: 1px solid #f1cd71 !important;
    border-radius: 12px !important;
    background: #fff9e9 !important;
    box-shadow: none !important;
  }

  .lead-v12-content .lead-ai-head {
    margin-bottom: 10px !important;
  }

  .lead-v12-content .lead-ai-head span {
    display: none !important;
  }

  .lead-v12-content .lead-ai-head strong {
    display: inline !important;
    font-size: 17px !important;
    color: #061b43 !important;
  }

  .lead-v12-content .lead-ai-head span::before {
    content: none !important;
  }

  .lead-v12-content .lead-ai-head span::after {
    content: none !important;
  }

  .lead-v12-content .lead-ai-head em {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #f8b31c !important;
    color: #061b43 !important;
    font-size: 21px !important;
    box-shadow: none !important;
  }

  .lead-v12-content .lead-ai-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .lead-v12-content .lead-ai-grid article {
    min-width: 0 !important;
    padding: 10px !important;
    border: 1px solid #f1cd71 !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.58) !important;
  }

  .lead-v12-content .lead-ai-grid article:nth-child(n+3) {
    display: none !important;
  }

  .lead-v12-content .lead-ai-grid b {
    font-size: 12px !important;
    color: #102754 !important;
  }

  .lead-v12-content .lead-ai-grid span {
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #526078 !important;
  }

  .lead-v12-content .lead-ai-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .lead-v12-content .lead-ai-actions button {
    height: 38px !important;
    border-radius: 8px !important;
    border: 1px solid #f1b939 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #9a6400 !important;
    background: #fff8e6 !important;
  }

  .lead-v12-content .lead-ai-actions button:last-child {
    color: #5b3700 !important;
    background: linear-gradient(180deg, #ffc93b, #ffae18) !important;
  }

  .lead-v12-content .lead-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 18px !important;
  }

  .lead-v12-content .lead-form-section-title {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 10px 0 3px !important;
    padding-top: 9px !important;
    border-top: 1px solid #f0f3f8 !important;
    color: #2a78d4 !important;
    font-size: 13px !important;
  }

  .lead-v12-content .lead-form-section-title:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .lead-v12-content .lead-form-section-title svg {
    width: 17px !important;
    height: 17px !important;
  }

  .lead-v12-content .lead-field {
    display: grid !important;
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .lead-v12-content .lead-field-label {
    color: #061b43 !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    white-space: normal !important;
  }

  .lead-v12-content .lead-control {
    min-height: 38px !important;
    height: 38px !important;
    border: 1px solid #e7ebf2 !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
  }

  .lead-v12-content .lead-control > svg {
    width: 18px !important;
    height: 18px !important;
    margin-left: 8px !important;
    color: #4b5c78 !important;
  }

  .lead-v12-content .lead-control select,
  .lead-v12-content .lead-control input,
  .lead-v12-content .lead-control textarea {
    min-width: 0 !important;
    height: 36px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  .lead-v12-content .lead-notes,
  .lead-v12-content .lead-field.lead-notes {
    grid-column: 1 / -1 !important;
  }

  .lead-v12-content .lead-textarea-control {
    height: 86px !important;
    align-items: flex-start !important;
  }

  .lead-v12-content .lead-textarea-control textarea {
    height: 84px !important;
    padding: 10px !important;
  }

  .lead-v12-content .lead-form-actions {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .lead-v12-content .lead-clear-button,
  .lead-v12-content .lead-submit {
    height: 50px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
  }

  .lead-v12-content .lead-clear-button {
    padding: 0 !important;
    color: #7b879b !important;
    border: 1px solid #e7ebf2 !important;
    background: #fff !important;
    font-size: 0 !important;
  }

  .lead-v12-content .lead-clear-button svg {
    width: 22px !important;
    height: 22px !important;
  }

  .lead-v12-content .lead-submit {
    color: #fff !important;
    border: 1px solid #1777ff !important;
    background: linear-gradient(180deg, #1787ff, #0862f0) !important;
  }

  .lead-v12-bottom-panels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
  }

  .lead-v12-list-panel {
    min-height: 126px !important;
    padding: 10px !important;
    border: 1px solid #eef1f7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(20, 33, 61, 0.04) !important;
  }

  .lead-v12-panel-title {
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .lead-v12-panel-title svg {
    width: 17px !important;
    height: 17px !important;
    color: #287bd6 !important;
  }

  .lead-v12-panel-title h3 {
    font-size: 13px !important;
    color: #061b43 !important;
    font-weight: 800 !important;
  }

  .lead-v12-panel-title button {
    margin-left: auto !important;
    color: #287bd6 !important;
    font-size: 11px !important;
  }

  .lead-v12-alert-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .lead-v12-alert-grid button,
  .lead-v12-lead-list button {
    min-width: 0 !important;
    border: 1px solid #eef1f7 !important;
    border-radius: 7px !important;
    background: #fff !important;
  }

  .lead-v12-alert-grid button {
    min-height: 38px !important;
    padding: 6px 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 20px !important;
    align-items: center !important;
  }

  .lead-v12-alert-grid span {
    overflow: hidden !important;
    color: #102754 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lead-v12-alert-grid b {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: #ee1d3d !important;
    font-size: 11px !important;
  }

  .lead-v12-lead-list {
    display: grid !important;
    gap: 7px !important;
  }

  .lead-v12-lead-list button {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 12px !important;
    grid-template-areas:
      "no status arrow"
      "client sales arrow" !important;
    gap: 2px 6px !important;
    min-height: 48px !important;
    padding: 7px 8px !important;
  }

  .lead-v12-lead-list strong { grid-area: no; }
  .lead-v12-lead-list span { grid-area: client; color: #5c6b82; }
  .lead-v12-lead-list em { grid-area: status; color: #10a66b; font-style: normal; font-weight: 700; }
  .lead-v12-lead-list small { grid-area: sales; color: #5c6b82; }
  .lead-v12-lead-list b { grid-area: arrow; align-self: center; color: #061b43; }

  .lead-v12-lead-list strong,
  .lead-v12-lead-list em {
    font-size: 11px !important;
  }

  .lead-v12-lead-list span,
  .lead-v12-lead-list small {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 10px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 430px) {
  .lead-v12-content .lead-form-grid {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .lead-v12-content .lead-field {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  .lead-v12-content .lead-control select,
  .lead-v12-content .lead-control input,
  .lead-v12-content .lead-control textarea {
    font-size: 12px !important;
  }

  .lead-v12-content .lead-field.lead-notes,
  .lead-v12-content .lead-notes {
    grid-column: auto !important;
  }

  .lead-v12-bottom-panels {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-03 desktop workstation: all primary ERP pages must fit one browser viewport. */
@media (min-width: 1024px) {
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
    min-width: 1024px;
    overflow: hidden !important;
  }

  body {
    background: #f4f7fb;
  }

  .erp-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 236px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .erp-sidebar {
    width: 236px !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 18px 12px 12px !important;
    overflow: hidden !important;
  }

  .sidebar-title {
    margin-top: 8px !important;
    gap: 2px !important;
  }

  .sidebar-title strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  .sidebar-title span {
    display: none !important;
  }

  .sidebar-nav {
    min-height: 0 !important;
    margin-top: 8px !important;
    gap: 2px !important;
    overflow: hidden !important;
    padding-right: 2px !important;
  }

  .sidebar-nav button,
  .collapse-menu {
    min-height: 27px !important;
    height: 27px !important;
    gap: 8px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }

  .brand-logo-sidebar {
    width: 136px !important;
    padding: 4px 6px !important;
  }

  .erp-main {
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 56px minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .erp-topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  .brand-logo-topbar {
    width: 116px !important;
    height: 32px !important;
  }

  .brand-logo-topbar img {
    max-height: 30px !important;
  }

  .topbar-left,
  .topbar-right {
    min-width: 0 !important;
    gap: 10px !important;
  }

  .login-user-name {
    max-width: 118px !important;
  }

  .topbar-right .select-control {
    width: 104px !important;
    min-height: 30px !important;
    font-size: 12px !important;
  }

  .erp-content {
    width: 100% !important;
    max-width: 100% !important;
    height: calc(100vh - 56px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    background: #f4f7fb !important;
  }

  .erp-content > section {
    min-width: 0 !important;
  }

  .project-toolbar,
  .leads-head,
  .sales-orders-head,
  .message-head,
  .permission-head,
  .create-project-head,
  .finance-head,
  .operations-head,
  .procurement-head,
  .design-head,
  .production-head,
  .install-plan-head,
  .delivery-plan-head,
  .after-sales-head,
  .hr-head {
    min-height: 0 !important;
    max-height: 86px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .project-toolbar h1,
  .leads-head h1,
  .sales-orders-head h1,
  .message-head h1,
  .permission-head h1,
  .create-project-head h1,
  .finance-head h1,
  .operations-head h1,
  .procurement-head h1,
  .design-head h1,
  .production-head h1,
  .install-plan-head h1,
  .delivery-plan-head h1,
  .after-sales-head h1,
  .hr-head h1 {
    font-size: clamp(20px, 1.55vw, 26px) !important;
    line-height: 1.15 !important;
  }

  .dashboard-cards,
  .lead-v12-stat-strip,
  .sales-order-metrics,
  .message-metrics,
  .finance-metrics,
  .operations-metrics,
  .procurement-metrics,
  .design-metrics,
  .production-metrics,
  .install-plan-metrics,
  .delivery-plan-metrics,
  .after-sales-metrics,
  .hr-metrics {
    min-height: 0 !important;
    max-height: 88px !important;
    overflow: hidden !important;
  }

  .dashboard-cards article,
  .lead-v12-stat-strip article,
  .sales-order-metrics article,
  .message-metrics article,
  .finance-metrics article,
  .operations-metrics article,
  .procurement-metrics article,
  .design-metrics article,
  .production-metrics article,
  .install-plan-metrics article,
  .delivery-plan-metrics article,
  .after-sales-metrics article,
  .hr-metrics article {
    min-height: 54px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }

  .dashboard-cards strong,
  .lead-v12-stat-strip strong,
  .sales-order-metrics strong,
  .message-metrics strong,
  .finance-metrics strong,
  .operations-metrics strong,
  .procurement-metrics strong,
  .design-metrics strong,
  .production-metrics strong,
  .install-plan-metrics strong,
  .delivery-plan-metrics strong,
  .after-sales-metrics strong,
  .hr-metrics strong {
    font-size: clamp(17px, 1.45vw, 24px) !important;
    line-height: 1 !important;
  }

  .project-table-wrap,
  .lead-mobile-shell,
  .sales-orders-layout,
  .message-layout,
  .permission-layout,
  .create-project-layout-grid,
  .finance-layout-grid,
  .operations-layout-grid,
  .procurement-layout-grid,
  .design-layout-grid,
  .production-layout-grid,
  .install-plan-layout-grid,
  .delivery-plan-layout-grid,
  .after-sales-layout-grid,
  .hr-layout-grid {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .project-table-wrap,
  .sales-order-table-wrap,
  .lead-v12-lead-list,
  .message-chat-list,
  .permission-table-wrap,
  .finance-table-wrap,
  .operations-table-wrap,
  .procurement-table-wrap,
  .design-table-wrap,
  .production-table-wrap,
  .install-plan-table-wrap,
  .delivery-plan-table-wrap,
  .after-sales-table-wrap,
  .hr-table-wrap {
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .erp-layout * {
    scrollbar-width: none !important;
  }

  .erp-layout *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .lead-page-layout .lead-v12-content {
    grid-template-rows: 56px 78px minmax(0, 1fr) !important;
  }

  .lead-page-layout .lead-manager-action-bar,
  .lead-page-layout .lead-mobile-shell {
    display: none !important;
  }

  .lead-page-layout .leads-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 160px 160px 160px 128px !important;
    align-items: center !important;
    gap: 10px !important;
    max-height: none !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .lead-page-layout .leads-title-row h1 {
    margin: 0 !important;
    font-size: 21px !important;
  }

  .lead-page-layout .leads-title-row p {
    overflow: hidden !important;
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .lead-report-top-button,
  .lead-page-layout .lead-generate-report-button,
  .lead-page-layout .lead-new-top-button,
  .lead-page-layout .role-switcher {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    font-size: 12px !important;
  }

  .lead-page-layout .lead-v12-stat-strip {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: none !important;
  }

  .lead-page-layout .lead-v12-stat-strip article {
    min-height: 0 !important;
    height: 70px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 8px 10px !important;
  }

  .lead-page-layout .lead-v12-stat-strip article span {
    grid-row: 1 / 3 !important;
    width: 32px !important;
    height: 32px !important;
  }

  .lead-page-layout .lead-v12-stat-strip article b {
    overflow: hidden !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .lead-page-layout .lead-v12-stat-strip article strong {
    font-size: 24px !important;
  }

  .lead-page-layout .lead-table-wrap {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .lead-page-layout .lead-table-wrap .project-table {
    height: auto !important;
  }

  table {
    max-width: 100% !important;
  }

  th,
  td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .project-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .project-table th:nth-child(4),
  .project-table td:nth-child(4),
  .project-table th:nth-child(8),
  .project-table td:nth-child(8),
  .project-table th:nth-child(10),
  .project-table td:nth-child(10),
  .project-table th:nth-child(11),
  .project-table td:nth-child(11),
  .project-table th:nth-child(12),
  .project-table td:nth-child(12),
  .project-table th:nth-child(13),
  .project-table td:nth-child(13),
  .project-table th:nth-child(14),
  .project-table td:nth-child(14),
  .project-table th:nth-child(15),
  .project-table td:nth-child(15) {
    display: none !important;
  }

  .project-table th,
  .project-table td {
    height: 22px !important;
    padding: 2px 5px !important;
    font-size: 10.5px !important;
  }

  .table-action,
  .primary-row-action,
  .create-button,
  .logout-button {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .desktop-secondary-dock {
    top: 66px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: 220px !important;
    padding: 10px !important;
  }

  .erp-layout.is-primary-split .erp-content {
    height: calc(100vh - 56px) !important;
    padding-right: 242px !important;
    overflow: hidden !important;
  }

  .desktop-workbench-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .desktop-workbench-layout .erp-main {
    grid-template-rows: 54px minmax(0, 1fr) !important;
  }

  .desktop-workbench-layout .desktop-content,
  .owner-desktop-v12-shell .owner-v11-desktop-content {
    height: calc(100vh - 54px) !important;
    overflow: hidden !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  .erp-layout.is-primary-split.owner-desktop-v12-shell .erp-sidebar {
    width: 236px !important;
    min-width: 236px !important;
    padding: 12px 10px 10px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .brand-logo-sidebar {
    width: 136px !important;
    padding: 4px 6px !important;
  }

  .owner-desktop-v12-shell .sidebar-title {
    margin-top: 8px !important;
    gap: 2px !important;
  }

  .owner-desktop-v12-shell .sidebar-title strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  .owner-desktop-v12-shell .sidebar-title span {
    display: none !important;
  }

  .owner-desktop-v12-shell .sidebar-nav {
    margin-top: 8px !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .sidebar-nav button,
  .owner-desktop-v12-shell .collapse-menu {
    min-height: 27px !important;
    height: 27px !important;
    gap: 8px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  .owner-desktop-v12-shell .sidebar-nav button span {
    width: 18px !important;
  }

  .owner-desktop-v12-shell .owner-v11-desktop-content {
    padding: 10px 12px !important;
  }

  .owner-desktop-v12-shell .owner-v11-page {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 86px 150px 116px 116px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > * {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpis {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-two-col {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > .owner-v11-section:nth-of-type(3) {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-section {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  .owner-desktop-v12-shell .owner-v11-flow-section {
    grid-column: 3 / 5 !important;
    grid-row: 3 !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > .owner-v11-section:nth-of-type(6) {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
  }

  .owner-desktop-v12-shell .owner-v12-section {
    grid-column: 3 !important;
    grid-row: 4 !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-section {
    grid-column: 4 !important;
    grid-row: 4 !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi,
  .owner-desktop-v12-shell .owner-v11-panel,
  .owner-desktop-v12-shell .owner-v11-section {
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 2px 10px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi i {
    grid-row: 1 / 4 !important;
    width: 38px !important;
    height: 38px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi strong {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi b {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi span,
  .owner-desktop-v12-shell .owner-v11-kpi em {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title {
    min-height: 22px !important;
    margin-bottom: 6px !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title h2 {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title span,
  .owner-desktop-v12-shell .owner-v11-section-title button {
    font-size: 11px !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-grid,
  .owner-desktop-v12-shell .owner-v11-risk-grid,
  .owner-desktop-v12-shell .owner-v11-month-grid,
  .owner-desktop-v12-shell .owner-v11-team-grid,
  .owner-desktop-v12-shell .owner-v11-menu-grid,
  .owner-desktop-v12-shell .owner-sales-funnel-grid,
  .owner-desktop-v12-shell .owner-v11-flow {
    gap: 6px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card,
  .owner-desktop-v12-shell .owner-v11-risk-item,
  .owner-desktop-v12-shell .owner-v11-month-grid article,
  .owner-desktop-v12-shell .owner-v11-team-grid article,
  .owner-desktop-v12-shell .owner-v11-menu-card,
  .owner-desktop-v12-shell .owner-sales-funnel-card,
  .owner-desktop-v12-shell .owner-v11-flow-node {
    min-height: 0 !important;
    padding: 7px 8px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card strong,
  .owner-desktop-v12-shell .owner-v11-risk-item strong,
  .owner-desktop-v12-shell .owner-v11-month-grid strong,
  .owner-desktop-v12-shell .owner-v11-team-grid strong,
  .owner-desktop-v12-shell .owner-v11-menu-card strong,
  .owner-desktop-v12-shell .owner-sales-funnel-card strong,
  .owner-desktop-v12-shell .owner-v11-flow-node strong {
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card span,
  .owner-desktop-v12-shell .owner-v11-risk-item span,
  .owner-desktop-v12-shell .owner-v11-month-grid span,
  .owner-desktop-v12-shell .owner-v11-team-grid span,
  .owner-desktop-v12-shell .owner-v11-menu-card span,
  .owner-desktop-v12-shell .owner-sales-funnel-card span,
  .owner-desktop-v12-shell .owner-v11-flow-node span,
  .owner-desktop-v12-shell .owner-v12-section p,
  .owner-desktop-v12-shell .owner-v12-section li {
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
  }

  .owner-desktop-v12-shell .owner-v12-section ul {
    margin: 6px 0 0 !important;
    padding-left: 14px !important;
  }

  .owner-desktop-v12-shell .owner-v11-month-grid,
  .owner-desktop-v12-shell .owner-v11-team-grid,
  .owner-desktop-v12-shell .owner-v11-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-grid,
  .owner-desktop-v12-shell .owner-v11-flow {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-card p,
  .owner-desktop-v12-shell .owner-sales-funnel-card em,
  .owner-desktop-v12-shell .owner-v11-flow-node em {
    display: none !important;
  }
}

/* 2026-07-03 desktop no-clipping full-screen override */
@media (min-width: 1024px) {
  html,
  body,
  #app,
  .erp-layout,
  .erp-main {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .erp-content,
  .erp-layout.is-primary-split .erp-content,
  .desktop-content,
  .owner-v11-desktop-content,
  .owner-desktop-v12-content,
  .sales-orders-content,
  .permissions-content,
  .finance-content,
  .operations-content,
  .procurement-content,
  .design-content,
  .production-content,
  .outsourced-install-content,
  .install-plan-content,
  .delivery-plan-content,
  .after-sales-content,
  .hr-content,
  .create-project-content {
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .erp-content::-webkit-scrollbar,
  .desktop-content::-webkit-scrollbar,
  .owner-v11-desktop-content::-webkit-scrollbar,
  .owner-desktop-v12-content::-webkit-scrollbar,
  .sales-orders-content::-webkit-scrollbar,
  .permissions-content::-webkit-scrollbar,
  .finance-content::-webkit-scrollbar,
  .operations-content::-webkit-scrollbar,
  .procurement-content::-webkit-scrollbar,
  .design-content::-webkit-scrollbar,
  .production-content::-webkit-scrollbar,
  .outsourced-install-content::-webkit-scrollbar,
  .install-plan-content::-webkit-scrollbar,
  .delivery-plan-content::-webkit-scrollbar,
  .after-sales-content::-webkit-scrollbar,
  .hr-content::-webkit-scrollbar,
  .create-project-content::-webkit-scrollbar,
  .project-table-wrap::-webkit-scrollbar,
  .lead-table-wrap::-webkit-scrollbar,
  .sales-order-table-wrap::-webkit-scrollbar,
  .lead-v12-content .lead-table-wrap::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .project-table-wrap,
  .lead-table-wrap,
  .sales-order-table-wrap,
  .lead-v12-content .lead-table-wrap,
  .erp-layout:has(.sales-orders-content) .sales-orders-layout,
  .erp-layout:has(.sales-orders-content) .sales-order-table-panel {
    min-height: 0 !important;
    overflow: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .erp-layout:has(.sales-orders-content) .sales-orders-content > section,
  .erp-layout.is-primary-split .erp-content > section,
  .erp-content > section {
    max-width: 100% !important;
  }
}
/* end 2026-07-03 desktop no-clipping full-screen override */

/* 2026-07-03 desktop page-by-page clipping fixes */
@media (min-width: 1024px) {
  .erp-layout.is-primary-split .erp-content,
  .finance-content,
  .operations-content,
  .procurement-content,
  .design-content,
  .production-content,
  .outsourced-install-content,
  .install-plan-content,
  .delivery-plan-content,
  .after-sales-content,
  .hr-content,
  .create-project-content {
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  .finance-head,
  .operations-head,
  .procurement-head,
  .design-head,
  .production-head,
  .install-plan-head,
  .delivery-plan-head,
  .hr-head,
  .create-project-head {
    height: auto !important;
    min-height: 72px !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    align-items: flex-start !important;
  }

  .finance-head h1,
  .operations-head h1,
  .procurement-head h1,
  .design-head h1,
  .production-head h1,
  .install-plan-head h1,
  .delivery-plan-head h1,
  .hr-head h1,
  .create-project-head h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .finance-head p,
  .operations-head p,
  .procurement-head p,
  .design-head p,
  .production-head p,
  .install-plan-head p,
  .delivery-plan-head p,
  .hr-head p,
  .create-project-head p {
    display: block !important;
    max-height: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  .create-project-workspace,
  .production-workspace,
  .install-stage-flow,
  .delivery-stage-flow,
  .hr-cycle-strip,
  .hr-workspace-grid,
  .hr-formula-panel,
  .procurement-source-grid,
  .design-product-strip {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  .create-project-workspace {
    min-height: 360px !important;
  }

  .production-workspace {
    min-height: 220px !important;
  }

  .install-stage-flow,
  .delivery-stage-flow,
  .procurement-source-grid,
  .design-product-strip,
  .hr-cycle-strip {
    min-height: 78px !important;
  }

  .hr-workspace-grid,
  .hr-formula-panel {
    min-height: 220px !important;
  }

  .finance-workspace,
  .operations-workspace,
  .procurement-workspace,
  .design-workspace,
  .production-workspace,
  .delivery-workspace,
  .install-workspace {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
/* end 2026-07-03 desktop page-by-page clipping fixes */

/* 2026-07-03 primary workspace height fixes */
@media (min-width: 1024px) {
  .operations-workspace,
  .procurement-workspace,
  .design-workspace {
    height: auto !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .operations-workspace::-webkit-scrollbar,
  .procurement-workspace::-webkit-scrollbar,
  .design-workspace::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}
/* end 2026-07-03 primary workspace height fixes */

/* 2026-07-03 install delivery after-sales workspace fixes */
@media (min-width: 1024px) {
  .install-workspace,
  .delivery-workspace {
    height: auto !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .install-workspace::-webkit-scrollbar,
  .delivery-workspace::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}
/* end 2026-07-03 install delivery after-sales workspace fixes */

/* 2026-07-03 owner dashboard true fullscreen fix */
@media (min-width: 1024px) {
  .erp-layout.owner-desktop-v12-shell .erp-main {
    grid-template-rows: 72px minmax(0, 1fr) !important;
  }

  .erp-layout.owner-desktop-v12-shell .erp-topbar {
    height: 72px !important;
    min-height: 72px !important;
    padding: 14px 28px !important;
    overflow: visible !important;
  }

  .erp-layout.owner-desktop-v12-shell .owner-v11-desktop-content {
    display: block !important;
    height: calc(100vh - 72px) !important;
    min-height: 0 !important;
    padding: 18px 28px 24px !important;
    overflow: hidden !important;
    background: #f4f7fb !important;
  }

  .owner-desktop-v12-shell .owner-v11-page {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: 96px minmax(220px, 0.95fr) minmax(190px, 0.78fr) minmax(250px, 1fr) !important;
    gap: 12px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > * {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpis {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .owner-desktop-v12-shell .owner-v11-two-col {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > .owner-v11-section:nth-of-type(3) {
    grid-column: 3 / 5 !important;
    grid-row: 2 !important;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-section {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  .owner-desktop-v12-shell .owner-v11-flow-section {
    grid-column: 3 / 5 !important;
    grid-row: 3 !important;
  }

  .owner-desktop-v12-shell .owner-v11-page > .owner-v11-section:nth-of-type(6) {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
  }

  .owner-desktop-v12-shell .owner-v12-section {
    grid-column: 3 !important;
    grid-row: 4 !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-section {
    grid-column: 4 !important;
    grid-row: 4 !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi,
  .owner-desktop-v12-shell .owner-v11-panel,
  .owner-desktop-v12-shell .owner-v11-section {
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 8px !important;
    overflow: auto !important;
    scrollbar-width: none !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi::-webkit-scrollbar,
  .owner-desktop-v12-shell .owner-v11-panel::-webkit-scrollbar,
  .owner-desktop-v12-shell .owner-v11-section::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: 2px 10px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi i {
    grid-row: 1 / 4 !important;
    width: 40px !important;
    height: 40px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi strong {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi b {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi span,
  .owner-desktop-v12-shell .owner-v11-kpi em {
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title {
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title h2 {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-grid,
  .owner-desktop-v12-shell .owner-v11-risk-grid,
  .owner-desktop-v12-shell .owner-v11-month-grid,
  .owner-desktop-v12-shell .owner-v11-team-grid,
  .owner-desktop-v12-shell .owner-v11-menu-grid,
  .owner-desktop-v12-shell .owner-sales-funnel-grid,
  .owner-desktop-v12-shell .owner-v11-flow {
    gap: 8px !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .owner-desktop-v12-shell .owner-v11-month-grid,
  .owner-desktop-v12-shell .owner-v11-team-grid,
  .owner-desktop-v12-shell .owner-v11-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-sales-funnel-grid,
  .owner-desktop-v12-shell .owner-v11-flow {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card,
  .owner-desktop-v12-shell .owner-v11-risk-item,
  .owner-desktop-v12-shell .owner-v11-month-grid article,
  .owner-desktop-v12-shell .owner-v11-team-grid article,
  .owner-desktop-v12-shell .owner-v11-menu-card,
  .owner-desktop-v12-shell .owner-sales-funnel-card,
  .owner-desktop-v12-shell .owner-v11-flow-node {
    min-height: 54px !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  .owner-desktop-v12-shell .owner-v11-menu-card {
    min-height: 64px !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card strong,
  .owner-desktop-v12-shell .owner-v11-risk-item strong,
  .owner-desktop-v12-shell .owner-v11-month-grid strong,
  .owner-desktop-v12-shell .owner-v11-team-grid strong,
  .owner-desktop-v12-shell .owner-v11-menu-card strong,
  .owner-desktop-v12-shell .owner-sales-funnel-card strong,
  .owner-desktop-v12-shell .owner-v11-flow-node strong {
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
  }
}
/* end 2026-07-03 owner dashboard true fullscreen fix */

/* 2026-07-03 owner dashboard short-screen fix */
@media (min-width: 1024px) and (max-height: 800px) {
  .erp-layout.owner-desktop-v12-shell .erp-main {
    grid-template-rows: 56px minmax(0, 1fr) !important;
  }

  .erp-layout.owner-desktop-v12-shell .erp-topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  .erp-layout.owner-desktop-v12-shell .owner-v11-desktop-content {
    height: calc(100vh - 56px) !important;
    padding: 10px 14px !important;
  }

  .owner-desktop-v12-shell .owner-v11-page {
    grid-template-rows: 76px minmax(150px, 0.85fr) minmax(132px, 0.75fr) minmax(180px, 1fr) !important;
    gap: 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpis,
  .owner-desktop-v12-shell .owner-v11-two-col {
    gap: 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi,
  .owner-desktop-v12-shell .owner-v11-panel,
  .owner-desktop-v12-shell .owner-v11-section {
    padding: 9px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 1px 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi i {
    width: 32px !important;
    height: 32px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi strong {
    font-size: 12px !important;
  }

  .owner-desktop-v12-shell .owner-v11-kpi b {
    font-size: 20px !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title {
    min-height: 22px !important;
    margin-bottom: 5px !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title h2 {
    font-size: 17px !important;
  }

  .owner-desktop-v12-shell .owner-v11-section-title span,
  .owner-desktop-v12-shell .owner-v11-section-title button {
    font-size: 10px !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card,
  .owner-desktop-v12-shell .owner-v11-risk-item,
  .owner-desktop-v12-shell .owner-v11-month-grid article,
  .owner-desktop-v12-shell .owner-v11-team-grid article,
  .owner-desktop-v12-shell .owner-v11-menu-card,
  .owner-desktop-v12-shell .owner-sales-funnel-card,
  .owner-desktop-v12-shell .owner-v11-flow-node {
    min-height: 46px !important;
    padding: 6px 8px !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card strong,
  .owner-desktop-v12-shell .owner-v11-risk-item strong,
  .owner-desktop-v12-shell .owner-v11-month-grid strong,
  .owner-desktop-v12-shell .owner-v11-team-grid strong,
  .owner-desktop-v12-shell .owner-v11-menu-card strong,
  .owner-desktop-v12-shell .owner-sales-funnel-card strong,
  .owner-desktop-v12-shell .owner-v11-flow-node strong {
    font-size: 11px !important;
  }

  .owner-desktop-v12-shell .owner-v11-task-card span,
  .owner-desktop-v12-shell .owner-v11-risk-item span,
  .owner-desktop-v12-shell .owner-v11-month-grid span,
  .owner-desktop-v12-shell .owner-v11-team-grid span,
  .owner-desktop-v12-shell .owner-v11-menu-card span,
  .owner-desktop-v12-shell .owner-sales-funnel-card span,
  .owner-desktop-v12-shell .owner-v11-flow-node span {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }
}
/* end 2026-07-03 owner dashboard short-screen fix */