.app-shell { height: 100vh; height: 100dvh; }
#app-main { min-width: 0; }
#app-header { flex-shrink: 0; position: sticky; top: 0; z-index: 20; }
#app-sidebar nav { min-height: 0; }
.mobile-menu-toggle, .mobile-menu-close, .mobile-menu-backdrop { display: none; }
.table-scroll { max-width: 100%; overflow-x: auto; }
#appointment-modal > div { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
  #app-header { height: auto; min-height: 64px; gap: 12px; padding: 10px 16px; }
  #page-title { min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
  .header-note { display: none; }
  .mobile-menu-toggle, .mobile-menu-close {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 8px 12px; border-radius: 8px; flex-shrink: 0;
  }
  .mobile-menu-toggle { color: #115e59; border: 1px solid #99f6e4; background: #f0fdfa; }
  .mobile-menu-close { margin: 8px 12px; align-self: flex-end; border: 1px solid #5eead4; }
  #app-sidebar {
    display: none; position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(288px, calc(100vw - 48px)); height: 100vh; height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 8px 0 24px #0003;
  }
  #app-sidebar.is-open { display: flex; }
  
  #app-sidebar > [aria-label="Pure Desk by MP Partner"] { padding: 10px 16px; }
  .mobile-menu-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 30; background: #0008;
  }
  .app-content { padding: 16px; }
  .app-content input, .app-content select, .app-content textarea,
  #appointment-modal input, #appointment-modal select { min-width: 0; max-width: 100%; font-size: 16px; }
  .app-content form > *, #appointment-modal form > * { min-width: 0; }
  .app-content input[type="file"] { width: 100%; }
  .table-scroll table { min-width: 560px; }
  #calendar-grid-container th:not(:first-child), #calendar-grid-container td:not(:first-child) { min-width: 180px; }
  #calendar-grid-container th:first-child, #calendar-grid-container td:first-child {
    position: sticky; left: 0; z-index: 1; background: #f3f4f6; min-width: 64px;
  }
  #appointment-modal { padding: 12px; }
  #appointment-modal > div { padding: 16px; max-height: calc(100dvh - 24px); }
  #appointment-modal .grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
  #app-sidebar button[title], #app-sidebar button.tab-btn { min-height: 44px; }
  #app-sidebar button[title] { min-width: 44px; }
  .appointment-card { padding: 10px; gap: 8px; }
  .appointment-card .appointment-name { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .appointment-card .appointment-service { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
  .appointment-card .appointment-footer { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; font-size: 12px; }
  .appointment-card .appointment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .appointment-card .appointment-actions > button {
    min-height: 44px; min-width: 64px; padding: 8px 12px; margin: 0;
    font-size: 14px; line-height: 20px; border: 1px solid currentColor; border-radius: 8px;
    background: #fff; touch-action: manipulation;
  }
  .appointment-actions > button:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
}
@media (max-width: 1024px) and (max-height: 500px) {
  #app-sidebar { overflow-y: auto; }
  #app-sidebar nav { flex: none; overflow-y: visible; }
  #app-sidebar > * { flex-shrink: 0; }
  #app-sidebar .mobile-menu-close { position: sticky; top: 8px; z-index: 1; background: #134e4a; }
}

@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
  #app-sidebar { overflow-y: auto; }
  #app-sidebar nav { flex: none; overflow-y: visible; }
  #app-sidebar > * { flex-shrink: 0; }
  #app-sidebar .mobile-menu-close { position: sticky; top: 8px; z-index: 2; background: #134e4a; }
  #app-sidebar .sidebar-info { padding: 2px 16px; }
  #app-sidebar .sidebar-info button[title] { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
  #app-sidebar .sidebar-logo { padding: 6px 16px; }
  #app-sidebar .sidebar-logo > div { width: 110px !important; }
}

@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
  #appointment-modal .grid:has(#client_phone) { grid-template-columns: minmax(0, 1fr); }
  #appointment-modal .grid:has(#client_phone) > * { grid-column: auto; }
}