@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

:root {
  color-scheme: dark;
  --ap-night: #141B4D;
  --ap-light: #489FDF;
  --ap-white: #FFFFFF;
  --ap-bg: #020914;
  --ap-panel: rgba(8, 24, 51, 0.74);
  --ap-card: rgba(9, 28, 61, 0.68);
  --ap-soft: rgba(255, 255, 255, 0.1);
  --ap-border: rgba(72, 159, 223, 0.24);
  --ap-muted: rgba(255, 255, 255, 0.72);
  --ap-glow: 0 0 36px rgba(72, 159, 223, 0.3);
  --ap-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --ap-radius-xl: 28px;
  --ap-radius-lg: 24px;
  --ap-radius-md: 18px;
  --ap-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: var(--ap-white);
  --muted: var(--ap-muted);
  --line: var(--ap-border);
  --surface: var(--ap-panel);
  --field: rgba(255, 255, 255, 0.08);
  --accent: var(--ap-light);
  --accent-strong: var(--ap-light);
  --night: var(--ap-night);
  --sky: var(--ap-light);
  --mid: var(--ap-light);
  --warning: var(--ap-light);
  --danger: var(--ap-light);
  --paid: var(--ap-light);
  --work: var(--ap-light);
  --open: var(--ap-light);
}

/* Partner portal contrast polish */
body.portalPartner #partnerOrderView.panel,
body.portalPartner #partnerOrderForm.recommendationForm,
body.portalPartner #partnerProjectsPanel.reviewBox,
body.partnerDashboardHome #partnerProjectsPanel.reviewBox,
body.partnerDashboardHome .advisorCard,
body.partnerDashboardHome .partnerHomeActionCard {
  color: #ffffff;
  border: 1px solid rgba(72, 159, 223, .26);
  background:
    linear-gradient(145deg, rgba(12, 24, 58, .9), rgba(6, 16, 42, .78)),
    rgba(255, 255, 255, .05);
  box-shadow: 0 28px 86px rgba(3, 9, 28, .32), inset 0 1px 0 rgba(255, 255, 255, .13);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

body.portalPartner #partnerOrderView.panel {
  padding: clamp(24px, 3vw, 42px);
}

body.portalPartner #partnerOrderView h2,
body.portalPartner #partnerOrderForm label,
body.portalPartner #partnerOrderForm small,
body.portalPartner #partnerOrderForm .mutedText,
body.portalPartner #partnerProjectsPanel h3,
body.portalPartner #partnerProjectsPanel p,
body.partnerDashboardHome .advisorCard span,
body.partnerDashboardHome .advisorCard strong,
body.partnerDashboardHome .advisorCard small,
body.partnerDashboardHome .partnerHomeActionCard strong,
body.partnerDashboardHome .partnerHomeActionCard small {
  color: rgba(255, 255, 255, .9);
}

body.portalPartner #partnerOrderView > .mutedText {
  color: rgba(255, 255, 255, .74);
}

body.portalPartner #partnerOrderForm input,
body.portalPartner #partnerOrderForm select,
body.portalPartner #partnerOrderForm textarea {
  border-color: rgba(72, 159, 223, .34);
  background: rgba(2, 12, 32, .72);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px rgba(3, 9, 28, .16);
}

body.portalPartner #partnerOrderForm input:focus,
body.portalPartner #partnerOrderForm select:focus,
body.portalPartner #partnerOrderForm textarea:focus {
  border-color: rgba(72, 159, 223, .84);
  background: rgba(6, 18, 46, .88);
  box-shadow: 0 0 0 4px rgba(72, 159, 223, .18), inset 0 1px 0 rgba(255, 255, 255, .14);
}

body.portalPartner #partnerOrderForm input[type="file"] {
  min-height: 58px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, .8);
}

body.portalPartner #partnerOrderForm input[type="file"]::file-selector-button {
  min-height: 40px;
  border-color: rgba(72, 159, 223, .42);
  background: linear-gradient(135deg, rgba(72, 159, 223, .98), rgba(72, 159, 223, .78));
  color: #ffffff;
}

body.portalPartner #partnerOrderForm select option {
  color: #141B4D;
  background: #ffffff;
}

body.portalPartner #partnerOrderForm .formActions select {
  min-width: min(420px, 100%);
}

body.partnerDashboardHome .dashboardHeadModern {
  background:
    linear-gradient(90deg, rgba(2, 9, 20, .88), rgba(20, 27, 77, .52) 56%, rgba(2, 9, 20, .52)),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center / cover;
}

body.partnerDashboardHome .advisorCard {
  gap: 18px;
}

body.partnerDashboardHome .advisorCard img {
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

body.partnerDashboardHome .employeePhotoButton {
  border: 1px solid rgba(72, 159, 223, .28);
  background: rgba(4, 14, 38, .62);
  box-shadow: 0 24px 60px rgba(3, 9, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.partnerDashboardHome #partnerProjectsPanel.reviewBox {
  padding: clamp(22px, 2.6vw, 34px);
}

body.partnerDashboardHome .partnerHomeActionGrid {
  gap: 18px;
}

body.partnerDashboardHome .partnerHomeActionCard {
  min-height: 150px;
  padding: 22px;
  border-radius: 18px;
}

body.partnerDashboardHome .partnerHomeActionCard:hover {
  border-color: rgba(72, 159, 223, .72);
  background:
    linear-gradient(145deg, rgba(72, 159, 223, .28), rgba(6, 16, 42, .84)),
    rgba(255, 255, 255, .07);
  box-shadow: 0 30px 80px rgba(72, 159, 223, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
}

body.partnerDashboardHome .partnerHomeActionCard span {
  color: #489FDF;
}

@media (max-width: 980px) {
  body.partnerDashboardHome .dashboardHeadModern {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "photo"
      "advisor";
  }

  body.partnerDashboardHome .employeePhotoButton,
  body.partnerDashboardHome .advisorCard {
    width: 100%;
    height: auto;
  }

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--ap-font);
  color: var(--ink);
  background:
    radial-gradient(circle at 74% 12%, rgba(72, 159, 223, 0.18), transparent 34%),
    linear-gradient(120deg, rgba(2, 9, 20, 0.96), rgba(20, 27, 77, 0.82) 54%, rgba(2, 9, 20, 0.96)),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body.dashboardMode {
  background:
    radial-gradient(circle at 80% 8%, rgba(72, 159, 223, 0.16), transparent 32%),
    linear-gradient(125deg, rgba(2, 9, 20, 0.95), rgba(20, 27, 77, 0.84) 48%, rgba(2, 9, 20, 0.95)),
    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: 999px;
  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;
  justify-self: center;
  width: min(920px, 100%);
  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: 0 auto 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%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.sidebarSectionChevron {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255, 255, 255, 0.72);
  border-bottom: 2px solid rgba(255, 255, 255, 0.72);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}

.sidebarSection.isExpanded .sidebarSectionChevron {
  transform: rotate(45deg);
}

.sidebarSectionItems {
  display: grid;
  gap: 2px;
  padding-left: 10px;
}

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

.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(720px, calc(100vw - 32px));
}

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

body.portalHub .shell {
  width: min(1120px, calc(100% - 32px));
}

body.portalHub #choiceView {
  width: min(860px, calc(100vw - 32px));
  padding: 24px;
}

body.portalHub #choiceView::before {
  content: "";
  display: block;
  min-height: 190px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(20, 31, 77, 0.88), rgba(46, 149, 214, 0.2)),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center / cover;
}

body.portalHub .choiceGrid {
  --choice-count: 2;
}

.portalHubButton {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: left;
  padding: 20px 22px;
}

.portalHubButton span {
  font-size: 22px;
  font-weight: 800;
}

.portalHubButton small {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.35;
}

.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;
}

/* Premium customer detail hero */
#reonicOrderDetailPanel.reonicDetailPanel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(920px, calc(100vh - 42px));
  padding: clamp(28px, 3.6vw, 58px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 76% 16%, rgba(72, 159, 223, .26), transparent 32%),
    linear-gradient(112deg, rgba(5, 10, 32, .96) 0%, rgba(20, 27, 77, .88) 37%, rgba(20, 27, 77, .48) 66%, rgba(5, 10, 32, .82) 100%),
    url("/assets/premium-customer-hero.png") center center / cover no-repeat;
  box-shadow: 0 38px 110px rgba(3, 8, 26, .48), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#reonicOrderDetailPanel.reonicDetailPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, .18), transparent 30%),
    linear-gradient(90deg, rgba(6, 12, 36, .72), rgba(6, 12, 36, .16) 56%, rgba(6, 12, 36, .74));
  pointer-events: none;
}

#reonicOrderDetailPanel.reonicDetailPanel > * {
  position: relative;
  z-index: 1;
}

#reonicOrderDetailPanel .formHead {
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(24px, 4vw, 56px);
}

