/* ==========================================================================
   64-mobile-app-shell.css
   Final mobile app shell override for the logged-in user area.
   Loaded last in app.html so older page-specific mobile fixes can stay intact.
   ========================================================================== */

@media (max-width: 640px) {
  html[data-design="v2"] {
    --mobile-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
    --mobile-page-h: calc(var(--mb-mobile-visual-height, 100dvh) - var(--mobile-nav-h));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  html[data-design="v2"] body.app-v4 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--mb-mobile-visual-height, 100dvh);
    min-height: var(--mb-mobile-visual-height, 100dvh);
    overflow: hidden !important;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html[data-design="v2"] body.app-v4 #app.app-visible {
    position: relative;
    display: block !important;
    width: 100%;
    height: var(--mb-mobile-visual-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #app > nav.nav {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #app-footer {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #app > .page {
    display: none !important;
    max-width: none !important;
  }

  html[data-design="v2"] body.app-v4 #app > .page.active {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--mobile-page-h) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scroll-padding-bottom: 24px;
  }

  html[data-design="v2"] body.app-v4 #app > .page.active > * {
    max-width: 100%;
    min-width: 0;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav {
    display: flex !important;
    height: var(--mobile-nav-h) !important;
    min-height: var(--mobile-nav-h) !important;
    padding: 5px max(8px, env(safe-area-inset-left, 0px)) max(5px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)) !important;
    align-items: stretch !important;
    border-top: 1px solid rgba(37,50,61,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82)),
      linear-gradient(120deg, rgba(14,143,131,.10), transparent 62%) !important;
    box-shadow: 0 -18px 54px rgba(25,39,54,.12) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    z-index: 240 !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 6px 2px 5px !important;
    border-radius: 14px !important;
    color: var(--text-secondary, #53606b) !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item.active {
    color: var(--color-primary, #0e8f83) !important;
    background: rgba(14,143,131,.09) !important;
  }

  html[data-design="v2"] body.app-v4 .mobile-more-sheet {
    max-height: min(82vh, 680px) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 .mobile-more-item,
  html[data-design="v2"] body.app-v4 .mobile-more-toggle-grp button {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-height: min(46vh, 360px) !important;
    padding: 14px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4:has(#app.app-visible) #bp-cookie-banner {
    bottom: calc(var(--mobile-nav-h) + 8px) !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bpcb-title {
    margin-bottom: 5px !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bpcb-text {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bpcb-actions {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bp-cookie-btn {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  html[data-design="v2"] body.app-v4 input,
  html[data-design="v2"] body.app-v4 select,
  html[data-design="v2"] body.app-v4 textarea,
  html[data-design="v2"] body.app-v4 button {
    font-size: max(16px, 1em);
  }

  html[data-design="v2"] body.app-v4 :is(button, .btn, .btn-p, .btn-n, .mb-btn, .icon-btn, .mclose, [role="button"]) {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 .mclose,
  html[data-design="v2"] body.app-v4 .icon-btn,
  html[data-design="v2"] body.app-v4 .btn-ico,
  html[data-design="v2"] body.app-v4 .mb-icon-btn,
  html[data-design="v2"] body.app-v4 [class*="icon-btn"] {
    width: 44px !important;
    min-width: 44px !important;
  }

  html[data-design="v2"] body.app-v4 .mbg.open {
    position: fixed !important;
    inset: 0 !important;
    align-items: flex-end !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 .modal,
  html[data-design="v2"] body.app-v4 .modal-sm {
    width: 100% !important;
    max-width: none !important;
    max-height: min(92dvh, calc(var(--mb-mobile-visual-height, 100dvh) - 24px)) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 .mfoot {
    position: sticky;
    bottom: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: inherit;
    z-index: 2;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero, .mb-fin-command.mb-page-hero, .mb-cal-command.mb-page-hero, .mb-treat-command.mb-page-hero, .umgmt-command.mb-page-hero) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__intro, .mb-page-hero__focus, .mb-page-hero__controls) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__intro strong, .umgmt-hero-title) {
    max-width: 100% !important;
    font-size: clamp(28px, 11vw, 38px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
    letter-spacing: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__copy {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__focus, .mb-cal-ops-hero__focus, .umgmt-command__focus) {
    padding: 12px !important;
    min-height: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__controls,
  html[data-design="v2"] body.app-v4 .mb-page-hero__actions,
  html[data-design="v2"] body.app-v4 .umgmt-hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__controls > *, .mb-page-hero__actions > *, .umgmt-hero-cta > *) {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 :is(.card, .panel, .ibox, .set-section, .mb-fin__card, .mb-treat-main, .mb-treat-rail-card, .umgmt-content-panel, .umgmt-card) {
    border-radius: 14px !important;
  }

  html[data-design="v2"] body.app-v4 :is(.g2, .g3, .gcol, .gcol2, .kgrid) {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 :is(.table-wrap, .tscroll, .card:has(table), .cb:has(table), .panel:has(table)) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  html[data-design="v2"] body.app-v4 :is(#page-rechner, #page-nachrichten, #page-formulare, #page-shop, #page-marketing, #page-berichte) table {
    width: max-content !important;
    min-width: min(680px, calc(100vw - 24px)) !important;
    max-width: none !important;
  }

  html[data-design="v2"] body.app-v4 :is(#page-nachrichten, #page-formulare, #page-shop, #page-marketing) :is(.card, .panel, .cb) {
    min-width: 0 !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten.active {
    padding: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten > [data-design-version="v2"] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px 12px 0 !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 6px !important;
    gap: 8px !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side::-webkit-scrollbar {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-title,
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-sep {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-nav {
    display: contents !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
    margin-bottom: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__copy {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__focus {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page {
    padding-bottom: 20px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page :is(.card, .mb-fin__card, .cb, .panel) {
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kalender.active {
    padding: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--ops {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    margin-bottom: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__copy,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar-group,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__actions {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search input {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__nav-btn, .mb-btn--sm, .mb-cal__today-btn) {
    height: 44px !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__viewswitch .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command__viewswitch .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-page-hero__actions .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command .mb-page-hero__actions .mb-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__nav-btn {
    width: 44px !important;
    min-width: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 420px !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-week, .mb-cal-week__hd, .mb-cal-week__body) {
    min-width: 720px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-week__body, .mb-cal-week__grid) {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-behandlungen.active,
  html[data-design="v2"] body.app-v4 #page-benutzer.active,
  html[data-design="v2"] body.app-v4 #page-team.active {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command .mb-page-hero__copy,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-focus,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcuts {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-workspace,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-workspace,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-command-rail {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-admin-list,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-content-body {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card {
    display: grid !important;
    grid-template-columns: 5px minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__actions {
    grid-column: 2 !important;
    padding: 0 12px 12px 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-hero-sub,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-command__focus,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-rail-note {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-tab {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main,
  html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust, .mb-cust__main),
  html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req, .mb-req__main) {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search input {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen :is(a[href^="tel:"], a[href^="mailto:"]),
  html[data-design="v2"] body.app-v4 #page-kunden :is(a[href^="tel:"], a[href^="mailto:"], .mb-cust__section-action) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-layout,
  html[data-design="v2"] body.app-v4 #page-profil :is(.profil-grid, .profil-shell, .profil-main) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sidebar::-webkit-scrollbar {
    display: none;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-switch,
  html[data-design="v2"] body.app-v4 #page-einstellungen a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen input[type="checkbox"],
  html[data-design="v2"] body.app-v4 #page-einstellungen input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
  }

  html[data-design="v2"] body.app-v4 #page-profil :is(.profil-preview-actions, .profil-dev-btns, .profil-actions) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-profil :is(.profil-preview-actions > *, .profil-dev-btns > *, .profil-actions > *) {
    flex: 1 1 160px !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-profil input[type="color"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-profil .bkp-sticky-btn {
    min-height: 44px !important;
  }
}

@media (max-width: 380px) {
  html[data-design="v2"] body.app-v4 :is(.mb-page-hero, .mb-fin-command.mb-page-hero, .mb-cal-command.mb-page-hero, .mb-treat-command.mb-page-hero, .umgmt-command.mb-page-hero) {
    padding: 14px !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__intro strong, .umgmt-hero-title) {
    font-size: clamp(25px, 10vw, 32px) !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item {
    font-size: 9px !important;
  }
}