/* ProFix24 final UI layer: one predictable visual system for website, admin, portals and apps. */

:root {
  --pf24-final-blue-950: #05111d;
  --pf24-final-blue-900: #071522;
  --pf24-final-blue-800: #0d2236;
  --pf24-final-blue-700: #12314f;
  --pf24-final-orange: #f58220;
  --pf24-final-orange-soft: rgba(245, 130, 32, .14);
  --pf24-final-text: #102033;
  --pf24-final-muted: #5b6b7c;
  --pf24-final-line: #d8e3ec;
  --pf24-final-page: #f4f7fa;
  --pf24-final-surface: #ffffff;
  --pf24-final-soft: #eef4f8;
  --pf24-final-radius: 8px;
  --pf24-final-topbar: 62px;
}

/* Admin render guard: one visible work panel, never an invisible active tab. */
html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* The badge endpoint and form handler remain available to integrations. */
html body.login-entry.login-public-entry #badgeLoginForm[hidden] {
  display: none !important;
}

html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].hidden {
  display: none !important;
}

html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].workspace:not(.hidden),
html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].tab-panel:not(.hidden) {
  grid-column: 2 !important;
  align-self: start !important;
  margin: 0 !important;
}

/* Public login: calm, trustworthy entry instead of internal workspace chrome. */
html body.login-public-entry:not(.portal-active) {
  min-height: 100vh !important;
  background: #f4f7fa !important;
  color: #102235 !important;
}

html body.login-public-entry:not(.portal-active) .login-public-topbar {
  min-height: 76px !important;
  padding: 0 clamp(18px, 4vw, 54px) !important;
  background: #ffffff !important;
  border-bottom: 1px solid #dce6ef !important;
  box-shadow: 0 10px 26px rgba(16, 34, 53, .06) !important;
  color: #102235 !important;
}

html body.login-public-entry:not(.portal-active) .login-public-topbar .brand {
  gap: 12px !important;
  min-width: 0 !important;
  color: #102235 !important;
  text-decoration: none !important;
}

html body.login-public-entry:not(.portal-active) .login-public-topbar .brand img {
  width: 126px !important;
  max-height: 46px !important;
  object-fit: contain !important;
}

html body.login-public-entry:not(.portal-active) .login-public-topbar .brand-copy {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
}

html body.login-public-entry:not(.portal-active) .login-public-topbar .admin-title {
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #102235 !important;
}

html body.login-public-entry:not(.portal-active) .login-public-topbar .brand-tagline {
  font-size: .74rem !important;
  line-height: 1.2 !important;
  color: #5f7085 !important;
  font-weight: 600 !important;
}

html body.login-public-entry:not(.portal-active) .login-entry-nav {
  gap: 10px !important;
}

html body.login-public-entry:not(.portal-active) .login-entry-links a {
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1px solid #dce6ef !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #102235 !important;
  font-size: .86rem !important;
  font-weight: 750 !important;
}

html body.login-public-entry:not(.portal-active) .nav-actions {
  gap: 8px !important;
}

html body.login-public-entry:not(.portal-active) .language-select {
  min-height: 38px !important;
  width: auto !important;
  min-width: 74px !important;
  padding: 0 30px 0 12px !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: #102235 !important;
  font-weight: 800 !important;
}

html body.login-public-entry:not(.portal-active) .admin-shell {
  min-height: calc(100vh - 76px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 34px 16px 90px !important;
}

html body.login-public-entry:not(.portal-active) .portal-shell {
  width: min(100%, 430px) !important;
  min-height: auto !important;
  padding: 0 !important;
}

html body.login-public-entry:not(.portal-active) .login-panel {
  width: 100% !important;
  max-width: 430px !important;
  padding: 24px !important;
  border: 1px solid #dce6ef !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 18px 44px rgba(16, 34, 53, .10) !important;
}

html body.login-public-entry:not(.portal-active) .login-panel h1 {
  margin: 0 0 6px !important;
  color: #102235 !important;
  font-size: 1.45rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

html body.login-public-entry:not(.portal-active) .login-panel .form-message {
  color: #5f7085 !important;
  font-size: .9rem !important;
  line-height: 1.45 !important;
}

html body.login-public-entry:not(.portal-active) .login-panel form {
  display: grid !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

html body.login-public-entry:not(.portal-active) .login-panel label {
  gap: 6px !important;
  color: #26364a !important;
  font-size: .83rem !important;
  font-weight: 800 !important;
}

html body.login-public-entry:not(.portal-active) .login-panel input {
  min-height: 44px !important;
  border-radius: 8px !important;
  border-color: #ccd8e5 !important;
  background: #ffffff !important;
  color: #102235 !important;
}

html body.login-public-entry:not(.portal-active) .password-input-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

html body.login-public-entry:not(.portal-active) .password-input-wrap input {
  width: 100% !important;
  height: 44px !important;
  line-height: 44px !important;
  padding-right: 46px !important;
}

html body.login-public-entry:not(.portal-active) .password-visibility-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  display: inline-grid !important;
  width: 36px !important;
  height: 34px !important;
  min-width: 36px !important;
  min-height: 34px !important;
  max-width: 36px !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #53677d !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

html body.login-public-entry:not(.portal-active) .password-visibility-toggle:hover,
html body.login-public-entry:not(.portal-active) .password-visibility-toggle:focus-visible {
  background: #edf3f8 !important;
  color: #102235 !important;
}

html body.login-public-entry:not(.portal-active) .password-visibility-toggle svg {
  width: 18px !important;
  height: 18px !important;
}

html body.login-public-entry:not(.portal-active) .login-panel .button.primary {
  min-height: 44px !important;
  border-radius: 8px !important;
  font-size: .94rem !important;
}

html body.login-public-entry:not(.portal-active) .login-recovery-link {
  width: auto !important;
  justify-self: start !important;
  padding: 0 !important;
  color: #51657a !important;
  font-size: .84rem !important;
}

html body.login-public-entry:not(.portal-active) .login-entry-actions {
  display: grid !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

html body.login-public-entry:not(.portal-active) .login-entry-actions :where(.button, .quiet-link) {
  width: 100% !important;
  min-height: 38px !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: .84rem !important;
  text-align: center !important;
}

html body.login-public-entry:not(.portal-active) .login-entry-note {
  color: #667789 !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

html body.login-public-entry:not(.portal-active) .portal-page-footer {
  color: #68788a !important;
  background: transparent !important;
}

@media (max-width: 680px) {
  html body.login-public-entry:not(.portal-active) .login-public-topbar {
    min-height: 66px !important;
    padding: 0 14px !important;
  }
  html body.login-public-entry:not(.portal-active) .login-public-topbar .brand img {
    width: 108px !important;
  }
  html body.login-public-entry:not(.portal-active) .login-public-topbar .brand-tagline {
    display: none !important;
  }
  html body.login-public-entry:not(.portal-active) .login-entry-links a span {
    display: none !important;
  }
  html body.login-public-entry:not(.portal-active) .admin-shell {
    min-height: calc(100vh - 66px) !important;
    padding: 18px 12px 78px !important;
  }
  html body.login-public-entry:not(.portal-active) .login-panel {
    padding: 18px !important;
  }
}

.live-capability-matrix {
  display: grid;
  gap: 12px;
}

.live-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.live-capability-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  background: #fff;
}

.live-capability-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-capability-card strong {
  font-size: 14px;
  line-height: 1.25;
}

.live-capability-card span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1f3a5f;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.live-capability-card.ok span {
  background: #e7f8ee;
  color: #17623b;
}

.live-capability-card.attention span {
  background: #fff4df;
  color: #845000;
}

.live-capability-card.blocked span {
  background: #ffe8e5;
  color: #9a2718;
}

.live-capability-card p {
  margin: 0;
  color: #46566a;
  font-size: 12px;
  line-height: 1.4;
}

.live-capability-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
}

.live-capability-card dl div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.live-capability-card dt {
  color: #66758a;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.live-capability-card dd {
  margin: 0;
  color: #122033;
  font-size: 12px;
  line-height: 1.25;
}

.taxi-workspace {
  display: grid;
  gap: 14px;
}

.taxi-command-strip,
.taxi-settlement-grid,
.taxi-coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
}

.taxi-command-strip span,
.taxi-settlement-grid article,
.taxi-coverage-grid article,
.taxi-driver-grid article,
.taxi-shift-list span,
.taxi-region-list span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--pf24-role-border, #d8e2ee);
  border-radius: 10px;
  background: #fff;
  color: #0f2538;
}

.taxi-command-strip b,
.taxi-settlement-grid strong,
.taxi-coverage-grid strong,
.taxi-driver-grid strong,
.taxi-shift-list b,
.taxi-shift-list strong,
.taxi-region-list b {
  font-size: 13px;
  line-height: 1.15;
  color: #0b2236;
}

.taxi-command-strip small,
.taxi-settlement-grid span,
.taxi-coverage-grid span,
.taxi-driver-grid span,
.taxi-driver-grid small,
.taxi-shift-list small,
.taxi-region-list small {
  font-size: 11.5px;
  line-height: 1.25;
  color: #52677a;
}

.taxi-overview-grid {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(280px, 1.15fr);
  gap: 12px;
  align-items: start;
}

.taxi-overview-grid > article {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--pf24-role-border, #d8e2ee);
  border-radius: 12px;
  background: #f8fafc;
}

.taxi-overview-grid h4 {
  margin: 0;
  font-size: 14px;
}

.taxi-shift-list,
.taxi-driver-grid,
.taxi-region-list {
  display: grid;
  gap: 8px;
}

.taxi-driver-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 760px) {
  .taxi-overview-grid {
    grid-template-columns: 1fr;
  }

  .taxi-command-strip,
  .taxi-settlement-grid,
  .taxi-coverage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final admin render guard: active panels must be visible after all overrides. */
html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].hidden {
  display: none !important;
}

html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].workspace:not(.hidden),
html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].tab-panel:not(.hidden) {
  grid-column: 2 !important;
  align-self: start !important;
  margin: 0 !important;
}