#reonicOrderDetailPanel #reonicDetailTitle {
  max-width: min(820px, 100%);
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 4.4vw, 78px);
  line-height: .95;
  letter-spacing: 0;
  text-shadow: 0 18px 46px rgba(0, 0, 0, .48);
}

#reonicOrderDetailPanel #closeReonicDetailButton {
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(72, 159, 223, .92);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(72, 159, 223, .28);
}

#reonicOrderDetailPanel #closeReonicDetailButton:hover {
  background: #ffffff;
  color: var(--ap-night);
}

#reonicOrderDetailPanel #reonicDetailMeta {
  max-width: min(680px, 100%);
  margin: 0 0 clamp(30px, 5vw, 74px);
  color: rgba(255, 255, 255, .86);
}

#reonicOrderDetailPanel .reonicCustomerMeta {
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  background: rgba(8, 15, 43, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(16px);
}

#reonicOrderDetailPanel .reonicCustomerMeta span {
  color: rgba(255, 255, 255, .7);
}

#reonicOrderDetailPanel .reonicCustomerMeta strong,
#reonicOrderDetailPanel .reonicCustomerMeta a {
  color: #ffffff;
  font-size: clamp(18px, 1.8vw, 28px);
  text-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

#reonicOrderDetailPanel .reonicDetailContent {
  gap: 18px;
}

#reonicOrderDetailPanel .reonicOptionCard,
#reonicOrderDetailPanel .preparationUploadCard,
#reonicOrderDetailPanel .deliveryDateBox,
#reonicOrderDetailPanel .billingCard,
#reonicOrderDetailPanel .customerActionBox,
#reonicOrderDetailPanel .noticeBox,
#reonicOrderDetailPanel .chatBox,
#reonicOrderDetailPanel .partnerOrderCostEstimate,
#reonicOrderDetailPanel .substructureBox,
#reonicOrderDetailPanel .reonicDocumentLink,
#reonicOrderDetailPanel .calendarCheckItem {
  border-color: rgba(255, 255, 255, .17);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  color: #ffffff;
  box-shadow: 0 24px 70px rgba(3, 9, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(20px);
}

#reonicOrderDetailPanel .preparationDropZone,
#reonicOrderDetailPanel .componentGroup li,
#reonicOrderDetailPanel .substructureSummaryCard,
#reonicOrderDetailPanel .preparationImageCard {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
}

#reonicOrderDetailPanel h3,
#reonicOrderDetailPanel h4,
#reonicOrderDetailPanel label,
#reonicOrderDetailPanel strong,
#reonicOrderDetailPanel .preparationDropZone strong,
#reonicOrderDetailPanel .componentGroup li span,
#reonicOrderDetailPanel .reonicOptionHead span,
#reonicOrderDetailPanel .deliveryDateBox label,
#reonicOrderDetailPanel .calendarCheckItem span,
#reonicOrderDetailPanel .mutedText,
#reonicOrderDetailPanel p {
  color: rgba(255, 255, 255, .88);
}

#reonicOrderDetailPanel .reonicOptionHead strong,
#reonicOrderDetailPanel .partnerOrderCostEstimateTotal,
#reonicOrderDetailPanel .costTotal {
  color: #ffffff;
}

#reonicOrderDetailPanel input,
#reonicOrderDetailPanel select,
#reonicOrderDetailPanel textarea {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
}

#reonicOrderDetailPanel input::placeholder,
#reonicOrderDetailPanel textarea::placeholder {
  color: rgba(255, 255, 255, .55);
}

/* Reonic customer detail - final premium layout */
#reonicOrderDetailPanel.reonicDetailPanel {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: min(1120px, calc(100vh - 28px));
  padding: clamp(30px, 3.2vw, 52px);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(2, 9, 28, .96) 0%, rgba(4, 13, 38, .88) 27%, rgba(4, 13, 38, .42) 53%, rgba(4, 13, 38, .08) 82%),
    linear-gradient(180deg, rgba(5, 12, 34, .14) 0%, rgba(5, 12, 34, .28) 45%, rgba(5, 12, 34, .9) 100%),
    url("/assets/premium-customer-hero.png") 68% top / cover no-repeat;
}

#reonicOrderDetailPanel.reonicDetailPanel::before {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 10%),
    radial-gradient(circle at 20% 8%, rgba(72, 159, 223, .18), transparent 34%);
}

#reonicOrderDetailPanel .formHead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  gap: clamp(26px, 4vw, 52px);
  max-width: 620px;
  margin: 0;
}

#reonicOrderDetailPanel #closeReonicDetailButton {
  order: -1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(190, 221, 255, .94);
  font-size: 18px;
  font-weight: 800;
}

#reonicOrderDetailPanel #closeReonicDetailButton::before {
  content: "←";
  margin-right: 10px;
}

#reonicOrderDetailPanel #closeReonicDetailButton:hover {
  background: transparent;
  color: #ffffff;
  transform: translateX(-2px);
}

#reonicOrderDetailPanel #reonicDetailTitle {
  max-width: 640px;
  font-size: clamp(42px, 4.3vw, 72px);
  line-height: 1.03;
}

#reonicOrderDetailPanel #reonicDetailMeta {
  max-width: 620px;
  margin: clamp(22px, 2.6vw, 34px) 0 clamp(28px, 3vw, 42px);
}

#reonicOrderDetailPanel .reonicCustomerMeta {
  display: grid;
  gap: 19px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#reonicOrderDetailPanel .reonicMetaItem {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 0;
}

#reonicOrderDetailPanel .reonicMetaIcon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(232, 244, 255, .86);
  border-radius: 9px;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

#reonicOrderDetailPanel .reonicMetaIcon::before {
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

#reonicOrderDetailPanel .reonicMetaIcon-pin {
  border-radius: 999px 999px 999px 4px;
  transform: rotate(-45deg);
}

#reonicOrderDetailPanel .reonicMetaIcon-pin::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ffffff;
}

#reonicOrderDetailPanel .reonicMetaIcon-mail::before {
  content: "✉";
}

#reonicOrderDetailPanel .reonicMetaIcon-phone::before {
  content: "☎";
}

#reonicOrderDetailPanel .reonicMetaIcon-status {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: #489FDF;
  box-shadow: 0 0 0 7px rgba(72, 159, 223, .18);
  margin-left: 9px;
}

#reonicOrderDetailPanel .reonicMetaIcon-status::before {
  content: "";
}

#reonicOrderDetailPanel .reonicCustomerMeta strong,
#reonicOrderDetailPanel .reonicCustomerMeta a {
  color: #ffffff;
  font-size: clamp(18px, 1.45vw, 26px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.22;
  text-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

#reonicOrderDetailPanel .reonicMetaStatus {
  display: inline-grid;
  grid-template-columns: 18px auto;
  justify-self: start;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}

#reonicOrderDetailPanel .reonicMetaStatus strong {
  font-size: clamp(18px, 1.35vw, 24px);
}

#reonicOrderDetailPanel .reonicDetailContent {
  margin-top: clamp(8px, 2vw, 24px);
  gap: clamp(20px, 2vw, 28px);
}

#reonicOrderDetailPanel .calendarCheckCard,
#reonicOrderDetailPanel .preparationUploadCard {
  max-width: none;
  border-radius: 18px;
  background: rgba(1, 12, 34, .72);
  border: 1px solid rgba(101, 169, 226, .24);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px) saturate(1.1);
}

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

#reonicOrderDetailPanel .calendarCheckItem {
  position: relative;
  min-height: 150px;
  padding: 28px 112px 28px 32px;
  border-radius: 16px;
  background: rgba(0, 18, 46, .78);
  border-color: rgba(72, 159, 223, .2);
}

#reonicOrderDetailPanel .calendarCheckItem::after {
  content: "▣";
  position: absolute;
  right: 28px;
  top: 28px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(72, 159, 223, .24);
  border: 1px solid rgba(72, 159, 223, .44);
  color: #ffffff;
  font-size: 28px;
  box-shadow: 0 14px 34px rgba(72, 159, 223, .22);
}

#reonicOrderDetailPanel .preparationUploadCard {
  padding: clamp(24px, 2.2vw, 36px);
}

#reonicOrderDetailPanel .preparationDropZone {
  min-height: 116px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  padding: 22px 28px;
  border-radius: 14px;
  border: 1px dashed rgba(72, 159, 223, .58);
  background: rgba(0, 22, 58, .62);
}

.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;
}

.reonicDocumentCard {
  gap: 14px;
}

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

.reonicDocumentLink {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  text-decoration: none;
}

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

.reonicDocumentBadge {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.reonicDocumentLink strong {
  overflow-wrap: anywhere;
}

.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;
  }

  body.portalHub #choiceView::before {
    min-height: 150px;
  }

  .portalHubButton {
    min-height: 92px;
  }

  .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;
  }
}

