/* PlaneWise official visual identity — presentation-only overrides. */

:root {
  --page: #f5f8fa;
  --page-2: #ffffff;
  --rail: #0b1e2d;
  --rail-soft: #132d3d;
  --surface: #ffffff;
  --surface-2: #f5f8fa;
  --surface-3: #e8f6f6;
  --field: #ffffff;
  --ink: #0b1e2d;
  --muted: #526371;
  --soft: #344a58;
  --line: #dce4e9;
  --line-strong: #bac8d0;
  --brand: #18a8a9;
  --brand-strong: #0c7377;

  --pw-page: #f5f8fa;
  --pw-page-deep: #edf2f5;
  --pw-surface: #ffffff;
  --pw-surface-soft: #f5f8fa;
  --pw-surface-tint: #e8f6f6;
  --pw-ink: #0b1e2d;
  --pw-ink-soft: #344a58;
  --pw-muted: #526371;
  --pw-line: #dce4e9;
  --pw-line-strong: #bac8d0;
  --pw-rail: #0b1e2d;
  --pw-rail-hover: #132d3d;
  --pw-brand: #18a8a9;
  --pw-brand-strong: #0c7377;
  --pw-brand-soft: #e4f7f7;

  --admin-rail: #0b1e2d;
  --admin-rail-soft: #132d3d;
  --admin-page: #f5f8fa;
  --admin-surface-soft: #f5f8fa;
  --admin-ink: #0b1e2d;
  --admin-muted: #526371;
  --admin-line: #dce4e9;
  --admin-teal: #0c7377;
  --admin-teal-bright: #18a8a9;

  --employee-bg: #f5f8fa;
  --employee-surface-soft: #f5f8fa;
  --employee-ink: #0b1e2d;
  --employee-muted: #526371;
  --employee-line: #dce4e9;
  --employee-teal: #18a8a9;
  --employee-teal-strong: #0c7377;
}

html,
body,
button,
input,
select,
textarea {
  font-family: Inter, "Segoe UI Variable", Aptos, "Segoe UI", system-ui, sans-serif;
}

body,
.workspace,
.platform-admin-main {
  background-color: #f5f8fa;
}

.side-rail,
.platform-admin-rail {
  background: #0b1e2d;
  border-right-color: rgba(82, 209, 208, 0.2);
}

.brand-lockup {
  display: block;
  width: 154px;
  max-width: calc(100% - 42px);
  height: auto;
}

.brand-mark,
.employee-brand-mark {
  overflow: hidden;
  border: 0;
  background: #0b1e2d url("/brand/planewise-mark.svg") center / cover no-repeat;
  box-shadow: none;
  color: transparent;
  font-size: 0;
}

.module-link.active {
  border-color: rgba(82, 209, 208, 0.46);
  background: rgba(82, 209, 208, 0.14);
  box-shadow: inset 3px 0 #52d1d0, 0 8px 20px rgba(2, 15, 24, 0.18);
}

.module-link:not(.disabled):hover {
  border-color: rgba(82, 209, 208, 0.24);
  background: #132d3d;
}

.module-link.active .nav-glyph {
  border-color: rgba(82, 209, 208, 0.42);
  background: rgba(24, 168, 169, 0.24);
}

.tenant-card {
  border-color: rgba(82, 209, 208, 0.2);
  background: #102738;
}

.tenant-card .tenant-account-link,
.tenant-account-link {
  color: #52d1d0;
}

.eyebrow,
.employee-eyebrow,
.platform-admin-eyebrow {
  color: #0c7377;
}

.primary-button,
.platform-primary-button {
  border-color: #0c7377;
  color: #ffffff;
  background: #0c7377;
}

.primary-button:hover,
.platform-primary-button:hover {
  background: #0b1e2d;
}

.account-page .primary-button,
.employee-button-primary {
  border-color: #0c7377;
  color: #ffffff;
  background: #0c7377;
}

.account-page .primary-button:hover,
.employee-button-primary:hover {
  background: #0b1e2d;
}

.auth-brand-panel {
  background: #0b1e2d;
}

.auth-brand-panel::after {
  background: rgba(82, 209, 208, 0.42);
  box-shadow: 0 -42px 0 rgba(82, 209, 208, 0.15), 0 42px 0 rgba(82, 209, 208, 0.15);
}

.auth-brand small,
.platform-admin-brand small {
  color: #aec0ca;
}

.account-page {
  --account-page: #f5f8fa;
  --account-surface: #ffffff;
  --account-surface-soft: #f5f8fa;
  --account-surface-teal: #e8f6f6;
  --account-ink: #0b1e2d;
  --account-muted: #526371;
  --account-line: #dce4e9;
  --account-line-strong: #bac8d0;
  --account-teal: #18a8a9;
  --account-teal-strong: #0c7377;
  --account-cobalt: #18a8a9;
  background: #f5f8fa;
}

.account-brand {
  gap: 14px;
}

.account-brand-logo {
  display: block;
  width: 148px;
  height: auto;
}

.account-brand-context {
  border-left: 1px solid #dce4e9;
  padding-left: 14px;
  color: #526371;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-billing::before {
  background: #18a8a9;
}

.account-panel-icon-billing {
  border-color: rgba(24, 168, 169, 0.3);
  background: #e8f6f6;
}

.account-panel-icon-billing img,
.subscription-summary-icon img {
  width: 24px;
  height: 24px;
}

.subscription-summary-icon {
  background: #e8f6f6;
}

.employee-brand-mark {
  width: 40px;
  height: 40px;
}

@media (max-width: 620px) {
  .account-brand-logo {
    width: 128px;
  }

  .account-brand-context {
    display: none;
  }
}