/*
 * Rently DESIGN-1 — late, presentation-only override layer.
 * Guardrail: booking-card bodies, canonical booking drawer and application
 * business state are intentionally outside this stylesheet.
 */
:root {
  --r-canvas: #f7f3ed;
  --r-canvas-strong: #f1ebe3;
  --r-surface: #fffdfa;
  --r-surface-soft: #fbf7f1;
  --r-text: #1c1917;
  --r-text-soft: #736b64;
  --r-beige: #e9ded0;
  --r-blush: #f3e5df;
  --r-peach: #f3c7ad;
  --r-peach-soft: #fae9df;
  --r-border: rgba(45, 37, 32, .10);
  --r-border-strong: rgba(45, 37, 32, .16);
  --r-radius-sm: 12px;
  --r-radius: 18px;
  --r-radius-lg: 20px;
  --r-shadow: 0 8px 24px rgba(51, 39, 31, .055);
  --r-shadow-float: 0 12px 32px rgba(51, 39, 31, .10);
  --r-space-1: 4px;
  --r-space-2: 8px;
  --r-space-3: 12px;
  --r-space-4: 16px;
  --r-space-5: 20px;
  --r-space-6: 24px;
  --r-space-8: 32px;
  --r-space-10: 40px;
  --r-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rently-nav-reserve: calc(104px + env(safe-area-inset-bottom));
}

html {
  background: var(--r-canvas);
  color: var(--r-text);
}

body {
  background:
    radial-gradient(circle at 8% 3%, rgba(243, 199, 173, .18), transparent 28rem),
    linear-gradient(180deg, #faf7f2 0%, var(--r-canvas) 100%);
  color: var(--r-text);
  font-family: var(--r-font);
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select,
textarea {
  font-family: var(--r-font);
}

.wrap {
  width: min(100%, 1440px);
  margin-inline: auto;
}

.top {
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-lg);
  background: rgba(255, 253, 250, .94);
  box-shadow: var(--r-shadow);
  backdrop-filter: blur(16px);
}

.top .brand,
.pageTitle,
.heroTitle,
.sectionTitle {
  color: var(--r-text);
  font-weight: 760;
  letter-spacing: -.035em;
}

.top .sub,
.muted,
.sub,
.hint {
  color: var(--r-text-soft);
}

.pill,
.btn,
.btnSoft,
.btnDark,
.iconBtn {
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-sm);
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.pill:hover,
.btn:hover,
.btnSoft:hover,
.btnDark:hover,
.iconBtn:hover {
  transform: translateY(-1px);
  border-color: var(--r-border-strong);
}

.btn,
.btnDark,
.pill.active {
  color: #fff;
  background: var(--r-text);
}

.btnSoft,
.iconBtn,
.pill {
  color: var(--r-text);
  background: var(--r-surface);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  color: var(--r-text);
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-sm);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(243, 199, 173, .32);
  border-color: rgba(124, 82, 61, .30);
}

.card:not(.guestShell),
.aCard,
.settingBox,
.modalCard {
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-lg);
  background: var(--r-surface);
  box-shadow: var(--r-shadow);
}

/* Exact application navigation: geometry, routes and ordering remain in runtime. */
.bottomNav {
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-lg);
  background: rgba(255, 253, 250, .96);
  box-shadow: var(--r-shadow-float);
  backdrop-filter: blur(18px);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottomNav .navBtn {
  min-height: 60px;
  color: var(--r-text-soft);
  border: 0;
  border-radius: 15px;
  background: transparent;
}

.bottomNav .navBtn.active {
  color: #fff;
  background: var(--r-text);
  box-shadow: none;
}

.bottomNav .navBtn .rentlyNavIcon {
  color: currentColor;
}

.bottomNav .navBtn .v89NavLabel {
  color: currentColor;
  font-weight: 680;
}

/* The v89 runtime mounts this navigation after stylesheets. Keep its layout
   and access-state intact, but make the late visual layer deterministic. */
html body .bottomNav[data-v89-nav="1"] {
  border: 1px solid var(--r-border) !important;
  border-radius: var(--r-radius-lg) !important;
  background: rgba(255, 253, 250, .96) !important;
  box-shadow: var(--r-shadow-float) !important;
}

html body .bottomNav[data-v89-nav="1"] .navBtn {
  border-radius: 15px !important;
  color: var(--r-text-soft) !important;
}

html body .bottomNav[data-v89-nav="1"] .navBtn.active {
  color: #fff !important;
  background: var(--r-text) !important;
  box-shadow: none !important;
}

/* Guest-area shell only. Booking tiles and the canonical drawer are excluded. */
.guestShell {
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-lg);
  background: rgba(255, 253, 250, .76);
  box-shadow: none;
}

.guestTabs {
  gap: var(--r-space-2);
  padding: var(--r-space-2);
  border: 1px solid var(--r-border);
  border-radius: 16px;
  background: var(--r-surface-soft);
}

.guestTab {
  min-height: 44px;
  color: var(--r-text-soft);
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-weight: 680;
}

.guestTab.active {
  color: var(--r-text);
  background: var(--r-peach-soft);
  box-shadow: inset 0 0 0 1px rgba(126, 77, 52, .08);
}

.guestProcess {
  gap: var(--r-space-4);
}

.guestCol {
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius);
  background: rgba(255, 253, 250, .64);
}

.guestColHead {
  min-height: 66px;
  padding: var(--r-space-4);
  border-bottom: 1px solid var(--r-border);
  background: transparent;
}

.guestColTitle {
  color: var(--r-text);
  font-weight: 760;
}

.guestColHint {
  color: var(--r-text-soft);
}

.guestCount {
  color: var(--r-text);
  background: var(--r-peach-soft);
  border: 1px solid rgba(126, 77, 52, .08);
}

.guestMiniAdd,
.guestAddGuestTile {
  color: var(--r-text);
  border: 1px dashed rgba(76, 59, 49, .22);
  border-radius: 14px;
  background: rgba(255, 253, 250, .72);
}

/* First run: editorial sticker journey, nonblocking behavior stays in JS. */
.rentlyFirstRunBackdrop,
.rentlyHelpBackdrop {
  background: rgba(40, 32, 28, .24);
  backdrop-filter: blur(10px);
}

/*
 * DESIGN-1 guardrail: first-run is a guide, not a modal blocker.
 * Only its visible dialog remains interactive; navigation underneath stays usable.
 */
.rentlyFirstRunBackdrop,
.rentlyFirstRunBackdrop.show {
  padding: 20px 20px calc(96px + env(safe-area-inset-bottom));
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.rentlyFirstRunDialog,
.rentlyHelpPanel {
  color: var(--r-text);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius-lg);
  background: var(--r-surface);
  box-shadow: 0 24px 70px rgba(45, 35, 29, .18);
}