/* Premium Autarkieprofis OS visual layer
   Pure presentation layer: keeps existing markup, state and workflows intact. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 9, 20, 0.72), rgba(20, 27, 77, 0.28) 44%, rgba(2, 9, 20, 0.74)),
    radial-gradient(circle at 18% 16%, rgba(72, 159, 223, 0.16), transparent 28%),
    radial-gradient(circle at 84% 74%, rgba(72, 159, 223, 0.12), transparent 30%);
}

body,
.shell,
.appContent {
  letter-spacing: 0;
}

.panel,
.authOverlayPanel,
.dashboardHeadModern,
.partnerSubmitModalCard,
.partnerAdminOverviewCard,
.partnerAdminDetailBox,
.partnerOrderDetailBox,
.partnerProjectsMapCard,
.partnerHomeHero,
.partnerHomeActionCard,
.partnerProjectCard,
.partnerProjectDetailCard,
.reonicDetailBox,
.customerActionBox,
.noticeBox,
.emailAutomationCard,
.tableWrap,
.modal,
.mapContainer,
.billingPanel,
.accountingCard,
.settingsCard {
  color: var(--ap-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ap-radius-lg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.06)),
    linear-gradient(180deg, rgba(8, 24, 51, 0.82), rgba(9, 28, 61, 0.66));
  box-shadow: var(--ap-shadow);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}

.panel {
  width: min(940px, 100%);
}

.appLayout {
  gap: 26px;
}

.appSidebar {
  top: 18px;
  padding: 22px;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ap-radius-lg);
  background:
    linear-gradient(180deg, rgba(20, 27, 77, 0.76), rgba(2, 9, 20, 0.72)),
    linear-gradient(140deg, rgba(72, 159, 223, 0.16), transparent 44%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(1.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
}

.sidebarNav {
  gap: 8px;
}

.sidebarSectionTitle,
.eyebrow,
.step {
  color: rgba(255, 255, 255, 0.86);
  letter-spacing: 0;
}

.sidebarNavButton,
.sidebarFooterButton,
.linkButton {
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.sidebarNavButton:hover,
.sidebarFooterButton:hover,
.linkButton:hover {
  color: var(--ap-white);
  background: rgba(72, 159, 223, 0.16);
  box-shadow: var(--ap-glow);
  transform: translateY(-1px);
}

.sidebarTop,
.sidebarNav {
  border-color: rgba(72, 159, 223, 0.22);
}

.sidebarNotificationButton,
.sidebarCollapseButton,
.hamburgerMenuButton,
.mobileSidebarButton {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  color: var(--ap-white);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.sidebarNotificationButton:hover,
.sidebarCollapseButton:hover,
.hamburgerMenuButton:hover,
.mobileSidebarButton:hover {
  background: rgba(72, 159, 223, 0.2);
  box-shadow: var(--ap-glow);
  transform: translateY(-1px);
}

.hamburgerMenuButton span,
.mobileSidebarButton span {
  background: var(--ap-white);
}

.notificationPanel,
.projectHoverCard,
.mapProjectTooltip {
  color: var(--ap-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(8, 24, 51, 0.9);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.dashboardHeadModern {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: grid;
  align-content: end;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--ap-radius-xl);
  background:
    linear-gradient(90deg, rgba(2, 9, 20, 0.86), rgba(20, 27, 77, 0.52) 58%, rgba(2, 9, 20, 0.5)),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center/cover;
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.46);
}

.dashboardHeadModern::after {
  content: "";
  position: absolute;
  left: clamp(26px, 4vw, 56px);
  right: clamp(26px, 4vw, 56px);
  bottom: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(72, 159, 223, 0.58), transparent);
  opacity: 0.85;
}

.dashboardHeadModern > * {
  position: relative;
  z-index: 1;
}

.dashboardHeadModern h1,
.dashboardHeadModern h2,
.brand h1 {
  color: var(--ap-white);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.brand {
  min-height: 54vh;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(48px, 7vw, 96px) 20px 28px;
}

.brandLogo {
  filter: drop-shadow(0 18px 42px rgba(0, 0, 0, 0.36));
}

#choiceView,
#loginView,
#resetPasswordView,
#forcePasswordView {
  margin: 0 auto;
}

.choiceGrid {
  gap: 18px;
}

button:not([class]),
.choiceButton,
.primaryButton,
.secondaryButton,
.dangerButton,
.approvePayoutButton,
.projectDoneButton,
.resendOverviewButton,
.openReonicDetailButton,
.editEmployeeButton,
.partnerSubmitModalActions button,
.partnerSubmitModalActions .secondaryButton {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--ap-white);
  background:
    linear-gradient(135deg, rgba(72, 159, 223, 0.96), rgba(72, 159, 223, 0.72));
  box-shadow: 0 14px 36px rgba(72, 159, 223, 0.24);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

button:not([class]):hover,
.choiceButton:hover,
.primaryButton:hover,
.secondaryButton:hover,
.dangerButton:hover,
.approvePayoutButton:hover,
.projectDoneButton:hover,
.resendOverviewButton:hover,
.openReonicDetailButton:hover,
.editEmployeeButton:hover,
.partnerSubmitModalActions button:hover {
  background:
    linear-gradient(135deg, rgba(72, 159, 223, 1), rgba(255, 255, 255, 0.18));
  border-color: rgba(72, 159, 223, 0.64);
  box-shadow: var(--ap-glow), 0 18px 46px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

button:disabled,
button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

input,
select,
textarea {
  color: var(--ap-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(72, 159, 223, 0.72);
  box-shadow: 0 0 0 4px rgba(72, 159, 223, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

label,
.muted,
.helperText,
.dashboardText,
.projectMeta,
.partnerProjectMeta,
.formHint,
.tableHint {
  color: rgba(255, 255, 255, 0.72);
}

table,
.dataTable,
.partnerOrdersGrid,
.projectList,
.cardGrid {
  color: var(--ap-white);
}

th,
.projectColumnHeader,
.partnerOrdersHeader {
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0;
}

tr,
.clickableRow,
.clickableEmployeeRow,
.clickableCustomerRow,
.clickableReonicRow,
.partnerOrderRow,
.partnerProjectRow,
.projectCard,
.statCard,
.kpiCard,
.fileCard,
.imageCard,
.assetCard {
  border-color: rgba(72, 159, 223, 0.18);
  background: rgba(255, 255, 255, 0.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.clickableRow:hover,
.clickableEmployeeRow:hover,
.clickableCustomerRow:hover,
.clickableReonicRow:hover,
.partnerOrderRow:hover,
.partnerProjectRow:hover,
.projectCard:hover,
.statCard:hover,
.kpiCard:hover,
.fileCard:hover,
.imageCard:hover,
.assetCard:hover {
  background: rgba(72, 159, 223, 0.12);
  border-color: rgba(72, 159, 223, 0.44);
  box-shadow: var(--ap-glow);
  transform: translateY(-2px);
}

.status,
.status.offen,
.status.in_bearbeitung,
.status.ausgezahlt,
.status.zur_auszahlung_bereit,
.status.payout_requested,
.status.reonicStatus,
.projectStatusBadge,
.partnerStatusBadge,
.tag,
.badge {
  min-width: 112px;
  border: 1px solid rgba(72, 159, 223, 0.28);
  border-radius: 999px;
  color: var(--ap-white);
  background: rgba(72, 159, 223, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.toast {
  border-radius: 18px;
  background: rgba(8, 24, 51, 0.92);
  color: var(--ap-white);
  border: 1px solid rgba(72, 159, 223, 0.28);
  box-shadow: var(--ap-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.globalLoadingIndicator,
.partnerSubmitModalCard {
  border-radius: 26px;
}

@keyframes apFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel,
.dashboardHeadModern,
.partnerAdminOverviewCard,
.partnerOrderDetailBox,
.reonicDetailBox,
.tableWrap {
  animation: apFadeUp 360ms ease both;
}

@media (max-width: 780px) {
  .panel,
  .authOverlayPanel,
  .dashboardHeadModern {
    border-radius: 22px;
  }

  .dashboardHeadModern {
    min-height: 230px;
    padding: 26px 20px;
  }

  .brand {
    min-height: 48vh;
    padding-top: 78px;
  }
}

/* Premium Autarkieprofis OS visual layer - pass 2
   Pure visual polish: deeper cinematic glass, sharper brand rhythm, no workflow changes. */
:root {
  --ap-premium-glass: linear-gradient(145deg, rgba(10, 20, 54, 0.82), rgba(20, 27, 77, 0.58));
  --ap-premium-glass-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055));
  --ap-premium-line: rgba(255, 255, 255, 0.18);
  --ap-premium-blue-line: rgba(72, 159, 223, 0.38);
  --ap-premium-glow: 0 0 42px rgba(72, 159, 223, 0.22);
  --ap-premium-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  --ap-premium-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.appShell,
.mainContent,
.shell {
  isolation: isolate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 74% 10%, rgba(72, 159, 223, 0.16), transparent 28%),
    radial-gradient(circle at 28% 84%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(120deg, rgba(20, 27, 77, 0.18), transparent 42%, rgba(72, 159, 223, 0.08));
  mix-blend-mode: screen;
}

