:root {
  font-family: "DM Sans", sans-serif;
  color: #202334;
  background: #f6f7fb;
  font-synthesis: none;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-weight: 400;
  --ink: #202334;
  --muted: #898b9a;
  --purple: #7165e8;
  --border: #ececf2;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-size: 15px;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.contact-phone-group {
  display: grid;
  gap: 9px;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.label-row label {
  margin: 0 !important;
}

.inline-add-button {
  border: 1px solid #dfddfa;
  border-radius: 6px;
  background: #f4f2ff;
  color: #5d53bd;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.contact-phone-list {
  display: grid;
  gap: 8px;
}

.phone-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-input-row input {
  flex: 1;
  min-width: 0;
}

.phone-remove-button {
  border: 1px solid #ead8d8;
  border-radius: 6px;
  background: #fff5f5;
  color: #b65a5a;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(460px, 1.05fr) minmax(480px, .95fr);
  background: #fff;
}

.login-story {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 43px clamp(42px, 6.5vw, 112px) 31px;
  background: #252638;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font: 800 24px/1 "Manrope", sans-serif;
  letter-spacing: -1.4px;
  width: fit-content;
}

.brand-light {
  color: #fff;
  position: relative;
  z-index: 2;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  color: #988eff;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
}

.brand-logo {
  display: block;
  width: 180px;
  height: auto;
  object-fit: contain;
}

.mobile-brand .brand-logo {
  width: 150px;
}

.brand-period {
  color: #9184ff;
}

.story-copy {
  position: relative;
  z-index: 2;
  margin-top: clamp(74px, 11vh, 124px);
  max-width: 500px;
}

.eyebrow,
.welcome-tag {
  font-size: 10px;
  letter-spacing: 1.55px;
  font-weight: 700;
}

.eyebrow {
  color: #c1c1d0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  display: inline-block;
  background: #a497ff;
  border-radius: 50%;
  box-shadow: 0 0 12px #a497ff;
}

.story-copy h1 {
  font: 600 clamp(36px, 3.8vw, 52px)/1.18 "Manrope", sans-serif;
  letter-spacing: -2.3px;
  margin: 20px 0 15px;
}

.story-copy p {
  color: #b0b1c0;
  font-size: 14px;
  line-height: 1.8;
  max-width: 390px;
  margin: 0;
}

.story-visual {
  position: relative;
  height: 318px;
  margin: auto -28px 13px;
}

.orbit {
  position: absolute;
  border: 1px solid rgba(190, 185, 255, .12);
  border-radius: 50%;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%) rotate(-19deg);
}

.orbit-one {
  width: 570px;
  height: 270px;
}

.orbit-two {
  width: 430px;
  height: 208px;
  transform: translate(-50%, -50%) rotate(28deg);
}

.orbit-three {
  width: 690px;
  height: 165px;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.visual-card {
  width: 292px;
  height: 195px;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-5deg);
  padding: 20px 21px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 13px;
  background: linear-gradient(145deg, #36374c, #2e2f43);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .3);
}

.visual-card-top {
  display: flex;
  justify-content: space-between;
  color: #b6b7c5;
}

.visual-label {
  font-size: 8px;
  letter-spacing: 1.1px;
  font-weight: 700;
}

.visual-menu {
  font-size: 21px;
  line-height: 10px;
  letter-spacing: 2px;
}

.visual-total {
  font: 700 24px "Manrope", sans-serif;
  letter-spacing: -.8px;
  margin-top: 16px;
}

.visual-growth {
  color: #75d9b4;
  font: 600 9px "DM Sans", sans-serif;
  letter-spacing: 0;
  margin-left: 9px;
  vertical-align: 4px;
}

.chart-bars {
  height: 63px;
  display: flex;
  align-items: end;
  gap: 7px;
  margin-top: 7px;
}

.chart-bars i {
  flex: 1;
  height: var(--bar);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #a49bff, #7368e1);
  opacity: .9;
}

.chart-months {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #9a9bac;
  font-size: 7px;
  letter-spacing: .5px;
}

.floating-note {
  position: absolute;
  z-index: 3;
  left: calc(50% + 83px);
  top: 26%;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 176px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  background: #fff;
  color: #242538;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
  transform: rotate(4deg);
}

.note-check {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #399a76;
  background: #e1f5ec;
  font-weight: 700;
}

.floating-note strong,
.floating-note small {
  display: block;
}

.floating-note strong {
  font-size: 9px;
}

.floating-note small {
  font-size: 8px;
  color: #8b8d9c;
  margin-top: 3px;
}

.visual-spark {
  position: absolute;
  color: #aaa0ff;
}

.spark-one {
  left: 17%;
  top: 22%;
  font-size: 24px;
}

.spark-two {
  right: 11%;
  bottom: 20%;
  font-size: 18px;
  color: #b5d6cc;
}

.story-caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9c9eae;
  white-space: nowrap;
  font-size: 10px;
}

.story-caption span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a49bff;
}

.story-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: #818292;
  font-size: 10px;
}

.login-panel {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 36px clamp(34px, 5.6vw, 92px) 28px;
}

.login-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6e7081;
  font-size: 11px;
  font-weight: 600;
}

.secure-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #999baa;
}

.secure-label span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #54c49b;
}

.login-form-wrap {
  width: 100%;
  max-width: 375px;
  margin: auto;
  padding: 48px 0;
}

.mobile-brand {
  display: none;
}

.welcome-tag {
  color: #8883d4;
  font-size: 9px;
  letter-spacing: 1.25px;
}

.login-heading h2 {
  margin: 12px 0 7px;
  font: 700 30px "Manrope", sans-serif;
  letter-spacing: -1.1px;
}

.login-heading p {
  color: #858797;
  font-size: 12px;
  margin: 0;
}

#login-form {
  margin-top: 34px;
}

.account-recovery-panel {
  margin-top: 30px;
}

.account-recovery-panel h3 {
  margin: 0 0 7px;
  font: 700 22px "Manrope", sans-serif;
}

.account-recovery-panel>p {
  margin: 0 0 20px;
  color: #858797;
  font-size: 12px;
  line-height: 1.6;
}

.account-recovery-panel label {
  display: block;
  margin: 15px 0 8px;
  color: #404252;
  font-size: 11px;
  font-weight: 600;
}

.account-recovery-panel input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #e7e8ef;
  border-radius: 7px;
  color: #303142;
  font: 13px "DM Sans", sans-serif;
}

.account-recovery-panel .primary-button {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
}

.account-recovery-back {
  display: block;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7165df;
  font: 600 12px "DM Sans", sans-serif;
  cursor: pointer;
}

#login-form>label,
.password-label-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #404252;
  margin-bottom: 9px;
}

.input-wrap {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e7e8ef;
  border-radius: 7px;
  transition: border-color .18s, box-shadow .18s;
}

.input-wrap:focus-within {
  border-color: #9187ec;
  box-shadow: 0 0 0 3px rgba(113, 101, 232, .1);
}

.input-wrap>svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #a0a2b0;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.input-wrap input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #292b3a;
  font-size: 12px;
}

.input-wrap input::placeholder {
  color: #b0b1bd;
}

.password-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 21px;
}

.password-label-row label {
  margin-bottom: 9px;
}

.password-label-row a {
  text-decoration: none;
  color: #7064dc;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 9px;
}

.password-toggle {
  border: 0;
  background: transparent;
  padding: 4px 1px 4px 5px;
  display: inline-flex;
  cursor: pointer;
  color: #a0a2b0;
}

.password-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remember-row {
  margin: 17px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6e7080;
  font-size: 10px;
  cursor: pointer;
  width: fit-content;
}

.remember-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.custom-check {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d8d9e2;
  border-radius: 4px;
}

.remember-row input:checked+.custom-check {
  border-color: var(--purple);
  background: var(--purple);
}

.remember-row input:checked+.custom-check::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.remember-row input:focus-visible+.custom-check {
  outline: 3px solid rgba(113, 101, 232, .25);
}

.form-message {
  min-height: 16px;
  margin: 11px 0 0;
  color: #ad554e;
  font-size: 10px;
  line-height: 1.5;
}

.primary-button {
  width: 100%;
  height: 45px;
  border: 0;
  border-radius: 7px;
  background: #7165e8;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s, transform .2s;
}

.primary-button:hover {
  background: #6357d7;
}

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

.primary-button span {
  font-size: 17px;
  font-weight: 400;
}

.demo-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 17px;
}

.demo-divider span {
  height: 1px;
  flex: 1;
  background: #ededf2;
}

.demo-divider em {
  color: #adafba;
  font-style: normal;
  font-size: 8px;
  letter-spacing: 1px;
}

.demo-button {
  width: 100%;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #e8e8ef;
  border-radius: 7px;
  background: #fff;
  color: #454657;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}

.demo-button:hover {
  background: #faf9ff;
  border-color: #d3cff7;
}

.demo-icon {
  color: #7165e8;
}

.demo-arrow {
  margin-left: auto;
  margin-right: 13px;
  color: #9698a7;
  font-size: 14px;
}

.demo-button .demo-icon {
  margin-left: auto;
}

.demo-caption {
  text-align: center;
  margin: 10px 0 0;
  color: #a1a3af;
  font-size: 9px;
}

.login-panel-footer {
  display: flex;
  justify-content: space-between;
  color: #a1a3af;
  font-size: 9px;
}

.login-panel-footer a {
  color: #747687;
  text-decoration: none;
}

.login-panel-footer a[href="/portal"],
.login-panel-footer a[href="/staff"] {
  color: #55586b;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-screen {
  min-height: 100vh;
  display: flex;
  color: #252638;
  background: #f7f8fb;
}

.sidebar {
  width: 238px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 25px 15px 13px;
  background: #fff;
  border-right: 1px solid #eeeff3;
}

.sidebar-brand {
  margin: 0 0 29px 7px;
  font-size: 24px;
}

.sidebar-brand .brand-logo {
  width: 150px;
}

.workspace-switcher {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid #eeeef3;
  border-radius: 8px;
  margin-bottom: 29px;
}

.workspace-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #eceafe;
  border-radius: 7px;
  color: #7368d8;
  font: 700 16px "Manrope", sans-serif;
}

.workspace-switcher strong,
.workspace-switcher small {
  display: block;
}

.workspace-switcher strong {
  font-size: 12px;
  font-weight: 700;
}

.workspace-switcher small {
  margin-top: 3px;
  color: #999baa;
  font-size: 11px;
}

.switch-chevron {
  margin-left: auto;
  color: #8e90a0;
  font-size: 16px;
}

.nav-section-label {
  padding: 0 9px;
  color: #a3a4b1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.15px;
}

.main-nav {
  display: grid;
  gap: 4px;
  margin: 10px 0 25px;
}

.nav-link {
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #77798a;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}

.nav-parent-toggle {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #77798a;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.nav-link:hover {
  color: #514a9f;
  background: #f8f7ff;
}

.nav-parent-toggle:hover,
.nav-group.has-active-child>.nav-parent-toggle {
  color: #514a9f;
  background: #f8f7ff;
}

.nav-parent-toggle .nav-icon {
  flex-shrink: 0;
}

.nav-parent-chevron {
  margin-left: auto;
  color: #8e90a0;
  transition: transform .15s;
}

.nav-parent-toggle[aria-expanded="true"] .nav-parent-chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: grid;
  gap: 2px;
  margin-top: 3px;
}

.subnav-link {
  min-height: 35px;
  padding-left: 26px;
}

.nav-link.active {
  color: #6257ca;
  background: #f1f0fc;
  font-weight: 600;
}

.nav-icon {
  width: 17px;
  color: #858798;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.active .nav-icon {
  color: #7165df;
}

.nav-count {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 10px;
  color: #868897;
  background: #f1f1f5;
  font-size: 10px;
}

.nav-count-purple {
  color: #6b5ed1;
  background: #eae8fc;
}

.nav-link.active .nav-icon {
  color: #7165df;
}

.tools-label {
  margin-top: 0;
}

.sidebar-bottom {
  margin-top: auto;
}

