:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --ink: #18212f;
  --muted: #697386;
  --line: #d8dde6;
  --blue: #2f6df6;
  --green: #248a57;
  --amber: #b96208;
  --red: #b42318;
  --teal: #087f8c;
  --shadow: 0 14px 35px rgba(20, 30, 46, 0.14);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

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

button,
.navButton {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
}

.navButton {
  display: grid;
  place-items: center;
  text-decoration: none;
}

button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.dangerBtn {
  border-color: #f3b4ad;
  color: var(--red);
}

.warningBtn {
  border-color: #f6d58b;
  color: var(--amber);
}

.authScreen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  background: var(--bg);
  padding: 24px;
}

body.authLocked .authScreen {
  display: grid;
}

body.authChecking .authScreen {
  display: none;
}

body.authLocked .portalShell {
  visibility: hidden;
}

.authCard {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 24px;
}

.authCard h1,
.authCard p {
  margin: 0;
}

.authCard p,
.helperText,
.portalHeader p,
.pageHero p,
.placeholderCard p,
.settingsCard header p,
.repMeta,
.teamCard p {
  color: var(--muted);
}

.authCard label,
.settingsCard label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-weight: 800;
}

.authCard input,
.settingsCard input:not([type="checkbox"]),
.settingsCard select,
.settingsCard textarea,
.tabControls input,
.tabControls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.brandMark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.portalShell {
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 24px 0 42px;
}

.portalHeader,
.brandRow,
.portalNav,
.tabBar,
.settingsCard header,
.settingsCard footer,
.teamCardHeader {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portalHeader,
.settingsCard header,
.settingsCard footer,
.teamCardHeader {
  justify-content: space-between;
}

.portalHeader {
  margin-bottom: 20px;
}

.portalNav,
.tabBar {
  gap: 8px;
}

.portalHeader h1,
.portalHeader p,
.pageHero h2,
.pageHero p,
.settingsCard h2,
.settingsCard p,
.teamCard p {
  margin: 0;
}

.pageHero,
.tabPanel,
.settingsCard,
.placeholderCard {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.pageHero {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.tabBar {
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tabButton.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.tabPanel {
  min-height: 420px;
}

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

.settingsGrid {
  align-items: start;
}

body.settingsPage .settingsGrid {
  grid-template-columns: minmax(360px, 0.85fr) minmax(480px, 1fr);
}

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

.settingsOverview article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}

.settingsOverview span,
.memberBase span,
.memberTeam span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settingsOverview strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.settingsWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.72fr);
  gap: 14px;
  align-items: start;
}

.settingsSideRail {
  display: grid;
  gap: 14px;
}

.placeholderCard,
.settingsCard {
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: none;
}

.placeholderCard strong {
  display: block;
  font-size: 22px;
}

.importCard label,
.fileDrop {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.importCard input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #fff;
  color: var(--ink);
}

.importHistory {
  display: grid;
  gap: 8px;
}

.aliasList {
  display: grid;
  gap: 8px;
}

.aliasRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px;
}

.aliasRow strong,
.aliasRow small {
  display: block;
}

.aliasRow small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.aliasRow select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
}

.importHistoryItem {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.importHistoryItem strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.importHistoryItem em {
  grid-column: 1 / -1;
  color: var(--amber);
  font-style: normal;
  font-weight: 800;
}

.importHistoryItem button {
  min-height: 34px;
  border: 1px solid #fecdd3;
  border-radius: 999px;
  background: #fff1f2;
  color: #9f1239;
  font-weight: 900;
}

.metricStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.metricTile {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 14px;
}

.metricTile span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metricTile strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
}

.metricsControls {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(180px, 260px);
  gap: 12px;
  margin-bottom: 16px;
}

.metricsControls label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.metricsControls input,
.metricsControls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.readOnlyMetricControl {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
  padding: 10px 12px;
  color: var(--ink);
  font-weight: 900;
}

.payOnlyControls {
  max-width: 880px;
}

.weekRangePicker {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.weekRangePicker button {
  min-width: 0;
  padding: 0 10px;
}

.weekRangeButton {
  font-weight: 900;
}

.weekRangePicker input[type="date"] {
  grid-column: 1 / -1;
  width: 1px;
  min-height: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

.metricsChartGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metricsSummaryGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metricsSummaryGrid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
  padding: 14px;
}

.metricsSummaryGrid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.metricsSummaryGrid strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.05em;
}

.metricsSummaryGrid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.paySummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.paySummaryGrid article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.paySummaryGrid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.paySummaryGrid strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.05em;
}

.paySummaryGrid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.paySummaryGrid article.negativeMoney strong,
.financeLine.negative strong {
  color: #b42318;
}

.financeLine.positive strong {
  color: #067647;
}

.businessHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.businessHeader strong {
  display: block;
  font-size: 24px;
}

.businessHeader p {
  margin: 4px 0 0;
  color: var(--muted);
}

.businessWorkspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(360px, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.businessCard {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 16px;
}

.businessCard h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.expenseControls {
  display: grid;
  gap: 14px;
}

.expenseControls label {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(140px, 1fr) minmax(80px, auto);
  gap: 12px;
  align-items: center;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.expenseControls input[type="range"] {
  accent-color: var(--blue);
}

.expenseControls output {
  color: var(--ink);
  font-size: 14px;
  text-align: right;
}

.businessFinancials {
  display: grid;
  gap: 8px;
}

.financeLine {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
  color: var(--muted);
}

.financeLine strong {
  color: var(--ink);
}

.financeLine.total {
  border-bottom: 0;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 900;
}

.metricChartCard {
  display: grid;
  justify-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 14px 10px;
  text-align: center;
}

.metricChartCard span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.metricChartCard strong {
  font-size: 24px;
}

.chartPlaceholder {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: conic-gradient(var(--blue) 0 32%, #dbe7ff 32% 100%);
}

.ringChart {
  background: conic-gradient(var(--blue) 0 0%, #dbe7ff 0% 100%);
}

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

.ringChart.amber {
  background: conic-gradient(var(--amber) 0 0%, #dbe7ff 0% 100%);
}

.ringChart.teal {
  background: conic-gradient(var(--teal) 0 0%, #dbe7ff 0% 100%);
}

.ringChart.green {
  background: conic-gradient(var(--green) 0 0%, #dbe7ff 0% 100%);
}

.metricsTableShell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metricsTable {
  min-width: 1320px;
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.metricsTable th,
.metricsTable td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}

.metricsTable th {
  background: #f4f7fb;
  color: #344054;
  font-weight: 900;
}

.metricsTable td {
  color: var(--muted);
}

.metricsTable tr.metricActivated td {
  background: #ecfdf3;
  color: #065f46;
}

.metricsTable tr.metricCancelled td {
  background: #fff1f2;
  color: #991b1b;
}

.tabControls,
.repCreate,
.teamCreate,
.repModalFields,
.repModalActions {
  display: grid;
  gap: 10px;
}

.tabControls {
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  margin-bottom: 14px;
}

.repCreate,
.teamCreate {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

body.settingsPage .repCreate {
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.2fr) minmax(105px, 0.7fr) minmax(170px, 1fr) auto;
}

body.settingsPage .teamCreate {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
}

body.settingsPage .teamCreate label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

body.settingsPage .memberDirectoryCard {
  min-height: 640px;
}

body.settingsPage .teamSettingsCard {
  min-height: 0;
}

.memberCardHeader {
  align-items: center;
}

.addRepPanel {
  border: 1px solid #c7d7fe;
  border-radius: 8px;
  background: #f7f9ff;
  padding: 12px;
}

.memberToolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto);
  gap: 10px;
}

.repList,
.teamList,
.teamMemberList {
  display: grid;
  gap: 10px;
}

.teamCard,
.emptyState,
.noticeBox {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.emptyState.compact {
  min-height: 84px;
}

.repPermissionToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #344054;
  font-weight: 800;
}

.repPermissionToggle input {
  width: auto;
  margin: 0;
  accent-color: var(--blue);
}

.memberRow {
  display: grid;
  grid-template-columns: 46px minmax(170px, 1fr) minmax(130px, 0.75fr) minmax(125px, 0.7fr) minmax(95px, auto) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.memberRow:focus,
.memberRow:hover {
  border-color: #b9c6da;
  box-shadow: 0 8px 24px rgba(20, 30, 46, 0.08);
  outline: none;
}

.memberRow.inactiveMember {
  background: #f7f8fb;
}

.memberAvatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--blue);
  font-size: 14px;
  font-weight: 950;
}

.memberAvatar.large {
  width: 58px;
  height: 58px;
  font-size: 17px;
}

.memberInfo,
.memberBase,
.memberTeam,
.memberStatusGroup {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.memberInfo strong,
.memberBase strong,
.memberTeam strong {
  overflow-wrap: anywhere;
}

.memberInfo span,
.memberBase span,
.memberTeam span,
.memberStatusGroup span:not(.statusPill) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.statusPill,
.inactiveBadge,
.inactiveStatus {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: #eef2f7;
  color: #526071;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  vertical-align: middle;
}

.statusPill {
  width: fit-content;
}

.statusPill.active {
  background: #e8f5ee;
  color: var(--green);
}

.statusPill.online {
  background: #dcfce7;
  color: #166534;
}

.statusPill.away {
  background: #fff7ed;
  color: var(--amber);
}

.statusPill.inactive {
  background: #eef2f7;
  color: #526071;
}

.memberSettingsButton {
  min-width: 92px;
}

.activeText {
  color: var(--green);
}

.inactiveText {
  color: #526071;
}

.inactiveStatus {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.teamActionGroup {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.teamTree {
  display: grid;
  gap: 10px;
}

.teamTreeHeader {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

.teamTreeHeader strong {
  color: var(--ink);
  font-size: 14px;
}

.teamTreeBranch {
  display: grid;
  gap: 8px;
  border-left: 3px solid #dbe7ff;
  border-radius: 8px;
  background: #fbfcfe;
  padding: 10px 10px 10px 12px;
}

.teamTreeLead {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.teamTreeLead span,
.teamTreeBranch li small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.teamNestedList,
.teamNestedList ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.teamTreeBranch li {
  color: #344054;
  font-size: 13px;
}

.teamTreeBranch li span {
  font-weight: 800;
}

.teamTreeBranch li small {
  display: block;
  margin-top: 2px;
}

.teamTreeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.teamTreeActions button {
  min-height: 34px;
  padding: 0 10px;
}

.compactTeamCard {
  padding: 10px;
}

.resetPasswordResult code {
  border-radius: 6px;
  background: #eef2f7;
  padding: 2px 6px;
}

.settingsModalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.35);
  padding: 20px;
}

.repSettingsModal {
  width: min(720px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(20, 30, 46, 0.24);
}

.repModalHeader,
.repModalIdentity,
.agreementAccessPanel {
  display: flex;
  align-items: center;
  gap: 14px;
}

.repModalHeader {
  position: sticky;
  top: 0;
  z-index: 1;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 18px;
}

.repModalHeader h2,
.repModalHeader p,
.agreementAccessPanel h3,
.agreementAccessPanel p {
  margin: 0;
}

.repModalHeader p,
.agreementAccessPanel p {
  color: var(--muted);
}

.iconButton {
  display: grid;
  place-items: center;
  width: 40px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.repModalBody {
  display: grid;
  gap: 16px;
  padding: 18px;
}

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

.repModalStats div,
.agreementAccessPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 12px;
}

.repModalStats span,
.repModalFields label span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.repModalStats strong {
  display: block;
  margin-top: 4px;
}

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

.repModalFields label {
  display: grid;
  gap: 6px;
}

.repSettingsModal input:not([type="checkbox"]),
.repSettingsModal select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.modalToggle {
  grid-column: 1 / -1;
  align-self: end;
}

.agreementAccessPanel {
  justify-content: space-between;
}

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

.teamMemberList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
}

.teamMemberHeader {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.teamMemberHeader strong {
  color: var(--ink);
}

.teamMemberList label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  line-height: 1.2;
}

.teamMemberList label.disabledTeamMember {
  background: #f1f5f9;
  color: var(--muted);
}

.teamMemberList input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.teamMemberList span {
  min-width: 0;
  overflow-wrap: anywhere;
}

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

.avatarRow {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
}

.avatarPreview {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef2f7;
  color: var(--ink);
  font-weight: 900;
  overflow: hidden;
}

.avatarPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statusLine {
  min-height: 22px;
  color: var(--muted);
  font-weight: 800;
}

body:not(.ownerRole) .ownerOnly {
  display: none !important;
}

body:not(.ownerRole) .settingsWorkspace {
  grid-template-columns: minmax(0, 640px);
}

@media (max-width: 900px) {
  .portalHeader,
  .settingsCard header,
  .placeholderGrid,
  .settingsGrid,
  .settingsOverview,
  .settingsWorkspace,
  .settingsSideRail,
  .metricStrip,
  .metricsControls,
  .metricsSummaryGrid,
  .paySummaryGrid,
  .metricsChartGrid,
  .businessHeader,
  .businessWorkspace,
  .tabControls,
  .repCreate,
  .teamCreate,
  .memberToolbar,
  .aliasRow,
  .memberRow,
  .repModalStats,
  .repModalFields,
  .repModalActions,
  .agreementAccessPanel,
  .teamMemberList {
    display: grid;
    grid-template-columns: 1fr;
  }

  .expenseControls label {
    grid-template-columns: 1fr;
  }

  body.settingsPage .memberDirectoryCard,
  body.settingsPage .teamSettingsCard {
    min-height: 0;
  }

  body.settingsPage .teamCreate {
    grid-template-columns: 1fr;
  }

  .teamTreeLead {
    display: grid;
  }

  .teamTreeActions {
    justify-content: flex-start;
  }

  body.settingsPage .repCreate {
    grid-template-columns: 1fr;
  }

  .portalNav {
    flex-wrap: wrap;
  }
}