.panel,
.authOverlayPanel,
.modal,
.dashboardHeadModern,
.partnerAdminOverviewCard,
.partnerOrderDetailBox,
.reonicDetailBox,
.tableWrap,
.partnerCostPreview,
.partnerSummaryCard,
.partnerProjectCard,
.accountingCard,
.emailAutomationCard {
  border-color: var(--ap-premium-line);
  box-shadow:
    var(--ap-premium-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(72, 159, 223, 0.1);
  backdrop-filter: blur(30px) saturate(132%);
  -webkit-backdrop-filter: blur(30px) saturate(132%);
}

.panel:hover,
.partnerAdminOverviewCard:hover,
.partnerOrderDetailBox:hover,
.partnerProjectCard:hover,
.reonicDetailBox:hover {
  border-color: var(--ap-premium-blue-line);
  box-shadow:
    0 34px 104px rgba(0, 0, 0, 0.38),
    var(--ap-premium-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dashboardHeadModern {
  overflow: hidden;
}

.dashboardHeadModern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.22), transparent 22%),
    linear-gradient(100deg, rgba(20, 27, 77, 0.94) 0%, rgba(20, 27, 77, 0.6) 42%, rgba(72, 159, 223, 0.14) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%);
}

.dashboardHeadModern > * {
  position: relative;
  z-index: 1;
}

.dashboardHeadModern h1,
.dashboardHeadModern h2,
.brand h1 {
  letter-spacing: 0;
  text-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
}

.dashboardHeadModern .meta,
.dashboardHeadModern p,
.muted,
.smallMuted {
  color: rgba(255, 255, 255, 0.74);
}

.appSidebar {
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px 0 0 rgba(72, 159, 223, 0.12);
}

.sidebarDivider {
  background: linear-gradient(90deg, transparent, rgba(72, 159, 223, 0.42), transparent);
}

.sidebarNavButton,
.sidebarSectionTitleButton,
.sidebarToggleButton,
.sidebarBellButton,
.miniMenuButton {
  transition:
    transform 180ms var(--ap-premium-ease),
    border-color 180ms var(--ap-premium-ease),
    background 180ms var(--ap-premium-ease),
    box-shadow 180ms var(--ap-premium-ease);
}

.sidebarNavButton:hover,
.sidebarSectionTitleButton:hover,
.sidebarToggleButton:hover,
.sidebarBellButton:hover,
.miniMenuButton:hover {
  transform: translateY(-1px);
  border-color: var(--ap-light);
  box-shadow: 0 12px 32px rgba(72, 159, 223, 0.2);
}

.sidebarNotificationPanel,
.notificationPanel {
  color: var(--ap-white);
  background:
    linear-gradient(145deg, rgba(9, 17, 46, 0.96), rgba(20, 27, 77, 0.92)),
    var(--ap-premium-glass);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42), 0 0 32px rgba(72, 159, 223, 0.18);
  backdrop-filter: blur(28px) saturate(132%);
  -webkit-backdrop-filter: blur(28px) saturate(132%);
}

.notificationItem,
.notificationEntry {
  color: var(--ap-white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.notificationItem.unread,
.notificationEntry.unread {
  border-color: rgba(72, 159, 223, 0.7);
  background: rgba(72, 159, 223, 0.18);
  box-shadow: 0 14px 34px rgba(72, 159, 223, 0.18);
}

.choiceButton,
.primaryButton,
.secondaryButton,
.ghostButton,
.dangerButton,
.blueButton,
.formActions button,
.partnerSubmitModalActions button,
.partnerOrderDetailActions button,
button:not([class]) {
  min-height: 52px;
  border-radius: 999px;
  transition:
    transform 180ms var(--ap-premium-ease),
    background 180ms var(--ap-premium-ease),
    color 180ms var(--ap-premium-ease),
    box-shadow 180ms var(--ap-premium-ease);
}

.choiceButton:hover,
.primaryButton:hover,
.secondaryButton:hover,
.ghostButton:hover,
.blueButton:hover,
.formActions button:hover,
.partnerSubmitModalActions button:hover,
.partnerOrderDetailActions button:hover,
button:not([class]):hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(72, 159, 223, 0.28);
}

.secondaryButton,
.ghostButton,
.partnerSubmitModalActions .secondaryButton,
button:not([class]) {
  color: var(--ap-white);
  border: 1px solid rgba(72, 159, 223, 0.32);
  background: rgba(72, 159, 223, 0.22);
}

.secondaryButton:hover,
.ghostButton:hover,
.partnerSubmitModalActions .secondaryButton:hover,
button:not([class]):hover {
  background: var(--ap-night);
  border-color: var(--ap-light);
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  color: var(--ap-white);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ap-light), #66b9f6);
  font-family: inherit;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(72, 159, 223, 0.26);
}

input[type="file"]::file-selector-button:hover {
  background: var(--ap-night);
}