.help-card {
  padding: 13px 12px 12px;
  border: 1px solid #eeedf7;
  border-radius: 8px;
  background: linear-gradient(140deg, #fbfaff, #f7f7fd);
}

.help-spark {
  color: #796ee1;
  font-size: 18px;
}

.help-card strong {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

.help-card p {
  margin: 5px 0 10px;
  color: #898b99;
  font-size: 11px;
  line-height: 1.6;
}

.help-card a {
  color: #6e62d1;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.help-card a span {
  margin-left: 3px;
}

.profile-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 13px;
  padding: 11px 4px 2px;
  border: 0;
  border-top: 1px solid #f0f0f4;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.profile-avatar,
.topbar-avatar {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #6f5fbe;
  background: #eeeafa;
  font-size: 11px;
  font-weight: 700;
}

.profile-button strong,
.profile-button small {
  display: block;
}

.profile-button strong {
  font-size: 12px;
}

.profile-button small {
  margin-top: 3px;
  color: #999baa;
  font-size: 11px;
}

.profile-more {
  margin-left: auto;
  color: #9294a1;
  font-size: 22px;
  line-height: 10px;
}

.dashboard-main {
  width: calc(100% - 238px);
  min-height: 100vh;
  margin-left: 238px;
}

.topbar {
  height: 63px;
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid #ededf2;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9698a5;
  font-size: 12px;
}

.breadcrumb strong {
  color: #393b4b;
  font-weight: 600;
}

.crumb-separator {
  color: #c2c3cc;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.search-box {
  height: 33px;
  width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 1px solid #ececf2;
  border-radius: 6px;
  color: #9b9daa;
  background: #fff;
}

.search-box>span {
  font-size: 22px;
  line-height: 1;
  transform: rotate(-20deg);
}

.search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #434556;
  background: transparent;
  font-size: 11px;
}

.search-box input::placeholder {
  color: #a6a8b4;
}

.search-box kbd {
  color: #a5a6b2;
  font: 10px "DM Sans", sans-serif;
  white-space: nowrap;
}

.icon-button {
  position: relative;
  width: 24px;
  height: 28px;
  padding: 0;
  border: 0;
  color: #7f8190;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.notification-button i {
  position: absolute;
  width: 5px;
  height: 5px;
  top: 5px;
  right: 2px;
  border-radius: 50%;
  background: #f08e77;
  border: 1px solid #fff;
}

.notification-button .notification-count {
  position: absolute;
  top: -3px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid #fff;
  border-radius: 8px;
  color: #fff;
  background: #d95f51;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

.topbar-divider {
  height: 23px;
  width: 1px;
  background: #eeeef2;
  margin-left: -7px;
}

.topbar-avatar {
  width: 29px;
  height: 29px;
  border: 0;
  cursor: pointer;
}

.dashboard-content {
  max-width: 1470px;
  margin: 0 auto;
  padding: 23px 34px 20px;
}

.demo-notice {
  min-height: 34px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e8e6fa;
  border-radius: 6px;
  background: #f1f0fc;
  color: #77748e;
  font-size: 11px;
}

.notice-icon {
  color: #7569dc;
}

.demo-notice strong {
  color: #5f57af;
  font-weight: 700;
}

.demo-notice button {
  margin-left: auto;
  border: 0;
  color: #6960c6;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.demo-notice button span {
  margin-left: 5px;
}

.welcome-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 26px 0 20px;
}

.date-label {
  color: #999ba8;
  font-size: 10px;
  letter-spacing: 1.15px;
  font-weight: 700;
}

.welcome-row h1 {
  margin: 8px 0 5px;
  color: #262839;
  font: 700 25px "Manrope", sans-serif;
  letter-spacing: -.8px;
}

.welcome-row h1 span {
  color: #8d83e7;
  font-size: 19px;
  vertical-align: 2px;
}

.welcome-row p {
  margin: 0;
  color: #898b99;
  font-size: 12px;
}

.add-contact-button {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #7165df;
  box-shadow: 0 3px 8px rgba(113, 101, 223, .14);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.add-contact-button:hover {
  background: #6257cf;
}

.add-contact-button span {
  font-size: 17px;
  font-weight: 400;
}

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

.metric-card,
.panel {
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.metric-card {
  min-height: 119px;
  padding: 13px 15px 11px;
}

.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #777988;
  font-size: 11px;
  font-weight: 500;
}

.metric-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 15px;
}

.revenue-icon {
  color: #6d61d1;
  background: #f0effc;
}

.contacts-icon {
  color: #3e9f8a;
  background: #e9f7f3;
}

.deals-icon {
  color: #cc8a38;
  background: #fbf2e6;
}

.conversion-icon {
  color: #d87975;
  background: #fff0ee;
  font-size: 20px;
}

.metric-value {
  display: block;
  margin-top: 8px;
  font: 700 24px "Manrope", sans-serif;
  letter-spacing: -.8px;
  color: #262839;
}

.metric-unit {
  margin-left: 2px;
  font-size: 17px;
}

.metric-foot {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  color: #a1a2ae;
  font-size: 10px;
}

.trend-positive,
.trend-negative {
  color: #43a37f;
  font-weight: 600;
}

.trend-negative {
  color: #dc827b;
}

.mini-bars {
  height: 20px;
  display: flex;
  align-items: end;
  gap: 3px;
  margin-left: auto;
}

.mini-bars i {
  width: 4px;
  height: 35%;
  border-radius: 2px 2px 0 0;
  background: #a59bed;
}

.mini-bars i:nth-child(2) {
  height: 48%;
}

.mini-bars i:nth-child(3) {
  height: 38%;
}

.mini-bars i:nth-child(4) {
  height: 65%;
}

.mini-bars i:nth-child(5) {
  height: 50%;
}

.mini-bars i:nth-child(6) {
  height: 74%;
}

.mini-bars i:nth-child(7) {
  height: 66%;
}

.mini-bars i:nth-child(8) {
  height: 95%;
}

.bars-teal i {
  background: #78cdb8;
}

.bars-purple i {
  background: #b8a7e7;
}

.bars-orange i {
  background: #f0b484;
}

.dashboard-panels {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(325px, 1fr);
  gap: 13px;
  margin-top: 14px;
}

.panel {
  padding: 16px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading h2 {
  margin: 0;
  font: 700 14px "Manrope", sans-serif;
  letter-spacing: -.2px;
}

.panel-heading p {
  margin: 5px 0 0;
  color: #999ba8;
  font-size: 10px;
}

.period-select {
  height: 27px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 8px;
  border: 1px solid #ededef;
  border-radius: 5px;
  color: #777988;
  background: #fff;
  font-size: 10px;
  cursor: pointer;
}

.period-select span {
  font-size: 14px;
  color: #9a9baa;
}

.chart-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.chart-summary strong {
  font: 700 22px "Manrope", sans-serif;
  letter-spacing: -.7px;
}

.chart-summary .trend-positive {
  padding: 3px 5px;
  border-radius: 4px;
  background: #eaf7f1;
  font-size: 10px;
}

.chart-summary small {
  color: #a1a2ae;
  font-size: 10px;
}

.revenue-chart {
  height: 151px;
  display: flex;
  gap: 9px;
  margin-top: 9px;
}

.chart-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1px 0 18px;
  color: #a2a4b0;
  font-size: 9px;
}

.chart-plot {
  min-width: 0;
  flex: 1;
  position: relative;
}

.grid-lines {
  position: absolute;
  inset: 0 0 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-lines i {
  height: 1px;
  width: 100%;
  background: #f0f0f4;
}

.chart-plot>svg {
  position: absolute;
  inset: 0 0 18px;
  width: 100%;
  height: calc(100% - 18px);
  overflow: visible;
}

.chart-area {
  fill: url(#area-fill);
}

.chart-line {
  fill: none;
  stroke: #8175e7;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.chart-point {
  fill: #fff;
  stroke: #8175e7;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.chart-x-axis {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  color: #a2a4b0;
  font-size: 9px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #9294a2;
  font-size: 10px;
}

.legend-current,
.legend-previous {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8175e7;
  margin-left: 6px;
}

.legend-previous {
  background: #d9d6ed;
}

.more-button {
  width: 24px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  color: #8e909d;
  background: #fff;
  font-size: 20px;
  line-height: 10px;
  cursor: pointer;
}

.activity-list {
  margin-top: 10px;
}

.activity-item {
  min-height: 52px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f1f4;
}

.activity-avatar {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}

.activity-purple {
  color: #6659c5;
  background: #eeebfb;
}

.activity-orange {
  color: #b47b3a;
  background: #fff1dc;
}

.activity-blue {
  color: #4b83b5;
  background: #e9f2fa;
}

.activity-green {
  color: #4c947b;
  background: #e6f3ed;
}

.activity-item>div {
  min-width: 0;
  flex: 1;
  padding-right: 30px;
}

.activity-item p {
  margin: 0;
  color: #737584;
  font-size: 10px;
  line-height: 1.45;
}

.activity-item p strong {
  color: #444656;
  font-weight: 600;
}

.activity-item small {
  display: block;
  margin-top: 3px;
  color: #a0a1ad;
  font-size: 9px;
}

.activity-item time {
  position: absolute;
  top: 10px;
  right: 0;
  color: #a5a6b1;
  font-size: 9px;
}

.activity-type {
  position: absolute;
  right: 0;
  bottom: 9px;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 9px;
}

.type-won {
  color: #3c9a73;
  background: #e9f6ef;
}

.type-new {
  color: #6a61cb;
  background: #f0effb;
}

.type-meeting {
  color: #428bb0;
  background: #e9f5fa;
}

.type-sent {
  color: #b48045;
  background: #fbf2e8;
}

.view-activity {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  color: #6d62cd;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
}

.view-activity span {
  margin-left: 5px;
}

.contacts-panel {
  margin-top: 14px;
  padding: 15px 16px 4px;
}

.lead-followups-panel {
  margin: 0 0 15px;
  padding: 13px 15px;
  border: 1px solid #f0d3cb;
  border-left: 3px solid #d66e5d;
  border-radius: 7px;
  background: #fffaf8;
}

.lead-followups-heading,
.lead-followup-row,
.lead-followup-title,
.lead-followup-actions {
  display: flex;
  align-items: center;
}

.lead-followups-heading,
.lead-followup-row {
  justify-content: space-between;
  gap: 12px;
}

.lead-followups-heading h2 {
  margin: 0;
  color: #373949;
  font: 700 14px "Manrope", sans-serif;
}

.lead-followups-heading p {
  margin: 4px 0 0;
  color: #898b99;
  font-size: 11px;
}

.lead-followups-count {
  color: #a64e41;
  font-size: 11px;
  font-weight: 700;
}

.lead-followups-list {
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 10px;
}

.lead-followup-row {
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid #f3e6e2;
}

.lead-followup-details {
  min-width: 0;
}

.lead-followup-title {
  flex-wrap: wrap;
  gap: 7px;
  color: #424454;
  font-size: 12px;
}

.lead-followup-title>span {
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.followup-overdue {
  color: #a64e41;
  background: #f8e3de;
}

.followup-today {
  color: #88611d;
  background: #fff0cf;
}

.lead-followup-details>small {
  display: block;
  margin-top: 4px;
  color: #90929f;
  font-size: 10px;
}

.lead-followup-details>p {
  margin: 4px 0 0;
  color: #696b79;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.lead-followup-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-followup-actions button {
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #e9dedb;
  border-radius: 5px;
  color: #676979;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.lead-followup-actions .followup-complete-button {
  border-color: #cde6d8;
  color: #367452;
  background: #f5fbf7;
}

.lead-followup-actions button:hover {
  filter: brightness(.97);
}

.contacts-heading {
  align-items: center;
  margin-bottom: 14px;
}

.view-all-button {
  padding: 7px 9px;
  border: 1px solid #edecf5;
  border-radius: 5px;
  color: #6d62ca;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.view-all-button span {
  margin-left: 8px;
  font-size: 13px;
}

.table-scroll {
  overflow-x: auto;
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  text-align: left;
}

.contacts-table th {
  padding: 0 10px 10px;
  border-bottom: 1px solid #f0f0f4;
  color: #a2a3af;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .75px;
}

.contacts-table td {
  height: 49px;
  padding: 5px 10px;
  border-bottom: 1px solid #f3f3f6;
  color: #7c7e8c;
  font-size: 10px;
}

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

.contact-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-name strong,
.contact-name small {
  display: block;
}

.contact-name strong {
  color: #414353;
  font-size: 15px;
  font-weight: 600;
}

.contact-name small {
  margin-top: 3px;
  color: #a1a2ae;
  font-size: 9px;
}

.table-avatar {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
}

.avatar-coral {
  color: #bb746b;
  background: #f9eae6;
}

.avatar-mint {
  color: #438a76;
  background: #e3f3ec;
}

.avatar-lavender {
  color: #7761ae;
  background: #eee9f8;
}

.avatar-yellow {
  color: #ac8947;
  background: #f8f1dd;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 10px;
  font-size: 9px;
}

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

.status-lead {
  color: #b37d39;
  background: #fbf1e5;
}

.status-customer {
  color: #3e9875;
  background: #eaf6ef;
}

.status-prospect {
  color: #6e64bf;
  background: #f0effb;
}

.status-deal {
  color: #347b87;
  background: #e6f4f2;
}

.owner-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777988;
  font-size: 9px;
}

.owner-avatar {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
}

.owner-orange {
  color: #ac7432;
  background: #fff0dc;
}

.owner-purple {
  color: #6558bb;
  background: #eeeafb;
}

.owner-blue {
  color: #477ba5;
  background: #e8f1f8;
}

.owner-green {
  color: #4a8b73;
  background: #e7f2ec;
}

.row-more {
  border: 0;
  background: transparent;
  color: #9698a5;
  font-size: 19px;
  cursor: pointer;
}

.services-content {
  padding-top: 29px;
}

.services-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 23px;
}

.services-heading h1 {
  margin: 7px 0 5px;
  color: #262839;
  font: 700 25px "Manrope", sans-serif;
  letter-spacing: -.8px;
}

.services-heading p {
  margin: 0;
  color: #898b99;
  font-size: 12px;
}

.services-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  padding: 0 2px;
  color: #999ba8;
  font-size: 11px;
}

.services-toolbar strong {
  color: #484a5b;
  font-size: 12px;
}

.service-search {
  width: 220px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid #ececf2;
  border-radius: 6px;
  background: #fff;
  color: #9b9daa;
}

.service-search>span {
  font-size: 20px;
  line-height: 1;
}

.service-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #434556;
  background: transparent;
  font-size: 11px;
}