.rentlyFirstRunDialog {
  max-height: min(720px, calc(100dvh - 136px - env(safe-area-inset-bottom)));
  pointer-events: auto;
}

.rentlyFirstRunEyebrow,
.rentlyHelpEyebrow {
  color: #9a684f;
  letter-spacing: .14em;
}

.rentlyFirstRunHead h2,
.rentlyHelpHead h2 {
  color: var(--r-text);
  letter-spacing: -.035em;
}

.rentlyFirstRunLead,
.rentlyHelpTopic p,
.rentlyContextTip p {
  color: var(--r-text-soft);
}

.rentlyFirstRunSteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.rentlyFirstRunStep {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: 48px auto;
  gap: 10px 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius);
  background: var(--r-surface-soft);
  box-shadow: none;
}

.rentlyFirstRunStep:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 39px;
  left: calc(100% - 3px);
  width: 20px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(117, 86, 68, .34) 0 4px, transparent 4px 8px);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}

.rentlyFirstRunNumber {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--r-text);
  border: 1px solid var(--r-border);
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 780;
}

.rentlyFirstRunSticker {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #6f4c3c;
  border-radius: 16px 18px 15px 19px;
  background: linear-gradient(145deg, #f7d4bf, #f1bd9e);
  box-shadow: 0 5px 12px rgba(105, 70, 51, .10);
  font-size: 20px;
  font-weight: 780;
  transform: rotate(-2deg);
}

.rentlyFirstRunStep > div {
  grid-column: 1 / -1;
}

.rentlyFirstRunStep b {
  color: var(--r-text);
  font-size: 15px;
}

.rentlyFirstRunStep p {
  color: var(--r-text-soft);
  line-height: 1.45;
}

.rentlyFirstRunStep.is-complete {
  background: var(--r-peach-soft);
  border-color: rgba(164, 101, 69, .15);
}

.rentlyFirstRunStep.is-complete .rentlyFirstRunNumber {
  color: #fff;
  background: #b87556;
}

.rentlyFirstRunStep.is-complete .rentlyFirstRunSticker {
  color: #fff;
  background: #ce8c69;
}

.rentlyHelpTopic {
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius);
  background: var(--r-surface-soft);
  box-shadow: none;
}

.rentlyHelpPrimary,
.rentlyHelpSecondary,
.rentlyHelpAction,
.rentlyHelpClose {
  border-radius: 12px;
  box-shadow: none;
}

.rentlyHelpPrimary,
.rentlyHelpAction {
  color: #fff;
  background: var(--r-text);
}

.rentlyHelpSecondary,
.rentlyHelpClose {
  color: var(--r-text);
  background: var(--r-surface-soft);
  border: 1px solid var(--r-border);
}

.rentlyHelpButton {
  position: static;
  right: auto;
  bottom: auto;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--r-text);
  border: 1px solid var(--r-border);
  border-radius: 14px;
  background: var(--r-surface);
  box-shadow: var(--r-shadow-float);
}

.rentlyHelpButtonLabel {
  display: none;
}

.rentlyContextTip {
  color: var(--r-text);
  border: 1px solid var(--r-border);
  border-radius: var(--r-radius);
  background: var(--r-surface);
  box-shadow: var(--r-shadow-float);
}

@media (max-width: 1100px) {
  .rentlyFirstRunSteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rentlyFirstRunStep:nth-child(3)::after {
    display: none;
  }
  .guestProcess {
    gap: 12px;
  }
}

@media (max-width: 760px) {
  :root {
    --r-radius: 16px;
    --r-radius-lg: 18px;
  }
  body {
    overflow-x: clip;
  }
  .wrap {
    padding-inline: 12px;
  }
  .top {
    border-radius: 18px;
  }
  .bottomNav {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
  }
  .bottomNav .navBtn {
    min-width: 0;
    min-height: 56px;
    padding-inline: 4px;
  }
  .bottomNav .navBtn .v89NavLabel {
    font-size: 10px;
  }
  .guestTabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .guestTab {
    min-width: 0;
    padding-inline: 6px;
    font-size: 12px;
  }
  .guestColHead {
    min-height: 58px;
    padding: 12px;
  }
  .rentlyFirstRunDialog,
  .rentlyHelpPanel {
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }
  .rentlyFirstRunBackdrop,
  .rentlyFirstRunBackdrop.show {
    align-items: flex-start;
    padding: max(10px, env(safe-area-inset-top)) 10px
      calc(96px + env(safe-area-inset-bottom));
  }
  .rentlyFirstRunDialog {
    max-height: calc(100dvh - 116px - env(safe-area-inset-bottom));
  }
  .rentlyFirstRunSteps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rentlyFirstRunStep {
    grid-template-columns: 38px 48px 1fr;
    grid-template-rows: auto;
    align-items: center;
    padding: 12px;
  }
  .rentlyFirstRunStep > div {
    grid-column: auto;
  }
  .rentlyFirstRunStep:not(:last-child)::after {
    top: calc(100% - 2px);
    left: 29px;
    width: 2px;
    height: 14px;
    background: repeating-linear-gradient(180deg, rgba(117, 86, 68, .34) 0 4px, transparent 4px 8px);
    mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  }
  .rentlyFirstRunStep p {
    margin-top: 3px;
    font-size: 12px;
  }
  .rentlyHelpButton {
    position: static;
    right: auto;
    bottom: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pill,
  .btn,
  .btnSoft,
  .btnDark,
  .iconBtn {
    transition: none;
  }
}

/* DESIGN-RESET-1 corrective slice. Keep fixed navigation outside Dashboard
   content and never leave stale values visible for a genuinely empty range. */
/* The fixed navigation is reserved through browser scroll clearance below;
   no artificial trailing Dashboard padding is used as a substitute. */
body.dashboardTheme.rentlyDemoMode .rentlyDemoBanner { display: none !important; }
body.dashboardTheme.rentlyDemoMode #dashboardTab .saasLockOverlay { display: none !important; }
body.dashboardTheme.rentlyDemoMode #dashboardTab .saasLocked { filter: none !important; opacity: 1 !important; pointer-events: auto !important; }
body.dashboardTheme.rentlyDemoMode #dashboardTab .saasLocked > *:not(.saasLockOverlay) { filter: none !important; opacity: 1 !important; pointer-events: auto !important; }
body.dashboardTheme #dashboardTab .dashMotion,
body.dashboardTheme #dashboardTab .dashIn { animation: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
#dashboardTab.rentlyDashboardEmpty .kpiGrid,
#dashboardTab.rentlyDashboardEmpty .dashGrid,
#dashboardTab[data-dashboard-state="error"] .kpiGrid,
#dashboardTab[data-dashboard-state="error"] .dashGrid { display: none !important; }
body.dashboardTheme #dashboardTab .kpi { scroll-margin-bottom: calc(138px + env(safe-area-inset-bottom)); }
body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 6px 2px !important;
  gap: 3px !important;
}
body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn .v89NavLabel {
  display: block !important;
  min-height: 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  letter-spacing: -.02em !important;
  transform: none !important;
}
body.dashboardTheme .bottomNav[data-v89-nav="1"] { padding: 7px 8px max(7px, env(safe-area-inset-bottom)) !important; }