input,
select,
textarea {
  transition:
    border-color 160ms var(--ap-premium-ease),
    box-shadow 160ms var(--ap-premium-ease),
    background 160ms var(--ap-premium-ease);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(72, 159, 223, 0.82);
  box-shadow: 0 0 0 4px rgba(72, 159, 223, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

select option {
  color: var(--ap-night);
  background: var(--ap-white);
}

.tableWrap thead,
.partnerProjectsTable thead,
.reonicTable thead {
  color: rgba(255, 255, 255, 0.72);
}

.tableWrap tbody tr,
.partnerProjectsTable tbody tr,
.reonicTable tbody tr {
  transition:
    transform 180ms var(--ap-premium-ease),
    border-color 180ms var(--ap-premium-ease),
    background 180ms var(--ap-premium-ease),
    box-shadow 180ms var(--ap-premium-ease);
}

.tableWrap tbody tr:hover,
.partnerProjectsTable tbody tr:hover,
.reonicTable tbody tr:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 159, 223, 0.45);
  background: rgba(72, 159, 223, 0.13);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.modalCloseButton,
.partnerSubmitModalClose {
  color: var(--ap-white);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(20, 27, 77, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.modalCloseButton:hover,
.partnerSubmitModalClose:hover {
  color: var(--ap-white);
  background: var(--ap-light);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  border: 2px solid rgba(20, 27, 77, 0.72);
  border-radius: 999px;
  background: rgba(72, 159, 223, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sidebar and login brand seal refinements */
.brandLogo {
  width: clamp(112px, 13vw, 176px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: clamp(22px, 3vw, 34px);
}

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

.sidebarBrandTop {
  grid-column: 1;
  grid-row: 1;
  width: 118px;
  height: 46px;
  display: grid;
  place-items: center;
}

.sidebarBrandTop img {
  width: 96px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.sidebarNotificationWrap {
  grid-column: 3;
  grid-row: 1;
}

.sidebarControls {
  grid-column: 4;
  grid-row: 1;
}

.sidebarInlineLogoutButton {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 8px;
}

.sidebarInlineProfileButton {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: -2px;
}

body.sidebarCollapsed .sidebarBrandTop {
  display: none;
}

/* Premium Autarkieprofis OS visual layer - pass 3 */
:root {
  --ap-premium-ring: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 28px 90px rgba(3, 9, 28, 0.32);
  --ap-premium-glow: 0 18px 48px rgba(72, 159, 223, 0.2);
}

.appContent {
  gap: clamp(18px, 2.4vw, 30px);
}

.panel:not(#dashboardView),
.authOverlayPanel,
.dashboardHeadModern,
.tableWrap,
.partnerProjectListPanel,
.projectCard,
.partnerAdminOverviewCard,
.partnerProjectCard,
.statCard,
.noticeBox,
.loginForm,
.recommendationForm {
  position: relative;
  overflow: hidden;
}

.panel:not(#dashboardView)::before,
.authOverlayPanel::before,
.dashboardHeadModern::before,
.tableWrap::before,
.partnerProjectListPanel::before,
.projectCard::before,
.partnerAdminOverviewCard::before,
.partnerProjectCard::before,
.statCard::before,
.noticeBox::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(72, 159, 223, 0.68), rgba(255, 255, 255, 0.44), transparent);
  opacity: 0.78;
}

.appSidebar {
  border-radius: 28px;
  box-shadow: var(--ap-premium-ring), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.sidebarNotificationButton,
.sidebarToggleButton,
.sidebarHamburgerButton {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.sidebarNotificationButton:hover,
.sidebarToggleButton:hover,
.sidebarHamburgerButton:hover {
  transform: translateY(-1px);
  border-color: rgba(72, 159, 223, 0.46);
  background: rgba(72, 159, 223, 0.16);
  box-shadow: var(--ap-premium-glow), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.sidebarNavButton,
.sidebarSectionTitleButton,
.sidebarInlineLogoutButton,
.sidebarInlineProfileButton {
  border-radius: 16px;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.sidebarNavButton:hover,
.sidebarSectionTitleButton:hover,
.sidebarInlineLogoutButton:hover,
.sidebarInlineProfileButton:hover {
  transform: translateX(3px);
  background: linear-gradient(135deg, rgba(72, 159, 223, 0.22), rgba(255, 255, 255, 0.08));
  border-color: rgba(72, 159, 223, 0.32);
}

.sidebarNavButton.active,
.sidebarNavButton.isActive,
.sidebarNavButton[aria-current="page"],
.sidebarSectionTitleButton.active,
.sidebarSectionTitleButton.isActive,
.sidebarSectionTitleButton[aria-current="page"] {
  color: var(--ap-white);
  background: linear-gradient(135deg, rgba(72, 159, 223, 0.34), rgba(255, 255, 255, 0.1));
  border-color: rgba(72, 159, 223, 0.44);
  box-shadow: var(--ap-premium-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sidebarNavButton:focus-visible,
.sidebarSectionTitleButton:focus-visible {
  outline: 2px solid rgba(72, 159, 223, 0.82);
  outline-offset: 3px;
}

.dashboardHeadModern {
  border-radius: 30px;
  min-height: clamp(260px, 35vw, 460px);
  box-shadow: var(--ap-premium-ring), 0 34px 110px rgba(4, 10, 35, 0.36);
}

.dashboardHeadModern::after {
  opacity: 0.92;
}

.dashboardTitle,
.dashboardHeadModern h1,
.panel h1,
.panel h2 {
  letter-spacing: 0;
}

.choiceGrid {
  align-items: stretch;
}

.choiceButton,
.primaryButton,
.secondaryButton,
.dangerButton,
.ghostButton,
.compactActionButton,
.adminActionButton {
  min-height: 48px;
}

.choiceButton,
.primaryButton,
.secondaryButton,
.adminActionButton {
  box-shadow: 0 16px 36px rgba(72, 159, 223, 0.18);
}

.tableWrap {
  padding: clamp(18px, 2.2vw, 28px);
}

.tableWrap table,
.projectListTable {
  border-collapse: separate;
  border-spacing: 0 12px;
}

.tableWrap.reonicTableWrap {
  padding: clamp(14px, 1.6vw, 22px);
  overflow-x: visible;
}

.tableWrap.reonicTableWrap .reonicTable {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 10px;
  background: transparent;
}

.reonicTable th,
.reonicTable td {
  padding: 18px 20px;
  vertical-align: middle;
}

.reonicTable th:nth-child(1),
.reonicTable td:nth-child(1) {
  width: 50%;
}

.reonicTable th:nth-child(2),
.reonicTable td:nth-child(2) {
  width: 25%;
}

.reonicTable th:nth-child(3),
.reonicTable td:nth-child(3) {
  width: 12%;
}

.reonicTable th:nth-child(4),
.reonicTable td:nth-child(4) {
  width: 13%;
}

.reonicTable th:nth-child(3),
.reonicTable th:nth-child(4),
.reonicTable td:nth-child(3),
.reonicTable td:nth-child(4) {
  white-space: nowrap;
}

.reonicTable td:nth-child(3),
.reonicTable td:nth-child(4) {
  font-weight: 800;
}

.reonicTable .tableSubtext {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reonicTable .status.reonicStatus {
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.reonicTable .tableSortButton {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .tableWrap.reonicTableWrap {
    overflow-x: auto;
  }

  .tableWrap.reonicTableWrap .reonicTable {
    min-width: 860px;
  }
}

.tableWrap tbody tr,
.projectListTable .projectListRow {
  transition:
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.tableWrap tbody tr:hover,
.projectListTable .projectListRow:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(72, 159, 223, 0.14);
}

.notificationPanel,
.projectHoverPreview,
.mapHoverCard {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 72px rgba(3, 9, 28, 0.34);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

@media (max-width: 780px) {
  .appContent {
    gap: 16px;
  }

  .panel:not(#dashboardView),
  .authOverlayPanel,
  .dashboardHeadModern,
  .tableWrap,
  .partnerProjectListPanel {
    border-radius: 22px;
  }

  .dashboardHeadModern {
    min-height: 260px;
  }

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

/* Premium Autarkieprofis OS visual layer - pass 4 */
@keyframes ap-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.992);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes ap-soft-glow {
  0%, 100% { box-shadow: 0 20px 60px rgba(3, 9, 28, .22), 0 0 0 1px rgba(255, 255, 255, .08); }
  50% { box-shadow: 0 26px 78px rgba(72, 159, 223, .2), 0 0 0 1px rgba(72, 159, 223, .22); }
}

.dashboardHeadModern,
.portalHeroCard,
.tableWrap,
.referralCard,
.partnerProfileCard,
.partnerOrderCard,
.projectDetailCard,
.profileEditor,
.partnerSubmitPreview,
.partnerOrderCostEstimate,
.partnerOrderChatTop,
.modalCard,
.emailAutomationCard,
.billingPanel,
.mapPanel {
  animation: ap-panel-reveal .42s ease both;
}

.loginForm input,
.noticeBox input,
.noticeBox select,
.noticeBox textarea,
.recommendationForm input,
.recommendationForm select,
.recommendationForm textarea,
.profileEditor input,
.profileEditor select,
.profileEditor textarea,
.formGrid input,
.formGrid select,
.formGrid textarea,
.partnerOrderChatTop textarea,
.chatComposer textarea,
.emailAutomationEditor input,
.emailAutomationEditor textarea,
.billingPaymentTerms input,
.deliveryDateBox input,
.roofTileForm input,
.preparationNotesGrid textarea,
.projectSearchInput {
  border-radius: 18px;
  border: 1px solid rgba(72, 159, 223, .26);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 30px rgba(3, 9, 28, .1);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}

.loginForm input:focus,
.noticeBox input:focus,
.noticeBox select:focus,
.noticeBox textarea:focus,
.recommendationForm input:focus,
.recommendationForm select:focus,
.recommendationForm textarea:focus,
.profileEditor input:focus,
.profileEditor select:focus,
.profileEditor textarea:focus,
.formGrid input:focus,
.formGrid select:focus,
.formGrid textarea:focus,
.partnerOrderChatTop textarea:focus,
.chatComposer textarea:focus,
.emailAutomationEditor input:focus,
.emailAutomationEditor textarea:focus,
.billingPaymentTerms input:focus,
.deliveryDateBox input:focus,
.roofTileForm input:focus,
.preparationNotesGrid textarea:focus,
.projectSearchInput:focus {
  border-color: rgba(72, 159, 223, .72);
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 4px rgba(72, 159, 223, .16), 0 18px 44px rgba(3, 9, 28, .18);
  outline: none;
}

.loginForm button,
.choiceButton,
.primaryButton,
.secondaryButton,
.adminActionButton,
.compactActionButton,
.reviewButton,
.recommendationForm button[type="submit"],
.noticeBox button,
.profileEditor button,
.partnerSubmitModalActions button,
.partnerOrderActionRow button,
.chatComposer button,
.emailAutomationEditor button,
.billingActionButton,
.mapFilterButton,
.uploadButton,
.acceptSuggestionButton {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(135deg, rgba(72, 159, 223, .98), rgba(72, 159, 223, .74));
  box-shadow: 0 16px 38px rgba(72, 159, 223, .22), inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.loginForm button:hover,
.choiceButton:hover,
.primaryButton:hover,
.secondaryButton:hover,
.adminActionButton:hover,
.compactActionButton:hover,
.reviewButton:hover,
.recommendationForm button[type="submit"]:hover,
.noticeBox button:hover,
.profileEditor button:hover,
.partnerSubmitModalActions button:hover,
.partnerOrderActionRow button:hover,
.chatComposer button:hover,
.emailAutomationEditor button:hover,
.billingActionButton:hover,
.mapFilterButton:hover,
.uploadButton:hover,
.acceptSuggestionButton:hover {
  transform: translateY(-1px);
  color: var(--ap-navy);
  border-color: rgba(255, 255, 255, .28);
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(72, 159, 223, .86));
  box-shadow: 0 22px 54px rgba(72, 159, 223, .32), inset 0 1px 0 rgba(255, 255, 255, .36);
}

.secondaryButton,
.partnerSubmitModalActions .secondaryButton,
.profileEditor .secondaryButton {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
  color: var(--ap-white);
}

input[type="file"]::file-selector-button {
  border-radius: 999px;
  border: 1px solid rgba(72, 159, 223, .32);
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(72, 159, 223, .8));
  color: var(--ap-navy);
  font-weight: 800;
  padding: 8px 16px;
  margin-right: 12px;
  box-shadow: 0 10px 26px rgba(72, 159, 223, .18);
}

input[type="file"]::file-selector-button:hover {
  background: linear-gradient(135deg, rgba(72, 159, 223, .98), rgba(20, 27, 77, .86));
  color: var(--ap-white);
}

.partnerOrderChatTop,
.chatBox,
.chatMessages {
  border-radius: 26px;
  border: 1px solid rgba(72, 159, 223, .24);
  background:
    linear-gradient(145deg, rgba(20, 27, 77, .72), rgba(20, 27, 77, .4)),
    rgba(255, 255, 255, .06);
  box-shadow: 0 26px 70px rgba(3, 9, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(18px);
}

.chatMessages,
.partnerOrderChatTop .chatMessages {
  padding: 12px;
  scrollbar-color: rgba(72, 159, 223, .6) rgba(255, 255, 255, .06);
}

.chatMessages::-webkit-scrollbar,
.notificationList::-webkit-scrollbar,
.partnerProjectsMiniList::-webkit-scrollbar {
  width: 8px;
}

.chatMessages::-webkit-scrollbar-thumb,
.notificationList::-webkit-scrollbar-thumb,
.partnerProjectsMiniList::-webkit-scrollbar-thumb {
  background: rgba(72, 159, 223, .58);
  border-radius: 999px;
}

.chatMessage,
.messageBubble,
.notificationItem {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 14px 34px rgba(3, 9, 28, .14);
}

.chatMessageRight,
.messageBubble.outgoing {
  background: linear-gradient(135deg, rgba(72, 159, 223, .26), rgba(72, 159, 223, .12));
  border-color: rgba(72, 159, 223, .3);
}

.partnerOrderCostEstimate {
  color: var(--ap-white);
  border-color: rgba(72, 159, 223, .34);
  background:
    radial-gradient(circle at 15% 0%, rgba(72, 159, 223, .3), transparent 34%),
    linear-gradient(145deg, rgba(20, 27, 77, .86), rgba(20, 27, 77, .58));
  box-shadow: 0 28px 76px rgba(3, 9, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.partnerOrderCostEstimate h3,
.partnerOrderCostEstimateTotal,
.partnerOrderCostEstimate .costTotal,
.costEstimateTotal {
  color: var(--ap-light);
}

.partnerOrderCostEstimateRow,
.costEstimateRow {
  border-radius: 16px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .08);
}

.partnerOrderImageCard,
.partnerOrderFileLink,
.preparationImageCard,
.preparationDropZone,
.partnerPriceListSummaryBox,
.partnerAdminStatCard,
.automationEmailCard,
.emailAutomationCard,
.billingMetricCard,
.projectHoverPreview,
.floatingProjectHoverPreview,
.mapHoverCard,
.mapProjectPopup {
  border-radius: 22px;
  border: 1px solid rgba(72, 159, 223, .22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)),
    rgba(20, 27, 77, .46);
  box-shadow: 0 22px 56px rgba(3, 9, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
}

.partnerOrderImageCard:hover,
.partnerOrderFileLink:hover,
.preparationImageCard:hover,
.partnerPriceListSummaryBox:hover,
.partnerAdminStatCard:hover,
.automationEmailCard:hover,
.emailAutomationCard:hover,
.billingMetricCard:hover {
  transform: translateY(-2px);
  border-color: rgba(72, 159, 223, .46);
  box-shadow: 0 28px 70px rgba(72, 159, 223, .18), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.floatingProjectHoverPreview,
.mapHoverCard,
.mapProjectPopup {
  color: var(--ap-white);
  max-width: min(360px, calc(100vw - 32px));
  white-space: normal;
  overflow-wrap: anywhere;
  z-index: 60;
}

.notificationPopover,
.profilePopover,
.partnerSubmitModal,
.modalOverlay .modalCard {
  border-radius: 28px;
  border: 1px solid rgba(72, 159, 223, .26);
  background:
    radial-gradient(circle at 18% 0%, rgba(72, 159, 223, .2), transparent 38%),
    linear-gradient(145deg, rgba(20, 27, 77, .92), rgba(20, 27, 77, .74));
  color: var(--ap-white);
  box-shadow: 0 36px 90px rgba(3, 9, 28, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px);
}

.modalCloseButton,
.closeButton,
.dialogCloseButton {
  border-radius: 999px;
}

.statusBadge,
.statusPill,
.projectStatusBadge {
  border-radius: 999px;
  border: 1px solid rgba(72, 159, 223, .25);
  background: rgba(72, 159, 223, .14);
  color: var(--ap-white);
}

.loginCard,
.authCard {
  border-radius: 30px;
}

.loginPanel,
.authPanel {
  overflow: visible;
}

@media (max-width: 780px) {
  .dashboardHeadModern,
  .portalHeroCard,
  .tableWrap,
  .partnerOrderCard,
  .projectDetailCard,
  .profileEditor,
  .partnerOrderChatTop,
  .partnerOrderCostEstimate {
    border-radius: 22px;
  }

  .loginForm button,
  .choiceButton,
  .primaryButton,
  .secondaryButton,
  .adminActionButton,
  .compactActionButton,
  .partnerSubmitModalActions button,
  .partnerOrderActionRow button {
    min-height: 48px;
  }
}

@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;
  }
}

/* Reonic detail live polish: keep hero and controls readable */
#reonicOrderDetailPanel.reonicDetailPanel {
  padding-top: clamp(34px, 3vw, 54px) !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 28, .98) 0%, rgba(3, 12, 38, .9) 26%, rgba(4, 13, 38, .48) 50%, rgba(4, 13, 38, .12) 72%, rgba(4, 13, 38, .38) 100%),
    linear-gradient(180deg, rgba(5, 12, 34, .02) 0%, rgba(5, 12, 34, .12) 43%, rgba(5, 12, 34, .9) 100%),
    url("/assets/premium-customer-hero.png") center top / 100% clamp(360px, 32vw, 520px) no-repeat,
    #020817 !important;
}

#reonicOrderDetailPanel .formHead {
  max-width: min(620px, 45vw) !important;
  margin-left: clamp(22px, 2vw, 38px) !important;
  margin-bottom: 0 !important;
}

#reonicOrderDetailPanel #closeReonicDetailButton {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(190, 221, 255, .95) !important;
  padding: 0 !important;
  min-height: auto !important;
}

#reonicOrderDetailPanel #reonicDetailMeta {
  max-width: min(620px, 45vw) !important;
  margin: clamp(22px, 2.4vw, 34px) 0 clamp(28px, 3vw, 42px) clamp(22px, 2vw, 38px) !important;
}

#reonicOrderDetailPanel .reonicCustomerMeta {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

#reonicOrderDetailPanel .reonicCustomerMeta p {
  position: relative;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 16px !important;
  min-height: 34px;
  margin: 0 !important;
}

#reonicOrderDetailPanel .reonicCustomerMeta p > span:not(.reonicMetaIcon):not(.visuallyHidden) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#reonicOrderDetailPanel .reonicCustomerMeta p:not(.reonicMetaItem)::before {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  grid-column: 1;
  border: 2px solid rgba(232, 244, 255, .88);
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

#reonicOrderDetailPanel .reonicCustomerMeta p:not(.reonicMetaItem):nth-child(1)::before {
  content: "";
  border-radius: 999px 999px 999px 4px;
  transform: rotate(-45deg);
  box-shadow: inset 0 0 0 8px transparent, 0 10px 30px rgba(0, 0, 0, .28);
}

#reonicOrderDetailPanel .reonicCustomerMeta p:not(.reonicMetaItem):nth-child(1)::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ffffff;
}

#reonicOrderDetailPanel .reonicCustomerMeta p:not(.reonicMetaItem):nth-child(2)::before {
  content: "✉";
  border-radius: 8px;
}

#reonicOrderDetailPanel .reonicCustomerMeta p:not(.reonicMetaItem):nth-child(3)::before {
  content: "☎";
  border-radius: 999px;
}

#reonicOrderDetailPanel .reonicCustomerMeta p:nth-child(4),
#reonicOrderDetailPanel .reonicCustomerMeta .reonicMetaStatus {
  display: inline-grid !important;
  grid-template-columns: 18px auto;
  justify-self: start;
  gap: 10px !important;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
}

#reonicOrderDetailPanel .reonicCustomerMeta p:not(.reonicMetaItem):nth-child(4)::before {
  content: "";
  width: 10px;
  height: 10px;
  align-self: center;
  margin-left: 4px;
  border: 0;
  border-radius: 999px;
  background: #489FDF;
  box-shadow: 0 0 0 7px rgba(72, 159, 223, .18);
}

#reonicOrderDetailPanel .reonicCustomerMeta strong,
#reonicOrderDetailPanel .reonicCustomerMeta a {
  grid-column: 2;
  font-size: clamp(18px, 1.35vw, 25px) !important;
  color: #ffffff !important;
}

#reonicOrderDetailPanel .reonicDetailContent {
  margin-top: 0 !important;
}

#reonicOrderDetailPanel.is-loading-detail {
  min-height: min(980px, calc(100vh - 72px));
}

#reonicOrderDetailPanel .reonicCustomerMetaLoading p,
#reonicOrderDetailPanel .reonicLoadingBlock {
  overflow: hidden;
}

