/* Phase 1: outer shell and existing non-financial forms only.
   Journal lanes/cards and dedicated application workflows retain their styles. */
@media (max-width: 768px) {
  html:has(body:not([data-mobile-owner-journal]) #app:not([hidden])),
  body:not([data-mobile-owner-journal]):has(#app:not([hidden])) {
    height: auto;
    overflow: visible;
  }
  #app.shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #app > main {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    flex: 1;
  }
  #app > .mobile-menu-toggle {
    align-self: flex-start;
    margin: var(--space-2) var(--space-3);
    min-height: 44px;
  }
  #app > .sidebar { display: none; }
  #app[data-mobile-menu-open] > .sidebar {
    display: flex;
    position: static;
    width: 100%;
    height: auto;
    max-height: 65vh;
    max-height: 65dvh;
    overflow: auto;
    flex: none;
  }
  #app > .sidebar nav button,
  #app > .sidebar #logout { min-height: 44px; }
  #app > main > .topbar {
    flex: none;
    min-height: 64px;
    height: auto;
    padding: var(--space-2) var(--space-3) !important;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  #app > main > .topbar h1 { font-size: 22px; overflow-wrap: anywhere; }
  #app > main > .topbar > div { min-width: 0; max-width: 100%; }
  #app > main > .topbar .top-actions { flex-wrap: wrap; }

  /* Explicit scope keeps standalone auth pages and financial forms untouched. */
  #app :is(#employees, #clients, #settings, #positions, #permissions, #services, #online).view.active {
    min-width: 0;
    max-width: 100%;
    padding: var(--space-3) !important;
    overflow-wrap: anywhere;
  }
  #app :is(#employees, #clients, #settings, #positions, #permissions, #services, #online) .section-head {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  #app :is(#employees, #clients, #settings, #positions, #permissions, #services, #online) .section-head h2 {
    font-size: 22px;
  }
  #app :is(#employees, #clients, #settings, #positions, #permissions, #services, #online) :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
  #app :is(#employees, #clients, #settings, #positions, #permissions, #services, #online) .button {
    min-height: 44px;
    white-space: normal;
  }
  #app #settings .settings-navigation { grid-template-columns: minmax(0, 1fr); }

  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) {
    box-sizing: border-box;
    min-width: 0;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: auto;
    padding: 0;
  }
  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) .modal {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--space-4);
    overflow-wrap: anywhere;
  }
  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) .two {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) :is(label, .two > *) {
    min-width: 0;
  }
  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) :is(.button, .modal-close, .position-multiselect-trigger) {
    min-height: 44px;
    min-width: 44px;
    white-space: normal;
  }
  :is(#client-dialog, #client-detail-dialog, #employee-dialog, .permissions-selector-dialog) :is(.employee-form-actions, .permissions-selector-actions, .client-title-row, .client-title-actions) {
    flex-wrap: wrap;
  }
}

/* Own-journal presentation: effective permissions set this marker, never a role. */
@media (max-width: 768px) {
  body[data-mobile-journal-only] #app > .sidebar,
  body[data-mobile-journal-only] #app > .mobile-menu-toggle,
  body[data-mobile-journal-only] #finance-strip,
  body[data-mobile-journal-only] #top-revenue,
  body[data-mobile-journal-only] #toggle-filter,
  body[data-mobile-journal-only] #all-employees,
  body[data-mobile-journal-only] #resource-filter {
    display: none !important;
  }
  body[data-mobile-journal-only] .mobile-journal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-primary);
    border-bottom: 1px solid var(--border-default);
    font-weight: 600;
  }
  body[data-mobile-journal-only] .mobile-journal-header details { position: relative; }
  body[data-mobile-journal-only] .mobile-journal-header summary {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
  }
  body[data-mobile-journal-only] .mobile-journal-header summary::-webkit-details-marker { display: none; }
  body[data-mobile-journal-only] .mobile-journal-account {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
    width: min(260px, calc(100vw - 24px));
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
  }
  body[data-mobile-journal-only] .mobile-journal-account #logout {
    min-height: 44px;
    background: var(--surface-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  body[data-mobile-journal-only] #app > main > .topbar { min-height: 44px; }

  /* Existing booking form only; no changes to booking or payment handlers. */
  body[data-mobile-journal-only] #booking-dialog {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 0;
    overflow: auto;
  }
  body[data-mobile-journal-only] #booking-form {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: var(--space-4);
    overflow-wrap: anywhere;
  }
  body[data-mobile-journal-only] #booking-form :is(label, input, select, textarea) { min-width: 0; max-width: 100%; }
  body[data-mobile-journal-only] #booking-form :is(input, select, textarea) { font-size: 16px; }
  body[data-mobile-journal-only] #booking-form .two { grid-template-columns: minmax(0, 1fr); }
  body[data-mobile-journal-only] #booking-form :is(.button, .modal-close) { min-width: 44px; min-height: 44px; }
}

/* Own Journal uses the same bounded two-axis schedule viewport as the full
   mobile Journal. Header/controls/earnings stay outside that scroller. Other
   routes retain document scrolling; the desktop cascade is untouched. */
@media (max-width: 768px) {
  html:has(body[data-mobile-journal-only] #app:not([hidden]) #journal.view.active),
  body[data-mobile-journal-only]:has(#app:not([hidden]) #journal.view.active) {
    height: 100%;
    overflow: hidden;
  }
  body[data-mobile-journal-only]:has(#journal.view.active) #app {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-mobile-journal-only]:has(#journal.view.active) .mobile-journal-header {
    flex: 0 0 auto;
  }
  body[data-mobile-journal-only]:has(#journal.view.active) #app > main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
  body[data-mobile-journal-only]:has(#journal.view.active) #app > main > .topbar {
    flex: 0 0 auto;
  }
  body[data-mobile-journal-only] #journal.view.active,
  body[data-mobile-journal-only] #journal .journal-layout,
  body[data-mobile-journal-only] #journal .journal-workspace {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  body[data-mobile-journal-only] #journal .journal-workspace { flex-direction: column; }
  body[data-mobile-journal-only] #journal .journal-scroll {
    flex: 1 1 auto;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}