@media (max-width: 767px) {
  body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn .v89NavLabel { font-size: 11px !important; }
}

/* MULTI-COMPANY-1: compact, server-validated active company selector. */
.rentlyCompanySwitcher {
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px 10px;
  border: 1px solid var(--rently-border, rgba(51, 39, 31, .12));
  border-radius: 16px;
  background: var(--rently-surface, #fffdfa);
}
.rentlyCompanySwitcher[hidden] { display: none; }
.rentlyCompanySwitcher span {
  color: var(--rently-text-muted, #746b64);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rentlyCompanySwitcher select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--rently-text, #201b18);
  font: 700 13px/1.2 inherit;
}
@media (max-width: 720px) {
  .rentlyCompanySwitcher {
    order: -1;
    width: min(100%, 230px);
    min-width: 0;
  }
  .topActions { flex-wrap: wrap; justify-content: flex-end; }
}

/* DESIGN-RESET-1 — app shell and Dashboard.
   This deliberately comes after the legacy runtime style layers: dashboard
   navigation and data rendering stay untouched, while the presentation is a
   single warm, readable surface instead of a second dark application. */
body.dashboardTheme,
html.dashboardTheme body {
  background:
    radial-gradient(circle at 7% 0%, rgba(243, 199, 173, .28), transparent 28rem),
    radial-gradient(circle at 94% 8%, rgba(243, 229, 223, .9), transparent 27rem),
    linear-gradient(180deg, #fffaf5 0%, #f7f1eb 100%) !important;
  color: var(--r-text) !important;
}

body.dashboardTheme .wrap {
  background: transparent !important;
}

/* Keep the header legible in every route, including the dashboard route. */
body.dashboardTheme .top {
  min-height: 62px;
  padding: 10px 12px !important;
  border: 1px solid rgba(66, 48, 39, .10) !important;
  border-radius: 20px !important;
  background: rgba(255, 253, 250, .90) !important;
  box-shadow: 0 10px 30px rgba(69, 49, 38, .07) !important;
}

body.dashboardTheme .top .brand,
body.dashboardTheme .brand {
  color: #211b17 !important;
  text-shadow: none !important;
}

body.dashboardTheme .top .sub,
body.dashboardTheme .sub {
  color: #756a62 !important;
}

body.dashboardTheme .topActions .pill,
body.dashboardTheme .topActions .avatarPill {
  color: #302722 !important;
  border: 1px solid rgba(66, 48, 39, .12) !important;
  background: #fffdfa !important;
  box-shadow: none !important;
}

body.dashboardTheme .rentlyCompanySwitcher {
  border-color: rgba(66, 48, 39, .12) !important;
  background: #fffdfa !important;
}

body.dashboardTheme .rentlyCompanySwitcher span,
body.dashboardTheme .rentlyCompanySwitcher select {
  color: #302722 !important;
}

/* Demo is a safe fixture, but it should not introduce a second dark brand. */
body.dashboardTheme .rentlyDemoBanner {
  color: #302722 !important;
  border: 1px solid rgba(145, 83, 58, .14) !important;
  background: linear-gradient(135deg, #f8dfd1 0%, #f4c8b3 100%) !important;
  box-shadow: 0 12px 28px rgba(145, 83, 58, .10) !important;
}

body.dashboardTheme .rentlyDemoBanner span { color: #654b3f !important; }
body.dashboardTheme .rentlyDemoBanner button { color: #fffdfa !important; background: #2b211c !important; }
body.dashboardTheme .rentlyDemoBanner a { color: #3b2c25 !important; background: rgba(255, 253, 250, .64) !important; }

body.dashboardTheme .bottomNav,
html body.dashboardTheme .bottomNav[data-v89-nav="1"] {
  border-color: rgba(66, 48, 39, .10) !important;
  background: rgba(255, 253, 250, .94) !important;
  box-shadow: 0 14px 36px rgba(69, 49, 38, .13) !important;
}

body.dashboardTheme .bottomNav .navBtn,
html body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn {
  color: #766c64 !important;
}

body.dashboardTheme .bottomNav .navBtn.active,
html body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn.active {
  color: #fffdfa !important;
  background: #2b211c !important;
  box-shadow: none !important;
}

/* Dashboard: a calm editorial canvas, not a dark visual island. */
body.dashboardTheme #dashboardTab {
  width: min(1120px, calc(100vw - 28px)) !important;
  max-width: 1120px !important;
  min-height: 0 !important;
  margin: 0 auto 30px !important;
  padding: clamp(18px, 3vw, 34px) !important;
  /* Reserve the fixed navigation in normal document flow.  The extra space
     belongs to the surface rather than an individual KPI, so every card can
     be scrolled completely above the bar. */
  padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
  border: 1px solid rgba(66, 48, 39, .10) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 95% 0%, rgba(243, 199, 173, .30), transparent 19rem),
    linear-gradient(145deg, #fffdf9 0%, #fbf4ee 100%) !important;
  color: #211b17 !important;
  box-shadow: 0 18px 46px rgba(69, 49, 38, .08) !important;
}

body.dashboardTheme #dashboardTab .dashHead {
  align-items: flex-end !important;
  gap: 20px !important;
  margin: 0 0 24px !important;
}

body.dashboardTheme #dashboardTab .dashEyebrow {
  margin-bottom: 8px;
  color: #9a5f45 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}

body.dashboardTheme #dashboardTab .dashTitle,
body.dashboardTheme #dashboardTab h1 {
  color: #211b17 !important;
  font-size: clamp(36px, 5vw, 52px) !important;
  font-weight: 800 !important;
  letter-spacing: -.055em !important;
  line-height: .98 !important;
  text-shadow: none !important;
}

body.dashboardTheme #dashboardTab .dashSub {
  color: #756a62 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

body.dashboardTheme #dashboardTab .dashPeriod,
body.dashboardTheme #dashboardTab .rangePill {
  min-width: min(260px, 100%) !important;
}

body.dashboardTheme #dashboardTab .filter,
body.dashboardTheme #dashboardTab select,
body.dashboardTheme #dashboardTab .rangePill {
  color: #302722 !important;
  border: 1px solid rgba(66, 48, 39, .13) !important;
  background: rgba(255, 253, 250, .94) !important;
  box-shadow: 0 8px 18px rgba(69, 49, 38, .05) !important;
}

body.dashboardTheme #dashboardTab .rangePill span,
body.dashboardTheme #dashboardTab .rangePill small {
  color: #302722 !important;
  background: transparent !important;
}

body.dashboardTheme #dashboardTab .dashboardModeSwitch {
  border-color: rgba(66, 48, 39, .10) !important;
  background: #f2e9e1 !important;
}