#reonicOrderDetailPanel .reonicCustomerMetaLoading p::after,
#reonicOrderDetailPanel .reonicLoadingBlock::after {
  content: "";
  display: block;
  width: 100%;
  min-height: 24px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .28), rgba(255, 255, 255, .14));
  background-size: 220% 100%;
  animation: reonicLoadingShimmer 1.2s ease-in-out infinite;
}

#reonicOrderDetailPanel .reonicCustomerMetaLoading p:nth-child(1)::after {
  width: min(430px, 82%);
}

#reonicOrderDetailPanel .reonicCustomerMetaLoading p:nth-child(2)::after {
  width: min(360px, 72%);
}

#reonicOrderDetailPanel .reonicCustomerMetaLoading p:nth-child(3)::after {
  width: min(240px, 58%);
}

#reonicOrderDetailPanel .reonicCustomerMetaLoading p:nth-child(4)::after {
  width: min(220px, 54%);
}

#reonicOrderDetailPanel .reonicLoadingCard {
  pointer-events: none;
}

#reonicOrderDetailPanel .reonicLoadingBlock {
  min-height: 170px;
}

#reonicOrderDetailPanel .reonicLoadingBlock::after {
  min-height: 92px;
  border-radius: 8px;
}

@keyframes reonicLoadingShimmer {
  from {
    background-position: 120% 0;
  }

  to {
    background-position: -120% 0;
  }
}