.service-search input::placeholder {
  color: #a6a8b4;
}

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

.templates-content {
  padding-top: 22px;
}

.staff-templates-list {
  display: grid;
  gap: 9px;
}

.staff-template-card {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #ededef;
  border-radius: 7px;
  background: #fff;
}

.staff-template-details {
  min-width: 0;
}

.staff-template-details strong,
.staff-template-details small {
  display: block;
}

.staff-template-details strong {
  color: #424454;
  font-size: 12px;
}

.staff-template-details small {
  margin-top: 4px;
  color: #8e909d;
  font-size: 10px;
}

.staff-template-edit {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #e8e6f5;
  border-radius: 5px;
  color: #6e62ca;
  background: #fbfaff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.staff-template-edit:hover {
  border-color: #d6d1f2;
  background: #f6f4ff;
}

.service-card {
  min-height: 184px;
  display: flex;
  flex-direction: column;
  padding: 17px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}

.service-card:hover {
  transform: translateY(-2px);
  border-color: #dddaf6;
  box-shadow: 0 8px 22px rgba(37, 38, 56, .05);
}

.service-card-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font: 700 20px "Manrope", sans-serif;
}

.service-icon-trademark {
  color: #7064dc;
  background: #f0effc;
}

.service-icon-company {
  color: #3e9f8a;
  background: #e9f7f3;
}

.service-icon-opc {
  color: #c78838;
  background: #fbf2e6;
}

.service-icon-other {
  color: #5b83b4;
  background: #eaf2fa;
}

.service-card-details {
  flex: 1;
}

.service-card-details h2 {
  margin: 14px 0 7px;
  color: #343647;
  font: 700 14px "Manrope", sans-serif;
  letter-spacing: -.2px;
}

.service-category {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 10px;
  color: #6d62ca;
  background: #f1f0fc;
  font-size: 10px;
  font-weight: 600;
}

.service-card-details p {
  margin: 8px 0 14px;
  color: #898b99;
  font-size: 11px;
  line-height: 1.55;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f4;
}

.service-card-footer strong {
  color: #4b4d5e;
  font-size: 11px;
  font-weight: 600;
}

.service-active {
  padding: 4px 7px;
  border-radius: 10px;
  color: #3e9875;
  background: #eaf6ef;
  font-size: 10px;
}

.configure-intake-button {
  width: 100%;
  min-height: 31px;
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid #e9e7f5;
  border-radius: 5px;
  color: #6e62ca;
  background: #fbfaff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.configure-intake-button:hover {
  border-color: #d6d1f2;
  background: #f6f4ff;
}

.service-delete-button {
  border-color: #f1dada;
  color: #a34040;
  background: #fffafa;
}

.service-delete-button:hover {
  border-color: #e7bcbc;
  background: #fff1f1;
}

.milestone-editor-hint {
  margin: 7px 0 0;
  color: #898b99;
  font-size: 11px;
  line-height: 1.5;
}

.service-form > .service-recurring-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  cursor: pointer;
}

.service-recurring-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #7165df;
}

.service-recurring-day-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #eceafa;
  border-radius: 7px;
  background: #faf9ff;
}

.service-recurring-day-field label {
  color: #55576a;
  font-size: 11px;
  font-weight: 600;
}

.service-recurring-day-field input {
  width: 100%;
  height: 36px;
  padding: 8px 10px;
  border: 1px solid #e3e4ea;
  border-radius: 6px;
  color: #404455;
  background: #fff;
  font-size: 12px;
}

.service-recurring-day-field p {
  margin: 0;
  color: #858896;
  font-size: 10px;
  line-height: 1.5;
}

.milestone-fields-editor {
  display: grid;
  gap: 8px;
}

.milestone-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 7px;
}

.milestone-field-row label {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
  color: #696b7a;
  font-size: 11px;
  font-weight: 600;
}

.milestone-field-row input {
  min-width: 0;
}

.milestone-field-row .remove-intake-field {
  min-height: 36px;
}

.services-empty {
  padding: 42px 12px;
  border: 1px dashed #e4e3ed;
  border-radius: 8px;
  color: #898b99;
  background: #fff;
  text-align: center;
  font-size: 12px;
}

.service-dialog {
  width: min(100% - 32px, 440px);
  max-width: 440px;
  max-height: min(90vh, 680px);
  padding: 0;
  border: 1px solid #ededef;
  border-radius: 11px;
  color: #252638;
  background: #fff;
  box-shadow: 0 22px 70px rgba(37, 38, 56, .2);
}

.service-dialog::backdrop {
  background: rgba(34, 35, 52, .38);
  backdrop-filter: blur(2px);
}

.service-form {
  padding: 25px;
}

.payment-link-form {
  max-width: 650px;
  margin-top: 18px;
  border: 1px solid #ececf2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(37, 38, 56, .04);
}

.service-dialog-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 22px;
}

.service-dialog-heading h2 {
  margin: 7px 0 5px;
  font: 700 21px "Manrope", sans-serif;
  letter-spacing: -.5px;
}

.service-dialog-heading p {
  margin: 0;
  color: #898b99;
  font-size: 12px;
}

.dialog-close {
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 6px;
  color: #858797;
  background: #f5f5f8;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.service-form>label {
  display: block;
  margin: 15px 0 7px;
  color: #404252;
  font-size: 12px;
  font-weight: 600;
}

.service-form>label span {
  color: #a1a3af;
  font-weight: 400;
}

.service-form>input,
.service-form>select,
.service-form>textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #e7e8ef;
  border-radius: 6px;
  outline: 0;
  color: #454657;
  background: #fff;
  font: 12px "DM Sans", sans-serif;
}

.service-form>input,
.service-form>select {
  height: 38px;
}

.service-form>textarea {
  min-height: 68px;
  resize: vertical;
  line-height: 1.5;
}

.service-form>input:focus,
.service-form>select:focus,
.service-form>textarea:focus {
  border-color: #9187ec;
  box-shadow: 0 0 0 3px rgba(113, 101, 232, .1);
}

.service-form-page {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}

.service-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-top: 8px;
}

.service-page-header h2 {
  margin: 8px 0 6px;
  color: #252839;
  font: 700 30px "Manrope", sans-serif;
  letter-spacing: -.8px;
}

.service-page-header p {
  margin: 0;
  color: #8a8d9a;
  font-size: 13px;
}

.service-form-page-card {
  padding: 20px;
  border: 1px solid #ececf4;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(37, 38, 56, .04);
}

.page-intake-form {
  padding: 0;
}

.intake-form-dialog {
  max-width: 570px;
}

.intake-form-dialog .service-form {
  max-height: 86vh;
  overflow-y: auto;
}

.intake-fields-editor {
  display: grid;
  gap: 10px;
}

.intake-field-row {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #ededf3;
  border-radius: 7px;
}

.intake-field-row legend {
  padding: 0 4px;
  color: #77798a;
  font-size: 10px;
  font-weight: 700;
}

.intake-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.intake-field-header legend {
  padding: 0;
}

.remove-intake-field {
  border: 0;
  color: #b76464;
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

.intake-field-row>label:not(.intake-required-toggle) {
  display: block;
  margin: 9px 0 5px;
  color: #666879;
  font-size: 10px;
  font-weight: 600;
}

.intake-field-row>input,
.intake-field-row>select,
.intake-field-row>textarea {
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid #e8e8ef;
  border-radius: 5px;
  outline: 0;
  color: #454657;
  background: #fff;
  font: 11px "DM Sans", sans-serif;
}

.intake-field-row>textarea {
  resize: vertical;
}

.intake-field-row .intake-required-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  color: #77798a;
  font-size: 10px;
}

.intake-field-row .intake-required-toggle input {
  accent-color: #7165df;
}

.add-intake-field {
  width: 100%;
  min-height: 33px;
  margin-top: 10px;
  border: 1px dashed #d9d6ef;
  border-radius: 6px;
  color: #6e62ca;
  background: #fbfaff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.service-form .form-message {
  min-height: 16px;
  margin-top: 10px;
}

.service-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 5px;
}

.service-form-actions .primary-button {
  width: auto;
  height: 37px;
  padding: 0 13px;
  font-size: 12px;
}

.service-form-actions .primary-button span {
  font-size: 16px;
}

.cancel-button {
  height: 37px;
  padding: 0 13px;
  border: 1px solid #e8e8ef;
  border-radius: 6px;
  color: #6e7080;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.clients-content {
  padding-top: 29px;
}

.clients-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: #999ba8;
  font-size: 11px;
}

.clients-toolbar > span {
  margin-right: auto;
  white-space: nowrap;
}

.client-search {
  width: min(260px, 38%);
}

.client-sort-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #858797;
  white-space: nowrap;
}

.client-sort-label select {
  min-height: 34px;
  max-width: 170px;
  padding: 0 8px;
  border: 1px solid #e8e8ef;
  border-radius: 6px;
  color: #555768;
  background: #fff;
  font: inherit;
  font-size: 10px;
}

.client-list-columns,
.client-card-summary {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1.4fr) minmax(110px, 1fr) minmax(120px, 1fr) 82px;
  align-items: center;
  gap: 12px;
}

.client-list-columns {
  padding: 0 14px 7px;
  color: #999ba8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.clients-list {
  display: grid;
  gap: 11px;
}

.client-list-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.client-list-columns,
.clients-list {
  min-width: 720px;
}