body.dashboardTheme #dashboardTab .dashboardModeSwitch button {
  color: #756a62 !important;
}

body.dashboardTheme #dashboardTab .dashboardModeSwitch button.active {
  color: #302722 !important;
  background: #fffdfa !important;
  box-shadow: 0 5px 14px rgba(69, 49, 38, .08) !important;
}

body.dashboardTheme #dashboardFeedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 15px 16px;
  border: 1px solid rgba(66, 48, 39, .10);
  border-radius: 18px;
  background: #fcf3ec;
  color: #302722;
}

body.dashboardTheme #dashboardFeedback[hidden] { display: none !important; }
body.dashboardTheme #dashboardFeedback b { display: block; font-size: 15px; letter-spacing: -.01em; }
body.dashboardTheme #dashboardFeedback span { display: block; margin-top: 3px; color: #756a62; font-size: 13px; line-height: 1.35; }
/* The supplied source is RGB (rather than a transparent PNG). Fade its canvas
   all the way out, instead of merely rounding a visible square crop. */
body.dashboardTheme #dashboardFeedback .dashboardWatercolor { width: 128px; height: 128px; flex: 0 0 128px; display:block; object-fit: cover; object-position: center; mix-blend-mode: multiply; -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 42%,rgba(0,0,0,.92) 58%,transparent 76%); mask-image:radial-gradient(circle at 50% 50%,#000 0 42%,rgba(0,0,0,.92) 58%,transparent 76%); filter: saturate(.92) contrast(.98); }
body.dashboardTheme #dashboardFeedback[data-state="loading"] { background: #f7eee8; }
body.dashboardTheme #dashboardFeedback[data-state="empty"] { background: #fff8f1; }
body.dashboardTheme #dashboardFeedback[data-state="error"] { border-color: rgba(154, 75, 63, .22); background: #fbe9e5; }
body.dashboardTheme #dashboardFeedback .btnSoft { flex: 0 0 auto; min-height: 42px; }

/* The period picker is part of the dashboard surface.  The legacy runtime
   paints it blue late in boot, so this deliberately more-specific warm layer
   keeps valid dates and the focus model intact while replacing only colour. */
body.dashboardTheme .rangePickerOpen .modalBox { background: #fffaf5 !important; box-shadow: 0 34px 90px rgba(74, 52, 42, .22) !important; }
body.dashboardTheme .rangePickerOpen .rangeModalGrid { background: #fffaf5 !important; }
body.dashboardTheme .rangePickerOpen .rangeModalTitle,
body.dashboardTheme .rangePickerOpen .rangeDay { color: #302722 !important; }
body.dashboardTheme .rangePickerOpen .rangeDayName,
body.dashboardTheme .rangePickerOpen .rangeDay.muted { color: #907d72 !important; }
body.dashboardTheme .rangePickerOpen .rangeDay.inRange:before,
body.dashboardTheme .rangePickerOpen .rangeDay.edge:before { background: linear-gradient(180deg, #fae8dd, #f6ddd1) !important; }
body.dashboardTheme .rangePickerOpen .rangeDay.edge:after { background: linear-gradient(135deg, #a96045, #d98970) !important; box-shadow: 0 10px 22px rgba(169, 96, 69, .24) !important; }
body.dashboardTheme .rangePickerOpen .fieldHelp { color: #705f56 !important; border-color: rgba(143, 96, 75, .15) !important; background: #f9eee7 !important; }

body.dashboardTheme #dashboardTab .kpiGrid {
  gap: 12px !important;
  margin-bottom: 20px !important;
}

/* This is a viewport reservation, not trailing page padding: every dashboard
   content unit gets scroll clearance equal to the persistent nav. Therefore
   browser scrollIntoView({block:'end'}) lands the unit above the nav instead
   of allowing it to paint behind the fixed control. */
html:has(body.dashboardTheme) { scroll-padding-block-end: var(--rently-nav-reserve); }
body.dashboardTheme #dashboardTab .kpi,
body.dashboardTheme #dashboardTab .dashGrid > .aCard,
body.dashboardTheme #dashboardTab .dashGrid > .card,
body.dashboardTheme #dashboardFeedback,
body.dashboardTheme #rentlyLegalFooter { scroll-margin-block-end: var(--rently-nav-reserve); }

body.dashboardTheme #dashboardTab .kpi,
body.dashboardTheme #dashboardTab .kpi.ownerKpi {
  min-height: 142px !important;
  padding: 17px 16px !important;
  border: 1px solid rgba(66, 48, 39, .09) !important;
  border-radius: 20px !important;
  background: #fffdfa !important;
  box-shadow: 0 10px 24px rgba(69, 49, 38, .06) !important;
}

body.dashboardTheme #dashboardTab .kpi::before {
  background: radial-gradient(circle, rgba(243, 199, 173, .20), transparent 68%) !important;
}

body.dashboardTheme #dashboardTab .kpi.ownerKpi {
  background: linear-gradient(145deg, #f5ddd0 0%, #f7cbb5 100%) !important;
}

body.dashboardTheme #dashboardTab .kpiName,
body.dashboardTheme #dashboardTab .kpiPlan,
body.dashboardTheme #dashboardTab .kpiBot,
body.dashboardTheme #dashboardTab .objLabel,
body.dashboardTheme #dashboardTab .summaryName,
body.dashboardTheme #dashboardTab .donutSmall,
body.dashboardTheme #dashboardTab .legend,
body.dashboardTheme #dashboardTab .legendItem,
body.dashboardTheme #dashboardTab .dashMiniMeta {
  color: #766a62 !important;
}

body.dashboardTheme #dashboardTab .kpiVal,
body.dashboardTheme #dashboardTab .kpi.ownerKpi .kpiVal,
body.dashboardTheme #dashboardTab .title,
body.dashboardTheme #dashboardTab .smallTitle,
body.dashboardTheme #dashboardTab .objectTop,
body.dashboardTheme #dashboardTab .historyTitle,
body.dashboardTheme #dashboardTab .money,
body.dashboardTheme #dashboardTab .summaryVal,
body.dashboardTheme #dashboardTab .objValue,
body.dashboardTheme #dashboardTab .donutBig,
body.dashboardTheme #dashboardTab .dashTopLabel,
body.dashboardTheme #dashboardTab .dashTopValue,
body.dashboardTheme #dashboardTab .cleanExpenseRow,
body.dashboardTheme #dashboardTab .catLabel span {
  color: #211b17 !important;
  text-shadow: none !important;
}

body.dashboardTheme #dashboardTab .infoBtn,
body.dashboardTheme #dashboardTab .iconBtn {
  color: #4c3730 !important;
  border-color: rgba(66, 48, 39, .11) !important;
  background: #f8eee7 !important;
}

body.dashboardTheme #dashboardTab .dashGrid {
  gap: 14px !important;
}

body.dashboardTheme #dashboardTab .aCard,
body.dashboardTheme #dashboardTab .card {
  min-width: 0 !important;
  border: 1px solid rgba(66, 48, 39, .09) !important;
  border-radius: 22px !important;
  background: #fffdfa !important;
  box-shadow: 0 10px 26px rgba(69, 49, 38, .055) !important;
  color: #211b17 !important;
}

body.dashboardTheme #dashboardTab .dashSectionTitle {
  gap: 16px !important;
  margin-bottom: 16px !important;
}

