:root {
  color-scheme: light;
  --ink: #141b4d;
  --muted: #66708f;
  --line: #d7e3ee;
  --surface: #ffffff;
  --field: #f5f9fc;
  --accent: #429fe0;
  --accent-strong: #4676ad;
  --night: #141b4d;
  --sky: #429fe0;
  --mid: #4676ad;
  --warning: #bd5b00;
  --danger: #b42318;
  --paid: #1f7a52;
  --work: #806000;
  --open: #4676ad;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(20, 27, 77, 0.94), rgba(20, 27, 77, 0.48)),
    url("/assets/team-autarkieprofis.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.dashboardMode {
  background:
    linear-gradient(180deg, rgba(9, 21, 73, 0.92), rgba(9, 21, 73, 0.8)),
    url("/assets/team-autarkieprofis.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

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

button:not([class]) {
  min-height: 48px;
  min-width: 112px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

button:not([class]):hover {
  background: var(--night);
}

.shell {
  width: min(1040px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 56px 0 32px;
  display: grid;
  align-content: center;
  gap: 24px;
}

body.dashboardMode .shell {
  width: min(1440px, calc(100% - 24px));
  padding: 12px 0;
  align-content: start;
}

.toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  width: min(420px, calc(100% - 36px));
  padding: 14px 16px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--night);
  box-shadow: 0 14px 42px rgba(20, 27, 77, 0.28);
  font-weight: 700;
}

.globalLoadingIndicator {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(20, 27, 77, 0.94);
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(20, 27, 77, 0.24);
  font-weight: 700;
}

.loadingCursorPretzel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
  transform: translate(-9999px, -9999px);
  animation: partnerSubmitSpinner 0.8s linear infinite;
}

body.cursorLoading {
  cursor: none;
}

body.cursorLoading * {
  cursor: none !important;
}

.globalLoadingSpinner {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  animation: partnerSubmitSpinner 0.8s linear infinite;
}

.globalLoadingSpinner::before {
  content: "🥨";
  font-size: 18px;
  line-height: 1;
}

.partnerSubmitModal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 27, 77, 0.36);
  backdrop-filter: blur(4px);
}

#appLoadingModal {
  z-index: 10050;
}

.partnerSubmitModalCard {
  position: relative;
  width: min(760px, 100%);
  padding: 28px 24px 22px;
  border: 1px solid rgba(215, 227, 238, 0.96);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 56px rgba(20, 27, 77, 0.24);
  text-align: center;
}

.partnerSubmitModalClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(215, 227, 238, 0.96);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.partnerSubmitModalClose:hover {
  background: var(--accent);
  color: #ffffff;
}

.partnerSubmitModalSpinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
  animation: partnerSubmitSpinner 0.8s linear infinite;
}

.partnerSubmitModalCard h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
}

.partnerSubmitModalCard p {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--muted);
}

.partnerSubmitModalActions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.partnerSubmitModalActions button {
  min-width: 188px;
}

.partnerSubmitPreview {
  margin-top: 18px;
  text-align: left;
}

.partnerSubmitPreviewPaper {
  border: 1px solid rgba(215, 227, 238, 0.98);
  border-radius: 8px;
  background: #f7fbff;
  padding: 18px;
}

.partnerSubmitPreviewHeader {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(207, 222, 236, 0.9);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.partnerSubmitPreviewHeader strong {
  color: var(--ink);
  font-size: 20px;
}

.partnerSubmitPreviewHeader span,
.partnerSubmitPreviewCosts small {
  color: var(--muted);
}

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

.partnerSubmitPreviewRows div {
  border-bottom: 1px solid rgba(207, 222, 236, 0.72);
  padding-bottom: 8px;
}

.partnerSubmitPreviewRows span,
.partnerSubmitPreviewCosts span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.partnerSubmitPreviewRows strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
  margin-top: 3px;
}

.partnerSubmitPreviewCosts {
  margin-top: 16px;
  border: 1px solid #bee7cf;
  border-radius: 8px;
  background: #eefaf1;
  padding: 14px;
}

.partnerSubmitPreviewCosts strong {
  display: block;
  color: #13773d;
  font-size: 30px;
  margin: 4px 0;
}

@media (max-width: 720px) {
  .partnerSubmitPreviewRows {
    grid-template-columns: 1fr;
  }

  .partnerSubmitPreviewHeader {
    display: block;
  }
}

.brand {
  position: relative;
  max-width: 720px;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.36);
}

body.dashboardMode .brand {
  display: none;
}

.hamburgerMenuButton,
.hamburgerMenuPanel {
  display: none !important;
}

.hamburgerMenuButton {
  position: absolute;
  top: 0;
  right: -320px;
  z-index: 12;
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(20, 27, 77, 0.22);
  backdrop-filter: blur(12px);
}

.hamburgerMenuButton span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
}

.hamburgerMenuButton:hover {
  background: rgba(255, 255, 255, 0.24);
}

.hamburgerMenuPanel {
  position: absolute;
  top: 56px;
  right: -320px;
  z-index: 13;
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(215, 227, 238, 0.86);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 22px 48px rgba(20, 27, 77, 0.28);
  text-shadow: none;
}

.hamburgerMenuPanel button {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--night);
  background: #ffffff;
  text-align: left;
  font-weight: 800;
}

.hamburgerMenuPanel button:hover {
  background: #eef7fd;
}

.hamburgerMenuGroup {
  display: grid;
  gap: 4px;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--line);
}

.hamburgerMenuGroup button {
  color: var(--muted);
  font-size: 14px;
}

.brandLogo {
  width: min(330px, 82vw);
  height: auto;
  margin-bottom: 26px;
  display: block;
}

.brand h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.02;
}

.brand p {
  margin: 14px 0 0;
  font-size: 19px;
}