.client-card {
  padding: 0;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.client-card-summary,
.client-identity {
  display: flex;
  align-items: center;
}

.client-card-summary {
  width: 100%;
  min-width: 0;
  display: grid;
  justify-content: stretch;
  padding: 12px 14px;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.client-card-summary:hover,
.client-card-summary:focus-visible,
.client-card.is-expanded .client-card-summary {
  background: #f8f7ff;
}

.client-card-summary:focus-visible,
.client-payment-summary:focus-visible {
  outline: 2px solid #cfcaf0;
  outline-offset: -2px;
}

.client-card-details {
  padding: 0 14px 14px;
}

.client-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f4;
}

.client-summary-cell {
  min-width: 0;
  overflow: hidden;
  color: #77798a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-summary-company {
  color: #414353;
  font-size: 12px;
  font-weight: 600;
}

.client-card-disclosure {
  color: #6e62ca;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 680px) {
  .clients-toolbar {
    flex-wrap: wrap;
  }

  .client-search {
    order: 3;
    width: 100%;
  }

  .client-sort-label {
    order: 4;
  }

  .client-list-columns,
  .client-card-summary {
    grid-template-columns: minmax(130px, 1.2fr) minmax(120px, 1.4fr) minmax(100px, 1fr) minmax(110px, 1fr) 76px;
    gap: 9px;
  }
}

.client-email-button {
  padding: 6px 9px;
  border: 1px solid #e8e6f5;
  border-radius: 5px;
  color: #6e62ca;
  background: #fbfaff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.client-email-button:hover {
  border-color: #d6d1f2;
  background: #f6f4ff;
}

.client-delete-button {
  border-color: #f0d5d5;
  color: #a43b3b;
  background: #fffafa;
}

.client-delete-button:hover {
  border-color: #e8bcbc;
  background: #fff2f2;
}

.lead-details-dialog {
  width: min(calc(100% - 32px), 720px);
  max-width: 720px;
  max-height: min(92vh, 850px);
  overflow-y: auto;
}

.lead-details-dialog>.service-form {
  padding: 24px;
}

.lead-deal-state {
  margin: 14px 0 0;
  color: #5b7d6b;
  font-size: 11px;
  line-height: 1.5;
}

.lead-detail-actions {
  justify-content: space-between;
  margin-top: 12px;
}

.lead-conversion-guidance {
  margin: 0 0 10px;
  color: #858797;
  font-size: 11px;
  line-height: 1.5;
}

.lead-details-dialog .lead-details-form,
.lead-details-dialog .lead-record-form {
  display: grid;
  gap: 0;
}

.lead-details-dialog label {
  display: block;
  margin: 13px 0 6px;
  color: #404252;
  font-size: 12px;
  font-weight: 600;
}

.lead-details-dialog input,
.lead-details-dialog select,
.lead-details-dialog textarea {
  width: 100%;
  min-height: 37px;
  padding: 9px 10px;
  border: 1px solid #e7e8ef;
  border-radius: 6px;
  color: #454657;
  background: #fff;
  font: 12px "DM Sans", sans-serif;
}

.lead-details-dialog textarea {
  min-height: 70px;
  resize: vertical;
}

.lead-details-dialog input:focus,
.lead-details-dialog select:focus,
.lead-details-dialog textarea:focus {
  outline: 0;
  border-color: #9187ec;
  box-shadow: 0 0 0 3px rgba(113, 101, 232, .1);
}

.lead-record-section {
  margin-top: 19px;
  padding-top: 16px;
  border-top: 1px solid #efeff4;
}

.lead-record-section h3 {
  margin: 0 0 11px;
  color: #333546;
  font: 700 15px "Manrope", sans-serif;
}

.lead-record-list {
  display: grid;
  gap: 8px;
}

.lead-record-item {
  padding: 11px;
  border: 1px solid #ededf3;
  border-radius: 6px;
  background: #fbfbfd;
}

.lead-record-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #525465;
  font-size: 12px;
}

.lead-record-heading span,
.lead-record-heading time,
.lead-record-item small {
  color: #8e909d;
  font-size: 11px;
}

.lead-record-item p {
  margin: 7px 0 0;
  color: #686a79;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lead-record-item small {
  display: block;
  margin-top: 5px;
}

.lead-record-empty {
  margin: 0;
  color: #9294a1;
  font-size: 12px;
}

.client-service-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #f0f0f4;
}

.client-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}

.client-service-row>div strong,
.client-service-row>div small {
  display: block;
}

.client-service-row>div strong {
  color: #545667;
  font-size: 11px;
  font-weight: 600;
}

.client-service-row>div small {
  margin-top: 4px;
  color: #9a9ca9;
  font-size: 10px;
}

.client-service-status {
  max-width: 170px;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid #eaeaf0;
  border-radius: 5px;
  color: #686a7a;
  background: #fff;
  font-size: 10px;
}

.client-service-staff {
  max-width: 170px;
  min-height: 28px;
  padding: 0 7px;
  border: 1px solid #eaeaf0;
  border-radius: 5px;
  color: #686a7a;
  background: #fff;
  font-size: 10px;
}

.client-service-staff:disabled {
  color: #a0a2ae;
  background: #f8f8fa;
  cursor: not-allowed;
}

.client-no-services {
  margin: 0;
  color: #a0a2ae;
  font-size: 11px;
}

.staff-content {
  padding-top: 29px;
}

.staff-list {
  display: grid;
  gap: 10px;
}

.staff-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.staff-password-button {
  padding: 6px 9px;
  border: 1px solid #e8e6f5;
  border-radius: 5px;
  color: #6e62ca;
  background: #fbfaff;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.staff-password-button:hover {
  border-color: #d6d1f2;
  background: #f6f4ff;
}

.expenses-content {
  padding-top: 29px;
}

.expense-total {
  color: #4e4d68;
  font-size: 13px;
  font-weight: 700;
}