body.dashboardTheme #dashboardTab .dashSectionTitle .title {
  color: #211b17 !important;
  font-size: clamp(21px, 2.2vw, 28px) !important;
  font-weight: 780 !important;
  letter-spacing: -.038em !important;
  line-height: 1.08 !important;
}

body.dashboardTheme #dashboardTab .dashHint {
  color: #8b766b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.dashboardTheme #dashboardTab .dashAxis,
body.dashboardTheme #dashboardTab .houseLineAxis {
  stroke: rgba(91, 68, 54, .13) !important;
}

body.dashboardTheme #dashboardTab .dashArea {
  opacity: .55 !important;
}

body.dashboardTheme #dashboardTab .dashLine,
body.dashboardTheme #dashboardTab .houseLineSolid {
  stroke: #a96045 !important;
  filter: none !important;
}

body.dashboardTheme #dashboardTab .dashPoint,
body.dashboardTheme #dashboardTab .houseLinePoint {
  fill: #a96045 !important;
  stroke: #fffaf5 !important;
}

body.dashboardTheme #dashboardTab .dashMonthLabels,
body.dashboardTheme #dashboardTab .houseLineLabels,
body.dashboardTheme #dashboardTab .houseMonthName,
body.dashboardTheme #dashboardTab .houseMonthLegend,
body.dashboardTheme #dashboardTab .houseMonthLegendItem {
  color: #806f65 !important;
}

body.dashboardTheme #dashboardTab .dashCompareRow {
  color: #211b17 !important;
}

body.dashboardTheme #dashboardTab .dashCompareTrack,
body.dashboardTheme #dashboardTab .dashTopBar,
body.dashboardTheme #dashboardTab .bar,
body.dashboardTheme #dashboardTab .stackedBar,
body.dashboardTheme #dashboardTab .paybackTrack {
  background: #eee2d9 !important;
}

body.dashboardTheme #dashboardTab .dashCompareStay,
body.dashboardTheme #dashboardTab .dashCompareFill,
body.dashboardTheme #dashboardTab .stay,
body.dashboardTheme #dashboardTab .dashTopBar div,
body.dashboardTheme #dashboardTab .bar > div {
  background: linear-gradient(90deg, #b4684d, #e5a284) !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .dashCompareExtra,
body.dashboardTheme #dashboardTab .extra {
  background: linear-gradient(90deg, #d68a82, #f1c2ac) !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .dashCompareVal,
body.dashboardTheme #dashboardTab .objectIncomeRow b {
  color: #3b2c25 !important;
}

body.dashboardTheme #dashboardTab .objectCard,
body.dashboardTheme #dashboardTab .dashStat,
body.dashboardTheme #dashboardTab .summaryBox {
  border-color: rgba(66, 48, 39, .08) !important;
  background: #fcf5ef !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .metricInput {
  color: #302722 !important;
  border-color: rgba(66, 48, 39, .12) !important;
  background: #fffdfa !important;
}

body.dashboardTheme #dashboardTab .btnSoft {
  color: #3c2d26 !important;
  border-color: rgba(145, 83, 58, .18) !important;
  background: #f8e6db !important;
  box-shadow: none !important;
}

/* Existing dashboard loading is retained, but matched to the new shell. */
body.dashboardTheme .rentlyLoadingOverlay {
  background: rgba(59, 43, 35, .26) !important;
  backdrop-filter: blur(8px) !important;
}

body.dashboardTheme .rentlyLoaderCard {
  color: #211b17 !important;
  border: 1px solid rgba(66, 48, 39, .10) !important;
  background: #fffdfa !important;
  box-shadow: 0 20px 54px rgba(69, 49, 38, .18) !important;
}