.guest-taxi-panel {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid #d9e3ef;
  border-radius: 12px;
  background: #fff;
  color: #122133;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.guest-taxi-panel .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.guest-taxi-panel h4 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

.guest-taxi-panel span,
.guest-taxi-panel small,
.guest-taxi-panel .empty {
  color: #5c6b7a;
  font-size: 12px;
  line-height: 1.35;
}

.guest-taxi-form,
.guest-taxi-signal {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
}

.guest-taxi-form label,
.guest-taxi-signal label {
  font-size: 12px;
  font-weight: 600;
  color: #26384d;
}

.guest-taxi-form input,
.guest-taxi-form select,
.guest-taxi-signal input,
.guest-taxi-signal select {
  min-height: 38px;
  border-color: #d7e1ed;
  background: #fff;
  color: #122133;
  font-size: 13px;
}

.guest-taxi-form .wide,
.guest-taxi-signal .wide {
  grid-column: span 2;
}

.guest-taxi-status-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.guest-taxi-status-list article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid #e1e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.guest-taxi-status-list strong,
.guest-taxi-status-list b {
  color: #132235;
  font-size: 13px;
}

@media (max-width: 760px) {
  .guest-taxi-form,
  .guest-taxi-signal {
    grid-template-columns: 1fr;
  }

  .guest-taxi-form .wide,
  .guest-taxi-signal .wide {
    grid-column: auto;
  }

  .guest-taxi-panel .section-title-row {
    align-items: stretch;
    flex-direction: column;
  }
}

html body.portal-active :where(.team-edit-grid, .wallet-actions-grid, .wallet-action-form) label {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  color: var(--pf24-role-muted, #526173) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body.portal-active :where(.team-edit-grid, .wallet-actions-grid, .wallet-action-form) label :where(input, select, textarea) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: var(--pf24-role-ink, #081c34) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body.portal-active :where(.pos-v2-quantity button, .quantity-stepper button, [data-pos-quantity]) {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

html body.portal-active button:where([aria-label*="verhogen" i], [aria-label*="verlagen" i], [aria-label*="plus" i], [aria-label*="min" i]) {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body.portal-active :where(article, .card, .professional-card, .business-card, .summary-card, .wallet-action-form, .team-edit-grid > *) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

:where(body.portal-active, body.admin-body.active) .inline-subtabs {
  display: grid;
  gap: 12px;
  width: 100%;
}

:where(body.portal-active, body.admin-body.active) .inline-subtab-nav {
  align-items: center;
  background: #f8fbff;
  border: 1px solid #d8e3ee;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
}

:where(body.portal-active, body.admin-body.active) .inline-subtab-nav button {
  align-items: center;
  background: #fff;
  border: 1px solid #d8e3ee;
  border-radius: 9px;
  color: #12263a;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 700;
  gap: 6px;
  justify-content: center;
  line-height: 1.2;
  min-height: 34px;
  padding: 7px 10px;
  width: auto;
}

:where(body.portal-active, body.admin-body.active) .inline-subtab-nav button.active {
  background: #fff1e2;
  border-color: #ff8a1f;
  box-shadow: inset 3px 0 0 #ff7a00;
  color: #0b1d2f;
}

:where(body.portal-active, body.admin-body.active) .inline-subtab-nav svg {
  height: 17px;
  width: 17px;
  stroke-width: 2.1;
}

:where(body.portal-active, body.admin-body.active) .inline-subtab-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

:where(body.portal-active, body.admin-body.active) .inline-subtab-panel[hidden] {
  display: none !important;
}

:where(body.portal-active, body.admin-body.active) .long-page-subtabs {
  margin-bottom: 12px;
}

.portal-header-actions,
.portal-header-assistant,
.portal-topbar .nav-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.portal-header-assistant[hidden] {
  display: none !important;
}

.portal-topbar .portal-header-assistant .voice-menu-actions {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.portal-topbar .portal-header-assistant .voice-menu-icon-button {
  align-items: center;
  background: #ff8517;
  border: 1px solid #d96500;
  border-radius: 999px;
  color: #0b1d2f;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: 42px;
}

.portal-topbar .portal-header-assistant .voice-menu-icon,
.portal-topbar .portal-header-assistant .voice-message-icon {
  display: block;
  height: 21px;
  margin: 0;
  position: relative;
  width: 21px;
}

.portal-topbar .portal-header-assistant .voice-menu-status {
  max-width: 180px;
}

:where(.portal-section-nav, .professional-section-nav) > .voice-menu-actions.portal-assistant-actions {
  display: none !important;
}

@media (max-width: 760px) {
  :where(body.portal-active, body.admin-body.active) .inline-subtab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  :where(body.portal-active, body.admin-body.active) .inline-subtab-nav button {
    flex: 0 0 auto;
    font-size: 0.82rem;
    min-height: 32px;
    padding: 6px 9px;
  }

  .portal-topbar .portal-header-assistant .voice-menu-icon-button {
    height: 38px;
    width: 38px;
  }
}

/* Laatste afspraak: gewone desktopportals hebben menu links en inhoud rechts. */
@media (min-width: 1081px) {
  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 16px 0 72px !important;
    overflow: visible !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav {
    position: sticky !important;
    top: 82px !important;
    grid-column: 1 !important;
    grid-row: 1 / span 80 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
    gap: 12px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    height: auto !important;
    min-height: calc(100vh - 112px) !important;
    max-height: calc(100vh - 96px) !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--pf24-role-border, #d8e2ee) !important;
    border-radius: 14px !important;
    background: var(--pf24-role-surface, #fff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > :not(.portal-section-nav),
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :not(.professional-section-nav) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav .portal-nav-links,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav .portal-nav-links,
  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav .portal-nav-group,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav .portal-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex: initial !important;
    flex-direction: initial !important;
    align-items: stretch !important;
    justify-self: stretch !important;
    place-self: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact, .portal-sidebar-logout),
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact, .portal-sidebar-logout) {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    place-self: stretch !important;
    margin-inline: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav :where(a.portal-nav-link, .portal-nav-links a, .portal-sidebar-logout),
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav :where(a.portal-nav-link, .portal-nav-links a, .portal-sidebar-logout) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    flex: initial !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    place-self: stretch !important;
    margin-inline: 0 !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}

/* Platform, groei en bedrijfsvoering: dezelfde compacte managementlaag als servicecenter. */
:where(body.portal-active, body.admin-body.active) :where(
  #professional-overview,
  #professional-profile,
  #professional-modules,
  #professional-administration,
  #professional-branch-monitor,
  #professional-transfer,
  #module-status,
  #contracts,
  #branches,
  #benchmarks,
  #market-monitor,
  #community,
  #professionals,
  #settings,
  .business-operations-director,
  .professional-business-structure,
  .business-structure-grid,
  .business-structure-edit-grid,
  .workflow-settings-panel,
  .module-workflow-settings,
  .assistant-growth-help,
  .onboarding-api-manager,
  .company-import-card
) {
  font-size: 13px !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  #professional-overview,
  #professional-profile,
  #professional-modules,
  #professional-administration,
  #professional-branch-monitor,
  #professional-transfer,
  #module-status,
  #contracts,
  #branches,
  #benchmarks,
  #market-monitor,
  #community,
  #professionals,
  #settings
) :where(h1, h2) {
  font-size: clamp(18px, 1.75vw, 23px) !important;
  line-height: 1.15 !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  #professional-overview,
  #professional-profile,
  #professional-modules,
  #professional-administration,
  #professional-branch-monitor,
  #professional-transfer,
  #module-status,
  #contracts,
  #branches,
  #benchmarks,
  #market-monitor,
  #community,
  #professionals,
  #settings
) :where(h3, h4, .settings-card-head strong, .module-card-head strong, .business-operations-title strong) {
  font-size: clamp(14px, 1.25vw, 17px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  #professional-overview,
  #professional-profile,
  #professional-modules,
  #professional-administration,
  #professional-branch-monitor,
  #professional-transfer,
  #module-status,
  #contracts,
  #branches,
  #benchmarks,
  #market-monitor,
  #community,
  #professionals,
  #settings
) :where(p, small, em, li, label, td, th, .form-message, .empty) {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  .business-operations-director,
  .professional-business-structure,
  .workflow-settings-panel,
  .module-workflow-settings,
  .assistant-growth-help,
  .onboarding-api-manager,
  .company-import-card,
  .settings-card,
  .module-card,
  .data-quality-panel,
  .professional-profile-card
) {
  border-radius: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
  background: var(--pf24-role-panel, #fff) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  .profile-section,
  .assistant-growth-help,
  .business-operations-domains,
  .company-import-log,
  .onboarding-api-source
) > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  color: var(--pf24-role-text, #102538) !important;
  background: var(--pf24-role-soft, #f7fbfd) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
  cursor: pointer !important;
  list-style: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  .profile-section,
  .assistant-growth-help,
  .business-operations-domains,
  .company-import-log,
  .onboarding-api-source
) > summary::-webkit-details-marker {
  display: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  .profile-section,
  .assistant-growth-help,
  .business-operations-domains,
  .company-import-log,
  .onboarding-api-source
) > summary :where(span, div) {
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  .profile-section,
  .assistant-growth-help,
  .business-operations-domains,
  .company-import-log,
  .onboarding-api-source
) > summary strong,
:where(body.portal-active, body.admin-body.active) :where(
  .profile-section,
  .assistant-growth-help,
  .business-operations-domains,
  .company-import-log,
  .onboarding-api-source
) > summary span {
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(
  .profile-section-grid,
  .business-structure-edit-grid,
  .business-structure-grid,
  .business-structure-summary,
  .workflow-settings-grid,
  .module-workflow-grid,
  .onboarding-api-kpis,
  .onboarding-api-layout,
  .company-import-form,
  .company-import-summary,
  .business-operations-metrics,
  .business-operations-actions
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(.business-operations-head, .business-operations-title, .business-operations-costguard, .business-operations-tenant-mail, .business-operations-staff-queue header, .business-operations-staff-queue article) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(.business-operations-title) {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.business-operations-action, .business-domain-chip, .company-import-row, .onboarding-api-batches article, .business-structure-editor-row) {
  border-radius: 8px !important;
  padding: 10px !important;
  min-width: 0 !important;
  background: var(--pf24-role-soft, #f7fbfd) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
  box-shadow: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(.business-operations-action, .business-domain-chip) {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  text-decoration: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(.growth-opportunity-list, .business-operations-domains > div, .company-import-preview, .onboarding-api-source-list, .onboarding-api-batches, .onboarding-api-next) {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(.growth-opportunity-list > span, .business-structure-status, .business-structure-summary article, .business-operations-metrics article) {
  border-radius: 8px !important;
  padding: 9px 10px !important;
  min-width: 0 !important;
  background: var(--pf24-role-soft, #f7fbfd) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
}

:where(body.portal-active, body.admin-body.active) .professional-business-ops-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  gap: 9px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) .professional-business-ops-shortcuts a {
  display: grid !important;
  gap: 4px !important;
  min-height: 70px !important;
  padding: 10px 11px !important;
  border-radius: 9px !important;
  color: var(--pf24-role-text, #102538) !important;
  background: var(--pf24-role-soft, #f7fbfd) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

:where(body.portal-active, body.admin-body.active) .professional-business-ops-shortcuts a strong {
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  font-weight: 680 !important;
}

:where(body.portal-active, body.admin-body.active) .professional-business-ops-shortcuts a span {
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: var(--pf24-role-muted, #52697b) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.compact-form, .profile-section-grid, .business-structure-edit-grid, .company-import-form, .onboarding-api-source-form) :where(label, .checkbox-line) {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: var(--pf24-role-text, #102538) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.compact-form, .profile-section-grid, .business-structure-edit-grid, .company-import-form, .onboarding-api-source-form) :where(input, select, textarea) {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: var(--pf24-role-text, #102538) !important;
  background: var(--pf24-role-panel, #fff) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.wide) {
  grid-column: 1 / -1 !important;
}

@media (max-width: 760px) {
  :where(body.portal-active, body.admin-body.active) :where(
    .profile-section-grid,
    .business-structure-edit-grid,
    .business-structure-grid,
    .business-structure-summary,
    .workflow-settings-grid,
    .module-workflow-grid,
    .onboarding-api-kpis,
    .onboarding-api-layout,
    .company-import-form,
    .company-import-summary,
    .business-operations-metrics,
    .business-operations-actions,
    .business-operations-head,
    .business-operations-title,
    .business-operations-costguard,
    .business-operations-tenant-mail,
    .business-operations-staff-queue header,
    .business-operations-staff-queue article
  ) {
    grid-template-columns: 1fr !important;
  }

  :where(body.portal-active, body.admin-body.active) :where(.business-operations-action, .business-domain-chip) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  :where(body.portal-active, body.admin-body.active) :where(.business-operations-action b, .business-domain-chip b) {
    justify-self: start !important;
    grid-column: 2 !important;
  }
}

/* Portalinhoud gelijk houden: rol bepaalt inhoud, niet een afwijkende layout. */
html body.portal-active #portalDashboard :where(.professional-section.portal-view-active, .customer-section.portal-view-active) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 1120px !important;
  margin-inline: 0 auto !important;
}

html body.portal-active #portalDashboard :where(.professional-section.portal-view-active, .customer-section.portal-view-active) > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body.portal-active #portalDashboard :where(.professional-cockpit, .customer-cockpit, .owner-dashboard-full, .customer-overview-hero, .customer-status-strip, .business-shortcuts, .mini-job-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body.portal-active #portalDashboard :where(.readiness-panel, .professional-cockpit, .customer-cockpit, .owner-dashboard-full, .customer-overview-hero) :where(h1, h2, h3, h4, strong, b) {
  letter-spacing: 0 !important;
}

/* Servicecenter-overzicht: routingkaarten blijven leesbaar, ook met veel korte blokken. */
html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.servicecenter-routing-card, .landlord-first-card) {
  min-width: 0 !important;
  width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 6px 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 11px 12px !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile > span {
  display: grid !important;
  gap: 3px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile :where(strong, small, em) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile strong {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile b {
  min-width: 34px !important;
  height: 30px !important;
  align-self: start !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile > em,
html body.admin-body.active:has(#dashboard:not(.hidden)) .servicecenter-routing-tile > small {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

/* Topbar en menu: rechtsboven leesbaar, links maar één omgevingskeuze. */
:where(body.admin-body, body.portal-active, body.login-entry, body.public-site) :where(.topbar, .portal-topbar) :where(.language-select, .app-settings-button, .nav-actions button, .nav-actions select) {
  min-width: 42px !important;
  min-height: 38px !important;
  border: 1px solid rgba(15, 35, 55, 0.18) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #102033 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:where(body.admin-body, body.portal-active, body.login-entry, body.public-site) :where(.topbar, .portal-topbar) .language-select {
  width: auto !important;
  max-width: 132px !important;
  padding: 7px 28px 7px 10px !important;
  color: #102033 !important;
}

html[data-theme="dark"] :where(body.admin-body, body.portal-active, body.login-entry, body.public-site) :where(.topbar, .portal-topbar) :where(.language-select, .app-settings-button, .nav-actions button, .nav-actions select) {
  border-color: rgba(230, 238, 247, 0.22) !important;
  background: #f8fbff !important;
  color: #071522 !important;
}

html body :where(.topbar, .portal-topbar) .app-settings-button,
html body :where(.topbar, .portal-topbar) .app-settings-button:is(:hover, :focus, :focus-visible),
html body :where(.topbar, .portal-topbar) .nav-actions .app-settings-button {
  background: #ffffff !important;
  color: #102033 !important;
  border-color: rgba(15, 35, 55, 0.18) !important;
}

html body :where(.topbar, .portal-topbar) .app-settings-button :where(svg, i, span),
html body :where(.topbar, .portal-topbar) .app-settings-button::before,
html body :where(.topbar, .portal-topbar) .app-settings-button::after {
  color: #102033 !important;
  fill: none !important;
  stroke: #102033 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar .language-select {
  width: auto !important;
  min-width: 42px !important;
  max-width: 132px !important;
  color: #102033 !important;
  padding: 7px 28px 7px 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .system-switch label[for="workProcessSelect"],
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .system-switch #workProcessSelect {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .system-switch {
  grid-template-columns: 1fr !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-screens,
html body.portal-active #portalDashboard :where(.portal-workscreen-actions, .customer-advanced-nav) {
  display: none !important;
}

/* Communicatie: actiegericht, compact en niet alles tegelijk in beeld. */
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel {
  gap: 12px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Normale werkomgeving: compacte zakelijke schaal, geen kiosk-typografie. */
html body.admin-body.active:has(#dashboard:not(.hidden)) :where(#dashboard, #dashboard .workspace, #dashboard .tab-panel),
html body.portal-active :where(#portalDashboard, #portalDashboard .professional-section, #portalDashboard .customer-section) {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(#dashboard h1, #dashboard h2),
html body.portal-active :where(#portalDashboard h1, #portalDashboard h2) {
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(#dashboard h3),
html body.portal-active :where(#portalDashboard h3) {
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(#dashboard p, #dashboard li, #dashboard small, #dashboard span, #dashboard label),
html body.portal-active :where(#portalDashboard p, #portalDashboard li, #portalDashboard small, #portalDashboard span, #portalDashboard label) {
  line-height: 1.35 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(.dashboard-card, .summary-card, .settings-card, .quality-panel, .content-card, .portal-panel, .profile-section, .finance-panel),
html body.portal-active :where(.dashboard-card, .summary-card, .settings-card, .content-card, .portal-panel, .profile-section, .finance-panel, .customer-request-card, .wallet-panel) {
  padding: 12px !important;
  border-radius: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(button, .button, input, select, textarea),
html body.portal-active :where(button, .button, input, select, textarea) {
  font-size: 13px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-head {
  min-height: 0 !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-head h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
  margin: 0 0 3px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-head p {
  max-width: 74ch !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-control-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-outbox-panel {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-workspace {
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr) !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel :where(.staff-chat-list, .staff-chat-room, .communication-outbox-panel, .communication-detail-drawer) {
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-panel) !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel :where(.staff-chat-list, .staff-chat-room) {
  padding: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis button {
  min-height: 54px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis strong {
  font-size: 18px !important;
  line-height: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis span {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-panel {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-panel) !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-channel,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-status span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 9px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--pf24-ink) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-channel strong,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event strong,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-status strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: var(--pf24-ink) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-channel span,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-channel small,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event small,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-status small {
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: var(--pf24-muted) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-status,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-events {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event {
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event b {
  font-size: 11px !important;
  color: var(--pf24-orange) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event em {
  display: block !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-style: normal !important;
  color: var(--pf24-muted) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .callcenter-taxi-order {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--pf24-ink) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .callcenter-taxi-order h4 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: var(--pf24-ink) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .callcenter-taxi-order p,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .callcenter-taxi-order label {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: var(--pf24-muted) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .compact-form-grid.three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .compact-form-grid .span-2 {
  grid-column: span 2 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .compact-form-grid input,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .compact-form-grid select {
  width: 100% !important;
  min-height: 34px !important;
  margin-top: 3px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--pf24-ink) !important;
  font-size: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .form-actions.compact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .live-map-layer-drawer {
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .live-map-layer-drawer summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  color: var(--pf24-ink) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .live-map-layer-drawer summary span {
  font-size: 12px !important;
  font-weight: 800 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .live-map-layer-drawer summary small {
  font-size: 11px !important;
  color: var(--pf24-muted) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .live-map-layer-drawer .live-map-tools,
html body.admin-body.active:has(#dashboard:not(.hidden)) .live-map-layer-drawer .live-map-owner-select {
  margin: 8px 10px 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-channel {
  min-height: 42px !important;
  padding: 7px 8px !important;
  border-radius: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .chat-messages {
  max-height: 300px !important;
  overflow: auto !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .chat-messages article {
  padding: 8px 10px !important;
  border-radius: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .chat-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .chat-form input {
  min-height: 36px !important;
  font-size: 13px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .chat-form .button {
  min-height: 36px !important;
  padding: 7px 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-table {
  max-height: 420px !important;
  overflow: auto !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-row {
  grid-template-columns: minmax(120px, .85fr) minmax(180px, 1.25fr) minmax(120px, .8fr) minmax(82px, .55fr) minmax(116px, .75fr) !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-head-row {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-summary-line {
  padding: 9px 10px !important;
  border-radius: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-summary-line h3 {
  margin: 0 0 2px !important;
  font-size: 15px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-summary-line p,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-summary-line span {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer {
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary {
  min-height: 46px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  cursor: pointer !important;
  list-style: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary::-webkit-details-marker {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary span,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary strong,
html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary small {
  display: block !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary strong {
  font-size: 13px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > summary small {
  color: var(--pf24-muted) !important;
  font-size: 11px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-detail-drawer > :not(summary) {
  margin: 10px !important;
}

/* Bedrijfsvoering en alle rolomgevingen: compact, rustig en voorspelbaar. */
:where(body.admin-body.active:has(#dashboard:not(.hidden)), body.portal-active) {
  --pf24-work-font: 12.5px;
  --pf24-work-font-small: 11.5px;
  --pf24-work-font-title: 16px;
  --pf24-work-gap: 10px;
  --pf24-work-pad: 10px;
  --pf24-work-radius: 8px;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
),
html body.portal-active #portalDashboard :where(
  .customer-section,
  .professional-section,
  .customer-request-card,
  .professional-cockpit,
  .customer-cockpit,
  .wallet-panel,
  .contact-request-panel,
  .profile-section,
  .module-card,
  .settings-card
) {
  font-size: var(--pf24-work-font) !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(.panel-head, .compact-head, .finance-head, .data-quality-hero, .settings-card-head) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: var(--pf24-work-gap) !important;
  align-items: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: var(--pf24-work-pad) !important;
  border-radius: var(--pf24-work-radius) !important;
  background: var(--pf24-role-soft, #f7fbfd) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(h1, h2) {
  font-size: clamp(17px, 1.25vw, 21px) !important;
  line-height: 1.15 !important;
  font-weight: 680 !important;
  margin: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(h3, h4, strong, b) {
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(p, span, small, em, label, li, td, th, input, select, textarea, button, .button) {
  font-size: var(--pf24-work-font) !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(small, em, .muted, .form-message, .empty) {
  font-size: var(--pf24-work-font-small) !important;
  line-height: 1.34 !important;
  color: var(--pf24-role-muted, #52697b) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(
  .dashboard-card,
  .summary-card,
  .metric-card,
  .settings-card,
  .finance-panel,
  .finance-priority,
  .finance-chart-block,
  .finance-block,
  .staff-console,
  .staff-subpanel,
  .staff-sessions,
  .staff-time-card,
  .data-quality-panel,
  .quality-panel,
  .audit-card,
  .audit-export-panel,
  .calculator-card,
  .calculator-result,
  .partners,
  details,
  article
) {
  padding: var(--pf24-work-pad) !important;
  border-radius: var(--pf24-work-radius) !important;
  border: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
  background: var(--pf24-role-panel, #fff) !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(
  .finance-summary-strip,
  .finance-priority-grid,
  .finance-columns,
  .finance-admin-checks,
  .finance-reconciliation,
  .staff-kpi-strip,
  .staff-workspace,
  .staff-time-admin-grid,
  .staff-time-form-grid,
  .data-quality-score-strip,
  .data-quality-layout,
  .settings-summary,
  .admin-grid,
  .calculator-grid,
  .audit-grid
) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important;
  gap: var(--pf24-work-gap) !important;
  align-items: start !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(.staff-workspace, .data-quality-layout, .finance-columns) {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(table, .table, .outbox-table, .audit-table, .finance-table) {
  width: 100% !important;
  font-size: var(--pf24-work-font-small) !important;
  border-collapse: collapse !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(td, th) {
  padding: 7px 8px !important;
  vertical-align: top !important;
  border-bottom: 1px solid var(--pf24-role-border, rgba(19, 40, 58, .14)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(input, select, textarea) {
  min-height: 36px !important;
  padding: 7px 9px !important;
  border-radius: 7px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
  #overviewPanel,
  #staffPanel,
  #financePanel,
  #calculatorPanel,
  #dataQualityPanel,
  #auditPanel
) :where(.button, button) {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 7px !important;
}

html body.portal-active #portalDashboard :where(
  .customer-section,
  .professional-section
) :where(.customer-request-card, .job-card, .summary-card, .wallet-panel, .contact-request-panel, .profile-section, .module-card, .settings-card, details, article) {
  padding: var(--pf24-work-pad) !important;
  border-radius: var(--pf24-work-radius) !important;
  box-shadow: none !important;
}

html body.portal-active #portalDashboard :where(
  .customer-section,
  .professional-section
) :where(h1, h2) {
  font-size: clamp(17px, 1.35vw, 22px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

html body.portal-active #portalDashboard :where(
  .customer-section,
  .professional-section
) :where(h3, h4, strong, b) {
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body.portal-active #portalDashboard :where(
  .customer-section,
  .professional-section
) :where(p, span, small, em, label, li, td, th, input, select, textarea, button, .button) {
  font-size: var(--pf24-work-font) !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 920px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) :where(
    #overviewPanel,
    #staffPanel,
    #financePanel,
    #calculatorPanel,
    #dataQualityPanel,
    #auditPanel
  ) :where(.staff-workspace, .data-quality-layout, .finance-columns) {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel :where(
    .communication-telephony-grid,
    .communication-telephony-status,
    .communication-telephony-events
  ) {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-telephony-event {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel :where(.staff-workspace, .staff-dossier, .staff-id-card, .staff-id-meta, .staff-id-actions) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-workspace {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-id-card {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-id-meta {
  display: grid !important;
  gap: 5px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-id-meta :where(strong, b, span, small) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-id-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  grid-column: 1 / -1 !important;
  justify-content: flex-start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-id-actions :where(.button, button) {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}

@media (max-width: 1180px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #staffPanel .staff-workspace {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-control-grid,
  html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .staff-chat-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .communication-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #communicationsPanel .outbox-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 1081px) {
  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard {
    grid-template-columns: 252px minmax(0, 1080px) !important;
    justify-content: center !important;
    max-width: 1380px !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .customer-section.portal-view-active,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section.portal-view-active {
    max-width: 1080px !important;
  }
}

/* Final request/intake guard: compact lists, readable details, simple customer intake. */
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.queue, .detail, .ticket-detail-layout, .ticket-main) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  max-width: 360px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  display: grid !important;
  gap: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 12px !important;
  min-height: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(strong, small, b, i) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) !important;
  align-items: start !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-primary h2 {
  font-size: clamp(22px, 2.3vw, 30px) !important;
  line-height: 1.1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-status {
  display: grid !important;
  gap: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout-body {
  max-width: 100% !important;
  overflow-x: auto !important;
}

body.customer-portal-active.portal-active .individual-request-workspace .portal-request-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

body.customer-portal-active.portal-active .individual-request-workspace .request-core-card,
body.customer-portal-active.portal-active .individual-request-workspace .request-photo-uploader {
  max-width: 860px !important;
  width: 100% !important;
}

body.customer-portal-active.portal-active .individual-request-workspace .request-core-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, .45fr) minmax(180px, .55fr) !important;
  gap: 10px !important;
}

body.customer-portal-active.portal-active .individual-request-workspace .request-core-grid .wide {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-width: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: 360px !important;
    overflow: auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts,
  body.customer-portal-active.portal-active .individual-request-workspace .request-core-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

html[data-theme="dark"] {
  --pf24-final-text: #f6f9fc;
  --pf24-final-muted: #b8c8d8;
  --pf24-final-line: rgba(184, 207, 230, .22);
  --pf24-final-page: #071522;
  --pf24-final-surface: #0d2236;
  --pf24-final-soft: #102a42;
}

:where(body, .admin-body, .portal-active, .public-site, .login-entry, .pos-body, .selfscan-body, .workapp-entry, .klantapp-entry) {
  background: var(--pf24-final-page) !important;
  color: var(--pf24-final-text) !important;
  font-size: 14px;
  line-height: 1.45;
}

:where(h1, h2, h3, h4, p, li, label, span, strong, b, small, summary, td, th, input, select, textarea, button, a) {
  letter-spacing: 0 !important;
}

:where(h1, h2, h3, h4) {
  color: inherit;
  overflow-wrap: anywhere;
}

:where(p, li, label, span, small, td, th, input, select, textarea, button, a) {
  overflow-wrap: anywhere;
}

:where(.topbar, .portal-topbar) {
  min-height: var(--pf24-final-topbar);
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

:where(.admin-body, .portal-active, .login-entry) :where(.topbar, .portal-topbar) {
  background: var(--pf24-final-blue-900) !important;
  color: #fff !important;
}

body.public-site :where(.topbar, .portal-topbar) {
  color: var(--pf24-final-text) !important;
}

body.public-site html[data-theme="dark"] :where(.topbar, .portal-topbar),
html[data-theme="dark"] body.public-site :where(.topbar, .portal-topbar) {
  color: #fff !important;
}

:where(.topbar .brand, .portal-topbar .brand, .public-brand, .portal-sidebar-brand) {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

:where(.topbar .brand, .portal-topbar .brand, .public-brand, .portal-sidebar-brand, .portal-page-footer, .app-powered-footer, .admin-page-footer) img[src*="profix24-logo"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  padding: 0 !important;
}

:where(.topbar .brand, .portal-topbar .brand) img[src*="profix24-logo-wordmark-light"],
:where(.topbar .brand, .portal-topbar .brand) img[src*="profix24-logo-transparent-light"] {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)) !important;
}

:where(.topbar nav, .portal-topbar nav, .nav-links, .public-nav, .portal-nav) {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

:where(.topbar nav a, .portal-topbar nav a, .nav-links a, .public-nav a, .portal-nav a, .topbar nav button, .portal-topbar nav button) {
  min-height: 34px !important;
  padding: 7px 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
}

:where(.topbar nav a, .portal-topbar nav a, .nav-links a, .public-nav a, .portal-nav a, .topbar nav button, .portal-topbar nav button):hover {
  background: var(--pf24-final-orange-soft) !important;
  color: var(--pf24-final-orange) !important;
}

:where(.admin-tabs, .professional-section-nav, .portal-section-nav) {
  background: var(--pf24-final-blue-900) !important;
  color: #f6f9fc !important;
  border-color: rgba(184, 207, 230, .16) !important;
}

html[data-theme="light"] :where(.professional-section-nav, .portal-section-nav) {
  background: #eaf2f7 !important;
  color: #102033 !important;
  border-color: var(--pf24-final-line) !important;
}

:where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button:not(.voice-menu-icon-button):not(.portal-sidebar-logout), a, summary, .sidebar-chat-compact) {
  min-height: 32px !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}

:where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(button.active, a.active, a[aria-current="page"], details[open] > summary) {
  border-color: rgba(245, 130, 32, .42) !important;
  background: var(--pf24-final-orange-soft) !important;
  color: var(--pf24-final-orange) !important;
}

:where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(svg, [data-lucide]) {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}

:where(.admin-tabs, .professional-section-nav, .portal-section-nav) :where(.portal-nav-label, button span, a span, summary span) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(.dashboard-card, .summary-card, .settings-card, .module-card, .metric-card, .portal-panel, .content-card, .login-panel, .panel, .card, .surface, details, fieldset) {
  border-radius: var(--pf24-final-radius) !important;
  border-color: var(--pf24-final-line) !important;
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
}

:where(input, select, textarea, .input-like) {
  min-height: 36px;
  border-radius: 7px !important;
  border-color: var(--pf24-final-line) !important;
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
}

:where(.button, button.button, a.button) {
  border-radius: 7px !important;
  line-height: 1.15 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard {
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard > .tab-panel {
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  display: grid !important;
  grid-template-columns: clamp(285px, 28vw, 320px) minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  width: auto !important;
  min-width: 0 !important;
  max-width: 320px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  width: 100% !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main > * {
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.detail-head, .info-grid, .description, .quote-box, .notes, .ticket-timeline, .update-form, .dispute-panel, .planning-chat-panel, .dispatch-panel, .execution-monitor, .platform-contribution-panel, .payment-correction-panel, .request-detail-foldout) {
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
  border-color: var(--pf24-final-line) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-compact-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-titleline {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-titleline h2 {
  margin: 0 !important;
  color: var(--pf24-final-text) !important;
  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.12 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-titleline p,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-route-card span {
  margin: 0 !important;
  color: var(--pf24-final-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-type {
  width: fit-content !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 130, 0, 0.14) !important;
  color: #b45309 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-route-card {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 10px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: rgba(15, 36, 56, 0.04) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-route-card.owner-first {
  background: rgba(20, 184, 166, 0.10) !important;
  border-color: rgba(20, 184, 166, 0.28) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-route-card strong {
  color: var(--pf24-final-text) !important;
  font-size: 13px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-quickfacts,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-chips {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-quickfacts span,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-chips span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 100% !important;
  padding: 6px 8px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 999px !important;
  background: rgba(15, 36, 56, 0.035) !important;
  color: var(--pf24-final-text) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-quickfacts svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--pf24-final-orange) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}

@media (max-width: 900px) {
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-compact-header,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-target, .request-item-tags) {
    display: none !important;
  }
}

@media (max-width: 860px) {
  :root {
    --pf24-final-topbar: 56px;
  }

  :where(body, .admin-body, .portal-active, .public-site, .login-entry) {
    font-size: 13px;
  }

  :where(.topbar, .portal-topbar) {
    min-height: var(--pf24-final-topbar);
  }

  :where(.topbar nav, .portal-topbar nav, .nav-links, .public-nav, .portal-nav) {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  :where(.topbar nav, .portal-topbar nav, .nav-links, .public-nav, .portal-nav)::-webkit-scrollbar {
    display: none;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-width: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  :where(.dashboard-card, .summary-card, .settings-card, .module-card, .metric-card, .portal-panel, .content-card, .login-panel, .panel, .card, .surface, details, fieldset) {
    padding-inline: 10px !important;
  }

  :where(.topbar nav a, .portal-topbar nav a, .nav-links a, .public-nav a, .portal-nav a, .topbar nav button, .portal-topbar nav button) {
    min-height: 32px !important;
    padding-inline: 6px !important;
    font-size: 12px !important;
  }
}

/* Requests and intake final pass: one calm work queue, one action card, details only on demand. */
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  display: grid !important;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) !important;
  gap: 12px !important;
  min-width: 0 !important;
  height: calc(100dvh - var(--admin-topbar-height, 70px) - var(--admin-footer-height, 54px) - 12px) !important;
  max-height: calc(100dvh - var(--admin-topbar-height, 70px) - var(--admin-footer-height, 54px) - 12px) !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.queue, .detail) {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  max-width: none !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px) !important;
  gap: 8px !important;
  padding: 10px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue .panel-head h2 {
  font-size: 18px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 10px 8px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  padding: 0 10px 12px !important;
  overflow: hidden auto !important;
  scrollbar-width: thin !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px 8px !important;
  min-height: 66px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  text-align: left !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(strong, b, small, i, span) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  font-size: 13px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  overflow: hidden auto !important;
  padding: 10px 10px calc(var(--admin-footer-height, 54px) + 16px) !important;
  scrollbar-width: thin !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-detail-layout,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .ticket-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px) !important;
  gap: 9px !important;
  padding: 12px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-next,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons {
  grid-column: 1 / -1 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route {
  display: grid !important;
  gap: 2px !important;
  padding: 9px 10px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 7px !important;
  background: rgba(15, 36, 56, 0.04) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route.owner-first {
  background: rgba(20, 184, 166, 0.10) !important;
  border-color: rgba(20, 184, 166, 0.28) !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route strong,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-next strong {
  color: var(--pf24-final-text) !important;
  font-size: 13px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-route span,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-next span,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-next small {
  color: var(--pf24-final-muted) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 7px 8px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 7px !important;
  color: var(--pf24-final-text) !important;
  font-size: 11px !important;
  overflow-wrap: anywhere !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts svg,
.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons .button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  border-radius: 7px !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-compact-header {
  display: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout > summary {
  min-height: 38px !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  height: calc(100dvh - var(--admin-topbar-height, 70px) - var(--admin-footer-height, 54px) - 12px) !important;
  max-height: calc(100dvh - var(--admin-topbar-height, 70px) - var(--admin-footer-height, 54px) - 12px) !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
  display: grid !important;
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.25fr) minmax(280px, .9fr) !important;
  grid-template-areas:
    "contact request assistant"
    "customer request preview"
    "location request preview"
    "submit submit submit" !important;
  gap: 10px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-contact { grid-area: contact !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-customer { grid-area: customer !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-location { grid-area: location !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request { grid-area: request !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-assistant { grid-area: assistant !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-preview { grid-area: preview !important; }
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row { grid-area: submit !important; }

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-submit-row {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-final-surface) !important;
  color: var(--pf24-final-text) !important;
  overflow: hidden auto !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card > strong::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--pf24-final-orange) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request .admin-service-picker,
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request label:has(textarea),
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request > strong {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1180px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(270px, 310px) minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr) !important;
    grid-template-areas:
      "contact request"
      "customer request"
      "location request"
      "assistant preview"
      "submit submit" !important;
    overflow: hidden auto !important;
  }
}

@media (max-width: 860px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace,
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-height: 48dvh !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    height: auto !important;
    overflow: visible !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts,
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form,
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request {
    grid-template-columns: 1fr !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-areas:
      "contact"
      "customer"
      "location"
      "request"
      "assistant"
      "preview"
      "submit" !important;
    overflow: visible !important;
  }
}

/* Highest priority admin shell rules. Keep these at the bottom of this file. */
html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar {
  background: var(--pf24-final-blue-900) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar :where(a, button, label, span, strong, small, select) {
  color: #ffffff !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar .brand img[src*="profix24-logo"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .48)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(button:not(.voice-menu-icon-button):not(.portal-sidebar-logout), .sidebar-chat-compact, summary, .system-switch a) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs :where(button.active:not(.voice-menu-icon-button):not(.portal-sidebar-logout), .sidebar-chat-compact.active, details[open] > summary) {
  background: rgba(245, 130, 32, .14) !important;
  border-color: rgba(245, 130, 32, .44) !important;
  color: var(--pf24-final-orange) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  grid-template-columns: clamp(260px, 24vw, 290px) minmax(0, 1fr) !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  max-width: 290px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-width: 0 !important;
}

@media (max-width: 1080px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(235px, 270px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 860px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > .tab-panel {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: 1fr !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-width: none !important;
  }
}

/* Highest priority public-site rules. Menu links are text links, not blocks. */
html body.public-site :where(.topbar nav a, .site-nav > a, .site-nav > details > summary, .public-settings-menu > summary, .nav-links a, .public-nav a),
html body.public-site :where(.topbar nav a.active, .site-nav > a.active, .nav-links a.active, .public-nav a.active, .topbar nav a[aria-current="page"], .site-nav > a[aria-current="page"], .nav-links a[aria-current="page"], .public-nav a[aria-current="page"], .site-nav > details[open] > summary, .public-settings-menu[open] > summary) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--pf24-final-text) !important;
}

html body.public-site :where(.topbar nav a:hover, .site-nav > a:hover, .site-nav > details > summary:hover, .public-settings-menu > summary:hover, .nav-links a:hover, .public-nav a:hover) {
  background: transparent !important;
  color: var(--pf24-final-orange) !important;
}

html body.public-site :where(.topbar nav a.active, .site-nav > a.active, .nav-links a.active, .public-nav a.active, .topbar nav a[aria-current="page"], .site-nav > a[aria-current="page"], .nav-links a[aria-current="page"], .public-nav a[aria-current="page"], .site-nav > details[open] > summary, .public-settings-menu[open] > summary) {
  color: var(--pf24-final-orange) !important;
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  text-decoration-thickness: 2px !important;
}

html body.public-site.public-home .topbar nav a.active,
html body.public-site.public-home .site-nav > a[aria-current="page"],
html body.public-site .topbar nav a.active[href],
html body.public-site .site-nav > a.active[href],
html body.public-site .site-nav > a[aria-current="page"],
html body.public-site .nav-links a.active[href],
html body.public-site .public-nav a.active[href] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body.public-site :where(.hero, .public-hero, .homepage-hero, .site-hero) {
  color: #ffffff !important;
}

html body.public-site :where(.hero, .public-hero, .homepage-hero, .site-hero) :where(h1, h2, h3, p, span, strong, small, a:not(.button)) {
  color: inherit !important;
}

html body.public-site :where(.hero, .public-hero, .homepage-hero, .site-hero) :where(.button.secondary, a.secondary) {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .45) !important;
}

/* Package composer: compact choice helper instead of a long price page. */
html body.public-site .package-detail-hero,
html body.public-site .package-detail-content {
  max-width: 1180px !important;
  margin-inline: auto !important;
}

html body.public-site .package-composer {
  margin: 22px 0 30px !important;
  padding: 18px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%) !important;
  box-shadow: 0 18px 42px rgba(15, 36, 56, .08) !important;
}

html[data-theme="dark"] body.public-site .package-composer {
  background: linear-gradient(180deg, #0d2236 0%, #071522 100%) !important;
  box-shadow: none !important;
}

html body.public-site .package-composer-head {
  max-width: 820px !important;
  margin-bottom: 16px !important;
}

html body.public-site .package-composer-head h2 {
  font-size: clamp(1.45rem, 2.1vw, 2.05rem) !important;
  line-height: 1.12 !important;
}

html body.public-site .package-billing-choice {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

html body.public-site .package-billing-choice label,
html body.public-site .package-choice-row label,
html body.public-site .package-module-options label,
html body.public-site .package-location-options label {
  cursor: pointer !important;
}

html body.public-site .package-billing-choice span,
html body.public-site .package-choice-row span {
  border-radius: 9px !important;
  background: #ffffff !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}

html body.public-site .package-billing-choice input:checked + span,
html body.public-site .package-choice-row input:checked + span {
  border-color: var(--pf24-final-orange) !important;
  background: #fff5eb !important;
  box-shadow: inset 0 0 0 1px var(--pf24-final-orange), 0 10px 24px rgba(245, 130, 32, .12) !important;
}

html body.public-site .package-choice-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

html body.public-site .package-choice-row span {
  min-height: 86px !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 14px !important;
}

html body.public-site .package-choice-row b {
  font-size: 1rem !important;
}

html body.public-site .package-choice-row small {
  color: #405468 !important;
}

html body.public-site .package-composer-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px) !important;
  gap: 16px !important;
  align-items: start !important;
}

html body.public-site .package-composer-controls {
  gap: 10px !important;
}

html body.public-site .package-composer-controls details {
  border-radius: 10px !important;
  overflow: clip !important;
}

html body.public-site .package-composer-controls summary {
  min-height: 52px !important;
  align-items: center !important;
  background: #ffffff !important;
}

html body.public-site .package-composer-controls details[open] summary {
  border-bottom: 1px solid var(--pf24-final-line) !important;
}

html body.public-site .package-module-options {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.public-site .package-module-options label,
html body.public-site .package-location-options label {
  border-radius: 9px !important;
  background: #f9fbfd !important;
}

html body.public-site .package-module-options label:has(input:checked) {
  border-color: var(--pf24-final-orange) !important;
  background: #fff5eb !important;
}

html body.public-site .package-module-options small {
  margin-top: 2px !important;
  color: #516274 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

html body.public-site .package-module-options em {
  margin-top: 4px !important;
  color: #102033 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

html body.public-site .package-location-options input {
  width: 64px !important;
  text-align: center !important;
}

html body.public-site .package-composer-summary {
  top: 76px !important;
  border-radius: 12px !important;
  border-color: rgba(245, 130, 32, .58) !important;
  background: #071522 !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(7, 21, 34, .18) !important;
}

html body.public-site .package-composer-summary :where(span, h3, strong, small, dt, dd, li) {
  color: inherit !important;
}

html body.public-site .package-composer-summary > span,
html body.public-site .package-composer-summary small,
html body.public-site .package-composer-summary dt {
  color: rgba(255, 255, 255, .72) !important;
}

html body.public-site .package-composer-total strong {
  color: #ffffff !important;
  font-size: clamp(2rem, 3vw, 2.55rem) !important;
}

html body.public-site .package-composer-summary dl div {
  border-color: rgba(255, 255, 255, .16) !important;
}

html body.public-site .package-composer-summary .button {
  width: 100% !important;
  justify-content: center !important;
}

html body.public-site .package-info-details {
  margin-block: 10px !important;
  border-radius: 10px !important;
}

html body.public-site .package-info-details > summary {
  min-height: 52px !important;
  align-items: center !important;
}

@media (max-width: 960px) {
  html body.public-site .package-choice-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.public-site .package-composer-layout {
    grid-template-columns: 1fr !important;
  }

  html body.public-site .package-composer-summary {
    position: static !important;
  }
}

@media (max-width: 560px) {
  html body.public-site .package-composer {
    padding: 12px !important;
  }

  html body.public-site .package-choice-row,
  html body.public-site .package-module-options {
    grid-template-columns: 1fr !important;
  }

  html body.public-site .package-choice-row span {
    min-height: 66px !important;
  }
}

/* Mobile admin rescue layer: real phone layout, no half desktop sidebar. */
html body.admin-body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-page-footer {
  right: 10px !important;
  left: auto !important;
  bottom: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 150px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #5b6b7c !important;
  box-shadow: 0 8px 22px rgba(16, 32, 51, .12) !important;
  z-index: 70 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-page-footer span,
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-page-footer small {
  display: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-page-footer img {
  width: 72px !important;
  max-width: 72px !important;
  height: auto !important;
}

@media (max-width: 720px) {
  html,
  html body.admin-body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) {
    --admin-topbar-height: 54px !important;
    --admin-sidebar-width: 100vw !important;
    --admin-footer-height: 0px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar {
    position: sticky !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 54px !important;
    padding: 6px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar .brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar .brand img[src*="profix24-logo"] {
    width: 116px !important;
    max-width: 42vw !important;
    height: auto !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar .brand .admin-title {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar nav {
    justify-self: end !important;
    max-width: 52vw !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar nav a {
    min-height: 32px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > header.topbar .language-select {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding-inline: 6px !important;
    color: transparent !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) > .admin-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
    background: #e8f1f7 !important;
    color: #102033 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--pf24-final-line) !important;
  }

  html[data-theme="dark"] body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs {
    background: #071522 !important;
    color: #f6f9fc !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs::before,
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-caption,
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-workspace {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary button:not(.active):not([data-admin-tab="overview"]):not([data-admin-tab="intake"]):not([data-admin-tab="requests"]):not([data-admin-tab="communications"]):not([data-admin-tab="settings"]) {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #102033 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary button.active {
    background: transparent !important;
    color: #102033 !important;
    border-bottom: 3px solid var(--pf24-final-orange) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-primary button svg {
    width: 17px !important;
    height: 17px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-communication #adminSidebarChats {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-menu-actions,
  html body.admin-body.active:has(#dashboard:not(.hidden)) .portal-assistant-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .voice-menu-icon-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-bottom {
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-screens {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .portal-sidebar-logout {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    background: #fff2df !important;
    color: #102033 !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 72px !important;
    display: block !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > .tab-panel,
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard > .tab-panel:not(.hidden),
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard .workspace {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.requests-toolbar, .detail-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(select, input, textarea, button) {
    max-width: 100% !important;
  }
}

@media (max-width: 720px) {
  html body.admin-body.active {
    --admin-topbar-height: 54px !important;
    --admin-sidebar-width: 100vw !important;
    --admin-footer-height: 0px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active > header.topbar {
    position: sticky !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body.admin-body.active > header.topbar .brand {
    min-width: 0 !important;
    height: 42px !important;
    overflow: hidden !important;
  }

  html body.admin-body.active > header.topbar .brand img[src*="profix24-logo"] {
    width: 118px !important;
    max-width: 44vw !important;
    height: auto !important;
  }

  html body.admin-body.active > header.topbar .admin-title,
  html body.admin-body.active > header.topbar .language-select {
    display: none !important;
  }

  html body.admin-body.active > header.topbar nav {
    justify-self: end !important;
    max-width: 46vw !important;
    display: flex !important;
    justify-content: flex-end !important;
    overflow: hidden !important;
  }

  html body.admin-body.active > header.topbar nav a {
    min-height: 32px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    color: #ffffff !important;
  }

  html body.admin-body.active > .admin-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active #loginPanel,
  html body.admin-body.active .login-panel {
    display: none !important;
  }

  html body.admin-body.active .admin-tabs {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
    background: #e8f1f7 !important;
    color: #102033 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--pf24-final-line) !important;
  }

  html body.admin-body.active .admin-shell > .admin-tabs {
    margin: 0 !important;
  }

  html body.admin-body.active .admin-tabs::before,
  html body.admin-body.active .admin-nav-caption,
  html body.admin-body.active .admin-nav-workspace,
  html body.admin-body.active .admin-nav-screens,
  html body.admin-body.active .admin-nav-communication #adminSidebarChats {
    display: none !important;
  }

  html body.admin-body.active .admin-nav-primary {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active .admin-nav-primary button:not(.active):not([data-admin-tab="overview"]):not([data-admin-tab="intake"]):not([data-admin-tab="requests"]):not([data-admin-tab="communications"]):not([data-admin-tab="settings"]) {
    display: none !important;
  }

  html body.admin-body.active .admin-nav-primary button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 8px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #102033 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  html body.admin-body.active .admin-nav-primary button.active {
    background: transparent !important;
    color: #102033 !important;
    border-bottom: 3px solid var(--pf24-final-orange) !important;
  }

  html body.admin-body.active .admin-nav-communication {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active .voice-menu-actions,
  html body.admin-body.active .portal-assistant-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body.admin-body.active .voice-menu-icon-button {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
  }

  html body.admin-body.active .admin-nav-bottom {
    display: grid !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  html body.admin-body.active .portal-sidebar-logout {
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    justify-content: center !important;
    background: #fff2df !important;
    color: #102033 !important;
  }

  html body.admin-body.active #dashboard {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 10px 72px !important;
    display: block !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active .admin-shell > .admin-tabs + #dashboard,
  html body.admin-body.active .admin-shell > #dashboard {
    margin-top: 0 !important;
  }

  html body.admin-body.active #dashboard > .tab-panel,
  html body.admin-body.active #dashboard > .tab-panel:not(.hidden),
  html body.admin-body.active #dashboard .workspace {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body.admin-body.active [data-tab-panel="requests"] .queue,
  html body.admin-body.active [data-tab-panel="requests"] .detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html body.admin-body.active .admin-page-footer {
    right: 10px !important;
    left: auto !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: 120px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 5px 8px !important;
  }
}

/* Admin mobiel: werkprocessen zijn echte selecteerbare schermen, geen losse kopjes. */
html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .system-switch {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .system-switch select {
  width: 100% !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .system-switch select.hidden {
  display: none !important;
}

@media (max-width: 760px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-tabs .admin-nav-context-caption {
    display: none !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) .admin-nav-workspace {
    display: block !important;
  }
}

/* Financieel: offertes/facturen compact, controleerbaar en bruikbaar op tablet/mobiel. */
.portal-active .sales-document-compliance-card {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, .34);
  border-radius: 8px;
  background: rgba(245, 158, 11, .08);
}

.portal-active .sales-document-compliance-card strong,
.portal-active .sales-document-compliance-card span {
  display: block;
}

.portal-active .sales-document-compliance-card > div:first-child span {
  font-size: 12px;
  color: var(--muted, #5f6f82);
}

.portal-active .sales-document-compliance-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.portal-active .sales-document-compliance-grid span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(16, 32, 51, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
}

.portal-active .sales-document-compliance-grid span.ok {
  color: #14532d;
}

.portal-active .sales-document-compliance-grid span.attention {
  color: #92400e;
}

.portal-active .professionalOfferForm .quote-line {
  grid-template-columns: minmax(160px, 1.35fr) minmax(58px, .35fr) minmax(78px, .5fr) minmax(108px, .65fr) minmax(98px, .55fr) minmax(150px, .85fr) minmax(90px, .55fr) 38px !important;
  align-items: center;
}

.portal-active .offer-gaccount-fields {
  display: grid;
  grid-template-columns: minmax(46px, .42fr) minmax(92px, 1fr);
  gap: 6px;
}

.portal-active .offer-gaccount-fields input {
  min-width: 0;
}

.portal-active .sales-document-list {
  display: grid;
  gap: 8px;
}

.portal-active .sales-document-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(16, 32, 51, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .74);
}

.portal-active .sales-document-list-main {
  display: grid !important;
  gap: 3px !important;
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text, #102033) !important;
  text-align: left !important;
}

.portal-active .sales-document-list-main strong,
.portal-active .sales-document-list-main span,
.portal-active .sales-document-list-main small {
  overflow-wrap: anywhere;
}

.portal-active .sales-document-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.portal-active .sales-document-row-actions .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 130, 0, .12);
  color: #061a33;
}

@media (max-width: 900px) {
  .portal-active .sales-document-compliance-card {
    grid-template-columns: 1fr;
  }

  .portal-active .sales-document-compliance-grid {
    justify-content: flex-start;
  }

  .portal-active .professionalOfferForm .quote-line {
    grid-template-columns: 1fr 1fr !important;
  }

  .portal-active .professionalOfferForm .quote-line [name="lineDescription"],
  .portal-active .professionalOfferForm .quote-line .offer-gaccount-fields {
    grid-column: 1 / -1;
  }

  .portal-active .sales-document-list-row {
    grid-template-columns: 1fr;
  }

  .portal-active .sales-document-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .portal-active .professionalOfferForm .quote-line {
    grid-template-columns: 1fr !important;
  }

  .portal-active .professionalOfferForm .quote-line > * {
    grid-column: auto !important;
  }
}

/* Administratie: echte blockers direct bovenaan, niet verstopt in een technisch details-blok. */
.portal-active .professional-accounting-priority {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, .38);
  border-radius: 8px;
  background: rgba(245, 158, 11, .08);
}

.portal-active .professional-accounting-priority header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-active .professional-accounting-priority header strong,
.portal-active .professional-accounting-priority header small {
  display: block;
}

.portal-active .professional-accounting-priority-list,
.portal-active .professional-accounting-review > div {
  display: grid;
  gap: 8px;
}

.portal-active .professional-accounting-review-item {
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(16, 32, 51, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.portal-active .professional-accounting-review-item b,
.portal-active .professional-accounting-review-item small {
  display: block;
}

.portal-active .professional-accounting-review-item small {
  font-size: 12px;
  color: var(--muted, #5f6f82);
}

.portal-active .professional-accounting-review-item form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 6px;
  align-items: end;
}

.portal-active .professional-accounting-review-item .form-message {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 0;
}

@media (max-width: 980px) {
  .portal-active .professional-accounting-review-item,
  .portal-active .professional-accounting-review-item form {
    grid-template-columns: 1fr;
  }
}

/* Definitieve publieke voordeur: vlakvrije navigatie, leesbare hero en rustige login. */
html body.public-site > .topbar {
  background: rgba(255, 255, 255, .92) !important;
  border-bottom: 1px solid rgba(16, 32, 51, .10) !important;
  box-shadow: 0 12px 30px rgba(16, 32, 51, .08) !important;
  backdrop-filter: blur(14px) !important;
}

html[data-theme="dark"] body.public-site > .topbar {
  background: rgba(5, 17, 29, .94) !important;
  border-bottom-color: rgba(255, 255, 255, .12) !important;
}

html body.public-site :where(.site-nav, .public-nav, .nav-links) {
  gap: 14px !important;
}

html body.public-site :where(.site-nav > a, .site-nav > details > summary, .public-settings-menu > summary, .topbar nav a, .topbar nav button),
html body.public-site :where(.site-nav > a:hover, .site-nav > a:focus, .site-nav > a[aria-current="page"], .site-nav > details > summary:hover, .site-nav > details[open] > summary, .public-settings-menu > summary:hover, .public-settings-menu[open] > summary, .topbar nav a:hover, .topbar nav a.active, .topbar nav button:hover) {
  min-height: 34px !important;
  height: auto !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline-offset: 4px !important;
  color: var(--pf24-final-blue-900) !important;
  text-decoration: none !important;
}

html[data-theme="dark"] body.public-site :where(.site-nav > a, .site-nav > details > summary, .public-settings-menu > summary, .topbar nav a, .topbar nav button),
html[data-theme="dark"] body.public-site :where(.site-nav > a:hover, .site-nav > a:focus, .site-nav > a[aria-current="page"], .site-nav > details > summary:hover, .site-nav > details[open] > summary, .public-settings-menu > summary:hover, .public-settings-menu[open] > summary, .topbar nav a:hover, .topbar nav a.active, .topbar nav button:hover) {
  color: #f6f9fc !important;
}

html body.public-site :where(.site-nav > a, .site-nav > details > summary, .public-settings-menu > summary)::before,
html body.public-site :where(.site-nav > a, .site-nav > details > summary, .public-settings-menu > summary)::after {
  background: transparent !important;
  box-shadow: none !important;
}

html body.public-site .site-nav > a[aria-current="page"],
html body.public-site .site-nav > a:hover,
html body.public-site .site-nav > details > summary:hover,
html body.public-site .site-nav > details[open] > summary,
html body.public-site .public-settings-menu > summary:hover,
html body.public-site .public-settings-menu[open] > summary {
  color: var(--pf24-final-orange) !important;
}

html body.public-site .site-nav > a[aria-current="page"] {
  text-decoration: underline !important;
  text-decoration-color: var(--pf24-final-orange) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 7px !important;
}

html body.public-site .public-settings-menu > summary {
  width: 34px !important;
  min-width: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
}

html body.public-site .public-settings-menu > summary :where(svg, [data-lucide]) {
  width: 18px !important;
  height: 18px !important;
}

html body.public-site .site-hero {
  min-height: clamp(620px, 82vh, 820px) !important;
  background: #dfeaf1 !important;
}

html body.public-site .site-hero-overlay {
  background:
    linear-gradient(90deg, rgba(5, 17, 29, .78) 0%, rgba(5, 17, 29, .58) 42%, rgba(5, 17, 29, .18) 72%, rgba(5, 17, 29, .08) 100%) !important;
}

html[data-theme="light"] body.public-site .site-hero-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .80) 42%, rgba(255, 255, 255, .34) 72%, rgba(255, 255, 255, .14) 100%) !important;
}

html body.public-site .site-hero-content {
  max-width: 620px !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .34) !important;
}

html[data-theme="light"] body.public-site .site-hero-content {
  text-shadow: none !important;
}

html[data-theme="light"] body.public-site .site-hero :where(h1, .site-hero-tagline, .site-hero-copy, .site-kicker, .site-hero-points li) {
  color: #071a2f !important;
}

html[data-theme="light"] body.public-site .site-hero .site-kicker {
  color: #bf5f00 !important;
}

html body.public-site .audience-route-grid,
html body.public-site .package-choice-row,
html body.public-site .extra-costs-grid,
html body.public-site .package-standard-strip,
html body.public-site .capability-list {
  align-items: stretch !important;
}

html body.public-site .package-info-details > summary {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

html body.public-site .package-info-details > summary i,
html body.public-site .package-info-details > summary [data-lucide] {
  flex: 0 0 auto !important;
  color: var(--pf24-final-orange) !important;
}

html body.login-entry {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at top left, rgba(245, 130, 32, .14), transparent 34%),
    linear-gradient(180deg, #f3f7fa 0%, #e7eff4 100%) !important;
}

html[data-theme="dark"] body.login-entry {
  background:
    radial-gradient(circle at top left, rgba(245, 130, 32, .18), transparent 34%),
    linear-gradient(180deg, #071522 0%, #05111d 100%) !important;
}

html body.login-entry .portal-topbar {
  background: rgba(5, 17, 29, .96) !important;
  color: #ffffff !important;
}

html body.login-entry .portal-shell {
  min-height: calc(100vh - 150px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 34px 16px 96px !important;
}

html body.login-entry .login-panel {
  width: min(100%, 460px) !important;
  margin: 0 auto !important;
  padding: 24px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(16, 32, 51, .12) !important;
  box-shadow: 0 24px 70px rgba(16, 32, 51, .16) !important;
}

html[data-theme="dark"] body.login-entry .login-panel {
  background: rgba(7, 21, 34, .94) !important;
  border-color: rgba(255, 255, 255, .12) !important;
}

html body.login-entry .login-panel h1 {
  font-size: 28px !important;
  line-height: 1.12 !important;
}

html body.login-entry .login-entry-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

html body.login-entry .login-entry-actions :where(.button, .quiet-link) {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  html body.public-site > .topbar {
    background: #071a2f !important;
  }

  html[data-theme="light"] body.public-site > .topbar {
    background: #e8f1f6 !important;
  }

  html body.public-site .site-nav {
    gap: 2px !important;
  }

  html body.public-site .site-nav > :where(a, details > summary),
  html body.public-site .public-settings-menu > summary {
    width: 100% !important;
    min-height: 42px !important;
    padding: 8px 2px !important;
  }

  html body.public-site .site-hero {
    min-height: 680px !important;
  }

  html[data-theme="light"] body.public-site .site-hero-overlay {
    background: linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, .34) 100%) !important;
  }
}

/* Aanvragen/intake productie-afwerking: scanbare wachtrij, brede detailkolom, geen mega-kaarten. */
html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  grid-template-columns: minmax(270px, 320px) minmax(640px, 1fr) !important;
  gap: 12px !important;
  padding: 10px 12px 12px !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  max-width: 320px !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat {
  min-height: 42px !important;
  padding: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat strong {
  font-size: 15px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat small {
  font-size: 10px !important;
  text-transform: uppercase !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  padding: 8px 9px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-target,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-tags,
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .risk-line {
  grid-column: 1 / -1 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top strong {
  font-size: 13px !important;
  line-height: 1.22 !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top b {
  padding: 3px 6px !important;
  border-radius: 999px !important;
  background: rgba(245, 130, 32, .13) !important;
  color: #8a4300 !important;
  font-size: 10px !important;
}

html[data-theme="dark"] body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-top b {
  color: #ffbd7a !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) !important;
  gap: 10px !important;
  padding: 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-primary h2 {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  line-height: 1.12 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-primary p:not(.eyebrow) {
  margin-top: 6px !important;
  max-width: 78ch !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-status {
  grid-template-columns: 1fr !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-status span {
  min-height: 42px !important;
  padding: 7px 9px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 7px !important;
  background: rgba(15, 36, 56, .035) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout {
  margin: 0 !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: var(--pf24-final-surface) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout > summary {
  min-height: 36px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout-body {
  padding: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .notes {
  padding: 10px !important;
  border: 1px solid var(--pf24-final-line) !important;
  border-radius: 8px !important;
  background: rgba(15, 36, 56, .025) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
  padding: 10px 12px 12px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
  grid-template-columns: minmax(240px, .72fr) minmax(430px, 1.28fr) minmax(260px, .82fr) !important;
  gap: 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-step-card {
  max-height: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request .admin-service-picker,
html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request label:has(textarea),
html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request > strong {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1220px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form {
    grid-template-columns: minmax(270px, .9fr) minmax(0, 1.1fr) !important;
  }
}

@media (max-width: 860px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace,
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] > [data-tab-panel="intake"] {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    max-width: none !important;
    height: auto !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item-meta,
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .guided-intake-form,
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="intake"] .intake-card-request {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Definitieve override: aanvragen/intake wint van oudere reparatieregels hierboven. */
.admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  max-width: 360px !important;
  height: auto !important;
  max-height: none !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) !important;
}

@media (max-width: 860px) {
  .admin-body:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary,
  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-width: none !important;
  }

  .admin-body:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: 360px !important;
    overflow: auto !important;
  }
}

/* Requests cockpit final pass: one stable layout for list, detail and intake. */
@media (min-width: 1100px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(270px, 320px) minmax(640px, 1fr) !important;
  }
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.queue, .detail, .ticket-detail-layout, .ticket-main, .request-action-summary, .request-detail-foldout, .notes) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
  max-width: 320px !important;
  align-self: start !important;
  position: sticky !important;
  top: calc(var(--admin-topbar-height, 70px) + 10px) !important;
  max-height: calc(100dvh - var(--admin-topbar-height, 70px) - var(--admin-footer-height, 54px) - 26px) !important;
  overflow: hidden !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
  max-height: calc(100dvh - var(--admin-topbar-height, 70px) - var(--admin-footer-height, 54px) - 250px) !important;
  min-height: 180px !important;
  overflow: hidden auto !important;
  scrollbar-width: thin !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stat {
  min-height: 52px !important;
  padding: 8px !important;
  border-radius: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-note {
  grid-column: 1 / -1 !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  text-align: left !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 9px 10px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(.request-item-top, .request-item-meta, .request-item-target, .request-item-tags, .risk-line) {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-item :where(strong, b, small, i, span, p),
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary :where(h2, p, span, small, strong),
html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-detail-foldout-body :where(p, li, span, small, strong, label, input, textarea) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) !important;
  align-items: start !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 6px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-buttons .button {
  flex: 0 1 auto !important;
  white-space: normal !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(.quote-lines-form, .update-form, .link-strip, .info-grid, .dispatch-panel, .planning-chat-panel) {
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] :where(input, select, textarea) {
  max-width: 100% !important;
}

@media (max-width: 1220px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    max-width: 300px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  html body.admin-body.active:has(#dashboard:not(.hidden)) #dashboard[data-active-tab="requests"] > [data-tab-panel="requests"].workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .detail {
    max-width: none !important;
    width: 100% !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .queue {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-list {
    max-height: 430px !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-queue-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .admin-request-process-grid,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-status,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-facts,
  html body.admin-body.active:has(#dashboard:not(.hidden)) [data-tab-panel="requests"] .request-action-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Website/login definitief: geen knopvlakken, geen blauw-op-blauw, geen samengeperste mobiele portal. */
html body.public-site {
  color-scheme: light !important;
}

html body.public-site > .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  min-height: 72px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(15, 36, 56, .10) !important;
  box-shadow: 0 10px 30px rgba(15, 36, 56, .08) !important;
}

html[data-theme="dark"] body.public-site > .topbar {
  background: rgba(5, 17, 29, .96) !important;
  border-bottom-color: rgba(255, 255, 255, .12) !important;
}

html body.public-site .public-header-inner {
  width: min(1180px, calc(100% - 32px)) !important;
  min-height: 72px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

html body.public-site .public-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.public-site .public-brand-logo {
  max-width: 156px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
}

html body.public-site .site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.public-site .site-nav > :where(a, details, .public-settings-menu),
html body.public-site .site-nav > details[open],
html body.public-site .site-nav > .public-settings-menu[open] {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary),
html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary):is(:hover, :focus, :focus-visible),
html body.public-site .site-nav > a[aria-current="page"],
html body.public-site .site-nav > details[open] > summary,
html body.public-site .site-nav > .public-settings-menu[open] > summary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 36px !important;
  height: 36px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #102235 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

html[data-theme="dark"] body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary),
html[data-theme="dark"] body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary):is(:hover, :focus, :focus-visible),
html[data-theme="dark"] body.public-site .site-nav > a[aria-current="page"],
html[data-theme="dark"] body.public-site .site-nav > details[open] > summary,
html[data-theme="dark"] body.public-site .site-nav > .public-settings-menu[open] > summary {
  color: #f7fafc !important;
}

html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary)::before,
html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary)::after {
  display: none !important;
  content: none !important;
}

html body.public-site .site-nav > :where(a, details > summary):hover,
html body.public-site .site-nav > a[aria-current="page"],
html body.public-site .site-nav > details[open] > summary {
  color: var(--pf24-final-orange) !important;
}

html body.public-site .site-nav > a[aria-current="page"] {
  text-decoration: underline !important;
  text-decoration-color: var(--pf24-final-orange) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 8px !important;
}

html body.public-site .public-settings-menu > summary,
html body.public-site .public-settings-menu > summary:is(:hover, :focus, :focus-visible) {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  color: #102235 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body.public-site .public-settings-menu > summary,
html[data-theme="dark"] body.public-site .public-settings-menu > summary:is(:hover, :focus, :focus-visible) {
  color: #f7fafc !important;
}

html body.public-site .public-settings-panel,
html body.public-site .nav-dropdown-panel {
  color: #102235 !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 36, 56, .14) !important;
  box-shadow: 0 22px 50px rgba(15, 36, 56, .16) !important;
}

html[data-theme="dark"] body.public-site .public-settings-panel,
html[data-theme="dark"] body.public-site .nav-dropdown-panel {
  color: #f7fafc !important;
  background: #071522 !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

html body.public-site .site-hero {
  min-height: clamp(620px, 80vh, 790px) !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

html body.public-site .site-hero-image {
  opacity: .86 !important;
  filter: saturate(.95) contrast(1.04) !important;
}

html body.public-site .site-hero-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 34%, rgba(255, 255, 255, .54) 58%, rgba(255, 255, 255, .16) 100%) !important;
}

html[data-theme="dark"] body.public-site .site-hero-overlay {
  background:
    linear-gradient(90deg, rgba(5, 17, 29, .88) 0%, rgba(5, 17, 29, .72) 42%, rgba(5, 17, 29, .26) 72%, rgba(5, 17, 29, .12) 100%) !important;
}

html body.public-site .site-hero-content {
  width: min(620px, calc(100% - 32px)) !important;
  margin-left: max(16px, calc((100vw - 1180px) / 2)) !important;
  padding: 118px 0 80px !important;
  color: #071a2f !important;
  text-shadow: none !important;
}

html body.public-site .site-hero :where(.site-kicker, h1, .site-hero-tagline, .site-hero-copy, .site-hero-points li) {
  color: #071a2f !important;
  text-shadow: none !important;
}

html[data-theme="dark"] body.public-site .site-hero :where(.site-kicker, h1, .site-hero-tagline, .site-hero-copy, .site-hero-points li) {
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .38) !important;
}

html body.public-site .site-hero .site-kicker {
  color: #bf5f00 !important;
}

html body.public-site .site-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body.login-entry:not(.portal-active) .admin-shell {
  min-height: calc(100vh - 74px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px 16px 88px !important;
}

html body.login-entry:not(.portal-active) .portal-shell {
  width: min(100%, 480px) !important;
  min-height: auto !important;
  padding: 0 !important;
}

html body.login-entry:not(.portal-active) .login-panel {
  width: 100% !important;
  max-width: 480px !important;
}

html body.portal-active.login-entry {
  background: var(--pf24-final-page) !important;
}

html body.portal-active.login-entry .admin-shell {
  display: block !important;
  min-height: calc(100vh - 72px) !important;
  padding: 0 !important;
}

html body.portal-active.login-entry .portal-shell,
html body.portal-active.login-entry .login-panel[data-role-panel] {
  display: none !important;
}

html body.portal-active.login-entry #portalDashboard {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body.portal-active :where(.dashboard-card, .summary-card, .content-card, .portal-panel, .profile-section, .finance-panel, .customer-section, .professional-section) {
  color: #102235 !important;
  background: #ffffff !important;
}

html[data-theme="dark"] body.portal-active :where(.dashboard-card, .summary-card, .content-card, .portal-panel, .profile-section, .finance-panel, .customer-section, .professional-section) {
  color: #f7fafc !important;
  background: #071522 !important;
}

html body.portal-active :where(.dashboard-card, .summary-card, .content-card, .portal-panel, .profile-section, .finance-panel, .customer-section, .professional-section) :where(h1, h2, h3, h4, p, span, strong, b, small, label, li, td, th) {
  color: inherit !important;
}

@media (max-width: 760px) {
  html body.public-site > .topbar {
    min-height: auto !important;
    background: rgba(255, 255, 255, .98) !important;
  }

  html[data-theme="dark"] body.public-site > .topbar {
    background: rgba(5, 17, 29, .98) !important;
  }

  html body.public-site .public-header-inner {
    width: 100% !important;
    min-height: auto !important;
    padding: 10px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  html body.public-site .site-menu-toggle {
    background: transparent !important;
    border: 1px solid rgba(15, 36, 56, .18) !important;
    box-shadow: none !important;
  }

  html body.public-site .site-nav {
    grid-column: 1 / -1 !important;
    display: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px !important;
    width: 100% !important;
    padding: 6px 0 0 !important;
  }

  html body.public-site > .topbar.nav-open .site-nav {
    display: grid !important;
  }

  html body.public-site .site-nav > :where(a, details, .public-settings-menu) {
    width: 100% !important;
    display: block !important;
  }

  html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary),
  html body.public-site .site-nav > :where(a, details > summary, .public-settings-menu > summary):is(:hover, :focus, :focus-visible) {
    width: 100% !important;
    justify-content: flex-start !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 0 !important;
  }

  html body.public-site .public-settings-menu > summary,
  html body.public-site .public-settings-menu > summary:is(:hover, :focus, :focus-visible) {
    width: 42px !important;
    min-width: 42px !important;
    justify-content: center !important;
  }

  html body.public-site .nav-dropdown-panel,
  html body.public-site .public-settings-panel {
    position: static !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-shadow: none !important;
  }

  html body.public-site .site-hero {
    min-height: auto !important;
  }

  html body.public-site .site-hero-image {
    opacity: .36 !important;
  }

  html body.public-site .site-hero-overlay,
  html[data-theme="dark"] body.public-site .site-hero-overlay {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 100%) !important;
  }

  html[data-theme="dark"] body.public-site .site-hero-overlay {
    background: linear-gradient(180deg, rgba(5,17,29,.94) 0%, rgba(5,17,29,.90) 100%) !important;
  }

  html body.public-site .site-hero-content {
    width: calc(100% - 28px) !important;
    margin: 0 auto !important;
    padding: 54px 0 44px !important;
  }

  html body.public-site .site-hero h1 {
    font-size: clamp(42px, 14vw, 64px) !important;
    line-height: 1 !important;
  }

  html body.public-site .site-hero-tagline {
    font-size: clamp(24px, 8vw, 36px) !important;
  }

  html body.portal-active .portal-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 8000 !important;
  }

  html body.portal-active .professional-section-nav {
    grid-template-columns: minmax(0, 1fr) auto !important;
    background: #eaf2f7 !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 36, 56, .12) !important;
  }

  html[data-theme="dark"] body.portal-active .professional-section-nav {
    background: #071522 !important;
  }

  html body.portal-active #portalDashboard {
    padding: 10px !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  html body.portal-active :where(.customer-section, .professional-section, .portal-panel, .content-card, .dashboard-card, .summary-card) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  html body.portal-active .portal-page-footer {
    position: static !important;
    width: 100% !important;
    margin-top: 16px !important;
  }
}

/* Portal readability pass: calm typography for operational screens. */
html body.portal-active,
html body.admin-body.active,
html body.login-entry.portal-active {
  font-size: 13px !important;
  line-height: 1.42 !important;
}

html body.portal-active #portalDashboard,
html body.admin-body.active #dashboard {
  letter-spacing: 0 !important;
}

html body.portal-active :where(.customer-section, .professional-section, .portal-panel, .content-card, .dashboard-card, .summary-card, .panel, .card, article, details, form),
html body.admin-body.active :where(.content-card, .dashboard-card, .summary-card, .panel, .card, article, details, form) {
  font-size: 13px !important;
}

html body.portal-active :where(h1),
html body.admin-body.active :where(h1) {
  font-size: clamp(1.35rem, 1.8vw, 1.75rem) !important;
  line-height: 1.14 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body.portal-active :where(h2),
html body.admin-body.active :where(h2) {
  font-size: clamp(1.08rem, 1.35vw, 1.32rem) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

html body.portal-active :where(h3, h4),
html body.admin-body.active :where(h3, h4) {
  font-size: .98rem !important;
  line-height: 1.22 !important;
  font-weight: 620 !important;
  letter-spacing: 0 !important;
}

html body.portal-active :where(p, li, td, th, label, input, select, textarea, button, a, span, small),
html body.admin-body.active :where(p, li, td, th, label, input, select, textarea, button, a, span, small) {
  font-size: .86rem !important;
  line-height: 1.38 !important;
  letter-spacing: 0 !important;
}

html body.portal-active :where(strong, b),
html body.admin-body.active :where(strong, b) {
  font-weight: 620 !important;
}

html body.portal-active :where(.badge, .pill, .status-pill, .tag, .metric-label, .kpi-label, small),
html body.admin-body.active :where(.badge, .pill, .status-pill, .tag, .metric-label, .kpi-label, small) {
  font-size: .74rem !important;
  font-weight: 560 !important;
  text-transform: none !important;
}

html body.portal-active :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(a, button, summary, .sidebar-chat-compact),
html body.admin-body.active :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(a, button, summary, .sidebar-chat-compact) {
  min-height: 36px !important;
  padding: 7px 10px !important;
  font-size: .78rem !important;
  font-weight: 560 !important;
}

html body.portal-active :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(.portal-nav-label, span, b),
html body.admin-body.active :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(.portal-nav-label, span, b) {
  font-size: .76rem !important;
  font-weight: 560 !important;
}

html body.portal-active :where(.customer-request-card, .request-card, .planning-card, .wallet-panel, .need-to-know-assistant, .account-context-panel),
html body.admin-body.active :where(.request-card, .planning-card, .wallet-panel, .need-to-know-assistant, .account-context-panel) {
  padding: 14px !important;
  gap: 10px !important;
}

html body.customer-portal-active.portal-active #customer-requests .customer-request-list,
html body.customer-portal-active.portal-active #customer-planning .planning-list {
  gap: 10px !important;
}

html body.customer-portal-active.portal-active #customer-requests :where(.customer-request-card, .request-card) :where(strong, b) {
  font-size: .9rem !important;
  font-weight: 620 !important;
}

@media (max-width: 760px) {
  html body.portal-active,
  html body.admin-body.active,
  html body.login-entry.portal-active {
    font-size: 12px !important;
  }

  html body.portal-active #portalDashboard,
  html body.admin-body.active #dashboard {
    padding: 8px !important;
  }

  html body.portal-active :where(h1),
  html body.admin-body.active :where(h1) {
    font-size: 1.18rem !important;
  }

  html body.portal-active :where(h2),
  html body.admin-body.active :where(h2) {
    font-size: 1rem !important;
  }

  html body.portal-active :where(p, li, td, th, label, input, select, textarea, button, a, span, small),
  html body.admin-body.active :where(p, li, td, th, label, input, select, textarea, button, a, span, small) {
    font-size: .8rem !important;
  }

  html body.portal-active :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(a, button, summary, .sidebar-chat-compact),
  html body.admin-body.active :where(.portal-section-nav, .professional-section-nav, .admin-tabs) :where(a, button, summary, .sidebar-chat-compact) {
    min-height: 34px !important;
    padding: 6px 8px !important;
    font-size: .72rem !important;
  }
}

/* Customer portal final readability: compact, calm and service-led. */
html body.customer-portal-active.portal-active {
  --customer-bg: #eef5f8;
  --customer-surface: #ffffff;
  --customer-text: #13283a;
  --customer-muted: #52677a;
  --customer-border: rgba(19, 40, 58, .13);
  --customer-accent: #f58220;
  background: var(--customer-bg) !important;
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active #portalDashboard.dashboard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 10px 14px 78px !important;
  overflow-x: hidden !important;
}

html body.customer-portal-active.portal-active .portal-section-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  order: -1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(15, 36, 56, .07) !important;
  overflow: visible !important;
}

html[data-theme="dark"] body.customer-portal-active.portal-active .portal-section-nav {
  background: rgba(7, 21, 34, .96) !important;
}

html body.customer-portal-active.portal-active .portal-sidebar-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 126px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.customer-portal-active.portal-active .portal-sidebar-brand img {
  width: 112px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  filter: none !important;
}

html body.customer-portal-active.portal-active .portal-sidebar-brand span {
  display: none !important;
}

html body.customer-portal-active.portal-active .portal-nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  padding: 2px !important;
  scrollbar-width: thin !important;
}

html body.customer-portal-active.portal-active .portal-nav-link {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 92px !important;
  min-height: 36px !important;
  padding: 7px 9px !important;
  color: var(--customer-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html body.customer-portal-active.portal-active .portal-nav-link.active,
html body.customer-portal-active.portal-active .portal-nav-link:hover {
  color: #0f2438 !important;
  background: #fff4e7 !important;
  border-color: rgba(245, 130, 32, .32) !important;
}

html body.customer-portal-active.portal-active .portal-nav-link :where(span, b) {
  font-size: .76rem !important;
  font-weight: 590 !important;
  white-space: nowrap !important;
}

html body.customer-portal-active.portal-active .portal-nav-icon,
html body.customer-portal-active.portal-active .portal-nav-link svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: var(--customer-accent) !important;
}

html body.customer-portal-active.portal-active .customer-advanced-nav,
html body.customer-portal-active.portal-active .portal-app-download {
  display: none !important;
}

html body.customer-portal-active.portal-active .sidebar-chat-widget {
  min-width: 118px !important;
  max-width: 150px !important;
  padding: 7px 9px !important;
  background: #f7fafc !important;
  color: var(--customer-text) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body.customer-portal-active.portal-active .portal-sidebar-logout {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid var(--customer-border) !important;
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active .portal-sidebar-logout span {
  display: none !important;
}

html body.customer-portal-active.portal-active .panel-head.customer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1180px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 14px !important;
  background: var(--customer-surface) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html body.customer-portal-active.portal-active .panel-head.customer-head h1 {
  font-size: 1.28rem !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
}

html body.customer-portal-active.portal-active .panel-head.customer-head p {
  margin-top: 3px !important;
  color: var(--customer-muted) !important;
  font-size: .78rem !important;
}

html body.customer-portal-active.portal-active .customer-section.portal-view-active {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  min-width: 0 !important;
}

html body.customer-portal-active.portal-active .customer-section:not(.portal-view-active) {
  display: none !important;
}

html body.customer-portal-active.portal-active :where(.customer-request-card, .customer-overview-hero, .need-to-know-assistant, .wallet-panel, .account-context-panel, .hospitality-offer-panel, .hospitality-group-panel) {
  background: var(--customer-surface) !important;
  color: var(--customer-text) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 22px rgba(15, 36, 56, .055) !important;
  padding: 14px !important;
  min-width: 0 !important;
}

html body.customer-portal-active.portal-active .customer-overview-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr) !important;
  gap: 10px !important;
}

html body.customer-portal-active.portal-active .customer-next-action {
  background: #172b3d !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  min-height: 116px !important;
}

html body.customer-portal-active.portal-active .customer-assistant-greeting {
  background: #fff !important;
  color: var(--customer-text) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

html body.customer-portal-active.portal-active .customer-status-strip {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.customer-portal-active.portal-active .customer-status-strip article,
html body.customer-portal-active.portal-active .business-shortcuts a,
html body.customer-portal-active.portal-active .mini-job-card,
html body.customer-portal-active.portal-active .customer-regelhulp-grid a {
  background: #f8fbfd !important;
  color: var(--customer-text) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

html body.customer-portal-active.portal-active .portal-action-row {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.customer-portal-active.portal-active .portal-action-row .button {
  min-height: 42px !important;
  justify-content: center !important;
  border-radius: 8px !important;
  font-size: .84rem !important;
}

html body.customer-portal-active.portal-active .customer-regelhulp-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 4px 0 10px !important;
}

html body.customer-portal-active.portal-active .customer-regelhulp-grid a {
  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}

html body.customer-portal-active.portal-active .customer-regelhulp-grid i,
html body.customer-portal-active.portal-active .customer-regelhulp-grid svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--customer-accent) !important;
  grid-row: span 2 !important;
}

html body.customer-portal-active.portal-active .customer-regelhulp-grid span {
  color: var(--customer-muted) !important;
  font-size: .76rem !important;
}

html body.customer-portal-active.portal-active :where(h1, h2, h3, h4, p, span, strong, b, small, label, a, button, input, select, textarea, li) {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.customer-portal-active.portal-active :where(h2, h3, h4, strong, b) {
  font-weight: 620 !important;
}

html body.customer-portal-active.portal-active :where(p, span, label, input, select, textarea, button, a, li) {
  font-size: .84rem !important;
  line-height: 1.38 !important;
}

html body.customer-portal-active.portal-active small {
  font-size: .74rem !important;
  line-height: 1.32 !important;
  color: var(--customer-muted) !important;
}

html body.customer-portal-active.portal-active .customer-request-list,
html body.customer-portal-active.portal-active .mini-job-grid,
html body.customer-portal-active.portal-active .hospitality-offer-grid,
html body.customer-portal-active.portal-active .business-shortcuts {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 10px !important;
}

html body.customer-portal-active.portal-active .hospitality-offer-card,
html body.customer-portal-active.portal-active .hospitality-group-order-card,
html body.customer-portal-active.portal-active .stay-booking-row,
html body.customer-portal-active.portal-active .stay-result-row {
  background: #fff !important;
  color: var(--customer-text) !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body.customer-portal-active.portal-active .portal-page-footer {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border-top: 1px solid var(--customer-border) !important;
}

@media (max-width: 900px) {
  html body.customer-portal-active.portal-active #portalDashboard.dashboard {
    padding: 8px 8px 76px !important;
  }

  html body.customer-portal-active.portal-active .portal-section-nav {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 6px !important;
    border-radius: 0 0 10px 10px !important;
  }

  html body.customer-portal-active.portal-active .portal-sidebar-brand {
    display: none !important;
  }

  html body.customer-portal-active.portal-active .portal-nav-links {
    order: 1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html body.customer-portal-active.portal-active .portal-nav-link {
    min-width: 78px !important;
    padding: 7px !important;
  }

  html body.customer-portal-active.portal-active .sidebar-chat-widget {
    min-width: 42px !important;
    max-width: 42px !important;
    height: 38px !important;
    overflow: hidden !important;
  }

  html body.customer-portal-active.portal-active .customer-overview-hero,
  html body.customer-portal-active.portal-active .portal-action-row,
  html body.customer-portal-active.portal-active .customer-regelhulp-grid,
  html body.customer-portal-active.portal-active .customer-status-strip {
    grid-template-columns: 1fr !important;
  }

  html body.customer-portal-active.portal-active .panel-head.customer-head {
    padding: 10px !important;
  }

  html body.customer-portal-active.portal-active .panel-head.customer-head h1 {
    font-size: 1.08rem !important;
  }
}

/* Customer portal nav must stay horizontal; older portal CSS uses an ID selector. */
html body.customer-portal-active.portal-active #portalDashboard.dashboard > .portal-section-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  flex-direction: initial !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 1180px !important;
  height: auto !important;
  min-height: 54px !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}

html body.customer-portal-active.portal-active #portalDashboard.dashboard > .portal-section-nav .portal-nav-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  overflow-x: auto !important;
}

html body.customer-portal-active.portal-active #portalDashboard.dashboard > .portal-section-nav .portal-nav-link {
  width: auto !important;
  flex: 0 0 auto !important;
}

html body.customer-portal-active.portal-active #customer-requests .customer-request-list {
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active #customer-requests .customer-request-card.job-card {
  display: grid !important;
  gap: 12px !important;
  color: var(--customer-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body.customer-portal-active.portal-active #customer-requests .job-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
  color: var(--customer-text) !important;
  background: #f7fbfd !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

html body.customer-portal-active.portal-active #customer-requests .job-card-head :where(.eyebrow, h2, span, strong, b, small) {
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active #customer-requests .job-card-head h2 {
  min-height: 0 !important;
  margin: 2px 0 5px !important;
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

html body.customer-portal-active.portal-active #customer-requests .job-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  color: var(--customer-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

html body.customer-portal-active.portal-active #customer-requests .job-card-meta span {
  max-width: 100% !important;
  color: #24445e !important;
  background: #eef5f8 !important;
  border: 1px solid rgba(19, 40, 58, .12) !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.customer-portal-active.portal-active #customer-requests .info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active #customer-requests .info-grid p,
html body.customer-portal-active.portal-active #customer-requests :where(.asset-summary, .intake-summary, .chat-panel, .quote-box, .offer-choice-box, .dispute-panel, .portal-dispute, .approval-panel, .clarification-panel, .customer-access-consent-card) {
  color: var(--customer-text) !important;
  background: #fbfdff !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body.customer-portal-active.portal-active #customer-requests .info-grid p {
  display: grid !important;
  gap: 2px !important;
  padding: 9px !important;
}

html body.customer-portal-active.portal-active #customer-requests :where(.asset-summary, .intake-summary, .chat-panel, .quote-box, .offer-choice-box, .dispute-panel, .portal-dispute) :where(h3, h4, p, span, strong, b, small, label, button, input) {
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active #customer-requests .identity-card,
html body.customer-portal-active.portal-active #customer-requests .offer-row {
  color: var(--customer-text) !important;
  background: #ffffff !important;
  border: 1px solid var(--customer-border) !important;
  border-radius: 8px !important;
}

html body.customer-portal-active.portal-active #customer-requests .identity-card :where(strong, span, small),
html body.customer-portal-active.portal-active #customer-requests .entity-avatar {
  color: var(--customer-text) !important;
}

html body.customer-portal-active.portal-active #customer-requests .plain-btn.secondary-action,
html body.customer-portal-active.portal-active #customer-requests .button.secondary {
  background: #ffffff !important;
  color: var(--customer-text) !important;
  border-color: var(--customer-border) !important;
}

@media (max-width: 900px) {
  html body.customer-portal-active.portal-active #portalDashboard.dashboard > .portal-section-nav {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    border-radius: 0 0 10px 10px !important;
  }

  html body.customer-portal-active.portal-active #portalDashboard.dashboard > .portal-section-nav .portal-nav-links {
    grid-column: 1 / -1 !important;
  }
}

/* Customer portal simplification */
html body.customer-portal-active.portal-active .customer-request-list {
  display: grid !important;
  gap: 10px !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout {
  color: #102538 !important;
  background: #ffffff !important;
  border: 1px solid rgba(19, 40, 58, .14) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(19, 40, 58, .05) !important;
}

html body.customer-portal-active.portal-active .customer-request-archive {
  color: #102538 !important;
  background: #edf4f7 !important;
  border: 1px dashed rgba(19, 40, 58, .18) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

html body.customer-portal-active.portal-active .customer-request-archive > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  list-style: none !important;
}

html body.customer-portal-active.portal-active .customer-request-archive > summary::-webkit-details-marker {
  display: none !important;
}

html body.customer-portal-active.portal-active .customer-request-archive > summary span {
  color: #102538 !important;
  font-size: .9rem !important;
  font-weight: 650 !important;
}

html body.customer-portal-active.portal-active .customer-request-archive > summary small {
  color: #536a7a !important;
  font-size: .76rem !important;
}

html body.customer-portal-active.portal-active .customer-request-archive-list {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border-top: 1px solid rgba(19, 40, 58, .10) !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: #f8fbfd !important;
  border-bottom: 1px solid transparent !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout[open] summary {
  border-bottom-color: rgba(19, 40, 58, .10) !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout summary::-webkit-details-marker {
  display: none !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout summary span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout summary strong {
  color: #102538 !important;
  font-size: .98rem !important;
  line-height: 1.18 !important;
  font-weight: 650 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout summary small {
  color: #4b6275 !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout summary b {
  justify-self: end !important;
  color: #102538 !important;
  background: #eef5f8 !important;
  border: 1px solid rgba(19, 40, 58, .12) !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  text-transform: none !important;
}

html body.customer-portal-active.portal-active .customer-request-foldout > .customer-request-card.job-card {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body.customer-portal-active.portal-active .customer-overview-hero .portal-action-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body.customer-portal-active.portal-active .customer-overview-hero .portal-action-row .button {
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-size: .9rem !important;
}

html body.customer-portal-active.portal-active .business-shortcuts a {
  min-height: 58px !important;
}

html body.customer-portal-active.portal-active .business-shortcuts strong {
  font-size: .92rem !important;
  font-weight: 650 !important;
}

html body.customer-portal-active.portal-active .business-shortcuts span {
  font-size: .76rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 720px) {
  html body.customer-portal-active.portal-active .customer-overview-hero .portal-action-row {
    grid-template-columns: 1fr !important;
  }

  html body.customer-portal-active.portal-active .customer-request-foldout summary {
    min-height: 54px !important;
    padding: 10px 11px !important;
  }

  html body.customer-portal-active.portal-active .customer-request-foldout summary strong,
  html body.customer-portal-active.portal-active .customer-request-foldout summary small {
    white-space: normal !important;
  }
}

/* Unified portal experience: one calm pattern for every role. */
:where(body.portal-active, body.admin-body.active) {
  --pf24-role-text: #102538;
  --pf24-role-muted: #52697b;
  --pf24-role-border: rgba(19, 40, 58, .14);
  --pf24-role-soft: #f7fbfd;
  --pf24-role-panel: #ffffff;
  --pf24-role-chip: #eef5f8;
}

html[data-theme="dark"] :where(body.portal-active, body.admin-body.active) {
  --pf24-role-text: #f4f8fb;
  --pf24-role-muted: #b8c7d3;
  --pf24-role-border: rgba(224, 237, 247, .18);
  --pf24-role-soft: rgba(255, 255, 255, .06);
  --pf24-role-panel: rgba(8, 23, 37, .94);
  --pf24-role-chip: rgba(255, 255, 255, .09);
}

:where(body.portal-active, body.admin-body.active) :where(.professional-section-nav, .portal-section-nav, .admin-tabs) {
  color: var(--pf24-role-text) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.professional-section-nav, .portal-section-nav) :where(.portal-nav-links, .portal-nav-group) {
  gap: 6px !important;
}

:where(body.portal-active, body.admin-body.active) :where(.professional-section-nav, .portal-section-nav, .admin-tabs) :where(a, button:not(.voice-menu-icon-button):not(.portal-sidebar-logout), summary, .sidebar-chat-compact) {
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: .86rem !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(.professional-section-nav, .portal-section-nav, .admin-tabs) :where(.portal-nav-label, a span, button span, summary span) {
  font-size: .84rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-nav-count, .badge, .status-pill, .pill) {
  border-radius: 999px !important;
  font-size: .7rem !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  background: var(--pf24-role-chip) !important;
  color: var(--pf24-role-text) !important;
  border: 1px solid var(--pf24-role-border) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) {
  color: var(--pf24-role-text) !important;
  background: var(--pf24-role-panel) !important;
  border: 1px solid var(--pf24-role-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 24px rgba(19, 40, 58, .05) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 56px !important;
  padding: 11px 13px !important;
  cursor: pointer !important;
  list-style: none !important;
  background: var(--pf24-role-soft) !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary::-webkit-details-marker {
  display: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary strong {
  color: var(--pf24-role-text) !important;
  font-size: .96rem !important;
  line-height: 1.18 !important;
  font-weight: 650 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary small {
  color: var(--pf24-role-muted) !important;
  font-size: .76rem !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary b {
  justify-self: end !important;
  color: var(--pf24-role-text) !important;
  background: var(--pf24-role-chip) !important;
  border: 1px solid var(--pf24-role-border) !important;
  border-radius: 999px !important;
  padding: 5px 8px !important;
  font-size: .7rem !important;
  line-height: 1 !important;
}

:where(body.portal-active, body.admin-body.active) .portal-compact-archive-list {
  display: grid !important;
  gap: 8px !important;
  padding: 10px !important;
  border-top: 1px solid var(--pf24-role-border) !important;
}

:where(body.portal-active, body.admin-body.active) .portal-compact-foldout > :where(.job-card, .customer-request-card) {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:where(body.portal-active, body.admin-body.active) :where(.customer-request-list, .contact-request-list, .mini-job-grid) {
  gap: 10px !important;
}

:where(body.portal-active, body.admin-body.active) :where(.panel-head h2, .panel-head h3, .compact-head h3, .job-card-head h2) {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

:where(body.portal-active, body.admin-body.active) :where(.panel-head p, .compact-head p, .description, .form-message, .empty) {
  font-size: .86rem !important;
  line-height: 1.45 !important;
}

@media (max-width: 760px) {
  :where(body.portal-active, body.admin-body.active) :where(.professional-section-nav, .portal-section-nav, .admin-tabs) :where(a, button:not(.voice-menu-icon-button):not(.portal-sidebar-logout), summary) {
    min-height: 42px !important;
  }

  :where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary {
    min-height: 52px !important;
    padding: 10px 11px !important;
  }

  :where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary strong,
  :where(body.portal-active, body.admin-body.active) :where(.portal-compact-foldout, .portal-compact-archive) > summary small {
    white-space: normal !important;
  }
}

/* Definitieve portalshell: desktop heeft altijd een leesbaar zijmenu. */
@media (min-width: 1081px) {
  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 16px 0 72px !important;
    overflow: visible !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :where(.portal-section-nav, .professional-section-nav) {
    position: sticky !important;
    top: 82px !important;
    z-index: 40 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 80 !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    height: auto !important;
    min-height: calc(100vh - 112px) !important;
    max-height: calc(100vh - 96px) !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--pf24-role-border, #d8e2ee) !important;
    border-radius: 14px !important;
    background: var(--pf24-role-surface, #fff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :not(.portal-section-nav):not(.professional-section-nav) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact, .portal-sidebar-logout) {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) .portal-nav-links,
  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) .portal-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(a.portal-nav-link, .portal-nav-links a, .portal-sidebar-logout) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: var(--pf24-role-text, #102033) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body.portal-active:not(.werkapp-entry):not(.klantapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) :where(.portal-section-nav, .professional-section-nav) :where(a.portal-nav-link.active, .portal-nav-links a.active) {
    border-color: rgba(245, 130, 32, .35) !important;
    background: color-mix(in srgb, #f58220 13%, var(--pf24-role-surface, #fff)) !important;
    color: var(--pf24-role-text, #102033) !important;
    box-shadow: inset 3px 0 0 #f58220 !important;
  }
}

/* Absolute laatste portalcontract: klant/professional desktop nooit meer als brede bovenbalk of smalle rail. */
@media (min-width: 1081px) {
  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
    width: min(100% - 32px, 1480px) !important;
    max-width: 1480px !important;
    margin-inline: auto !important;
    padding: 16px 0 72px !important;
    overflow: visible !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav {
    position: sticky !important;
    top: 82px !important;
    grid-column: 1 !important;
    grid-row: 1 / span 80 !important;
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    width: 252px !important;
    min-width: 252px !important;
    max-width: 252px !important;
    height: auto !important;
    min-height: calc(100vh - 112px) !important;
    max-height: calc(100vh - 96px) !important;
    padding: 14px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid var(--pf24-role-border, #d8e2ee) !important;
    border-radius: 14px !important;
    background: var(--pf24-role-surface, #fff) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08) !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > :not(.portal-section-nav),
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > :not(.professional-section-nav) {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav .portal-nav-links,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav .portal-nav-links,
  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav .portal-nav-group,
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav .portal-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex: initial !important;
    flex-direction: initial !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact, .portal-sidebar-logout),
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav :where(.portal-sidebar-brand, .portal-nav-group-label, .portal-workscreen-actions, .portal-app-download, .sidebar-chat-widget, .sidebar-chat-compact, .portal-sidebar-logout) {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body.customer-portal-active.portal-active:not(.klantapp-entry) #portalDashboard.dashboard > .portal-section-nav :where(a.portal-nav-link, .portal-nav-links a, .portal-sidebar-logout),
  html body.professional-portal-active.portal-active:not(.werkapp-entry):not(.kassaapp-entry):not(.zelfscanapp-entry) #portalDashboard.dashboard > .professional-section-nav :where(a.portal-nav-link, .portal-nav-links a, .portal-sidebar-logout) {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    flex: initial !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}

/* Final final admin render guard: keep active admin work panels visible after every legacy override. */
html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].hidden {
  display: none !important;
}

html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].workspace:not(.hidden),
html body.admin-body.active #dashboard:not(.hidden) > [data-tab-panel].tab-panel:not(.hidden) {
  grid-column: 2 !important;
  align-self: start !important;
  margin: 0 !important;
}
/* Dedicated Indonesian food workspace: keep the full portal focused and legible. */
html:has(body.food-business-portal-active) {
  background: #f4f7f8;
}
body.food-business-portal-active {
  min-height: 100vh;
  background: #f4f7f8;
  color: #17242d;
}
body.food-business-portal-active > :where(.topbar, .portal-topbar, .portal-page-footer) {
  display: none !important;
}
body.food-business-portal-active > .admin-shell,
body.food-business-portal-active > .admin-shell > .portal-shell,
body.food-business-portal-active #portalDashboard {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.food-business-portal-active .portal-shell > :not(#portalDashboard) {
  display: none !important;
}
body.food-business-portal-active .portal-dashboard {
  max-width: none;
  padding: 0;
}
.food-business-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  background: #f4f7f8;
}
.food-business-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 22px 16px 16px;
  border-right: 1px solid #dfe5e8;
  background: #fff;
  overflow-y: auto;
  scrollbar-width: none;
}
.food-business-sidebar::-webkit-scrollbar { display: none; }
.food-business-brand { display: flex; gap: 10px; align-items: center; padding: 0 8px 16px; border-bottom: 1px solid #edf0f2; }
.food-business-brand > img,
.food-business-brand > .professional-brand-fallback { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; background: #e7f4ef; color: #08775f; }
.food-business-brand span { min-width: 0; display: grid; gap: 2px; }
.food-business-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .91rem; }
.food-business-brand small { color: #64717a; }
.food-business-sidebar nav { display: grid; gap: 3px; padding: 14px 0; }
.food-business-sidebar nav a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border-radius: 6px; color: #26343d; text-decoration: none; font-weight: 650; }
.food-business-sidebar nav a:hover,
.food-business-sidebar nav a[aria-current="page"] { background: #e8f5f0; color: #08775f; }
.food-business-sidebar nav svg { width: 18px; height: 18px; }
.food-business-sidebar .portal-sidebar-logout { width: 100%; margin-top: 4px; }
.food-business-main { min-width: 0; width: min(1240px, 100%); margin: 0 auto; padding: 22px 28px 32px; }
.food-business-main .admin-managed-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 8px 7px 12px;
  margin: 0 0 16px;
  border: 1px solid #edc28d;
  border-radius: 6px;
  background: #fff8ef;
  color: #6f3d0b;
  font-size: .86rem;
}
.food-business-main .admin-managed-banner strong { white-space: nowrap; }
.food-business-main .admin-managed-banner span { min-width: 0; color: #714b26; }
.food-business-main .admin-managed-banner .button {
  min-height: 32px;
  padding: 6px 10px;
  border-color: #dca86a;
  background: #fff;
  color: #57300c;
  white-space: nowrap;
}
.food-business-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.food-business-heading small { color: #607078; font-weight: 700; }
.food-business-heading h1 { margin: 3px 0 0; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: 0; }
.food-business-heading .status-pill { display: inline-flex; gap: 7px; align-items: center; }
.food-business-heading .status-pill svg { width: 16px; }
.food-business-notice { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 14px; border: 1px solid #efc58b; border-radius: 6px; background: #fff7ea; }
.food-business-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.food-business-kpis article { min-width: 0; padding: 14px; border: 1px solid #dce4e7; border-radius: 6px; background: #fff; }
.food-business-kpis span,
.food-business-kpis small { display: block; color: #64717a; }
.food-business-kpis strong { display: block; margin: 5px 0 2px; overflow-wrap: anywhere; font-size: 1.22rem; }
.food-business-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.food-business-actions a { display: flex; align-items: center; gap: 11px; min-height: 68px; padding: 12px; border: 1px solid #cfdadd; border-radius: 6px; background: #fff; color: #25333b; text-decoration: none; }
.food-business-actions a.primary { border-color: #08775f; background: #08775f; color: #fff; }
.food-business-actions a.primary :where(strong, small, svg) { color: #fff !important; }
.food-business-actions svg { width: 21px; flex: 0 0 21px; }
.food-business-actions span { min-width: 0; display: grid; gap: 2px; }
.food-business-actions strong,
.food-business-actions small { display: block; }
.food-business-actions small { color: inherit; opacity: .76; }
.food-business-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 12px; align-items: start; }
.food-business-panel { padding: 16px; border: 1px solid #dce4e7; border-radius: 6px; background: #fff; }
.food-business-panel > header { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 13px; }
.food-business-panel h2 { margin: 0; font-size: 1.05rem; }
.food-business-panel header small { color: #64717a; }
.food-business-panel header a { color: #08775f; font-weight: 750; }
.food-portal-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.food-portal-product { min-width: 0; overflow: hidden; border: 1px solid #e0e6e8; border-radius: 6px; background: #fafbfb; }
.food-portal-product img,
.food-portal-product-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: grid; place-items: center; background: #e8f3ef; color: #08775f; }
.food-portal-product-placeholder svg { width: 24px; }
.food-portal-product div { padding: 9px; }
.food-portal-product strong,
.food-portal-product small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.food-portal-product small { color: #4e5f68; margin-top: 2px; }
.food-business-status dl { margin: 0 0 14px; }
.food-business-status dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf0f2; }
.food-business-status dt { color: #64717a; }
.food-business-status dd { margin: 0; text-align: right; font-weight: 750; }
@media (max-width: 820px) {
  .food-business-shell { display: block; }
  .food-business-sidebar { position: static; height: auto; padding: 10px; border-right: 0; border-bottom: 1px solid #dfe5e8; }
  .food-business-brand { padding: 4px 4px 10px; }
  .food-business-sidebar nav { display: flex; gap: 6px; padding: 10px 0 2px; overflow-x: auto; scrollbar-width: none; }
  .food-business-sidebar nav::-webkit-scrollbar { display: none; }
  .food-business-sidebar nav a { flex: 0 0 auto; min-height: 36px; padding: 7px 9px; }
  .food-business-sidebar .portal-sidebar-logout { display: none; }
  .food-business-main { padding: 16px 12px 88px; }
  .food-business-main .admin-managed-banner { grid-template-columns: 1fr auto; }
  .food-business-main .admin-managed-banner span { grid-column: 1 / -1; grid-row: 2; }
  .food-business-kpis,
  .food-business-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-business-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .food-business-heading { align-items: start; }
  .food-business-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-business-actions { grid-template-columns: 1fr 1fr; }
  .food-business-actions a { min-height: 62px; padding: 10px; }
  .food-portal-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Food workspace owns the complete viewport; legacy portal grids must not reserve columns. */
html body.food-business-portal-active.food-business-portal-active main.admin-shell.admin-shell {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.food-business-portal-active.food-business-portal-active #portalDashboard#portalDashboard.dashboard:not(.hidden) {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.food-business-portal-active.food-business-portal-active #portalDashboard#portalDashboard > .food-business-shell {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Retail stores use their own full-width workspace; no legacy food or portal columns. */
html body.retail-store-portal-active.retail-store-portal-active main.admin-shell.admin-shell,
html body.retail-store-portal-active.retail-store-portal-active #portalDashboard#portalDashboard.dashboard:not(.hidden) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body.retail-store-portal-active.retail-store-portal-active #portalDashboard#portalDashboard > .retail-store-shell {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.retail-location-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.retail-location-summary div { min-width: 0; padding: 12px; border: 1px solid #e1e7ea; background: #f8fafb; }
.retail-location-summary dt { color: #64717a; font-size: .78rem; }
.retail-location-summary dd { margin: 5px 0 0; color: #132937; font-size: 1.2rem; font-weight: 800; }
.retail-control-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.retail-control-links a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; min-height: 70px; padding: 11px; border: 1px solid #e1e7ea; color: #132937; text-decoration: none; background: #fff; }
.retail-control-links a:hover { border-color: #0b806b; background: #f0faf7; }
.retail-control-links svg { width: 20px; height: 20px; color: #08775f; }
.retail-control-links strong, .retail-control-links small { display: block; }
.retail-control-links small { margin-top: 3px; color: #64717a; line-height: 1.35; }
@media (max-width: 620px) {
  .retail-location-summary, .retail-control-links { grid-template-columns: 1fr; }
}
/* Universal customer card: compact account control, never part of the POS receipt column. */
.customer-loyalty-card{margin:12px 0;border:1px solid #d9e3ea;background:#fff;border-radius:8px;padding:14px;display:grid;gap:10px}
.customer-loyalty-card>header,.customer-loyalty-card form{display:flex;align-items:center;justify-content:space-between;gap:12px}
.customer-loyalty-card header span,.customer-loyalty-card form span{display:grid;gap:2px;min-width:0}
.customer-loyalty-card small{color:#64748b;font-size:12px}
.customer-loyalty-card code{font-weight:800;color:#0f766e;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:6px;padding:7px 9px;white-space:nowrap}
.customer-card-code{display:grid;justify-items:center;gap:6px}.customer-card-code [data-customer-card-qr]{width:132px;height:132px;padding:6px;background:#fff;border:1px solid #d9e3ea;border-radius:6px}.customer-card-code svg{display:block;width:100%;height:100%}
.customer-loyalty-card .compact-table{display:grid;gap:6px}
.customer-loyalty-card .compact-table form{border-top:1px solid #edf1f4;padding-top:8px}
.customer-loyalty-card .form-message:empty{display:none}
.customer-loyalty-card .customer-card-payment-settings{display:grid;grid-template-columns:minmax(0,.7fr) minmax(12rem,1.4fr) minmax(10rem,1fr) auto;gap:10px;align-items:end;padding-top:10px;border-top:1px solid #edf1f4}
.customer-loyalty-card .customer-card-payment-settings label{display:grid;gap:4px}.customer-loyalty-card .customer-card-payment-settings>small{grid-column:1/-1}.customer-loyalty-card .customer-card-payment-settings .form-message{grid-column:1/-1}
.pos-card-pin-dialog{max-width:28rem}.pos-card-pin-dialog form{display:grid;gap:1rem}.pos-card-pin-dialog label{display:grid;gap:.4rem}.pos-card-pin-dialog input{font-size:1.5rem;text-align:center;letter-spacing:.35rem}
@media(max-width:620px){.customer-loyalty-card>header{align-items:flex-start;flex-direction:column}.customer-loyalty-card form{align-items:flex-start;flex-wrap:wrap}.customer-loyalty-card code{width:100%;text-align:center}}
@media(max-width:760px){.customer-loyalty-card .customer-card-payment-settings{grid-template-columns:1fr}.customer-loyalty-card .customer-card-payment-settings>small,.customer-loyalty-card .customer-card-payment-settings .form-message{grid-column:auto}}