.expenses-list {
  display: grid;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.expense-card {
  min-width: 640px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.expense-summary-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 1.4fr) auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 47px;
  padding: 8px 12px;
  border: 0;
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.expense-summary-row:hover,
.expense-card.is-expanded .expense-summary-row {
  background: #f8f7ff;
}

.expense-summary-row:focus-visible {
  outline: 2px solid #cfcaf0;
  outline-offset: -2px;
}

.expense-summary-purpose,
.expense-summary-client,
.expense-summary-amount,
.expense-summary-date {
  overflow: hidden;
  color: #4b4d5e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expense-summary-client,
.expense-summary-date {
  color: #858896;
}

.expense-summary-amount {
  font-weight: 700;
}

.expense-expanded {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px 12px;
}

.expense-expanded[hidden] {
  display: none;
}

.expense-details {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.expense-purpose {
  color: #454657;
  font-size: 12px;
  font-weight: 600;
}

.expense-details small {
  color: #9294a2;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.expense-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
}

.expense-amount {
  color: #4e4d68;
  font-size: 12px;
}

.expense-summary {
  flex-wrap: wrap;
  gap: 12px;
}

.vendors-content,
.settings-content {
  padding-top: 29px;
}

.reports-content {
  display: grid;
  gap: 14px;
  padding-top: 29px;
}

.report-financial-panel,
.report-panel {
  padding: 16px;
  border: 1px solid #e9e9ef;
  border-radius: 8px;
  background: #fff;
}

.report-panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.report-panel-heading h2 {
  margin: 0;
  color: #353747;
  font: 700 15px "Manrope", sans-serif;
}

.report-panel-heading p {
  margin: 5px 0 0;
  color: #8f919e;
  font-size: 11px;
}

.report-panel-heading>strong {
  color: #626475;
  font-size: 11px;
}

.report-financial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #efeff3;
}

.report-financial-grid>div {
  display: grid;
  gap: 7px;
  padding: 13px 12px 2px;
}

.report-financial-grid>div+div {
  border-left: 1px solid #efeff3;
}

.report-financial-grid span,
.report-stat>span {
  color: #898b99;
  font-size: 11px;
}

.report-financial-grid strong {
  color: #3d7d64;
  font: 700 19px "Manrope", sans-serif;
  overflow-wrap: anywhere;
}

.report-financial-grid>div:nth-child(2) strong {
  color: #535567;
}

.report-financial-grid .report-profit-result strong.report-loss {
  color: #b54d43;
}

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

.report-stat {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #e9e9ef;
  border-radius: 7px;
  background: #fff;
}

.report-stat strong {
  color: #373949;
  font: 700 22px "Manrope", sans-serif;
}

.report-stat small {
  color: #9294a1;
  font-size: 10px;
  line-height: 1.4;
}

.report-lead-breakdown {
  display: grid;
  gap: 11px;
}

.report-lead-stage {
  display: grid;
  grid-template-columns: 100px minmax(60px, 1fr) 32px;
  align-items: center;
  gap: 12px;
  color: #626475;
  font-size: 11px;
}

.report-lead-stage>strong {
  color: #414354;
  text-align: right;
}

.report-lead-track {
  height: 7px;
  overflow: hidden;
  border-radius: 5px;
  background: #f0f0f4;
}

.report-lead-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #b89b54;
}

.report-lead-prospect { background: #8b83c9; }
.report-lead-deal { background: #478f91; }
.report-lead-customer { background: #5b9b76; }

.profile-settings-section {
  margin-bottom: 30px;
}

.profile-form {
  padding: 17px;
  border: 1px solid #e9e9ef;
  border-radius: 8px;
  background: #fff;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 15px;
}

.profile-form-grid label {
  display: grid;
  gap: 6px;
  margin: 11px 0;
  color: #525466;
  font-size: 11px;
  font-weight: 600;
}

.profile-field-wide {
  grid-column: 1 / -1;
}

.profile-form-grid input,
.profile-form-grid textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #e1e2e9;
  border-radius: 5px;
  color: #353747;
  background: #fff;
  font: 12px "DM Sans", sans-serif;
}

.profile-form-grid textarea {
  min-height: 76px;
  resize: vertical;
}

.profile-form .form-message {
  min-height: 16px;
  margin: 10px 0;
}

.vendors-list {
  display: grid;
  gap: 10px;
}

.vendor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.vendor-identity,
.vendor-contact {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.vendor-identity strong {
  color: #454657;
  font-size: 12px;
  font-weight: 600;
}

.vendor-identity small,
.vendor-contact small {
  color: #9294a2;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.smtp-form {
  width: min(100%, 560px);
  padding: 22px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.smtp-form-heading h2 {
  margin: 0;
  color: #454657;
  font: 700 15px "Manrope", sans-serif;
}

.smtp-form-heading p {
  margin: 6px 0 15px;
  color: #9294a2;
  font-size: 11px;
  line-height: 1.6;
}

.smtp-form>label {
  display: block;
  margin: 13px 0 6px;
  color: #404252;
  font-size: 11px;
  font-weight: 600;
}

.smtp-form>input,
.smtp-form>select,
.smtp-form-row input,
.smtp-form-row select {
  width: 100%;
  height: 36px;
  padding: 8px 10px;
  border: 1px solid #e7e8ef;
  border-radius: 6px;
  outline: 0;
  color: #454657;
  background: #fff;
  font: 11px "DM Sans", sans-serif;
}

.smtp-form input:focus,
.smtp-form select:focus {
  border-color: #9187ec;
  box-shadow: 0 0 0 3px rgba(113, 101, 232, .1);
}

.smtp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.smtp-form-row>div {
  min-width: 0;
}

.smtp-form-row label {
  display: block;
  margin: 13px 0 6px;
  color: #404252;
  font-size: 11px;
  font-weight: 600;
}

.smtp-form .password-hint {
  margin: 7px 0 0;
}

.smtp-form .form-message {
  min-height: 18px;
  margin: 11px 0;
}

.payment-gateway-form { width: min(100%, 680px); }
.payment-gateway-form hr { width: 100%; margin: 18px 0; border: 0; border-top: 1px solid #ededef; }
.payment-gateway-form .gateway-enabled-label { display: flex; align-items: center; gap: 8px; }
.payment-gateway-form .gateway-enabled-label input { width: 16px; height: 16px; margin: 0; accent-color: #7165e8; }
.payment-gateway-form .gateway-provider-status { min-height: 18px; margin: 8px 0; color: #747789; font-size: 11px; }
.payment-gateway-form input:disabled, .payment-gateway-form select:disabled { color: #9698a5; background: #f6f6f9; }

.workspace-backup-settings {
  width: min(100%, 760px);
  display: grid;
  gap: 15px;
  margin-top: 34px;
}

.backup-card {
  padding: 20px;
  border: 1px solid #ededef;
  border-radius: 10px;
  background: #fff;
}

.backup-card h2 {
  margin: 0;
  color: #454657;
  font: 700 15px "Manrope", sans-serif;
}

.backup-card>p {
  color: #77798b;
  font-size: 12px;
  line-height: 1.65;
}

.backup-card .backup-warning {
  margin-top: 0;
  padding: 11px 13px;
  border: 1px solid #f0e1c1;
  border-radius: 7px;
  color: #715a2b;
  background: #fffaf0;
}

.backup-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.backup-actions button,
.backup-file-label {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #dedfea;
  border-radius: 6px;
  color: #55576a;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.backup-actions #download-workspace-backup {
  border-color: #7165e8;
  color: #fff;
  background: #7165e8;
}

.backup-file-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.backup-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 5px;
  color: #454657;
  font-size: 13px;
  font-weight: 700;
}

.backup-toggle input {
  width: 17px;
  height: 17px;
  accent-color: #7165e8;
}

.backup-recipient {
  margin: 5px 0;
}

.backup-card .form-message {
  min-height: 18px;
  margin: 10px 0;
}

.client-intake-answers {
  display: grid;
  gap: 7px;
  margin-top: 11px;
  padding: 10px;
  border: 1px solid #eeedf7;
  border-radius: 6px;
  background: #fbfaff;
}

.client-intake-heading {
  margin-bottom: 2px;
  color: #656179;
  font-size: 10px;
  font-weight: 600;
}

.client-intake-answers>div {
  display: grid;
  grid-template-columns: minmax(100px, .6fr) 1fr;
  gap: 10px;
  color: #77798a;
  font-size: 10px;
}

.client-intake-label {
  color: #999ba8;
}

.client-intake-value {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.client-document-list {
  display: grid;
  gap: 7px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f4;
}

.client-document-heading {
  color: #666879;
  font-size: 10px;
  font-weight: 600;
}

.client-document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #868896;
  font-size: 10px;
}

.client-document-row>span {
  overflow-wrap: anywhere;
}

.client-document-download {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid #ececf2;
  border-radius: 5px;
  color: #6d62ca;
  background: #fff;
  font-size: 10px;
  cursor: pointer;
}

.client-requests-panel {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.client-requests-panel .portal-section-heading h2 {
  margin: 0;
  font: 700 14px "Manrope", sans-serif;
}

.client-requests-panel .portal-section-heading p {
  margin: 5px 0 0;
  color: #999ba8;
  font-size: 10px;
}

.client-requests {
  display: grid;
  gap: 8px;
}

.client-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
  border: 1px solid #f0f0f4;
  border-radius: 6px;
}

.client-request-row>div:first-child {
  min-width: 0;
}

.client-request-row>div:first-child>strong,
.client-request-row>div:first-child>small {
  display: block;
}

.client-request-row>div:first-child>strong {
  overflow-wrap: anywhere;
  color: #4b4d5e;
  font-size: 11px;
  font-weight: 600;
}

.client-request-row>div:first-child>small {
  margin-top: 4px;
  color: #989aa7;
  font-size: 10px;
}

.client-request-row>div:first-child>p {
  overflow-wrap: anywhere;
  margin: 6px 0 0;
  color: #818392;
  font-size: 10px;
  line-height: 1.5;
}

.client-payment-row {
  display: block;
  padding: 0;
}

.client-payment-summary {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(150px, 1.5fr) auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 0;
  border-radius: inherit;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.client-payment-summary:hover,
.client-payment-row.is-expanded .client-payment-summary {
  background: #f8f7ff;
}

.client-payment-name,
.client-payment-description,
.client-payment-date {
  overflow: hidden;
  color: #4b4d5e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-payment-description {
  color: #77798a;
}

.client-payment-date {
  color: #989aa7;
}

.client-payment-status {
  white-space: nowrap;
}

.client-payment-status.status-verified {
  color: #147744;
}

.client-payment-status.status-rejected {
  color: #b74242;
}

.client-payment-details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px 11px;
}

.client-payment-details[hidden] {
  display: none;
}

.client-payment-details>div:first-child {
  min-width: 0;
}

.client-payment-details>div:first-child>small {
  color: #989aa7;
  font-size: 10px;
}

.client-payment-details>div:first-child>p {
  overflow-wrap: anywhere;
  margin: 6px 0 0;
  color: #818392;
  font-size: 10px;
  line-height: 1.5;
}

.client-request-meta {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  color: #a0a2ae;
  font-size: 10px;
}

.invoice-history-panel {
  margin-top: 24px;
  padding: 15px;
  border: 1px solid #ededef;
  border-radius: 8px;
  background: #fff;
}

.invoice-history-panel .portal-section-heading h2 {
  margin: 0;
  color: #454657;
  font: 700 14px "Manrope", sans-serif;
}

.invoice-history-panel .portal-section-heading p {
  margin: 5px 0 0;
  color: #999ba8;
  font-size: 10px;
}

.admin-invoices-list {
  display: grid;
  gap: 8px;
}

.admin-invoice-row {
  overflow: hidden;
  border: 1px solid #f0f0f4;
  border-radius: 6px;
}

.admin-invoice-summary {
  display: grid;
  grid-template-columns: minmax(100px, .8fr) minmax(130px, 1.4fr) auto auto auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 0;
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.admin-invoice-summary:hover,
.admin-invoice-row.is-expanded .admin-invoice-summary {
  background: #f8f7ff;
}

.admin-invoice-summary:focus-visible {
  outline: 2px solid #cfcaf0;
  outline-offset: -2px;
}

.admin-invoice-client,
.admin-invoice-reference,
.admin-invoice-amount,
.admin-invoice-date {
  overflow: hidden;
  color: #4b4d5e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-invoice-reference,
.admin-invoice-date {
  color: #858896;
}

.admin-invoice-amount {
  font-weight: 700;
}

.admin-invoice-status {
  color: #875900;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-invoice-status.status-paid {
  color: #147744;
}

.admin-invoice-status.status-rejected {
  color: #b74242;
}

.admin-invoice-details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0 11px 11px;
}

.admin-invoice-details[hidden] {
  display: none;
}

.admin-invoice-details > div:first-child {
  min-width: 0;
}

.admin-invoice-details > div:first-child > strong {
  color: #4b4d5e;
  font-size: 11px;
}

.admin-invoice-details > div:first-child > small,
.admin-invoice-details > div:first-child > p {
  display: block;
  margin: 5px 0 0;
  color: #858896;
  font-size: 10px;
  line-height: 1.5;
}

.admin-invoice-details > div:first-child > p {
  overflow-wrap: anywhere;
}

.admin-invoice-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.request-kind {
  color: #6960c6;
  font-weight: 600;
}

.dashboard-footer {
  display: flex;
  justify-content: space-between;
  color: #a0a2ae;
  font-size: 10px;
  padding: 16px 1px 0;
}

.footer-dot {
  padding: 0 4px;
  color: #c7c8d0;
}

.dashboard-footer>span:last-child i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  border-radius: 50%;
  background: #5ac49b;
}

.toast {
  position: fixed;
  z-index: 10;
  right: 24px;
  bottom: 24px;
  max-width: calc(100vw - 48px);
  padding: 12px 16px;
  border: 1px solid #e8e6f5;
  border-radius: 8px;
  color: #47465c;
  background: #fff;
  box-shadow: 0 9px 30px rgba(35, 34, 68, .13);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1550px) {
  .dashboard-content {
    padding-top: 28px;
  }

  .metric-card {
    min-height: 130px;
    padding: 16px 18px;
  }

  .dashboard-panels {
    margin-top: 18px;
  }

  .revenue-chart {
    height: 172px;
  }

  .activity-item {
    min-height: 56px;
  }

  .contacts-panel {
    margin-top: 18px;
  }
}

@media (max-width: 1150px) {
  .login-screen {
    grid-template-columns: minmax(380px, .92fr) minmax(420px, 1.08fr);
  }

  .login-story {
    padding-left: 48px;
    padding-right: 48px;
  }

  .dashboard-content {
    padding-left: 22px;
    padding-right: 22px;
  }

  .topbar {
    padding: 0 22px;
  }

  .sidebar {
    width: 210px;
  }

  .dashboard-main {
    width: calc(100% - 210px);
    margin-left: 210px;
  }

  .metrics-grid {
    gap: 9px;
  }

  .metric-card {
    padding-left: 11px;
    padding-right: 11px;
  }

  .dashboard-panels {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr);
    gap: 9px;
  }
}

@media (max-width: 900px) {
  .login-screen {
    grid-template-columns: minmax(320px, .88fr) minmax(380px, 1.12fr);
  }

  .login-story {
    padding: 32px;
  }

  .story-copy h1 {
    font-size: 39px;
  }

  .story-visual {
    margin-left: -42px;
    margin-right: -42px;
  }

  .login-panel {
    padding-left: 34px;
    padding-right: 34px;
  }

  .sidebar {
    width: 66px;
    padding: 21px 9px 12px;
    align-items: center;
  }

  .sidebar-brand {
    margin: 0 auto 28px;
  }

  .sidebar-brand>span:last-child,
  .workspace-switcher>span:not(.workspace-avatar),
  .nav-section-label,
  .nav-link:not(.active)::after,
  .nav-link,
  .nav-parent-toggle {
    font-size: 0;
  }

  .workspace-switcher {
    width: 43px;
    justify-content: center;
    padding: 4px;
    margin-bottom: 24px;
  }

  .workspace-avatar {
    width: 32px;
    flex-shrink: 0;
  }

  .main-nav {
    width: 100%;
    margin: 7px 0 17px;
    justify-items: center;
  }

  .nav-link {
    width: 42px;
    min-height: 40px;
    justify-content: center;
    padding: 0;
    gap: 0;
  }

  .nav-group {
    position: relative;
  }

  .nav-parent-toggle {
    width: 42px;
    min-height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0;
  }

  .nav-parent-chevron {
    display: none;
  }

  .nav-submenu {
    position: absolute;
    z-index: 20;
    top: 0;
    left: calc(100% + 8px);
    width: 170px;
    padding: 6px;
    border: 1px solid #ededf2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px #25263824;
  }

  .subnav-link {
    width: 100%;
    min-height: 38px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 9px;
    font-size: 12px;
  }

  .nav-icon {
    font-size: 19px;
  }

  .nav-count {
    display: none;
  }

  .help-card {
    display: none;
  }

  .profile-button {
    justify-content: center;
    width: 43px;
    padding: 11px 0 0;
  }

  .profile-button>span:not(.profile-avatar) {
    display: none;
  }

  .dashboard-main {
    width: calc(100% - 66px);
    margin-left: 66px;
  }

  .dashboard-panels {
    grid-template-columns: minmax(0, 1.15fr) minmax(265px, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-request-row {
    align-items: flex-start;
  }

  .metric-card {
    min-height: 112px;
  }

  .mini-bars {
    gap: 2px;
  }
}

@media (max-width: 680px) {
  .login-screen {
    display: block;
    min-height: 100vh;
  }

  .login-story {
    display: none;
  }

  .login-panel {
    min-height: 100vh;
    padding: 22px 24px 20px;
  }

  .login-panel-top {
    font-size: 12px;
  }

  .login-form-wrap {
    max-width: 390px;
    padding: 35px 0;
  }

  .mobile-brand {
    display: inline-flex;
    margin-bottom: 42px;
  }

  .login-heading h2 {
    font-size: 30px;
  }

  .login-panel-footer {
    max-width: 390px;
    width: 100%;
    margin: 0 auto;
  }

  .sidebar {
    inset: auto 0 0;
    width: 100%;
    height: 60px;
    padding: 5px 10px;
    flex-direction: row;
    justify-content: space-around;
    border-top: 1px solid #ededf2;
    border-right: 0;
  }

  .sidebar-brand,
  .workspace-switcher,
  .sidebar-bottom,
  .tools-label,
  .main-nav:nth-of-type(2) {
    display: none;
  }

  .sidebar>.nav-section-label {
    display: none;
  }

  .main-nav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 0;
  }

  .nav-link {
    width: auto;
    min-width: 42px;
    min-height: 46px;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    font-size: 9px;
  }

  .nav-parent-toggle {
    width: auto;
    min-width: 42px;
    min-height: 46px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    font-size: 9px;
  }

  .nav-parent-chevron {
    display: none;
  }

  .nav-submenu {
    position: absolute;
    z-index: 20;
    top: auto;
    bottom: calc(100% + 8px);
    left: 50%;
    width: 180px;
    padding: 6px;
    transform: translateX(-50%);
    border: 1px solid #ededf2;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px #25263824;
  }

  .nav-submenu .subnav-link {
    width: 100%;
    min-height: 38px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 9px;
    font-size: 12px;
  }

  .nav-link[data-nav="Contacts"],
  .nav-link:nth-child(n+6):not([data-nav="Expenses"]):not([data-nav="Vendors"]):not([data-nav="Settings"]) {
    display: none;
  }

  .nav-icon {
    font-size: 18px;
  }

  .dashboard-main {
    width: 100%;
    margin: 0;
    padding-bottom: 60px;
  }

  .topbar {
    height: 56px;
    padding: 0 16px;
  }

  .topbar-actions {
    gap: 12px;
  }

  .search-box {
    width: 34px;
    padding: 0 7px;
    border-color: transparent;
    background: transparent;
  }

  .search-box input,
  .search-box kbd {
    display: none;
  }

  .topbar-divider {
    display: none;
  }

  .dashboard-content {
    padding: 15px 14px 20px;
  }

  .demo-notice {
    padding: 7px 8px;
    font-size: 10px;
    line-height: 1.45;
  }

  .demo-notice button {
    white-space: nowrap;
    font-size: 10px;
  }

  .welcome-row {
    align-items: flex-start;
    gap: 8px;
    margin: 19px 0 15px;
  }

  .welcome-row h1 {
    font-size: 21px;
  }

  .welcome-row p {
    max-width: 240px;
    line-height: 1.5;
  }

  .add-contact-button {
    flex: 0 0 auto;
    height: 31px;
    padding: 0 8px;
    font-size: 10px;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .metric-card {
    min-height: 108px;
    padding: 11px;
  }

  .metric-value {
    font-size: 22px;
  }

  .dashboard-panels {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .panel {
    padding: 13px;
  }

  .revenue-chart {
    height: 150px;
  }

  .activity-item {
    min-height: 50px;
  }

  .contacts-panel {
    margin-top: 10px;
    padding: 13px 10px 4px;
  }

  .contacts-heading {
    padding: 0 2px;
  }

  .services-content {
    padding-top: 20px;
  }

  .clients-content {
    padding-top: 20px;
  }

  .staff-content,
  .expenses-content,
  .vendors-content,
  .settings-content {
    padding-top: 20px;
  }

  .expense-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .expense-actions {
    width: 100%;
    justify-content: space-between;
  }

  .vendor-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .smtp-form {
    padding: 15px;
  }

  .services-heading {
    align-items: flex-start;
    margin-bottom: 17px;

    .client-card {
      padding: 0;
    }

    .client-card-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px 10px;
      padding: 11px;
    }

    .client-identity {
      min-width: 0;
    }

    .client-identity > div {
      min-width: 0;
    }

    .client-identity small {
      display: block;
      overflow: hidden;
      margin: 3px 0 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .client-account-service-preview {
      grid-column: 1;
      grid-row: 2;
    }

    .client-account-counts {
      grid-column: 2;
      grid-row: 1;
    }

    .client-card-disclosure {
      grid-column: 2;
      grid-row: 2;
    }

    .client-card-details {
      padding: 0 11px 11px;
    }

    .client-request-row {
      flex-direction: column;
    }

    .client-payment-summary {
      min-width: 650px;
    }

    .client-payment-details {
      flex-direction: column;
    }

    .admin-invoices-list {
      overflow-x: auto;
    }

    .admin-invoice-summary {
      min-width: 700px;
    }

    .admin-invoice-details,
    .admin-invoice-actions {
      flex-direction: column;
    }

    .client-request-meta {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }

    .client-service-row {
      align-items: flex-start;
      flex-direction: column;
    }
  }

  .services-heading h1 {
    font-size: 22px;
  }

  .services-heading p {
    max-width: 210px;
    line-height: 1.5;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .service-card {
    min-height: 160px;
  }

  .service-search {
    width: min(50%, 190px);
  }

  .service-form {
    padding: 21px;
  }

  .contacts-table {
    min-width: 650px;
  }

  .dashboard-footer {
    gap: 8px;
    font-size: 9px;
  }

  .dashboard-footer>span:last-child {
    white-space: nowrap;
  }
}

@media (max-width: 680px) {
  .report-financial-grid,
  .report-operational-grid,
  .profile-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-financial-grid>div+div {
    border-top: 1px solid #efeff3;
    border-left: 0;
  }

  .profile-field-wide {
    grid-column: auto;
  }
}

@media (max-width: 380px) {
  .login-panel {
    padding-left: 19px;
    padding-right: 19px;
  }

  .topbar {
    padding: 0 11px;
  }

  .dashboard-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .welcome-row h1 {
    font-size: 19px;
  }

  .date-label {
    font-size: 9px;
  }

  .add-contact-button {
    font-size: 0;
    gap: 0;
    width: 32px;
    justify-content: center;
  }

  .add-contact-button span {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

#dashboard-screen.reference-dashboard {
  color: #e9edf1;
  background: #111417;
}

.reference-dashboard .sidebar {
  color: #b8c0c8;
  background: #171b1f;
  border-color: #292e33;
}

.reference-dashboard .sidebar .brand,
.reference-dashboard .sidebar .workspace-switcher,
.reference-dashboard .sidebar .nav-link,
.reference-dashboard .sidebar .nav-parent-toggle,
.reference-dashboard .sidebar .nav-section-label {
  color: #aab2ba;
}

.reference-dashboard .sidebar .nav-link.active,
.reference-dashboard .sidebar .nav-link:hover,
.reference-dashboard .sidebar .nav-parent-toggle:hover,
.reference-dashboard .sidebar .nav-group.has-active-child>.nav-parent-toggle {
  color: #f4f6f8;
  background: #252b31;
}

.reference-dashboard .sidebar .nav-submenu {
  background: #171b1f;
}

.reference-dashboard .topbar {
  color: #dce1e6;
  background: #171b1f;
  border-color: #292e33;
}

.reference-dashboard .topbar .topbar-icon,
.reference-dashboard .topbar .profile-button,
.reference-dashboard .topbar .topbar-avatar {
  color: #c0c7cf;
  border-color: #343b42;
  background: #20252a;
}

.reference-dashboard .dashboard-content {
  background: #111417;
}

.reference-dashboard .demo-notice {
  color: #c2cad1;
  background: #1a2024;
  border-color: #2c343a;
}

.reference-dashboard .demo-notice strong {
  color: #eef1f4;
}

#dashboard-screen.reference-dashboard #overview-content > :not(.crm-dashboard) {
  display: none !important;
}

.crm-dashboard {
  --dash-muted: #929ba4;
  color: #edf1f4;
  max-width: 1560px;
  margin: 0 auto;
}

.crm-dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 8px 0 20px;
}

.crm-dashboard-heading h1 {
  margin: 7px 0 4px;
  color: #f1f3f5;
  font: 700 28px "Manrope", sans-serif;
  letter-spacing: -.6px;
}

.crm-dashboard-heading p,
.crm-dashboard .dash-card-heading p {
  margin: 0;
  color: var(--dash-muted);
  font-size: 13px;
}

.crm-dashboard .date-label {
  color: #7f8b94;
  font-size: 11px;
  letter-spacing: 1.1px;
}

.crm-dashboard .add-contact-button {
  border-color: #336767;
  color: #69d0c6;
  background: #172c2c;
}

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

.dash-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid #2d3339;
  border-radius: 10px;
  background: #191d21;
  box-shadow: 0 6px 20px #0002;
}

.dash-today-card { grid-column: span 12; }
.dash-status-card, .dash-services-card, .dash-fulfillment-card { grid-column: span 4; }
.dash-expenses-card { grid-column: span 3; }
.dash-revenue-card { grid-column: span 6; }
.dash-activity-card { grid-column: span 3; }

.dash-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
}

.dash-card-heading h2 {
  margin: 0 0 4px;
  color: #e8edf0;
  font: 650 15px "Manrope", sans-serif;
}

.dash-card-heading a {
  color: #61c9c4;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.dash-live-indicator {
  color: #61c99e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
}

.dash-live-indicator.is-sample { color: #eab555; }
.dash-live-indicator.is-sample::before { background: #eab555; }

.dash-live-indicator::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #61c99e;
  content: "";
}

.dash-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-metric-grid article {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  column-gap: 11px;
  min-width: 0;
  padding: 4px 16px;
  border-right: 1px solid #30363c;
}

.dash-metric-grid article:first-child { padding-left: 0; }
.dash-metric-grid article:last-child { padding-right: 0; border-right: 0; }

.dash-metric-symbol {
  display: grid;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #252d32;
  font-size: 16px;
  font-weight: 700;
}

.symbol-revenue { color: #62d1bd; }
.symbol-orders { color: #82aaff; }
.symbol-services { color: #c0a1f4; }
.symbol-customers { color: #f2b86a; }

.dash-metric-grid article strong {
  overflow: hidden;
  color: #f4f6f8;
  font-size: 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-metric-grid article small {
  color: #8f99a1;
  font-size: 11px;
}

.dash-status-chart {
  position: relative;
  display: grid;
  min-height: 132px;
  place-items: center;
}

.dash-status-chart svg { width: 120px; height: 120px; overflow: visible; }
.dash-donut-value { fill: #f0f3f5; font: 700 19px "DM Sans", sans-serif; }
.dash-donut-caption { fill: #8f99a1; font: 600 7px "DM Sans", sans-serif; letter-spacing: .8px; }
.dash-status-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.dash-status-legend > span { display: inline-flex; align-items: center; gap: 6px; color: #aab2ba; font-size: 11px; }
.dash-legend-dot { width: 7px; height: 7px; border-radius: 50%; background: #87929e; }
.dash-legend-dot.status-requested { background: #24c2c2; }
.dash-legend-dot.status-in-progress { background: #178dd1; }
.dash-legend-dot.status-awaiting-documents { background: #826cf1; }
.dash-legend-dot.status-completed { background: #62c996; }
.dash-legend-dot.status-cancelled { background: #e37984; }

.dash-top-services { display: grid; gap: 15px; }
.dash-service-row { display: grid; grid-template-columns: 25px minmax(90px, 1fr) minmax(52px, .8fr) 25px; align-items: center; gap: 9px; }
.dash-service-index, .dash-service-count { color: #98a1a9; font-size: 11px; }
.dash-service-row strong { overflow: hidden; color: #d7dde2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dash-service-row svg { display: block; width: 100%; height: 8px; }
.dash-service-count { text-align: right; }
.dash-fulfillment-chart svg { display: block; width: 100%; height: 130px; overflow: visible; }
.dash-chart-label { fill: #8f99a1; font: 9px "DM Sans", sans-serif; }
.dash-chart-legend { display: flex; gap: 16px; margin-top: 5px; color: #aab2ba; font-size: 11px; }
.dash-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-chart-legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend-completed { background: #168bd1; }
.legend-requested { background: #168f91; }

.dash-expense-total { color: #f2f4f6; font-size: 24px; }
.dash-expense-gauge { height: 7px; margin: 17px 0 9px; overflow: hidden; border-radius: 8px; background: #30373d; }
#dash-expense-gauge { display: block; height: 100%; border-radius: inherit; background: #eab555; transition: width .2s ease; }
#dash-expense-gauge.dash-expense-share-0 { width: 0; }
#dash-expense-gauge.dash-expense-share-5 { width: 5%; }
#dash-expense-gauge.dash-expense-share-10 { width: 10%; }
#dash-expense-gauge.dash-expense-share-15 { width: 15%; }
#dash-expense-gauge.dash-expense-share-20 { width: 20%; }
#dash-expense-gauge.dash-expense-share-25 { width: 25%; }
#dash-expense-gauge.dash-expense-share-30 { width: 30%; }
#dash-expense-gauge.dash-expense-share-35 { width: 35%; }
#dash-expense-gauge.dash-expense-share-40 { width: 40%; }
#dash-expense-gauge.dash-expense-share-45 { width: 45%; }
#dash-expense-gauge.dash-expense-share-50 { width: 50%; }
#dash-expense-gauge.dash-expense-share-55 { width: 55%; }
#dash-expense-gauge.dash-expense-share-60 { width: 60%; }
#dash-expense-gauge.dash-expense-share-65 { width: 65%; }
#dash-expense-gauge.dash-expense-share-70 { width: 70%; }
#dash-expense-gauge.dash-expense-share-75 { width: 75%; }
#dash-expense-gauge.dash-expense-share-80 { width: 80%; }
#dash-expense-gauge.dash-expense-share-85 { width: 85%; }
#dash-expense-gauge.dash-expense-share-90 { width: 90%; }
#dash-expense-gauge.dash-expense-share-95 { width: 95%; }
#dash-expense-gauge.dash-expense-share-100 { width: 100%; }
.dash-expense-gauge strong { display: none; }
.dash-expenses-card > small { color: #919ba3; font-size: 11px; }
.dash-revenue-card .dash-card-heading > strong { color: #60c9c0; font-size: 16px; }
.dash-revenue-chart svg { display: block; width: 100%; height: 210px; overflow: visible; }

.dash-recent-activity { display: grid; gap: 14px; }
.dash-activity-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; }
.dash-activity-marker { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #80b6e7; background: #20313c; font-size: 14px; }
.dash-activity-marker.is-complete { color: #67d2a0; background: #20362e; }
.dash-activity-row strong, .dash-activity-row span, .dash-activity-row time { display: block; }
.dash-activity-row strong { overflow: hidden; color: #dce1e5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-row div span { overflow: hidden; margin-top: 3px; color: #9aa3ab; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-row time { margin-top: 4px; color: #78838c; font-size: 10px; }
.dash-empty-copy { color: #929ba4; font-size: 12px; line-height: 1.5; }

.whatsapp-content { color: #222637; }
.whatsapp-content .services-heading { align-items: flex-start; }
.whatsapp-connection-status { padding: 7px 11px; border: 1px solid #eadbb7; border-radius: 20px; color: #967331; background: #fff9e9; font-size: 12px; font-weight: 650; white-space: nowrap; }
.whatsapp-connection-status.is-connected { border-color: #c8ead8; color: #248551; background: #effaf3; }
.whatsapp-inbox { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: 460px; overflow: hidden; border: 1px solid #e6e7ed; border-radius: 10px; background: #fff; }
.whatsapp-conversation-pane { min-width: 0; padding: 15px; border-right: 1px solid #e9eaf0; }
.whatsapp-conversation-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.whatsapp-conversation-heading strong { color: #3d4052; font-size: 14px; }
.whatsapp-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #e8e9ef; border-radius: 6px; color: #9294a2; }
.whatsapp-search input { width: 100%; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; font-size: 12px; }
.whatsapp-conversations { display: grid; gap: 4px; margin-top: 12px; }
.whatsapp-conversation { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 9px 7px; border: 0; border-radius: 7px; text-align: left; background: transparent; cursor: pointer; }
.whatsapp-conversation:hover, .whatsapp-conversation.is-active { background: #f1f8f5; }
.whatsapp-contact-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #258358; background: #e5f4eb; font-weight: 700; }
.whatsapp-conversation-copy { min-width: 0; }
.whatsapp-conversation-copy strong, .whatsapp-conversation-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whatsapp-conversation-copy strong { color: #414454; font-size: 12px; }
.whatsapp-conversation-copy small, .whatsapp-conversation-meta small { margin-top: 4px; color: #898b99; font-size: 10px; }
.whatsapp-conversation-meta { display: grid; justify-items: end; gap: 5px; color: #898b99; }
.whatsapp-conversation-meta i { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 10px; color: #fff; background: #24a365; font-size: 10px; font-style: normal; }
.whatsapp-thread { display: flex; min-width: 0; min-height: 460px; flex-direction: column; }
.whatsapp-thread-empty { display: grid; flex: 1; align-content: center; justify-items: center; padding: 25px; text-align: center; color: #777b8b; }
.whatsapp-thread-empty > span { color: #22a263; font-size: 27px; }
.whatsapp-thread-empty strong { margin-top: 10px; color: #454859; }
.whatsapp-thread-empty p { font-size: 12px; }
.whatsapp-thread-view { display: flex; min-height: 460px; flex: 1; flex-direction: column; }
.whatsapp-thread-header { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 11px 15px; border-bottom: 1px solid #ececf1; }
.whatsapp-thread-header > div { display: grid; gap: 3px; }
.whatsapp-thread-header strong { color: #414454; font-size: 13px; }
.whatsapp-thread-header small { color: #888b99; font-size: 11px; }
.whatsapp-messages { display: flex; min-height: 270px; flex: 1; flex-direction: column; align-items: flex-start; gap: 9px; overflow-y: auto; padding: 16px; background: #f7f9f8; }
.whatsapp-message-bubble { max-width: min(78%, 520px); padding: 9px 11px; border: 1px solid #e4e8e5; border-radius: 9px 9px 9px 2px; background: #fff; }
.whatsapp-message-bubble.is-outbound { align-self: flex-end; border-color: #d0ebd9; border-radius: 9px 9px 2px 9px; background: #eaf7ed; }
.whatsapp-message-bubble p { margin: 0; color: #333746; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.whatsapp-message-bubble small { display: block; margin-top: 5px; color: #8b9096; font-size: 9px; text-align: right; }
.whatsapp-compose { display: flex; align-items: flex-end; gap: 9px; padding: 12px; }
.whatsapp-compose textarea { min-width: 0; flex: 1; resize: vertical; padding: 9px 10px; border: 1px solid #e2e4ea; border-radius: 7px; font-size: 12px; }
.whatsapp-compose button { min-height: 38px; }
.whatsapp-window-note, .whatsapp-security-note { margin: 0; padding: 0 12px 12px; color: #8a8d9a; font-size: 10px; line-height: 1.5; }
.whatsapp-setup-card { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1fr); gap: 25px; margin-top: 18px; padding: 20px; border: 1px solid #e6e7ed; border-radius: 10px; background: #fff; }
.whatsapp-setup-card h2 { margin: 7px 0; color: #3d4052; font: 700 18px "Manrope", sans-serif; }
.whatsapp-setup-card > div > p { color: #858896; font-size: 12px; line-height: 1.6; }
.whatsapp-settings-form { display: grid; gap: 11px; }
.whatsapp-settings-form label { display: grid; gap: 6px; color: #55586a; font-size: 12px; font-weight: 600; }
.whatsapp-settings-form input { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid #e3e4ea; border-radius: 6px; font-size: 12px; }
.whatsapp-settings-form .whatsapp-security-note { padding: 0; }
.whatsapp-web-controls { display: grid; justify-items: start; align-content: start; gap: 12px; }
.whatsapp-web-qr { width: 256px; max-width: 100%; padding: 10px; border: 1px solid #e6e7ed; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.whatsapp-web-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.whatsapp-web-controls .form-message { margin: 0; }
.whatsapp-webhook-url { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px; border-radius: 6px; background: #f5f6f9; }
.whatsapp-webhook-url > span { grid-column: 1 / -1; color: #676a7a; font-size: 11px; font-weight: 650; }
.whatsapp-webhook-url code { min-width: 0; overflow-wrap: anywhere; color: #565a69; font-size: 10px; }
.whatsapp-webhook-url button { grid-row: 2; grid-column: 2; }

@media (max-width: 1100px) {
  .dash-status-card, .dash-services-card, .dash-fulfillment-card { grid-column: span 6; }
  .dash-expenses-card { grid-column: span 4; }
  .dash-revenue-card { grid-column: span 8; }
  .dash-activity-card { grid-column: span 12; }
}

@media (max-width: 700px) {
  .crm-dashboard-heading { align-items: flex-start; }
  .crm-dashboard-heading h1 { font-size: 22px; }
  .crm-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-card { padding: 13px; }
  .dash-today-card, .dash-activity-card { grid-column: span 2; }
  .dash-status-card, .dash-services-card, .dash-fulfillment-card, .dash-expenses-card, .dash-revenue-card { grid-column: span 1; }
  .dash-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .dash-metric-grid article { padding: 3px 8px; border-right: 0; }
  .dash-metric-grid article:nth-child(odd) { padding-left: 0; border-right: 1px solid #30363c; }
  .dash-metric-grid article:nth-child(even) { padding-right: 0; }
  .dash-metric-grid article strong { font-size: 17px; }
  .dash-expense-total { font-size: 20px; }
  .dash-revenue-chart svg { height: 145px; }
  .whatsapp-inbox { grid-template-columns: minmax(0, 1fr); }
  .whatsapp-conversation-pane { border-right: 0; border-bottom: 1px solid #e9eaf0; }
  .whatsapp-thread, .whatsapp-thread-view { min-height: 390px; }
  .whatsapp-setup-card { grid-template-columns: 1fr; gap: 8px; }
}

.email-heading-actions { display: flex; align-items: center; gap: 10px; }
.email-content { color: #222637; }
.email-folder-tabs, .email-template-tabs { display: flex; gap: 6px; margin: 15px 0 10px; border-bottom: 1px solid #e8e9ef; }
.email-folder-tab { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; color: #777b8b; background: transparent; font-size: 12px; font-weight: 650; cursor: pointer; }
.email-folder-tab:hover, .email-folder-tab.is-active { border-bottom-color: #24a365; color: #248551; }
.email-inbox { display: grid; grid-template-columns: minmax(270px, 350px) minmax(0, 1fr); min-height: 450px; overflow: hidden; border: 1px solid #e6e7ed; border-radius: 10px; background: #fff; }
.email-message-pane { min-width: 0; padding: 14px; border-right: 1px solid #e9eaf0; }
.email-message-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: #424557; font-size: 13px; }
.email-message-heading span { color: #8b8d9a; font-size: 11px; }
.email-message-list { display: grid; gap: 4px; margin-top: 10px; }
.email-message-row { display: grid; gap: 4px; width: 100%; padding: 10px 9px; border: 0; border-radius: 7px; text-align: left; background: transparent; cursor: pointer; }
.email-message-row:hover, .email-message-row.is-active { background: #f1f8f5; }
.email-message-row strong, .email-message-row span, .email-message-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-message-row strong { color: #404455; font-size: 12px; }
.email-message-row span { color: #5e6273; font-size: 11px; }
.email-message-row small { color: #878a98; font-size: 10px; }
.email-message-row time { color: #9294a1; font-size: 9px; }
.email-message-thread { display: flex; min-width: 0; min-height: 450px; flex-direction: column; }
.email-message-detail { min-width: 0; }
.email-message-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid #ececf1; }
.email-message-detail > header h2 { margin: 5px 0 0; color: #3e4253; font: 700 17px "Manrope", sans-serif; overflow-wrap: anywhere; }
.email-detail-folder { color: #248551; font-size: 9px; font-weight: 700; letter-spacing: .8px; }
.email-message-addresses { display: grid; gap: 4px; padding: 13px 15px; }
.email-message-addresses strong { color: #424557; font-size: 12px; }
.email-message-addresses span, .email-message-addresses time { color: #858896; font-size: 10px; }
.email-message-detail pre { min-height: 220px; margin: 0; padding: 14px 15px; border-top: 1px solid #f0f0f4; color: #444758; font: 12px/1.65 "DM Sans", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.email-compose-card { margin-top: 16px; padding: 18px; border: 1px solid #e6e7ed; border-radius: 10px; background: #fff; }
.email-compose-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.email-compose-heading h2 { margin: 4px 0 0; color: #3d4052; font: 700 17px "Manrope", sans-serif; }
.email-compose-form { display: grid; gap: 11px; }
.email-compose-form label { display: grid; gap: 6px; color: #55586a; font-size: 12px; font-weight: 600; }
.email-compose-form input, .email-compose-form select, .email-compose-form textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #e3e4ea; border-radius: 6px; color: #404455; background: #fff; font-size: 12px; }
.email-compose-form textarea { resize: vertical; }
.email-template-hint { margin: 0; color: #888b99; font-size: 10px; line-height: 1.5; }
.email-compose-form > button { justify-self: start; }
.email-templates-list { display: grid; gap: 10px; }
.email-template-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid #e9e9ef; border-radius: 8px; background: #fff; }
.email-template-card > div:first-child { min-width: 0; }
.email-template-card strong, .email-template-card small { display: block; }
.email-template-card strong { color: #414455; font-size: 13px; }
.email-template-card small { margin-top: 4px; color: #666a7a; font-size: 11px; }
.email-template-preview { overflow: hidden; margin: 6px 0 0; color: #898b99; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.email-template-card > div:last-child { display: flex; gap: 7px; }
.email-template-delete { min-height: 32px; padding: 0 10px; border: 1px solid #f0dada; border-radius: 5px; color: #a34d4d; background: #fffafa; font-size: 11px; font-weight: 600; cursor: pointer; }
.email-template-dialog { max-width: 620px; }
.email-template-dialog textarea { resize: vertical; }
.email-template-image-preview { display: block; max-width: 100%; max-height: 220px; object-fit: contain; object-position: left; border: 1px solid #e5e5eb; border-radius: 6px; }
.email-template-variable-actions { display: flex; flex-wrap: wrap; gap: 7px; }

@media (max-width: 700px) {
  .email-heading-actions { align-items: flex-end; flex-direction: column; }
  .email-inbox { grid-template-columns: minmax(0, 1fr); }
  .email-message-pane { border-right: 0; border-bottom: 1px solid #e9eaf0; }
  .email-message-thread { min-height: 360px; }
  .email-compose-heading { align-items: flex-start; flex-direction: column; }
  .email-template-card { align-items: flex-start; }
}

.theme-toggle-button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #d9dbe3;
  border-radius: 6px;
  color: #55586a;
  background: #fff;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.reference-dashboard .theme-toggle-button {
  border-color: #343b42;
  color: #e6eaee;
  background: #20252a;
}

#dashboard-screen[data-theme="light"] #overview-content > :not(.crm-dashboard) {
  display: none !important;
}

#dashboard-screen[data-theme="light"] {
  color: #252638;
  background: #f7f8fb;
}

#dashboard-screen[data-theme="light"] .sidebar {
  color: #4a4c5e;
  background: #fff;
  border-color: #eeeff3;
}

#dashboard-screen[data-theme="light"] .sidebar .brand,
#dashboard-screen[data-theme="light"] .sidebar .workspace-switcher {
  color: #252638;
}

#dashboard-screen[data-theme="light"] .sidebar .nav-link,
#dashboard-screen[data-theme="light"] .sidebar .nav-parent-toggle,
#dashboard-screen[data-theme="light"] .sidebar .nav-section-label {
  color: #77798a;
}

#dashboard-screen[data-theme="light"] .sidebar .nav-link.active,
#dashboard-screen[data-theme="light"] .sidebar .nav-link:hover,
#dashboard-screen[data-theme="light"] .sidebar .nav-parent-toggle:hover,
#dashboard-screen[data-theme="light"] .sidebar .nav-group.has-active-child>.nav-parent-toggle {
  color: #514a9f;
  background: #f1f0fc;
}

#dashboard-screen[data-theme="light"] .sidebar .nav-submenu {
  background: #fff;
}

#dashboard-screen[data-theme="light"] .sidebar .help-card {
  border-color: #eeedf7;
  background: linear-gradient(140deg, #fbfaff, #f7f7fd);
}

#dashboard-screen[data-theme="light"] .sidebar .help-card strong {
  color: #303244;
}

#dashboard-screen[data-theme="light"] .sidebar .help-card p {
  color: #898b99;
}

#dashboard-screen[data-theme="light"] .profile-button {
  color: #303244;
  border-color: #eeeff3;
}

#dashboard-screen[data-theme="light"] .topbar {
  color: #55586a;
  background: rgba(255, 255, 255, .96);
  border-color: #ededf2;
}

#dashboard-screen[data-theme="light"] .breadcrumb strong {
  color: #393b4b;
}

#dashboard-screen[data-theme="light"] .topbar-avatar {
  color: #6358c9;
  background: #f1f0fc;
}

#dashboard-screen[data-theme="light"] .dashboard-content {
  background: #f7f8fb;
}

#dashboard-screen[data-theme="light"] .demo-notice {
  color: #77748e;
  background: #f1f0fc;
  border-color: #e8e6fa;
}

#dashboard-screen[data-theme="light"] .demo-notice strong {
  color: #4b4770;
}

#dashboard-screen[data-theme="light"] .crm-dashboard {
  --dash-muted: #777b8b;
  color: #353747;
}

#dashboard-screen[data-theme="light"] .crm-dashboard-heading h1 {
  color: #303244;
}

#dashboard-screen[data-theme="light"] .crm-dashboard .date-label {
  color: #858896;
}

#dashboard-screen[data-theme="light"] .crm-dashboard .add-contact-button {
  border-color: #d8d4f4;
  color: #5d53bd;
  background: #f4f2ff;
}

#dashboard-screen[data-theme="light"] .dash-card {
  border-color: #e6e7ed;
  background: #fff;
  box-shadow: 0 6px 20px #2526380a;
}

#dashboard-screen[data-theme="light"] .dash-card-heading h2,
#dashboard-screen[data-theme="light"] .dash-metric-grid article strong,
#dashboard-screen[data-theme="light"] .dash-expense-total {
  color: #353747;
}

#dashboard-screen[data-theme="light"] .dash-card-heading a {
  color: #397f78;
}

#dashboard-screen[data-theme="light"] .dash-live-indicator {
  color: #248551;
}

#dashboard-screen[data-theme="light"] .dash-live-indicator.is-sample {
  color: #a77b24;
}

#dashboard-screen[data-theme="light"] .dash-metric-grid article {
  border-color: #ececf2;
}

#dashboard-screen[data-theme="light"] .dash-metric-symbol {
  background: #f1f2f6;
}

#dashboard-screen[data-theme="light"] .dash-metric-grid article small,
#dashboard-screen[data-theme="light"] .dash-donut-caption,
#dashboard-screen[data-theme="light"] .dash-status-legend > span,
#dashboard-screen[data-theme="light"] .dash-service-index,
#dashboard-screen[data-theme="light"] .dash-service-count,
#dashboard-screen[data-theme="light"] .dash-chart-label,
#dashboard-screen[data-theme="light"] .dash-chart-legend,
#dashboard-screen[data-theme="light"] .dash-expenses-card > small,
#dashboard-screen[data-theme="light"] .dash-activity-row div span,
#dashboard-screen[data-theme="light"] .dash-activity-row time,
#dashboard-screen[data-theme="light"] .dash-empty-copy {
  color: #777b8b;
  fill: #777b8b;
}

#dashboard-screen[data-theme="light"] .dash-donut-value,
#dashboard-screen[data-theme="light"] .dash-service-row strong,
#dashboard-screen[data-theme="light"] .dash-activity-row strong {
  color: #353747;
  fill: #353747;
}

#dashboard-screen[data-theme="light"] .dash-status-legend > span,
#dashboard-screen[data-theme="light"] .dash-chart-legend {
  color: #777b8b;
}

#dashboard-screen[data-theme="light"] .dash-expense-gauge {
  background: #eceef2;
}

#dashboard-screen[data-theme="light"] .dash-activity-marker {
  color: #3d7ca1;
  background: #eaf2f8;
}

#dashboard-screen[data-theme="light"] .dash-activity-marker.is-complete {
  color: #248551;
  background: #eaf6ef;
}

@media (max-width: 560px) {
  .theme-toggle-button {
    padding: 0 7px;
    font-size: 10px;
  }
}

.credential-dialog-list { padding: 0 24px 22px; }
.credential-dialog-list h3 { color: #414557; font: 700 16px "Manrope", sans-serif; }
.credential-dialog-list .credential-list { display: grid; gap: 9px; max-height: 280px; overflow: auto; }
.credential-list-card { display: grid; gap: 6px; padding: 12px; border: 1px solid #e8e9ef; border-radius: 8px; background: #fbfbfd; }
.credential-list-heading { display: grid; gap: 4px; }
.credential-list-heading strong, .credential-list-card > strong { color: #414557; font-size: 14px; }
.credential-list-heading small, .credential-list-card > small { color: #777b89; font-size: 12px; }
.credential-list-secret, .credential-list-notes { margin: 0; color: #666a78; font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.credential-list-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.credential-login-link { color: #5e53b7; font-size: 12px; font-weight: 700; text-decoration: none; }

#dashboard-screen[data-theme="light"] {
  --comfile-navy: #12345b;
  --comfile-red: #cf3d4b;
  background: #f4f6f9;
}

#dashboard-screen[data-theme="light"] .sidebar .nav-link.active,
#dashboard-screen[data-theme="light"] .sidebar .nav-link:hover,
#dashboard-screen[data-theme="light"] .sidebar .nav-parent-toggle:hover,
#dashboard-screen[data-theme="light"] .sidebar .nav-group.has-active-child > .nav-parent-toggle {
  color: var(--comfile-navy);
  background: #edf2f8;
}

#dashboard-screen[data-theme="light"] .sidebar .nav-link.active {
  border-left: 3px solid var(--comfile-red);
  padding-left: 7px;
}

#dashboard-screen[data-theme="light"] .sidebar .nav-link.active .nav-icon,
#dashboard-screen[data-theme="light"] .sidebar .nav-group.has-active-child > .nav-parent-toggle .nav-icon {
  color: var(--comfile-navy);
}

#dashboard-screen[data-theme="light"] .workspace-avatar,
#dashboard-screen[data-theme="light"] .topbar-avatar {
  color: var(--comfile-navy);
  background: #e8eef6;
}

#dashboard-screen[data-theme="light"] .sidebar .help-spark,
#dashboard-screen[data-theme="light"] .sidebar .help-card a,
#dashboard-screen[data-theme="light"] .topbar .breadcrumb strong,
#dashboard-screen[data-theme="light"] .crm-dashboard .date-label {
  color: var(--comfile-navy);
}

#dashboard-screen[data-theme="light"] .sidebar .help-card {
  border-color: #e0e7f0;
  background: linear-gradient(140deg, #f8fafc, #eef3f8);
}

#dashboard-screen[data-theme="light"] .dashboard-content {
  background: #f4f6f9;
}

#dashboard-screen[data-theme="light"] .demo-notice {
  color: #53667d;
  background: #edf2f8;
  border-color: #dce5f0;
}

#dashboard-screen[data-theme="light"] .demo-notice strong,
#dashboard-screen[data-theme="light"] .demo-notice button,
#dashboard-screen[data-theme="light"] .notice-icon {
  color: var(--comfile-navy);
}

#dashboard-screen[data-theme="light"] .crm-dashboard-heading h1 {
  color: var(--comfile-navy);
}

#dashboard-screen[data-theme="light"] .crm-dashboard-heading h1 span {
  color: var(--comfile-red);
}

#dashboard-screen[data-theme="light"] .crm-dashboard .add-contact-button {
  border: 1px solid var(--comfile-navy);
  color: #fff;
  background: var(--comfile-navy);
  box-shadow: 0 3px 8px #12345b24;
}

#dashboard-screen[data-theme="light"] .crm-dashboard .add-contact-button:hover {
  border-color: #0b2748;
  background: #0b2748;
}

#dashboard-screen[data-theme="light"] .dash-card {
  border-color: #e1e6ed;
  box-shadow: 0 5px 18px #12345b0a;
}

#dashboard-screen[data-theme="light"] .dash-card-heading a,
#dashboard-screen[data-theme="light"] .dash-revenue-card .dash-card-heading > strong {
  color: var(--comfile-navy);
}

#dashboard-screen[data-theme="light"] .dash-metric-symbol.symbol-revenue,
#dashboard-screen[data-theme="light"] .dash-metric-symbol.symbol-orders {
  color: var(--comfile-navy);
  background: #eaf0f7;
}

#dashboard-screen[data-theme="light"] .dash-metric-symbol.symbol-services {
  color: var(--comfile-red);
  background: #fbebed;
}