body.dashboardTheme .rentlyLoaderTitle { color: #211b17 !important; }
body.dashboardTheme .rentlyLoaderSub { color: #756a62 !important; }
body.dashboardTheme .analyticsBar { background: #e8b39a !important; }
body.dashboardTheme .analyticsLineSvg path { stroke: #a96045 !important; }

@media (max-width: 1199px) {
  body.dashboardTheme #dashboardTab .kpiGrid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (min-width: 900px) {
  /* Thirteen KPI cards formerly created a third, half-visible row behind the
     fixed bar. Seven editorial columns keep the full summary in two rows. */
  body.dashboardTheme #dashboardTab .kpiGrid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) and (max-width: 899px) {
  /* Portrait tablets fit five compact, readable KPI cards per row; that puts
     the final KPI row wholly above or below the persistent navigation. */
  body.dashboardTheme #dashboardTab .kpiGrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
  /* Dense summary keeps the value and its label; the explanatory plan
     and provenance remain available in the full analytics cards below. */
  body.dashboardTheme #dashboardTab .kpi,
  body.dashboardTheme #dashboardTab .kpi.ownerKpi { min-height: 128px !important; padding: 14px 12px !important; }
  body.dashboardTheme #dashboardTab .kpiName { display: block !important; overflow-wrap: anywhere !important; font-size: 11px !important; line-height: 1.2 !important; }
  body.dashboardTheme #dashboardTab .kpiVal { overflow: visible !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: clamp(14px, 1.7vw, 22px) !important; line-height: 1.05 !important; }
  body.dashboardTheme #dashboardTab .kpiPlan,
  body.dashboardTheme #dashboardTab .kpiBot { display: none !important; }
}

@media (max-width: 767px) {
  :root { --rently-nav-reserve: calc(124px + env(safe-area-inset-bottom)); }
  body.dashboardTheme .bottomNav { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 3px !important; padding: 7px 4px !important; }
  body.dashboardTheme .bottomNav .navBtn { min-width: 0 !important; min-height: 58px !important; padding: 7px 2px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  body.dashboardTheme .bottomNav .v89NavLabel { display: block !important; min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: 11px !important; line-height: 1.05 !important; text-align: center !important; }
  body.dashboardTheme .top { padding: 6px 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  body.dashboardTheme #dashboardTab { width: calc(100vw - 18px) !important; margin-bottom: 22px !important; padding: 18px 14px calc(126px + env(safe-area-inset-bottom)) !important; border-radius: 24px !important; }
  body.dashboardTheme #dashboardTab .dashHead { display: grid !important; gap: 16px !important; }
  body.dashboardTheme #dashboardTab .dashPeriod,
  body.dashboardTheme #dashboardTab .rangePill { width: 100% !important; }
  body.dashboardTheme #dashboardTab .kpiGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
  /* On phones KPI summary becomes a deliberate horizontal strip rather than
     a partially covered third grid row. It preserves every card and keeps
     normal page scrolling independent from the fixed route navigation. */
  body.dashboardTheme #dashboardTab .kpiGrid { grid-template-columns: none !important; grid-template-rows: minmax(128px, auto) !important; grid-auto-flow: column !important; grid-auto-columns: minmax(142px, 72vw) !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: 2px; padding-bottom: 4px; }
  body.dashboardTheme #dashboardTab .kpiGrid .kpi { scroll-snap-align: start; }
  body.dashboardTheme #dashboardTab .kpi,
  body.dashboardTheme #dashboardTab .kpi.ownerKpi { min-height: 128px !important; padding: 14px 12px !important; border-radius: 18px !important; }
  body.dashboardTheme #dashboardTab .kpiVal { font-size: clamp(20px, 7vw, 27px) !important; white-space: normal !important; text-overflow: clip !important; overflow:visible !important; overflow-wrap: anywhere !important; }
  body.dashboardTheme #dashboardTab .dashSectionTitle { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  body.dashboardTheme #dashboardTab .dashHint { max-width: none !important; text-align: left !important; }
  body.dashboardTheme #dashboardTab .aCard,
  body.dashboardTheme #dashboardTab .card { padding: 18px !important; border-radius: 20px !important; }
  body.dashboardTheme #dashboardFeedback { align-items: flex-start; flex-direction: column; gap: 10px; }
  body.dashboardTheme #dashboardFeedback .btnSoft { width: 100%; }
  body.dashboardTheme #dashboardFeedback .dashboardWatercolor { width: 108px; height: 108px; flex-basis: 108px; align-self: center; }
  body.dashboardTheme #dashboardTab .donutWrap { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.dashboardTheme #dashboardTab .dashLine,
  body.dashboardTheme #dashboardTab .donut path,
  body.dashboardTheme #dashboardTab .dashCompareFill,
  body.dashboardTheme #dashboardTab .dashTopBar div {
    animation: none !important;
  }
}

/* DESIGN-LIGHT-3 — finish the light system: task dock and full-width charts. */
.rentlyTaskDock {
  width: min(330px, calc(100vw - 32px)) !important;
  max-height: min(430px, calc(100dvh - 150px)) !important;
  color: #253038 !important;
  border: 1px solid #e0e6e9 !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(26, 38, 46, .11) !important;
}

.rentlyTaskDock > header {
  color: #253038 !important;
  border-bottom: 1px solid #e4e9ec !important;
  background: #f6f8f9 !important;
}

.rentlyTaskDockTitle,
.rentlyTaskDockToggle {
  color: #344149 !important;
}

.rentlyTaskDockTitle span { font-weight: 640 !important; }
.rentlyTaskDockTitle i {
  color: #53616a !important;
  background: #e9eef1 !important;
}

.rentlyTaskDockToggle {
  border: 1px solid #dde4e8 !important;
  background: #fff !important;
}

.rentlyTaskDockBody { background: #fff !important; }
.rentlyTaskDockBody article {
  border: 1px solid #e7ecef !important;
  background: #f8fafb !important;
}

.rentlyTaskDockCheck {
  color: #53616a !important;
  border-color: #d9e1e5 !important;
  background: #fff !important;
}

.rentlyTaskDockTask b { color: #253038 !important; font-weight: 620 !important; }
.rentlyTaskDockTask small,
.rentlyTaskDockMore { color: #68757d !important; }

.rentlyTaskUndo {
  color: #253038 !important;
  border-color: #e0e6e9 !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(26, 38, 46, .11) !important;
}
.rentlyTaskUndo button {
  color: #315ccb !important;
  background: #eef4ff !important;
}
.rentlyTaskUndo time {
  color: #53616a !important;
  background: #edf1f3 !important;
}

body.dashboardTheme #dashboardTab .v33Chart .rentlyAxisLabel,
body.dashboardTheme #dashboardTab .v33Chart .rentlyForecastText {
  fill: #66737b !important;
  font-weight: 620 !important;
}

body.dashboardTheme #dashboardTab .v33Chart .rentlyMonthLabels {
  color: #626f77 !important;
  font-weight: 620 !important;
}

body.dashboardTheme #dashboardTab .v33Chart .rentlyAxisLine,
body.dashboardTheme #dashboardTab .v33Chart .rentlyGridLine {
  stroke: #e0e6e9 !important;
}

body.dashboardTheme #dashboardTab .v33OwnerCard .rentlyLine,
body.dashboardTheme #dashboardTab .v33OwnerCard .rentlyLineForecast {
  stroke: #69adba !important;
  stroke-width: 3px !important;
  filter: none !important;
}

body.dashboardTheme #dashboardTab .v33OwnerCard .rentlyPoint {
  fill: #69adba !important;
  stroke: #fff !important;
  stroke-width: 2px !important;
  filter: none !important;
}

body.dashboardTheme #dashboardTab .v33OwnerCard .rentlyArea {
  opacity: .1 !important;
}

@media (min-width: 768px) {
  body.dashboardTheme #dashboardTab .v33Chart .rentlyChartFrame {
    grid-template-columns: 66px minmax(0, 1fr) !important;
  }
  body.dashboardTheme #dashboardTab .v33Chart .rentlyChartAxis {
    width: 66px !important;
    max-width: 66px !important;
  }
  body.dashboardTheme #dashboardTab .v33Chart .rentlyChartScroller {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  body.dashboardTheme #dashboardTab .v33Chart .rentlyPlotWide {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* DESIGN-LIGHT-2 — quiet neutral product surface.
   The warm editorial theme above remains documented for history, while this
   final layer intentionally removes peach gradients, brown chrome and deep
   shadows from the live application. Business layout and data are unchanged. */
:root {
  --r-canvas: #f6f7f8;
  --r-canvas-strong: #eef1f3;
  --r-surface: #ffffff;
  --r-surface-soft: #f8f9fa;
  --r-text: #20262b;
  --r-text-soft: #626e76;
  --r-border: #e3e7ea;
  --r-border-strong: #d4dade;
  --r-shadow: 0 1px 2px rgba(23, 34, 42, .035);
  --r-shadow-float: 0 8px 24px rgba(23, 34, 42, .075);
}

html,
body {
  background: #f6f7f8 !important;
  color: #20262b !important;
}

body {
  background: linear-gradient(180deg, #fafbfc 0%, #f5f7f8 100%) !important;
}

body .top {
  border-color: #e4e8eb !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 1px 2px rgba(23, 34, 42, .035) !important;
  backdrop-filter: blur(12px) !important;
}

body .top .brand,
body .brand {
  color: #20262b !important;
  font-weight: 650 !important;
  letter-spacing: -.025em !important;
  text-shadow: none !important;
}

body .top .sub,
body .sub,
body .muted,
body .hint {
  color: #626e76 !important;
}

body .topActions .pill,
body .topActions .avatarPill,
body #rentlyHelpButton.rentlyHelpButton {
  color: #3e4950 !important;
  border-color: #e1e6e9 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body .card:not(.guestShell),
body .aCard,
body .settingBox,
body .modalCard {
  border-color: #e4e8eb;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 34, 42, .035);
}

html body.dashboardTheme .bottomNav,
html body.dashboardTheme .bottomNav[data-v89-nav="1"],
html body:not(.dashboardTheme) .bottomNav,
html body:not(.dashboardTheme) .bottomNav[data-v89-nav="1"] {
  border-color: #e1e6e9 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 8px 24px rgba(23, 34, 42, .075) !important;
  backdrop-filter: blur(14px) !important;
}

html body.dashboardTheme .bottomNav .navBtn,
html body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn,
html body:not(.dashboardTheme) .bottomNav .navBtn,
html body:not(.dashboardTheme) .bottomNav[data-v89-nav="1"] .navBtn {
  color: #69757d !important;
  font-weight: 520 !important;
}

html body.dashboardTheme .bottomNav .navBtn.active,
html body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn.active,
html body:not(.dashboardTheme) .bottomNav .navBtn.active,
html body:not(.dashboardTheme) .bottomNav[data-v89-nav="1"] .navBtn.active,
html body:not(.dashboardTheme) .bottomNav .navBtn.active:not([data-nav="dashboard"]) {
  color: #315ccb !important;
  background: #eef4ff !important;
  box-shadow: inset 0 0 0 1px #dce7fa !important;
  font-weight: 620 !important;
}

html body .bottomNav[data-v89-nav="1"] .navBtn:focus-visible {
  outline: 2px solid #7d9fe8 !important;
  outline-offset: 2px !important;
}

body.dashboardTheme,
html.dashboardTheme body {
  background: linear-gradient(180deg, #fafbfc 0%, #f5f7f8 100%) !important;
  color: #20262b !important;
}

body.dashboardTheme #dashboardTab {
  width: min(1180px, calc(100vw - 28px)) !important;
  max-width: 1180px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #20262b !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .dashHead {
  align-items: flex-end !important;
  margin-bottom: 24px !important;
}

body.dashboardTheme #dashboardTab .dashEyebrow {
  color: #61717a !important;
  font-weight: 620 !important;
  letter-spacing: .11em !important;
}

body.dashboardTheme #dashboardTab .dashTitle,
body.dashboardTheme #dashboardTab h1 {
  color: #20262b !important;
  font-size: clamp(34px, 4.4vw, 46px) !important;
  font-weight: 650 !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
}