.eyebrow,
.step {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.panel {
  width: min(760px, 100%);
  max-width: 100%;
  padding: 28px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(215, 227, 238, 0.95);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(20, 27, 77, 0.28);
}

#dashboardView {
  width: 100%;
  min-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.appLayout {
  position: relative;
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.appSidebar {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 6px;
  align-content: start;
  align-self: start;
  height: fit-content;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: visible;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(9, 21, 73, 0.96), rgba(20, 27, 77, 0.94));
  box-shadow: 0 22px 50px rgba(4, 10, 35, 0.28);
  transition: width 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.appContent {
  min-width: 0;
  display: grid;
  gap: 18px;
}

body.accountStandaloneView .appContent > :not(#accountView) {
  display: none !important;
}

body.accountStandaloneView #accountView {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

body.partnerOrderStandaloneView .appContent > :not(#partnerOrderView) {
  display: none !important;
}

body.partnerOrderStandaloneView #partnerOrderView {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.authOverlayPanel {
  position: fixed;
  top: 20px;
  right: 20px;
  left: 340px;
  bottom: 20px;
  z-index: 24;
  overflow: auto;
  width: auto;
  margin: 0;
}

.modalCloseButton {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.modalCloseButton:hover {
  background: rgba(20, 27, 77, 0.08);
}

.sidebarTop {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px 10px;
  align-items: start;
}

.sidebarProfileCard {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebarProfileCard,
.sidebarBrandMark {
  display: none !important;
}

.sidebarUserPhotoButton {
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #d9e9f6;
  cursor: pointer;
}

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

.sidebarProfileText {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.sidebarProfileText strong {
  font-size: 16px;
  line-height: 1.2;
  color: #ffffff;
}

.sidebarProfileText span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.sidebarNotificationWrap {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  justify-self: end;
}

.sidebarNotificationButton {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

.sidebarNotificationCount {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #c61f14;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.sidebarNotificationPanel {
  position: fixed;
  top: 72px;
  left: 340px;
  z-index: 9998;
  width: min(360px, 70vw);
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(20, 27, 77, 0.18);
}

.notificationItem {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

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

.notificationItemState {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.notificationItem span {
  color: var(--muted);
  font-size: 13px;
}

.notificationItem small {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.notificationItemUnread {
  border-color: rgba(66, 159, 224, 0.55);
  border-left: 4px solid #429fe0;
  background: #eef7fd;
  box-shadow: inset 0 0 0 1px rgba(66, 159, 224, 0.08);
}

.notificationItemUnread .notificationItemState {
  background: rgba(66, 159, 224, 0.14);
  color: #1c5f8f;
}

.notificationItemRead {
  background: #f2f5f8;
  border-color: rgba(20, 27, 77, 0.08);
  opacity: 0.78;
}

.notificationItemRead .notificationItemState {
  background: rgba(20, 27, 77, 0.08);
  color: rgba(20, 27, 77, 0.72);
}

.sidebarNotificationPanel {
  max-height: 360px;
  overflow-y: auto;
}

.sidebarControls {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.sidebarControlButton {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.sidebarPinButton {
  display: none !important;
}

.sidebarArrowButton {
  min-width: 40px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.sidebarControlButton span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 3px 0;
  border-radius: 999px;
  background: currentColor;
}

.sidebarControlButton.isActive {
  border-color: rgba(66, 159, 224, 0.6);
  background: rgba(66, 159, 224, 0.16);
  color: #8fd3ff;
}

.sidebarInlineLogoutButton {
  grid-column: 1;
  grid-row: 1;
  width: fit-content;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sidebarInlineProfileButton {
  grid-column: 1;
  grid-row: 2;
  width: fit-content;
  margin-top: -8px;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sidebarNav {
  display: grid;
  gap: 6px;
  align-content: start;
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebarSection {
  display: grid;
  gap: 4px;
}

.sidebarSectionTitle {
  font-size: 16px;
  font-weight: 800;
  text-transform: none;
  color: #ffffff;
}

.sidebarSectionTitleButton {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sidebarSectionItems {
  display: grid;
  gap: 2px;
}

.sidebarNavButton {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0;
  font-weight: 500;
  cursor: pointer;
}

.sidebarNavButton:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sidebarNavDot {
  display: none;
}

.sidebarFooter {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

.sidebarFooterButton {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.sidebarLogoutButton {
  color: var(--danger);
}

.sidebarBrandMark {
  padding-top: 6px;
  display: grid;
  place-items: center;
}

.sidebarBrandMark img {
  width: 82px;
  height: 82px;
  padding: 6px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(4, 10, 35, 0.16);
  object-fit: contain;
  opacity: 0.92;
}

.sidebarBackdrop {
  display: none;
}

.mobileSidebarButton {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #d8e5f0;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
}

.mobileSidebarButton span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: var(--ink);
}

.dashboardHeadModern {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 253, 0.95));
  box-shadow: 0 18px 42px rgba(4, 10, 35, 0.16);
}

.dashboardHeadModern .dashboardActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

body.sidebarCollapsed .appLayout {
  grid-template-columns: 72px minmax(0, 1fr);
}

body.sidebarCollapsed .appSidebar {
  position: sticky;
  top: 12px;
  left: auto;
  z-index: 4;
  width: 72px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}

body.sidebarCollapsed .sidebarTop,
body.sidebarCollapsed .sidebarNav,
body.sidebarCollapsed .sidebarFooter {
  display: block;
}

body.sidebarCollapsed .sidebarNav {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

body.sidebarCollapsed .sidebarSectionTitle,
body.sidebarCollapsed .sidebarNavLabel,
body.sidebarCollapsed .sidebarProfileText,
body.sidebarCollapsed .sidebarFooterButton {
  display: none;
}

body.sidebarCollapsed .sidebarProfileCard,
body.sidebarCollapsed .sidebarInlineLogoutButton,
body.sidebarCollapsed .sidebarInlineProfileButton,
body.sidebarCollapsed .sidebarBrandMark,
body.sidebarCollapsed .sidebarNotificationWrap {
  display: none;
}

body.sidebarCollapsed .sidebarControls {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: auto;
  margin: 0;
  pointer-events: auto;
}

body.sidebarCollapsed .sidebarNavButton {
  justify-content: center;
  padding: 0;
}

body.sidebarCollapsed .sidebarFooter {
  justify-items: center;
  margin-top: auto;
}

body.sidebarCollapsed .sidebarFooterButton {
  display: none;
}

body.sidebarCollapsed .sidebarArrowButton {
  display: grid;
  position: sticky;
  top: 12px;
  left: auto;
  margin-left: 24px;
  z-index: 5;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 18px;
  box-shadow: none;
  pointer-events: auto;
}

body.partnerProjectsOnly #customerListBackButton {
  display: none !important;
}

#partnerProjectsBackButton {
  justify-self: start;
  margin-bottom: 6px;
  grid-column: 1 / -1;
}

#partnerProjectsPanel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

#partnerProjectsIntro .step {
  display: none;
}

body.partnerDashboardHome .dashboardHeadModern {
  display: grid;
  grid-template-columns: 220px minmax(520px, 1fr);
  grid-template-areas:
    "identity identity"
    "photo advisor";
  align-items: stretch;
  gap: 18px;
}

body.partnerDashboardHome .dashboardIdentity {
  grid-area: identity;
  gap: 16px;
  min-width: 0;
  align-content: start;
  align-items: start;
}

body.partnerDashboardHome .advisorCard {
  grid-area: advisor;
  align-self: stretch;
  min-height: 220px;
  margin-top: 0;
  height: 220px;
  width: 100%;
  min-width: 0;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
}

body.partnerDashboardHome .dashboardActions {
  display: none;
}

body.partnerDashboardHome #partnerOrderDetailBox,
body.partnerDashboardHome #partnerActionBox,
body.partnerDashboardHome .tableWrap,
body.partnerDashboardHome #emptyState,
body.partnerDashboardHome #customerListBackButton {
  display: none !important;
}

body.partnerDashboardHome #partnerProjectsPanel {
  display: grid !important;
}

body.partnerDashboardHome .employeePhotoButton {
  grid-area: photo;
  width: 220px;
  height: 220px;
  max-width: 100%;
  aspect-ratio: auto;
  justify-self: start;
  align-self: stretch;
}

body.partnerDashboardHome .advisorCard img {
  width: 132px;
  height: 132px;
  border-radius: 8px;
  flex: 0 0 132px;
}

body.partnerDashboardHome .advisorCard strong {
  font-size: 24px;
  line-height: 1.05;
}

body.partnerDashboardHome .advisorCard span {
  font-size: 16px;
}

body.partnerDashboardHome .advisorCard small {
  font-size: 16px;
  line-height: 1.35;
}

body.partnerDashboardHome .advisorCard > div {
  min-width: 0;
}

@media (max-width: 980px) {
  body.dashboardMode .shell {
    width: min(100%, calc(100% - 18px));
    padding: 10px 0 18px;
  }

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

  .appSidebar {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    z-index: 30;
    width: min(310px, calc(100vw - 20px));
    min-height: auto;
    transform: translateX(calc(-100% - 20px));
  }

  body.sidebarOpen .appSidebar {
    transform: translateX(0);
  }

  .sidebarBackdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: block;
    background: rgba(20, 27, 77, 0.34);
  }

  .sidebarControls {
    display: none;
  }

  .sidebarPinButton {
    display: none;
  }

  .appContent {
    width: 100%;
  }

  .dashboardHeadModern {
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .authOverlayPanel {
    left: 10px;
    right: 10px;
    top: 72px;
    bottom: 10px;
  }

  .mobileSidebarButton {
    display: block;
    justify-self: end;
    align-self: start;
    margin-left: 12px;
  }

  .dashboardIdentity {
    min-width: 0;
  }
}

.choiceGrid {
  display: grid;
  grid-template-columns: repeat(var(--choice-count, 3), minmax(0, 1fr));
  gap: 16px;
}

#choiceView[data-choice-count="2"] {
  width: min(640px, 100%);
}

#choiceView[data-choice-count="1"] {
  width: min(360px, 100%);
}

.choiceButton,
.loginForm button,
.secondaryButton {
  min-height: 48px;
  min-width: 112px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.choiceButton:hover,
.loginForm button:hover,
.secondaryButton:hover {
  background: var(--accent-strong);
}

.dangerButton {
  min-height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--danger);
  cursor: pointer;
  font-weight: 700;
}

.dangerButton:hover {
  background: #8f1d15;
}

.loginLinks {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.loginForm,
.recommendationForm,
.noticeBox {
  display: grid;
  gap: 16px;
}

.loginForm label,
.recommendationForm label,
.noticeBox label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

.loginForm input,
.noticeBox input,
.recommendationForm input,
.recommendationForm select,
.recommendationForm textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--field);
  color: var(--ink);
}

.loginForm input,
.noticeBox input,
.recommendationForm input,
.recommendationForm select {
  min-height: 46px;
}

.recommendationForm textarea {
  min-height: 108px;
  padding-top: 12px;
  resize: vertical;
}

.loginForm input:focus,
.noticeBox input:focus,
.recommendationForm input:focus,
.recommendationForm select:focus,
.recommendationForm textarea:focus {
  outline: 3px solid rgba(15, 124, 99, 0.2);
  border-color: var(--accent);
}

.addressLookupField {
  position: relative;
}

.addressLookupInlineSpinner {
  position: absolute;
  top: 36px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(20, 27, 77, 0.12);
  font-size: 16px;
  line-height: 1;
  animation: pretzelSpin 1s linear infinite;
  pointer-events: none;
}

.addressSuggestionDropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(20, 27, 77, 0.18);
}

.addressSuggestionOption {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #ffffff !important;
  color: #111111 !important;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-text-fill-color: #111111 !important;
}

.addressSuggestionOption:hover,
.addressSuggestionOption:focus,
.addressSuggestionOption:active {
  background: #f5f9fc !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  outline: none;
  border-color: var(--line);
}

.addressSuggestionOption strong {
  font-size: 14px;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
}

.addressSuggestionOption span {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  font-size: 13px;
  font-weight: 500;
}

.addressSuggestionOption strong,
.addressSuggestionOption span {
  pointer-events: none;
}

.linkButton {
  border: 0;
  min-height: 38px;
  padding: 8px 10px;
  margin-bottom: 18px;
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.inlineLink {
  min-height: auto;
  width: fit-content;
  padding: 0;
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mid);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.loginForm .inlineLink,
.loginForm .inlineLink:hover {
  min-height: auto;
  min-width: 0;
  padding: 0;
  color: var(--mid);
  background: transparent;
  font-weight: 800;
}

.error {
  min-height: 22px;
  color: var(--danger);
  font-weight: 700;
}

.dashboardHead {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 22px;
}

.dashboardIdentity {
  display: grid;
  gap: 14px;
  min-width: min(330px, 100%);
}

.advisorCard {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: min(280px, 100%);
  max-width: 100%;
  min-height: 160px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.advisorCard img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
}

.advisorCard span {
  display: block;
  color: var(--muted);
  font-size: 18px;
}

.advisorCard strong {
  display: block;
  font-size: 28px;
  line-height: 1.1;
}

.advisorCard small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.employeePhotoButton {
  width: min(420px, 100%);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  cursor: pointer;
  overflow: hidden;
}

.employeePhotoButton:hover {
  border-color: var(--accent);
}

.employeePhotoButton img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dashboardActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: end;
}

.dashboardHead h2,
#loginTitle {
  margin: 0 0 22px;
  font-size: 30px;
}

.secondaryButton {
  padding: 0 18px;
  background: var(--night);
}

.ghostButton {
  background: var(--accent);
}

.ghostButton:hover {
  background: var(--night);
}

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

.creditSummary div {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.creditSummary span {
  display: block;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.creditSummary strong {
  display: block;
  color: var(--night);
  font-size: 30px;
}

.adminSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-bottom: 22px;
}

.adminMetric {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.adminMetric span,
.adminMetric small {
  color: var(--muted);
  font-weight: 700;
}

.adminMetric strong {
  color: var(--night);
  font-size: 34px;
}

.adminMetric:hover {
  border-color: var(--accent);
}

.accountingMetric {
  cursor: default;
}

.accountingMetric:hover {
  border-color: var(--line);
}

.accountingList {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.accountingInvoiceCard {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(180px, 0.7fr) minmax(220px, auto);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.accountingInvoiceMain,
.accountingInvoiceAmount {
  display: grid;
  gap: 4px;
}

.accountingInvoiceMain span,
.accountingInvoiceMain small,
.accountingInvoiceAmount small {
  color: var(--muted);
  font-weight: 800;
}

.accountingInvoiceMain strong,
.accountingInvoiceAmount strong {
  color: var(--night);
  font-size: 1.35rem;
}

.accountingInvoiceMain p {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
}

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

.dangerSoftButton {
  background: #fff1f1 !important;
  border-color: #f2c5c5 !important;
  color: #9f1f17 !important;
}

.upcomingAppointments {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

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

.appointmentSortBar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.appointmentSortButton {
  width: auto;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 900;
}

.appointmentSortButton.active,
.appointmentSortButton:hover {
  color: var(--night);
  border-color: var(--accent);
}

.appointmentItem {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.appointmentItem > div {
  display: grid;
  gap: 6px;
}

.appointmentItem span,
.appointmentItem small {
  color: var(--muted);
  font-weight: 700;
}

.appointmentItem b {
  color: var(--night);
  font-size: 15px;
  text-align: left;
  line-height: 1.35;
}

.appointmentMontageItem {
  align-items: start;
}

.clickableAppointmentItem {
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.clickableAppointmentItem:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(17, 29, 88, 0.08);
  transform: translateY(-1px);
}

.appointmentPrimary strong {
  font-size: 24px;
  line-height: 1.2;
}

.appointmentPrimary span {
  font-size: 15px;
  line-height: 1.4;
}

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

.appointmentMetaGrid > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(142, 160, 183, 0.32);
  border-radius: 8px;
  background: #ffffff;
}

.orderStatusDone,
.orderStatusOpen {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 8px;
  font-style: normal;
  font-weight: 800;
}

.statisticsPanel {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}

.statisticsContent {
  display: grid;
  gap: 18px;
}

.statisticsHero,
.statisticsGrid,
.statisticsColumns,
.statisticsMiniGrid {
  display: grid;
  gap: 14px;
}

.statisticsHero {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.statisticsHero > div,
.statCard,
.statisticsBlock,
.miniStat,
.insightList article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.statisticsHero > div {
  display: grid;
  gap: 8px;
  padding: 22px;
}

.statisticsHero span,
.statCard span,
.miniStat span {
  color: var(--muted);
  font-weight: 800;
}

.statisticsHero strong {
  color: var(--night);
  font-size: 42px;
  line-height: 1;
}

.statisticsHero p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.statisticsGrid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.statCard {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.statCard strong {
  color: var(--night);
  font-size: 30px;
}

.statCard small {
  color: var(--muted);
  font-weight: 700;
}

.statisticsColumns {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.statisticsBlock {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.statisticsBlock h4 {
  margin: 0;
  color: var(--night);
  font-size: 20px;
}

.statisticsMiniGrid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.miniStat {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: var(--surface);
}

.miniStat strong {
  color: var(--night);
  font-size: 26px;
}

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

.insightList article {
  padding: 14px;
  background: var(--surface);
}

.insightList strong {
  color: var(--night);
}

.insightList p {
  margin: 5px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.statisticsTableWrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.statisticsTable {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.statisticsTable th,
.statisticsTable td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.statisticsTable th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.statisticsTable td {
  color: var(--ink);
  font-weight: 700;
}

.orderStatusDone {
  color: var(--paid);
  background: #eaf8ee;
}

.orderStatusOpen {
  color: #9b1c1c;
  background: #feecec;
}

.bigInviteButton {
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.bigInviteButton.hidden {
  display: none;
}

.bigInviteButton:hover {
  background: var(--accent-strong);
}

.payoutButton {
  margin-bottom: 22px;
  background: var(--paid);
}

.payoutButton:hover {
  background: #176642;
}

.customerListBackButton {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 18px;
}

.customerActionBox {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f2f8fd);
}

.customerActionBox span {
  display: block;
  margin-bottom: 8px;
  color: var(--mid);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
}

.customerActionBox strong {
  display: block;
  margin-bottom: 8px;
  color: var(--night);
  font-size: 26px;
}

.customerActionBox p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

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

.recommendationForm {
  margin-bottom: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.noticeBox,
.reviewBox {
  margin-bottom: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.noticeBox h3,
.reviewBox h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.noticeBox p,
.reviewBox p {
  margin: 0;
}

.alignEnd {
  align-self: end;
}

#partnerNameSuggestionControls,
#partnerAddressSuggestionControls {
  grid-column: 1 / -1;
  margin-top: -6px;
}

#partnerNameSuggestionControls select,
#partnerAddressSuggestionControls select {
  min-height: 48px;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noticeBox button[type="submit"],
.reviewButton {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.noticeBox button[type="submit"] {
  width: fit-content;
  padding: 0 18px;
}

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

#partnerOrderDetailBox {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 18px;
}

.reviewActions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: end;
}

.reviewModalOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 13, 40, 0.72);
}

.reviewModalOverlay.hidden {
  display: none;
}

.reviewModal,
.reonicChangeModal {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.reviewModal iframe {
  width: 100%;
  min-height: min(620px, 58vh);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

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

.reviewModalActions > * {
  min-height: 46px;
  display: inline-grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.orderChangeBox {
  display: grid;
  gap: 12px;
}

.orderChangeOpen {
  padding: 12px;
  border: 1px solid #f5c979;
  border-radius: 8px;
  background: #fff7e8;
  color: #8a4c00;
  font-weight: 800;
}

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

.orderChangeListCompact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.orderChangeList article {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.orderChangeListCompact article p {
  margin: 4px 0 0;
}

.orderChangeActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.dangerLinkButton {
  border-color: #f0c4be;
  background: #fff4f2;
  color: #b52217;
}

.signedChangeLink {
  background: #e9f8ef;
  color: #177a3f;
  border: 1px solid #bce8c9;
  border-radius: 8px;
  padding-inline: 12px;
}

.reonicChangeWizard {
  display: grid;
  gap: 12px;
}

.reonicChangeChecklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.reonicChangeChecklist legend {
  padding: 0 8px;
  color: var(--night);
  font-weight: 900;
}

.reonicChangeCheck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5f9fd;
  font-weight: 800;
}

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

.reonicChangeSection {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.reonicChangeSection > div:first-child {
  display: grid;
  gap: 4px;
}

.reonicChangeSection strong,
.reonicChangeSection input {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reonicChangeSection span {
  color: var(--muted);
  font-weight: 800;
}

.reonicChangeSection [hidden] {
  display: none !important;
}

.reonicChangeChoiceRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.reonicChangeDescriptionLabel {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}

.reonicChangeDescriptionLabel textarea {
  width: 100%;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--night);
  font: inherit;
  resize: vertical;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

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

.partnerHomeActionCard {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--night);
  text-align: left;
  cursor: pointer;
}

.partnerHomeActionCard:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(14, 89, 138, 0.14);
}

.partnerHomeActionCard span {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.partnerHomeActionCard strong {
  font-size: 1.15rem;
}

.partnerAdminDetailBox {
  align-items: start;
}

body.adminPartnerCompact .appContent {
  gap: 0;
}

body.adminPartnerOverviewOnly #partnerOrderDetailBox,
body.adminPartnerOverviewOnly #partnerAdminDetailBox,
body.adminPartnerOverviewOnly #partnerActionBox,
body.adminPartnerOverviewOnly #partnerProjectsPanel,
body.adminPartnerOverviewOnly .tableWrap,
body.adminPartnerOverviewOnly #emptyState {
  display: none !important;
}

body.partnerOrderDetailOnly #partnerAdminOverviewPanel,
body.partnerOrderDetailOnly #partnerAdminDetailBox,
body.partnerOrderDetailOnly #partnerActionBox,
body.partnerOrderDetailOnly #partnerProjectsPanel,
body.partnerOrderDetailOnly #partnerProjectsCards,
body.partnerOrderDetailOnly #partnerProjectsIntro,
body.partnerOrderDetailOnly .dashboardHead,
body.partnerOrderDetailOnly .tableWrap,
body.partnerOrderDetailOnly #emptyState {
  display: none !important;
}

body.partnerAdminEditOnly .dashboardHead,
body.partnerAdminEditOnly #adminSummary,
body.partnerAdminEditOnly #employeeSummary,
body.partnerAdminEditOnly #upcomingAppointments,
body.partnerAdminEditOnly #adminStatisticsPanel,
body.partnerAdminEditOnly #creditSummary,
body.partnerAdminEditOnly #customerActionBox,
body.partnerAdminEditOnly #partnerActionBox,
body.partnerAdminEditOnly #partnerProjectsPanel,
body.partnerAdminEditOnly #partnerOrderDetailBox,
body.partnerAdminEditOnly #partnerAdminDetailBox,
body.partnerAdminEditOnly #partnerAdminOverviewPanel,
body.partnerAdminEditOnly .tableWrap,
body.partnerAdminEditOnly #emptyState,
body.partnerAdminEditOnly #reviewBox,
body.partnerAdminEditOnly #customerDetailBox,
body.partnerAdminEditOnly #reonicOrdersPanel,
body.partnerAdminEditOnly #reonicOrderDetailPanel,
body.partnerAdminEditOnly #newCustomerButton,
body.partnerAdminEditOnly #requestPayoutButton {
  display: none !important;
}

body.adminPartnerProfileOnly .dashboardHead,
body.adminPartnerProfileOnly #adminSummary,
body.adminPartnerProfileOnly #employeeSummary,
body.adminPartnerProfileOnly #upcomingAppointments,
body.adminPartnerProfileOnly #adminStatisticsPanel,
body.adminPartnerProfileOnly #emailAutomationPanel,
body.adminPartnerProfileOnly #creditSummary,
body.adminPartnerProfileOnly #customerActionBox,
body.adminPartnerProfileOnly #partnerActionBox,
body.adminPartnerProfileOnly #partnerProjectsPanel,
body.adminPartnerProfileOnly #partnerOrderDetailBox,
body.adminPartnerProfileOnly #partnerAdminOverviewPanel,
body.adminPartnerProfileOnly .tableWrap,
body.adminPartnerProfileOnly #emptyState,
body.adminPartnerProfileOnly #reviewBox,
body.adminPartnerProfileOnly #customerDetailBox,
body.adminPartnerProfileOnly #reonicOrdersPanel,
body.adminPartnerProfileOnly #reonicOrderDetailPanel,
body.adminPartnerProfileOnly #newCustomerButton,
body.adminPartnerProfileOnly #requestPayoutButton {
  display: none !important;
}

body.adminPartnerProfileOnly #partnerAdminDetailBox {
  display: grid !important;
}

body.partnerProjectsOnly .dashboardHead,
body.partnerProjectsOnly #partnerActionBox,
body.partnerProjectsOnly #partnerOrderDetailBox {
  display: none !important;
}

body.roleCustomer #partnerActionBox,
body.roleCustomer #partnerProjectsPanel,
body.roleCustomer #partnerOrderDetailBox,
body.roleCustomer #partnerAdminDetailBox,
body.roleCustomer #partnerAdminOverviewPanel,
body.roleCustomer #partnerAdminEditForm,
body.roleCustomer .sidebarNotificationWrap,
body.roleEmployee:not(.roleAdmin) #partnerActionBox,
body.roleEmployee:not(.roleAdmin) #partnerProjectsPanel,
body.roleEmployee:not(.roleAdmin) #partnerOrderDetailBox,
body.roleEmployee:not(.roleAdmin) #partnerAdminDetailBox,
body.roleEmployee:not(.roleAdmin) #partnerAdminOverviewPanel,
body.roleEmployee:not(.roleAdmin) #partnerAdminEditForm,
body.roleEmployee:not(.roleAdmin) .sidebarNotificationWrap {
  display: none !important;
}

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

.partnerProjectsHeader {
  padding: 0 24px;
}

.partnerProjectCard {
  position: relative;
  width: 100%;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.partnerProjectCard:hover {
  background: #f8fbfe;
}

.partnerProjectHoverPreview {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 24;
  width: min(360px, calc(100vw - 120px));
  display: none !important;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(12, 20, 58, 0.18);
  pointer-events: none;
  overflow-wrap: anywhere;
  word-break: normal;
}

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

.partnerPriceRuleSection .partnerPriceRuleGrid,
.partnerPriceRuleSection .partnerPriceRuleGrid label {
  display: grid;
}

.partnerPriceRuleSection {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.partnerPriceRuleSectionHead {
  display: grid;
  gap: 4px;
}

.partnerPriceRuleSectionHead h4 {
  margin: 0;
  font-size: 18px;
  color: var(--night);
}

.partnerPriceRuleSectionHead p {
  margin: 0;
  color: var(--muted);
}

.partnerProjectHoverPreview strong {
  color: var(--night);
  font-size: 16px;
}

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

.partnerProjectHoverItem {
  display: grid;
  gap: 2px;
}

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

.partnerProjectHoverItem b {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.partnerProjectMain {
  display: grid;
  grid-template-columns: 1.05fr 2.35fr 1.35fr 1.05fr 1.55fr .95fr .85fr;
  gap: 18px;
  align-items: start;
}

.partnerProjectField {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.partnerProjectField > strong,
.partnerProjectField > span:not(.partnerProjectLabel):not(.partnerProjectSortableLabel):not(.reviewStatus) {
  display: block;
  width: 100%;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: normal;
}

.partnerProjectField > .reviewStatus {
  justify-self: start;
}

.partnerProjectLabel {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}

.partnerProjectLabelInline {
  display: none;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}

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

.partnerProjectSortControls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.partnerProjectSortButton {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  min-width: auto;
  min-height: auto;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.partnerProjectSortButton:hover,
.partnerProjectSortButton.active {
  color: var(--night);
}

.partnerAdminOverviewPanel {
  display: grid;
  gap: 16px;
}

.partnerAdminOverviewHead h3 {
  margin: 0;
  font-size: 28px;
  color: var(--night);
}

.partnerAdminOverviewList {
  display: grid;
  gap: 18px;
}

.partnerAdminSortBar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.partnerAdminDetailMain {
  flex: 1 1 520px;
  min-width: 0;
}

.partnerAdminDetailHeader {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.partnerAdminDetailLogo {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #ffffff;
}

.partnerAdminDetailBox .reviewActions {
  align-self: stretch;
}

.partnerAdminDetailPriceSummary {
  margin-top: 14px;
}

.partnerAdminDetailBox .reviewActions button {
  margin-top: 0;
  min-width: 220px;
}

body.adminPartnerCompact .partnerAdminDetailBox {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr) minmax(220px, 0.6fr);
  gap: 22px;
  width: 100%;
}

.partnerAdminOverviewCard {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.9fr) minmax(220px, 0.7fr);
  gap: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  align-items: stretch;
}

.partnerAdminOverviewPrimary {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  cursor: pointer;
}

.partnerAdminOverviewPrimary > div {
  min-width: 0;
}

.partnerAdminOverviewPrimary:hover {
  opacity: 0.92;
}

.partnerAdminOverviewPrimary h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--night);
}

.partnerAdminOverviewText {
  margin: 0;
  color: var(--ink);
  line-height: 1.35;
}

.partnerAdminOverviewProjects,
.partnerAdminOverviewActions {
  align-self: start;
}

.partnerAdminOverviewProjects .partnerAdminOrdersList {
  max-height: 172px;
}

.partnerProjectsTitleRow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.partnerProjectsTitleText {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.partnerProjectsTitleDivider {
  width: 1px;
  height: 22px;
  background: var(--line);
}

.partnerProjectsTitleLink {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--primary);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline;
}

.partnerProjectsMapPanel {
  display: grid;
  gap: 16px;
}

.partnerProjectsMapCard {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.partnerProjectsMapHint {
  color: var(--muted);
  font-size: 15px;
}

.partnerProjectsMapHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.partnerProjectsMapFilters {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.partnerProjectsMapFilters label {
  display: grid;
  gap: 6px;
  min-width: 180px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.montageMapStepFilter {
  display: grid;
  gap: 6px;
  min-width: 220px;
  max-height: 150px;
  padding: 8px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
}

.partnerProjectsMapFilters .montageMapStepOption {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--night);
  font-size: 14px;
  line-height: 1.2;
  text-transform: none;
}

.montageMapStepOption input {
  width: auto;
  min-height: 0;
}

.montageMapStepClear {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--night);
  font-weight: 800;
  cursor: pointer;
}

.montageMapStepClear:hover {
  background: var(--accent);
}

.partnerProjectsMapCanvas {
  width: 100%;
  min-height: 520px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.partnerOrderMapMarker {
  width: auto !important;
  height: auto !important;
  white-space: nowrap;
}

.partnerOrderMapMarker span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(12, 20, 58, 0.14);
  background: #ffffff;
  color: var(--night);
  font-weight: 800;
  font-size: 13px;
}

.partnerOrderMapMarker--unscheduled span {
  background: #fff1ee;
  border-color: rgba(198, 31, 20, 0.28);
  color: #a51c12;
}

.partnerOrderMapMarker--scheduled span {
  background: #edf8f1;
  border-color: #cbead7;
  color: #1f7a4a;
}

.partnerOrderMapMarker--complaint span {
  background: #fff4df;
  border-color: #f0c774;
  color: #9b5800;
}

.partnerOrderMapCluster span {
  width: 38px;
  height: 38px;
  min-height: 38px;
  justify-content: center;
  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--night);
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 16px 34px rgba(12, 20, 58, 0.22);
}

.mapClusterPopupList {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.mapClusterPopupList span {
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbff;
  color: var(--night);
  font-weight: 800;
}

.mapClusterPopupHint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.partnerOrderMapPopup .partnerProjectHoverPreview,
.partnerOrderMapPopup .leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.partnerOrderMapPopup .partnerProjectHoverPreview {
  position: static;
  display: grid !important;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.partnerOrderMapPopup .leaflet-popup-content {
  min-width: 280px;
  max-width: min(460px, 80vw);
  overflow-wrap: anywhere;
}

.floatingProjectHoverPreview {
  position: fixed;
  z-index: 9999;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(12, 20, 58, 0.18);
  pointer-events: none;
  overflow-wrap: anywhere;
}

.floatingProjectHoverPreview.hidden {
  display: none !important;
}

.partnerAdminOverviewActions {
  display: grid;
  gap: 12px;
  justify-content: stretch;
}

.adminPartnerOrdersMain {
  grid-template-columns: 1.15fr 1.15fr 2fr 1.3fr 1fr 1.55fr .95fr .85fr;
}

.payoutReleaseMain {
  grid-template-columns: 1.2fr 1.2fr 1fr .8fr auto;
  align-items: center;
}

.payoutReleaseCard {
  cursor: default;
}

.payoutReleaseCard:hover {
  background: #ffffff;
}

.partnerPriceListSummaryBox,
.partnerOrderCostEstimate {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ink);
}

.partnerPriceListSummaryBox p {
  margin: 0;
}

.partnerPriceListSummaryBox a {
  color: var(--link);
  font-weight: 800;
}

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

.partnerAdminStatCard {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

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

.partnerAdminStatCard strong {
  color: var(--night);
  font-size: 24px;
  line-height: 1;
}

.partnerAdminStatCard small {
  color: var(--ink);
  font-weight: 700;
}

.partnerOrderCostEstimate {
  margin-top: 22px;
  margin-bottom: 14px;
  background: #edf8f1;
  border-color: #cbead7;
}

.partnerOrderCostEstimate strong {
  color: var(--paid);
}

.partnerOrderCostEstimateTotal {
  font-size: 30px;
  font-weight: 900;
  color: var(--paid);
  line-height: 1.1;
}

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

.partnerOrderCostEstimateRow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

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

.partnerOrderCostEstimate span,
.partnerOrderCostEstimate small {
  color: var(--ink);
}

.partnerOrderChatTop {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid #cfe0ee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(12, 29, 66, 0.08);
}

.partnerOrderChatTop .chatMessages {
  padding: 10px;
  border: 1px solid #d8e7f2;
  border-radius: 8px;
  background: #f8fbfe;
}

.partnerOrderChatTop .chatComposer textarea {
  min-height: 86px;
  border-color: #cfe0ee;
  background: #ffffff;
}

body.adminPartnerCompact .partnerAdminOrders {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-self: start;
}

body.adminPartnerCompact .partnerAdminDetailBox .reviewActions {
  display: grid;
  justify-content: stretch;
  align-content: start;
}

.reviewButton {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  text-decoration: none;
}

.submittedBadge {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  background: #eaf8ee;
  color: var(--paid);
  font-weight: 700;
}

.detailMeta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.profileEditor {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

#profileView {
  width: min(960px, 100%);
}

#profileView .profileEditor {
  grid-template-columns: 180px minmax(0, 1fr);
}

#profileView .profileEditor.customerProfileEditor {
  grid-template-columns: 1fr;
}

#profileView .profileEditor .formGrid {
  width: 100%;
}

.profileEditor img {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #f8fbfe;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.reviewStatus,
.friendStatus {
  display: inline-flex;
  min-width: 104px;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.reviewDone {
  color: #1f7a52;
  background: #eaf8ee;
}

.reviewPending {
  color: #b54708;
  background: #fff0e1;
}

.reviewInfo {
  color: #155eef;
  background: #e8f1ff;
}

.reviewOpen {
  color: #b42318;
  background: #fdebea;
}

.reviewUnknown {
  color: var(--muted);
  background: #edf2f7;
}

.friendDone {
  color: #1f7a52;
  background: #eaf8ee;
}

.friendOpen {
  color: #b42318;
  background: #fdebea;
}

.formHead {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.formHead h3 {
  margin: 0;
  font-size: 22px;
}

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

.fullWidth {
  grid-column: 1 / -1;
}

.formActions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px;
}

.partnerOrderDetailActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.partnerOrderDetailActions > button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
}

.partnerOrderDetailActions > .dangerButton {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  background: var(--danger);
}

.partnerOrderDetailActions > .dangerButton:hover {
  background: #8f1d15;
}

.recommendationForm .partnerOrderDetailActions .dangerButton {
  background: var(--danger);
}

.recommendationForm .partnerOrderDetailActions .dangerButton:hover {
  background: #8f1d15;
}

.suggestionAccepted {
  align-self: center;
  color: #16784b;
  font-weight: 800;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.emailAutomationList {
  display: grid;
  gap: 12px;
}

.emailAutomationCard {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.emailAutomationCardHeader {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.emailAutomationEditHint {
  color: var(--sky);
  font-weight: 800;
  white-space: nowrap;
}

.emailAutomationCardText {
  display: grid;
  gap: 6px;
}

.emailAutomationCardText strong {
  color: var(--night);
  font-size: 18px;
  line-height: 1.3;
}

.emailAutomationCardText p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.5;
}

.emailAutomationEditor {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
}

.emailAutomationEditor label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.emailAutomationEditor textarea {
  min-height: 110px;
  resize: vertical;
}

.emailAutomationActions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.recommendationForm button[type="submit"],
.recommendationForm button[type="button"] {
  min-height: 48px;
  min-width: 112px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--accent);
  cursor: pointer;
  font-weight: 700;
  white-space: normal;
}

.recommendationForm button[type="submit"]:hover,
.recommendationForm button[type="button"]:hover {
  background: var(--accent-strong);
}

.recommendationForm button.isLoading {
  opacity: 0.72;
  cursor: progress;
}

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

.recommendationForm .partnerOrderDetailActions > button {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
}

.recommendationForm .partnerOrderDetailActions .dangerButton {
  background: var(--danger);
}

.recommendationForm .partnerOrderDetailActions .dangerButton:hover {
  background: #8f1d15;
}

.recommendationForm button.isLoading::after {
  content: "🥨";
  width: 18px;
  height: 18px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: -3px;
  line-height: 1;
  animation: partnerSubmitSpinner 0.8s linear infinite;
}

@keyframes partnerSubmitSpinner {
  to {
    transform: rotate(360deg);
  }
}

.formMessage {
  min-height: 22px;
  margin: 0;
  color: var(--mid);
  font-weight: 700;
}

.successMessage {
  color: #1f7a52;
}

.formMessage a {
  color: var(--night);
  word-break: break-word;
}

.chatBox {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.detailBackButton {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 12px;
}

.partnerOrderDetailHead {
  margin-bottom: 18px;
}

.partnerOrderDetailMeta {
  margin: 0 0 10px;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.partnerOrderDetailMeta > span {
  display: inline-flex;
  align-items: center;
}

.partnerOrderMetaSeparator {
  color: var(--muted);
  font-weight: 600;
}

.partnerOrderAttachmentsSection,
.partnerOrderNotesSection {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.partnerOrderImageGallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.partnerOrderImageCard {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.partnerOrderImageCard img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8eff6;
}

.partnerOrderImageCard span {
  font-size: 13px;
  font-weight: 700;
  word-break: break-word;
}

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

.partnerOrderFileLink {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ink);
  text-decoration: none;
}

.partnerOrderFileLink span {
  color: var(--muted);
  font-size: 13px;
}

.imagePreviewOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 13, 40, 0.78);
}

.imagePreviewOverlay img {
  max-width: min(1200px, calc(100vw - 80px));
  max-height: calc(100vh - 80px);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
  background: #ffffff;
}

.imagePreviewClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--night);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.chatBoxHeader h4 {
  margin: 0 0 4px;
}

.chatMessages {
  display: grid;
  gap: 10px;
  max-height: 248px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  align-content: start;
  overscroll-behavior: contain;
}

.chatMessage {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  max-width: min(100%, 78%);
}

.chatMessageHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

.chatMessageAuthor {
  font-weight: 700;
  color: var(--ink);
}

.chatMessageBody {
  white-space: pre-wrap;
  color: var(--ink);
}

.chatMessageLeft {
  justify-self: start;
}

.chatMessageRight {
  justify-self: end;
  background: #eef6ff;
  border-color: #bfd9f2;
}

.chatAttachmentField {
  display: grid;
  gap: 6px;
}

.chatComposer {
  display: grid;
  gap: 12px;
}

.partnerAdminOrders {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.partnerAdminOrdersList {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
  padding-right: 4px;
  align-content: start;
  overscroll-behavior: contain;
}

.partnerAdminOrderButton {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--ink);
  cursor: pointer;
}

.partnerAdminOrderButton:hover {
  background: #eef5fb;
}

.resultBox {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5f9fc;
}

.resultBox p {
  margin: 0;
}

.resultBox code {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--night);
  color: #ffffff;
  overflow-wrap: anywhere;
}

.tableWrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}

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

.reonicDetailPanel {
  gap: 18px;
}

.reonicDetailContent {
  display: grid;
  gap: 16px;
}

.reonicCustomerMeta {
  display: grid;
  gap: 9px;
  justify-items: start;
  max-width: 720px;
  text-align: left;
}

.reonicCustomerMeta p {
  display: grid;
  gap: 2px;
  margin: 0;
}

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

.reonicCustomerMeta strong,
.reonicCustomerMeta a {
  color: var(--night);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.tableSortButton {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tableSortButton:hover {
  color: var(--accent);
}

.reonicImageGallery {
  gap: 14px;
}

.reonicImageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.reonicImageThumb {
  display: grid;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}

.reonicImageThumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #eef4f8;
}

.reonicImageThumb span {
  padding: 0 9px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.preparationUploadCard {
  gap: 14px;
}

.preparationDropZone {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px dashed #8db7cc;
  border-radius: 8px;
  background: #f5fbfe;
  cursor: pointer;
}

.preparationPdfDropZone {
  background: #fff8ef;
  border-style: solid;
  border-color: #efc28b;
}

.preparationDropZone input {
  display: none;
}

.preparationDropZone strong {
  color: var(--night);
}

.preparationDropZone span,
.preparationImageSummary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.preparationImageSummary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.preparationImageSummary span {
  padding: 7px 10px;
  border-radius: 8px;
  background: #eef7fb;
}

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

.preparationNotesGrid label {
  display: grid;
  gap: 6px;
  color: var(--night);
  font-weight: 800;
}

.preparationNotesGrid textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
}

.preparationImageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.preparationImageCard {
  display: grid;
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.preparationImagePreview {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #eef4f8;
  cursor: pointer;
  overflow: hidden;
}

.preparationImagePreview img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.preparationImageCard strong {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.preparationImageCard select {
  width: 100%;
  min-height: 36px;
  margin-bottom: 8px;
}

.imagePreviewOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 27, 77, 0.78);
}

.imagePreviewOverlay figure {
  display: grid;
  gap: 10px;
  max-width: min(960px, 94vw);
  max-height: 88vh;
  margin: 0;
}

.imagePreviewOverlay img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
}

.imagePreviewOverlay figcaption {
  color: #ffffff;
  font-weight: 800;
  text-align: center;
}

.imagePreviewClose {
  position: fixed;
  top: 18px;
  right: 18px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  background: #ffffff;
  color: var(--night);
  font-weight: 800;
}

.reonicChangeModal > .imagePreviewClose,
.reviewModal > .imagePreviewClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  min-height: 42px;
  padding: 0;
}

.reonicOptionCard {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.reonicOptionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.reonicOptionHead span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.reonicOptionHead strong {
  display: block;
  margin-top: 3px;
  font-size: 20px;
}

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

.componentGroup h4 {
  margin: 0;
  font-size: 15px;
}

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

.componentGroup li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.componentGroup li span {
  color: var(--muted);
  font-size: 13px;
}

.roofTileWarning {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 2px solid #b42318;
  border-radius: 8px;
  background: #feecec;
}

.roofTileWarning strong {
  color: #9b1c1c;
  font-size: 18px;
}

.roofTileWarning p {
  margin: 5px 0 0;
  color: var(--night);
  font-weight: 700;
}

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

.roofTileWarning li {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
}

.roofTileWarning li span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

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

.roofTileForm label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.roofTileForm input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

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

.calendarCheckItem {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.calendarCheckItem span {
  color: var(--muted);
  font-size: 13px;
}

.calendarCheckItem p {
  margin: 0;
  font-weight: 700;
}

.calendarFound {
  color: var(--paid);
}

.calendarMissing {
  color: #806000;
}

.deliveryDateBox {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.deliveryDateBox label {
  font-weight: 800;
}

.deliveryDateBox input {
  width: 100%;
}

.substructureBox {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.substructureToggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.substructureToggle input {
  width: 18px;
  height: 18px;
  margin: 0;
}

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

.substructureSummaryCard {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.substructureSummaryCard strong,
.substructureSummaryCard p {
  margin: 0;
}

.deliveryDateBox .secondaryButton {
  width: 100%;
}

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

.orderStatusRow p {
  margin: 0;
}

.orderStatusRow .secondaryButton {
  width: auto;
}

.printOrderButton {
  width: 100%;
}

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

.billingCard {
  gap: 14px;
}

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

.billingToggleButton {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--night);
  font-weight: 800;
}

.billingToggleButton.is-selected,
.billingToggleButton.is-selected:hover,
.billingToggleButton.is-selected:focus-visible {
  border-color: var(--night) !important;
  background: var(--night) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(65, 160, 222, 0.22);
}

.billingSummaryBox {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.billingSummaryBox strong {
  color: var(--night);
}

.billingPaymentPanel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff5f5;
}

.billingPaymentPanel.is-paid {
  background: #effaf3;
  border-color: #cbeed6;
}

.billingPaymentPanel.is-open {
  background: #fff1f1;
  border-color: #f2c5c5;
}

.billingPaymentPanel div {
  display: grid;
  gap: 3px;
}

.billingPaymentPanel span {
  color: var(--muted);
  font-weight: 800;
}

.billingPaymentPanel strong {
  color: var(--night);
  font-size: 1.4rem;
}

.billingPaymentPanel small {
  color: var(--muted);
  font-weight: 800;
}

.billingPaymentBadge,
.billingPaidButton {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.billingPaymentBadge {
  display: inline-flex;
  align-items: center;
  background: #dff5e7;
  color: #14783f;
}

.billingPaymentBadge.is-open {
  background: #ffefe1;
  color: #b84b00;
}

.billingPaymentTerms {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  color: var(--muted);
  font-weight: 900;
}

.billingPaymentTerms input {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
  color: var(--night);
  font: inherit;
  font-weight: 800;
  padding: 0 12px;
}

.billingPaidButton {
  background: #c6281d;
  color: #ffffff;
  cursor: pointer;
}

.billingPaidButton:disabled {
  opacity: 0.55;
  cursor: wait;
}

.printArea {
  display: none;
}

.printDocument {
  color: var(--night);
  font-family: Arial, sans-serif;
}

.printHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.printLogo {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.printDocument h1 {
  margin: 0 0 6px;
  font-size: 30px;
}

.printDocument h2 {
  margin: 26px 0 10px;
  font-size: 18px;
}

.printDocument p {
  margin: 4px 0;
}

.printDocument table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
}

.printDocument th,
.printDocument td {
  border: 1px solid #d9e3ea;
  padding: 9px;
  text-align: left;
  font-size: 13px;
}

.printDocument th {
  background: #eef4f7;
}

.printMeta {
  margin-top: 8px;
  color: var(--muted);
}

.preparationPrintPage {
  min-height: 270mm;
}

.preparationPrintTop {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

.preparationPrintComponents {
  display: grid;
  gap: 12px;
}

.preparationPrintComponents h3 {
  margin: 10px 0 0;
  font-size: 14px;
}

.preparationPrintNotes {
  padding: 9px 10px;
  border: 1px solid #d9e3ea;
  background: #f8fbfe;
  font-size: 12px;
  line-height: 1.45;
  break-inside: avoid;
  page-break-inside: avoid;
}

.preparationPrintImages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.preparationPrintImages figure {
  margin: 0;
  break-inside: avoid;
  page-break-inside: avoid;
  break-before: page;
  page-break-before: always;
}

.preparationPrintImages img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #d9e3ea;
  display: block;
}

.printPageBreak {
  break-before: page;
  page-break-before: always;
}

.smartMeterBox,
.smartMeterWarning,
.smartMeterOk {
  border-radius: 8px;
}

.smartMeterBox {
  padding: 12px;
  background: #f8fbfe;
  border: 1px solid var(--line);
}

.smartMeterBox p {
  margin: 5px 0 0;
  color: var(--muted);
}

.smartMeterWarning,
.smartMeterOk {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  font-weight: 700;
}

.smartMeterWarning {
  color: #9b1c1c;
  background: #feecec;
}

.smartMeterOk {
  color: var(--paid);
  background: #eaf8ee;
}

.helpButton {
  width: 100%;
  background: var(--night);
}

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

.helpSteps article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfe;
}

.helpSteps strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.helpSteps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.emailHistoryList {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
}

.emailHistoryItem {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.emailHistoryItem span {
  color: var(--muted);
  font-size: 13px;
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
}

th,
td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

th {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
}

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

.tableSubtext {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.clickableRow,
.clickableReonicRow {
  cursor: pointer;
}

.clickableRow:hover,
.clickableEmployeeRow:hover,
.clickableCustomerRow:hover,
.clickableReonicRow:hover {
  background: #f5f9fc;
}

.status {
  display: inline-flex;
  min-width: 112px;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}

.status.offen {
  color: var(--open);
  background: #eaf4ff;
}

.status.in_bearbeitung {
  color: var(--work);
  background: #fff4dd;
}

.status.ausgezahlt {
  color: var(--paid);
  background: #eaf8ee;
}

.status.zur_auszahlung_bereit {
  color: #1f7a52;
  background: #eaf8ee;
}

.status.payout_requested {
  color: #806000;
  background: #fff4dd;
}

.status.reonicStatus {
  color: var(--night);
  background: #eef4f7;
}

.approvePayoutButton,
.projectDoneButton,
.resendOverviewButton,
.openReonicDetailButton,
.editEmployeeButton {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: var(--paid);
  cursor: pointer;
  font-weight: 700;
}

.approvePayoutButton:hover,
.projectDoneButton:hover,
.resendOverviewButton:hover,
.openReonicDetailButton:hover,
.editEmployeeButton:hover {
  background: #176642;
}

.resendOverviewButton,
.openReonicDetailButton,
.editEmployeeButton {
  background: var(--mid);
}

.resendOverviewButton:hover,
.openReonicDetailButton:hover,
.editEmployeeButton:hover {
  background: var(--night);
}

.empty {
  margin: 18px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.mutedText {
  color: var(--muted);
}

.noteText {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
}

.demoAccess {
  width: min(760px, 100%);
  padding: 14px 18px;
  color: #ffffff;
  background: rgba(20, 27, 77, 0.72);
  border-radius: 8px;
}

.demoAccess p {
  margin: 4px 0;
}

.hidden {
  display: none !important;
}

body.partnerAccountMode .employeeAccountField {
  display: none !important;
}

@media (max-width: 640px) {
  body {
    background-attachment: scroll;
  }

  .shell {
    width: min(1040px, calc(100% - 20px));
    padding-top: 28px;
    padding-bottom: 20px;
    align-content: start;
  }

  .panel {
    padding: 18px;
  }

  .brandLogo {
    width: min(260px, 76vw);
    margin-bottom: 18px;
  }

  .brand h1 {
    font-size: 34px;
  }

  .brand p {
    font-size: 17px;
  }

  .choiceGrid,
  .dashboardHead {
    grid-template-columns: 1fr;
    display: grid;
  }

  .advisorCard {
    width: 100%;
    align-items: flex-start;
    min-height: 0;
  }

  .employeePhotoButton {
    width: min(220px, 100%);
    height: auto;
  }

  .dashboardActions {
    justify-content: stretch;
  }

  body.partnerDashboardHome .dashboardHeadModern {
    grid-template-columns: 1fr;
  }

  .hamburgerMenuButton {
    top: 0;
    right: 0;
  }

  .hamburgerMenuPanel {
    top: 56px;
    right: 0;
  }

  .orderStatusRow {
    grid-template-columns: 1fr;
  }

  .roofTileForm {
    grid-template-columns: 1fr;
  }

  .calendarCheckGrid {
    grid-template-columns: 1fr;
  }

  .substructurePreviewGrid {
    grid-template-columns: 1fr;
  }

  .appointmentItem {
    grid-template-columns: 1fr;
  }

  .appointmentMetaGrid {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .appointmentItem b {
    text-align: left;
  }

  .dashboardActions button {
    width: 100%;
  }

  .loginLinks {
    display: grid;
    justify-content: stretch;
  }

  .formGrid {
    grid-template-columns: 1fr;
  }

  .profileEditor {
    grid-template-columns: 1fr;
  }

  #profileView .profileEditor {
    grid-template-columns: 1fr;
  }

  .formActions {
    grid-template-columns: 1fr;
  }

  .creditSummary {
    grid-template-columns: 1fr;
  }

  .adminSummary {
    grid-template-columns: 1fr;
  }

  .reviewBox {
    display: grid;
  }

  .reviewActions {
    justify-content: stretch;
  }

  .reviewModalActions {
    grid-template-columns: 1fr;
  }

  .reviewModal,
  .reonicChangeModal {
    padding: 18px;
  }

  .partnerAdminDetailHeader {
    grid-template-columns: 1fr;
  }

  .partnerAdminDetailLogo {
    width: 84px;
    height: 84px;
  }

  .reviewActions > * {
    width: 100%;
    justify-content: center;
  }

  .secondaryButton {
    width: 100%;
  }

  .bigInviteButton {
    min-height: 56px;
    padding: 12px 16px;
    white-space: normal;
  }

  .customerActionBox {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .customerActionBox strong {
    font-size: 22px;
  }

  .preparationNotesGrid {
    grid-template-columns: 1fr;
  }

  .partnerProjectCard {
    padding: 16px;
  }

  .partnerProjectsHeader {
    display: none;
  }

  .partnerProjectMain,
  .adminPartnerOrdersMain {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .partnerProjectField {
    gap: 6px;
  }

  .partnerProjectLabelInline {
    display: block;
  }

  .partnerAdminOverviewCard,
  body.adminPartnerCompact .partnerAdminDetailBox {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .partnerAdminOverviewPrimary {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .partnerAdminDetailLogo {
    width: 72px;
    height: 72px;
  }

  .partnerAdminOverviewProjects .partnerAdminOrdersList,
  .partnerAdminOrdersList {
    max-height: 220px;
  }

  .partnerProjectHoverPreview {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .partnerPriceRuleGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .partnerHomeActionGrid,
  .reonicChangeChecklist {
    grid-template-columns: 1fr;
  }

  .tableWrap {
    border: 0;
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  table {
    min-width: 0;
    background: transparent;
  }

  thead {
    display: none;
  }

  tbody {
    display: grid;
    gap: 12px;
  }

  tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
  }

  td {
    display: grid;
    grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  td:last-child {
    border-bottom: 0;
  }

  .status,
  .reviewStatus,
  .friendStatus {
    min-width: 0;
    width: fit-content;
  }
}

@media (max-width: 980px) {
  body.sidebarCollapsed .appLayout {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .partnerProjectsHeader {
    display: none;
  }

  .partnerProjectMain,
  .adminPartnerOrdersMain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
  }

  .partnerProjectLabelInline {
    display: block;
  }

  .partnerAdminOverviewCard {
    grid-template-columns: 1fr;
  }

  .partnerAdminOverviewProjects,
  .partnerAdminOverviewActions {
    width: 100%;
  }

  .partnerAdminOverviewActions {
    grid-template-columns: 1fr;
  }

  .partnerPriceRuleGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.dashboardMode .shell {
    width: 100%;
    padding: 8px 8px 18px;
  }

  .appLayout,
  body.sidebarCollapsed .appLayout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .appContent {
    gap: 12px;
  }

  .dashboardHeadModern,
  .panel,
  .partnerProjectsMapCard,
  .partnerAdminOverviewCard,
  .partnerAdminDetailBox,
  .partnerOrderDetailBox,
  .reonicDetailBox,
  .customerActionBox {
    padding: 16px;
  }

  .partnerProjectsMapHead,
  .partnerProjectsMapFilters {
    align-items: stretch;
  }

  .partnerProjectsMapFilters,
  .partnerProjectsMapFilters label {
    width: 100%;
  }

  .partnerProjectsMapFilters select,
  .partnerProjectsMapFilters button,
  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .partnerProjectsMapCanvas {
    min-height: 360px;
  }

  .partnerOrderMapPopup .leaflet-popup-content {
    min-width: 220px;
    max-width: calc(100vw - 56px);
  }

  .partnerProjectHoverGrid {
    grid-template-columns: 1fr;
  }

  .partnerProjectMain,
  .adminPartnerOrdersMain,
  .accountingInvoiceCard {
    grid-template-columns: 1fr;
  }

  .partnerOrderDetailMeta,
  .partnerProjectsTitleRow {
    flex-wrap: wrap;
  }

  .partnerOrderCostEstimateRow,
  .partnerOrderDetailActions,
  .formActions {
    grid-template-columns: 1fr;
  }

  .floatingProjectHoverPreview {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .brand h1,
  .welcomeTitle,
  .partnerAdminOverviewHead h3,
  .partnerProjectsTitleText {
    font-size: 30px;
  }

  .partnerProjectCard,
  .partnerAdminOverviewCard {
    padding: 14px;
  }

  .mobileSidebarButton,
  body.sidebarCollapsed .sidebarArrowButton {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body > *:not(.printArea) {
    display: none !important;
  }

  .printArea {
    display: block;
  }

  body {
    background: #ffffff;
  }

  .printDocument {
    font-size: 12px;
  }

  .printHeader {
    margin-bottom: 12px;
  }

  .printLogo {
    width: 82px;
    height: 82px;
  }

  .printDocument h1 {
    font-size: 24px;
  }

  .printDocument h2 {
    margin: 14px 0 6px;
    font-size: 15px;
  }

  .printDocument th,
  .printDocument td {
    padding: 5px 6px;
    font-size: 11px;
  }

  .preparationPrintPage {
    min-height: auto;
    break-after: page;
    page-break-after: always;
  }

  .preparationPrintPage:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  .preparationPrintTop,
  .preparationPrintComponents,
  .preparationPrintNotes,
  .preparationPrintImages figure {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .preparationPrintImages {
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .preparationPrintImages img {
    max-height: 170mm;
  }
}