#reonicOrderDetailPanel .calendarCheckItem {
  position: relative !important;
  padding: 28px 112px 28px 32px !important;
  background: rgba(0, 18, 46, .86) !important;
  border-color: rgba(72, 159, 223, .26) !important;
}

#reonicOrderDetailPanel .calendarCheckItem::after {
  content: "" !important;
  position: absolute;
  right: 28px;
  top: 28px;
  --calendar-circle-size: 56px;
  --calendar-icon-width: 24px;
  --calendar-icon-height: 24px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(72, 159, 223, .28);
  border: 1px solid rgba(72, 159, 223, .48);
  color: #ffffff;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)),
    linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
  background-position:
    calc((var(--calendar-circle-size) - var(--calendar-icon-width)) / 2 + 4px) calc((var(--calendar-circle-size) - var(--calendar-icon-height)) / 2 + 9px),
    calc((var(--calendar-circle-size) - var(--calendar-icon-width)) / 2 + 12px) calc((var(--calendar-circle-size) - var(--calendar-icon-height)) / 2 + 9px),
    calc((var(--calendar-circle-size) - var(--calendar-icon-width)) / 2 + 20px) calc((var(--calendar-circle-size) - var(--calendar-icon-height)) / 2 + 9px),
    calc((var(--calendar-circle-size) - var(--calendar-icon-width)) / 2 + 4px) calc((var(--calendar-circle-size) - var(--calendar-icon-height)) / 2 + 18px),
    calc((var(--calendar-circle-size) - var(--calendar-icon-width)) / 2 + 5px) calc((var(--calendar-circle-size) - var(--calendar-icon-height)) / 2 - 1px),
    calc((var(--calendar-circle-size) - var(--calendar-icon-width)) / 2 + 18px) calc((var(--calendar-circle-size) - var(--calendar-icon-height)) / 2 - 1px);
  background-size:
    5px 5px,
    5px 5px,
    5px 5px,
    5px 5px,
    3px 8px,
    3px 8px;
  background-repeat: no-repeat;
  box-shadow: 0 14px 34px rgba(72, 159, 223, .22);
}

#reonicOrderDetailPanel .calendarCheckItem::before {
  content: "";
  position: absolute;
  right: calc(28px + (56px - 24px) / 2);
  top: calc(28px + (56px - 24px) / 2);
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 3px solid #ffffff;
  border-top-width: 7px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 1;
}

#reonicOrderDetailPanel .preparationImageSummary span,
#reonicOrderDetailPanel .billingToggleButton,
#reonicOrderDetailPanel .billingPaymentBadge,
#reonicOrderDetailPanel .billingPaidButton,
#reonicOrderDetailPanel .orderStatusRow p,
#reonicOrderDetailPanel .orderStatusDone,
#reonicOrderDetailPanel .orderStatusOpen {
  border: 1px solid rgba(72, 159, 223, .34) !important;
  background: rgba(0, 22, 58, .7) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px rgba(0, 0, 0, .18);
}

#reonicOrderDetailPanel .billingToggleButton.is-selected,
#reonicOrderDetailPanel .billingToggleButton:hover,
#reonicOrderDetailPanel .billingPaidButton:hover {
  background: rgba(72, 159, 223, .92) !important;
  color: #ffffff !important;
}

#reonicOrderDetailPanel .secondaryButton,
#reonicOrderDetailPanel .bigInviteButton,
#reonicOrderDetailPanel .printOrderButton,
#reonicOrderDetailPanel .roofTileDoneButton,
#reonicOrderDetailPanel .roofTilePrintButton {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: linear-gradient(135deg, rgba(72, 159, 223, .98), rgba(37, 119, 190, .86)) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 38px rgba(72, 159, 223, .22), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

@media (max-width: 980px) {
  #reonicOrderDetailPanel.reonicDetailPanel {
    background:
      linear-gradient(180deg, rgba(2, 8, 28, .78) 0%, rgba(2, 8, 28, .92) 48%, rgba(2, 8, 28, .98) 100%),
      url("/assets/premium-customer-hero.png") center top / auto 360px no-repeat,
      #020817 !important;
    padding-top: 260px !important;
  }

  #reonicOrderDetailPanel .formHead,
  #reonicOrderDetailPanel #reonicDetailMeta {
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* Admin montage overview polish */
body.roleAdmin .employeePhotoButton {
  display: none !important;
}

body.roleAdmin .dashboardHeadModern {
  min-height: clamp(430px, 47vw, 720px);
  align-content: start;
  padding: clamp(42px, 5vw, 82px) clamp(44px, 5.6vw, 96px);
  border-radius: 30px;
  background:
    linear-gradient(90deg, rgba(2, 8, 28, .98) 0%, rgba(4, 13, 38, .92) 28%, rgba(4, 13, 38, .48) 54%, rgba(4, 13, 38, .2) 76%, rgba(4, 13, 38, .5) 100%),
    linear-gradient(180deg, rgba(5, 12, 34, .04) 0%, rgba(5, 12, 34, .1) 46%, rgba(5, 12, 34, .88) 100%),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center center / cover no-repeat,
    #020817;
}

body.roleAdmin .dashboardHeadModern::before {
  background:
    linear-gradient(90deg, rgba(2, 8, 28, .2), transparent 44%),
    radial-gradient(circle at 74% 18%, rgba(72, 159, 223, .24), transparent 28%);
}

body.roleAdmin .dashboardHeadModern::after {
  bottom: 38px;
}

body.roleAdmin .dashboardHeadModern .dashboardIdentity {
  max-width: min(720px, 48vw);
  padding-top: clamp(10px, 1vw, 18px);
}

body.roleAdmin .dashboardHeadModern .step {
  color: rgba(255, 255, 255, .74);
}

body.roleAdmin .dashboardHeadModern #welcomeTitle {
  color: #ffffff;
  font-size: clamp(42px, 5vw, 82px);
  line-height: .98;
  max-width: 760px;
}

body.roleAdmin .dashboardHeadModern .dashboardActions {
  align-self: end;
  justify-content: flex-start;
}

body.roleAdmin #reonicOrdersPanel.recommendationForm {
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(circle at 82% 0%, rgba(72, 159, 223, .18), transparent 34%),
    linear-gradient(145deg, rgba(8, 18, 50, .9), rgba(20, 27, 77, .68));
  color: #ffffff;
  box-shadow: 0 28px 90px rgba(3, 9, 28, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.roleAdmin #reonicOrdersPanel .formHead h3,
body.roleAdmin #reonicOrdersPanel label,
body.roleAdmin #reonicOrdersPanel .formMessage {
  color: #ffffff;
}

body.roleAdmin #reonicOrdersPanel .formMessage,
body.roleAdmin #reonicOrdersPanel label {
  color: rgba(255, 255, 255, .78);
}

body.roleAdmin #reonicOrdersPanel input,
body.roleAdmin #reonicOrdersPanel select {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(0, 18, 46, .72);
  color: #ffffff;
}

body.roleAdmin #reonicOrdersPanel input::placeholder {
  color: rgba(255, 255, 255, .5);
}

body.roleAdmin #reonicOrdersPanel .linkButton,
body.roleAdmin #refreshOrdersButton {
  color: #ffffff;
  border: 1px solid rgba(72, 159, 223, .34);
  background: rgba(72, 159, 223, .2);
}