body.dashboardTheme #dashboardTab .dashSub {
  color: #5f6c74 !important;
  font-weight: 430 !important;
}

body.dashboardTheme #dashboardTab .filter,
body.dashboardTheme #dashboardTab select,
body.dashboardTheme #dashboardTab .rangePill {
  color: #303a40 !important;
  border-color: #dfe5e8 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .rangePill span,
body.dashboardTheme #dashboardTab .rangePill small {
  color: #303a40 !important;
}

body.dashboardTheme #dashboardTab .dashboardModeSwitch {
  border-color: #e1e6e9 !important;
  background: #eef1f3 !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .dashboardModeSwitch button {
  color: #68747c !important;
  font-weight: 540 !important;
}

body.dashboardTheme #dashboardTab .dashboardModeSwitch button.active {
  color: #202a30 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(23, 34, 42, .06) !important;
  font-weight: 620 !important;
}

body.dashboardTheme #dashboardFeedback,
body.dashboardTheme #dashboardFeedback[data-state="loading"],
body.dashboardTheme #dashboardFeedback[data-state="empty"] {
  color: #303a40 !important;
  border-color: #e1e6e9 !important;
  background: #f7f9fa !important;
}

body.dashboardTheme #dashboardFeedback span { color: #65727a !important; }
body.dashboardTheme #dashboardFeedback[data-state="error"] { border-color: #e7c9c6 !important; background: #fff7f6 !important; }

body.dashboardTheme #dashboardTab .kpi,
body.dashboardTheme #dashboardTab .kpi.ownerKpi {
  min-height: 116px !important;
  border-color: #e2e7ea !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(23, 34, 42, .035) !important;
}

body.dashboardTheme #dashboardTab .kpi.ownerKpi {
  border-color: #dce7fa !important;
  background: #f2f7ff !important;
}

body.dashboardTheme #dashboardTab .kpi::before { display: none !important; }

body.dashboardTheme #dashboardTab .kpiName,
body.dashboardTheme #dashboardTab .kpiPlan,
body.dashboardTheme #dashboardTab .kpiBot,
body.dashboardTheme #dashboardTab .objLabel,
body.dashboardTheme #dashboardTab .summaryName,
body.dashboardTheme #dashboardTab .donutSmall,
body.dashboardTheme #dashboardTab .legend,
body.dashboardTheme #dashboardTab .legendItem,
body.dashboardTheme #dashboardTab .dashMiniMeta {
  color: #65727a !important;
  font-weight: 470 !important;
}

body.dashboardTheme #dashboardTab .kpiVal,
body.dashboardTheme #dashboardTab .kpi.ownerKpi .kpiVal,
body.dashboardTheme #dashboardTab .title,
body.dashboardTheme #dashboardTab .smallTitle,
body.dashboardTheme #dashboardTab .objectTop,
body.dashboardTheme #dashboardTab .historyTitle,
body.dashboardTheme #dashboardTab .money,
body.dashboardTheme #dashboardTab .summaryVal,
body.dashboardTheme #dashboardTab .objValue,
body.dashboardTheme #dashboardTab .donutBig,
body.dashboardTheme #dashboardTab .dashTopLabel,
body.dashboardTheme #dashboardTab .dashTopValue,
body.dashboardTheme #dashboardTab .cleanExpenseRow,
body.dashboardTheme #dashboardTab .catLabel span {
  color: #20262b !important;
  font-weight: 620 !important;
  text-shadow: none !important;
}

body.dashboardTheme #dashboardTab .infoBtn,
body.dashboardTheme #dashboardTab .iconBtn {
  color: #59666e !important;
  border-color: #dfe5e8 !important;
  background: #f7f9fa !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .aCard,
body.dashboardTheme #dashboardTab .card {
  border-color: #e2e7ea !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #20262b !important;
}

body.dashboardTheme #dashboardTab .dashSectionTitle .title {
  color: #20262b !important;
  font-weight: 630 !important;
  letter-spacing: -.03em !important;
}

body.dashboardTheme #dashboardTab .dashHint {
  color: #6b7880 !important;
  font-weight: 440 !important;
}

body.dashboardTheme #dashboardTab .dashAxis,
body.dashboardTheme #dashboardTab .houseLineAxis {
  stroke: #e1e7ea !important;
}

body.dashboardTheme #dashboardTab .dashArea { opacity: .08 !important; }

body.dashboardTheme #dashboardTab .dashLine,
body.dashboardTheme #dashboardTab .houseLineSolid {
  stroke: #69adba !important;
  stroke-width: 3px !important;
  filter: none !important;
}

body.dashboardTheme #dashboardTab .dashPoint,
body.dashboardTheme #dashboardTab .houseLinePoint {
  fill: #69adba !important;
  stroke: #fff !important;
  stroke-width: 2px !important;
}

body.dashboardTheme #dashboardTab .dashMonthLabels,
body.dashboardTheme #dashboardTab .houseLineLabels,
body.dashboardTheme #dashboardTab .houseMonthName,
body.dashboardTheme #dashboardTab .houseMonthLegend,
body.dashboardTheme #dashboardTab .houseMonthLegendItem {
  color: #64727a !important;
}

body.dashboardTheme #dashboardTab .dashCompareRow { color: #20262b !important; }

body.dashboardTheme #dashboardTab .dashCompareTrack,
body.dashboardTheme #dashboardTab .dashTopBar,
body.dashboardTheme #dashboardTab .bar,
body.dashboardTheme #dashboardTab .stackedBar,
body.dashboardTheme #dashboardTab .paybackTrack {
  background: #edf1f3 !important;
}

body.dashboardTheme #dashboardTab .dashCompareStay,
body.dashboardTheme #dashboardTab .dashCompareFill,
body.dashboardTheme #dashboardTab .stay,
body.dashboardTheme #dashboardTab .dashTopBar div,
body.dashboardTheme #dashboardTab .bar > div {
  background: #4f7de8 !important;
  box-shadow: none !important;
  filter: none !important;
}

body.dashboardTheme #dashboardTab .dashCompareExtra,
body.dashboardTheme #dashboardTab .extra {
  background: #58b7b0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body.dashboardTheme #dashboardTab .dashCompareVal,
body.dashboardTheme #dashboardTab .objectIncomeRow b { color: #344047 !important; }

body.dashboardTheme #dashboardTab .objectCard,
body.dashboardTheme #dashboardTab .dashStat,
body.dashboardTheme #dashboardTab .summaryBox {
  border-color: #e5e9ec !important;
  background: #f8fafb !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .metricInput {
  color: #29343a !important;
  border-color: #dfe5e8 !important;
  background: #fff !important;
}

body.dashboardTheme #dashboardTab .btnSoft {
  color: #344047 !important;
  border-color: #dce3e6 !important;
  background: #f3f6f7 !important;
  box-shadow: none !important;
}

body.dashboardTheme #dashboardTab .donut path {
  filter: saturate(.52) brightness(1.04) !important;
}

body.dashboardTheme .rangePickerOpen .modalBox,
body.dashboardTheme .rangePickerOpen .rangeModalGrid {
  background: #fff !important;
}

body.dashboardTheme .rangePickerOpen .modalBox {
  box-shadow: 0 18px 48px rgba(23, 34, 42, .14) !important;
}

body.dashboardTheme .rangePickerOpen .rangeModalTitle,
body.dashboardTheme .rangePickerOpen .rangeDay { color: #303a40 !important; }
body.dashboardTheme .rangePickerOpen .rangeDayName,
body.dashboardTheme .rangePickerOpen .rangeDay.muted { color: #748088 !important; }
body.dashboardTheme .rangePickerOpen .rangeDay.inRange:before,
body.dashboardTheme .rangePickerOpen .rangeDay.edge:before { background: #eaf1f3 !important; }
body.dashboardTheme .rangePickerOpen .rangeDay.edge:after { background: #6faab6 !important; box-shadow: none !important; }
body.dashboardTheme .rangePickerOpen .fieldHelp { color: #5f6c74 !important; border-color: #e1e6e9 !important; background: #f7f9fa !important; }

body.dashboardTheme .rentlyLoadingOverlay {
  background: rgba(40, 50, 56, .18) !important;
  backdrop-filter: blur(6px) !important;
}

body.dashboardTheme .rentlyLoaderCard {
  color: #20262b !important;
  border-color: #e1e6e9 !important;
  background: #fff !important;
  box-shadow: 0 18px 48px rgba(23, 34, 42, .14) !important;
}

body.dashboardTheme .rentlyLoaderTitle { color: #20262b !important; font-weight: 640 !important; }
body.dashboardTheme .rentlyLoaderSub { color: #64717a !important; }
body.dashboardTheme .analyticsBar { background: #8dbcc5 !important; }
body.dashboardTheme .analyticsLineSvg path { stroke: #69adba !important; }

@media (min-width: 768px) {
  body.dashboardTheme #dashboardTab .kpiName {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    font-size: 11px !important;
    font-weight: 480 !important;
  }
  body.dashboardTheme #dashboardTab .kpiVal {
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
    font-weight: 620 !important;
  }
}

@media (min-width: 1200px) {
  body.dashboardTheme #dashboardTab .kpiGrid {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  body.dashboardTheme #dashboardTab .kpiGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  body.dashboardTheme #dashboardTab .kpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  body.dashboardTheme .top { background: transparent !important; }
  html body.dashboardTheme .bottomNav[data-v89-nav="1"] .navBtn .v89NavLabel {
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body.dashboardTheme #dashboardTab {
    width: calc(100vw - 18px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  body.dashboardTheme #dashboardTab .kpiGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 10px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
  }
  body.dashboardTheme #dashboardTab .kpi,
  body.dashboardTheme #dashboardTab .kpi.ownerKpi { min-height: 116px !important; border-radius: 15px !important; }
  body.dashboardTheme #dashboardTab .kpiPlan,
  body.dashboardTheme #dashboardTab .kpiBot { display: none !important; }
  body.dashboardTheme #dashboardTab .kpiVal {
    color: #20262b !important;
    font-weight: 620 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: nowrap !important;
  }
}