@media (max-width: 980px) {
  body.roleAdmin .dashboardHeadModern {
    min-height: 360px;
    padding: 260px 24px 30px;
    background:
      linear-gradient(180deg, rgba(2, 8, 28, .28) 0%, rgba(2, 8, 28, .86) 58%, rgba(2, 8, 28, .98) 100%),
      url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center top / auto 360px no-repeat,
      #020817;
  }

  body.roleAdmin .dashboardHeadModern .dashboardIdentity {
    max-width: 100%;
  }

  body.roleAdmin .dashboardHeadModern #welcomeTitle {
    font-size: clamp(34px, 11vw, 54px);
  }
}

/* Partner portal final contrast pass */
body.portalPartner #partnerOrderView.panel,
body.portalPartner #partnerOrderForm.recommendationForm,
body.portalPartner #partnerProjectsPanel.reviewBox,
body.partnerDashboardHome #partnerProjectsPanel.reviewBox,
body.partnerDashboardHome .advisorCard,
body.partnerDashboardHome .partnerHomeActionCard {
  color: #ffffff !important;
  border: 1px solid rgba(72, 159, 223, .26) !important;
  background:
    linear-gradient(145deg, rgba(12, 24, 58, .9), rgba(6, 16, 42, .78)),
    rgba(255, 255, 255, .05) !important;
  box-shadow: 0 28px 86px rgba(3, 9, 28, .32), inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

body.portalPartner #partnerOrderView.panel {
  padding: clamp(24px, 3vw, 42px) !important;
}

body.portalPartner #partnerOrderView h2,
body.portalPartner #partnerOrderForm label,
body.portalPartner #partnerOrderForm small,
body.portalPartner #partnerOrderForm .mutedText,
body.portalPartner #partnerProjectsPanel h3,
body.portalPartner #partnerProjectsPanel p,
body.partnerDashboardHome .advisorCard span,
body.partnerDashboardHome .advisorCard strong,
body.partnerDashboardHome .advisorCard small,
body.partnerDashboardHome .partnerHomeActionCard strong,
body.partnerDashboardHome .partnerHomeActionCard small {
  color: rgba(255, 255, 255, .9) !important;
}

body.portalPartner #partnerOrderView > .mutedText {
  color: rgba(255, 255, 255, .74) !important;
}

body.portalPartner #partnerOrderForm input,
body.portalPartner #partnerOrderForm select,
body.portalPartner #partnerOrderForm textarea {
  border-color: rgba(72, 159, 223, .34) !important;
  background: rgba(2, 12, 32, .72) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px rgba(3, 9, 28, .16) !important;
}

body.portalPartner #partnerOrderForm input:focus,
body.portalPartner #partnerOrderForm select:focus,
body.portalPartner #partnerOrderForm textarea:focus {
  border-color: rgba(72, 159, 223, .84) !important;
  background: rgba(6, 18, 46, .88) !important;
  box-shadow: 0 0 0 4px rgba(72, 159, 223, .18), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

body.portalPartner #partnerOrderForm input[type="file"] {
  min-height: 58px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, .8) !important;
}

body.portalPartner #partnerOrderForm input[type="file"]::file-selector-button {
  min-height: 40px;
  border-color: rgba(72, 159, 223, .42) !important;
  background: linear-gradient(135deg, rgba(72, 159, 223, .98), rgba(72, 159, 223, .78)) !important;
  color: #ffffff !important;
}

body.portalPartner #partnerOrderForm select option {
  color: #141B4D;
  background: #ffffff;
}

body.portalPartner #partnerOrderForm .formActions select {
  min-width: min(420px, 100%);
}

body.partnerDashboardHome .dashboardHeadModern {
  background:
    linear-gradient(90deg, rgba(2, 9, 20, .88), rgba(20, 27, 77, .52) 56%, rgba(2, 9, 20, .52)),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center / cover !important;
}

body.partnerDashboardHome .advisorCard {
  gap: 18px;
}

body.partnerDashboardHome .advisorCard img {
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

body.partnerDashboardHome .employeePhotoButton {
  border: 1px solid rgba(72, 159, 223, .28) !important;
  background: rgba(4, 14, 38, .62) !important;
  box-shadow: 0 24px 60px rgba(3, 9, 28, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

body.partnerDashboardHome #partnerProjectsPanel.reviewBox {
  padding: clamp(22px, 2.6vw, 34px) !important;
}

body.partnerDashboardHome .partnerHomeActionGrid {
  gap: 18px;
}

body.partnerDashboardHome .partnerHomeActionCard {
  min-height: 150px;
  padding: 22px;
  border-radius: 18px !important;
}

body.partnerDashboardHome .partnerHomeActionCard:hover {
  border-color: rgba(72, 159, 223, .72) !important;
  background:
    linear-gradient(145deg, rgba(72, 159, 223, .28), rgba(6, 16, 42, .84)),
    rgba(255, 255, 255, .07) !important;
  box-shadow: 0 30px 80px rgba(72, 159, 223, .2), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

body.partnerDashboardHome .partnerHomeActionCard span {
  color: #489FDF !important;
}

@media (max-width: 980px) {
  body.partnerDashboardHome .dashboardHeadModern {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "identity"
      "photo"
      "advisor" !important;
  }

  body.partnerDashboardHome .employeePhotoButton,
  body.partnerDashboardHome .advisorCard {
    width: 100% !important;
    height: auto !important;
  }

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

/* Compact admin overview hero */
body.roleAdmin .dashboardHeadModern {
  min-height: clamp(220px, 24vw, 360px) !important;
  align-content: center !important;
  padding: clamp(26px, 3vw, 42px) clamp(34px, 4.2vw, 72px) !important;
  background:
    linear-gradient(90deg, rgba(2, 8, 28, .98) 0%, rgba(4, 13, 38, .9) 28%, rgba(4, 13, 38, .46) 56%, rgba(4, 13, 38, .2) 78%, rgba(4, 13, 38, .48) 100%),
    linear-gradient(180deg, rgba(5, 12, 34, .02) 0%, rgba(5, 12, 34, .1) 48%, rgba(5, 12, 34, .76) 100%),
    url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center center / cover no-repeat,
    #020817 !important;
}

body.roleAdmin .dashboardHeadModern::after {
  bottom: clamp(18px, 2.2vw, 28px) !important;
}

body.roleAdmin .dashboardHeadModern .dashboardIdentity {
  max-width: min(760px, 58vw) !important;
  padding-top: 0 !important;
}

body.roleAdmin .dashboardHeadModern #welcomeTitle {
  font-size: clamp(34px, 4.2vw, 64px) !important;
  line-height: 1 !important;
}

@media (max-width: 980px) {
  body.roleAdmin .dashboardHeadModern {
    min-height: 260px !important;
    padding: 160px 22px 28px !important;
    align-content: end !important;
    background:
      linear-gradient(180deg, rgba(2, 8, 28, .2) 0%, rgba(2, 8, 28, .84) 62%, rgba(2, 8, 28, .98) 100%),
      url("/assets/pv-montage-ziegeldach-montageschienen-bayern.jpg") center top / auto 260px no-repeat,
      #020817 !important;
  }

body.roleAdmin .dashboardHeadModern #welcomeTitle {
    font-size: clamp(30px, 9vw, 48px) !important;
  }
}

/* Reonic detail dark field pass */
#reonicOrderDetailPanel .billingSummaryBox,
#reonicOrderDetailPanel .billingPaymentPanel,
#reonicOrderDetailPanel .billingPaymentTerms input,
#reonicOrderDetailPanel .smartMeterBox,
#reonicOrderDetailPanel .smartMeterOk,
#reonicOrderDetailPanel .smartMeterWarning,
#reonicOrderDetailPanel .roofTileWarning,
#reonicOrderDetailPanel .orderChangeOpen {
  border: 1px solid rgba(72, 159, 223, .32) !important;
  background: rgba(0, 18, 46, .72) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 34px rgba(0, 0, 0, .18) !important;
}

#reonicOrderDetailPanel .billingSummaryBox strong,
#reonicOrderDetailPanel .billingSummaryBox span,
#reonicOrderDetailPanel .billingPaymentPanel span,
#reonicOrderDetailPanel .billingPaymentPanel strong,
#reonicOrderDetailPanel .billingPaymentPanel small,
#reonicOrderDetailPanel .smartMeterBox strong,
#reonicOrderDetailPanel .smartMeterBox p,
#reonicOrderDetailPanel .roofTileWarning,
#reonicOrderDetailPanel .orderChangeOpen {
  color: rgba(255, 255, 255, .9) !important;
}

#reonicOrderDetailPanel .smartMeterOk {
  border-color: rgba(72, 159, 223, .42) !important;
  background: rgba(72, 159, 223, .18) !important;
}

#reonicOrderDetailPanel .smartMeterWarning {
  border-color: rgba(255, 197, 96, .36) !important;
  background: rgba(255, 197, 96, .16) !important;
}

#reonicOrderDetailPanel .billingPaymentTerms input:focus {
  border-color: rgba(72, 159, 223, .84) !important;
  box-shadow: 0 0 0 4px rgba(72, 159, 223, .16), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}