/* Phone shell: navigation and agenda are optional drawers, never reserved columns. */
.mobile-shell-toggle, .mobile-shell-close, .mobile-shell-backdrop { display: none; }
@media screen and (max-width: 1024px) {
  html { scroll-padding-top: 82px; -webkit-text-size-adjust: 100%; }
  body { display: block; font-size: 14px; --text-muted: #63798c; --text-sec: #415c70; }
  body.mobile-nav-open, body.mobile-agenda-open { overflow: hidden; overscroll-behavior: none; }
  .main { width: 100%; max-width: 100%; margin: 0; min-height: 100dvh; transition: none; overflow-x: clip; }
  .page { padding: 16px 12px calc(24px + env(safe-area-inset-bottom)); }
  :where(button, .btn-primary, .btn-secondary, .btn-icon) { touch-action: manipulation; }
  :where(.btn-primary, .btn-secondary, .btn-icon, .btn-danger, .btn-success) { min-height: 44px; }
  .main :is(input, select, textarea, [contenteditable="true"]) { font-size: 16px; max-width: 100%; }
  :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]) { min-height: 44px; }
  :where(input[type="checkbox"], input[type="radio"]) { min-width: 20px; min-height: 20px; }
  :where(img, video, canvas) { max-width: 100%; }
  .topbar {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px;
    grid-template-areas: 'menu title agenda actions user' 'menu date agenda actions user';
    grid-template-rows: auto auto; column-gap: 3px; row-gap: 1px;
    height: auto; min-height: 70px; padding: calc(9px + env(safe-area-inset-top)) 8px 9px;
    overflow: visible; align-items: center;
  }
  .topbar-title { grid-area: title; font-size: 17px; line-height: 1.3; align-self: end; }
  .topbar-title:focus { outline: none; }
  .topbar-date { grid-area: date; min-width: 0; width: 100%; max-width: none; padding: 0; margin: 0; font-size: 10px; align-self: start; line-height: 1.6; }
  .topbar-date > svg { display: none; }
  .topbar-date span { min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
  .topbar-actions-wrap { grid-area: actions; position: static; }
  .topbar-user-wrap { grid-area: user; position: static; }
  .topbar-actions-btn, .topbar-user-btn { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; border-radius: 12px; }
  .topbar-actions-btn > span, .topbar-actions-btn > svg:last-child, .topbar-user-meta, .topbar-user-btn > svg { display: none; }
  .topbar-actions-btn .shell-control-icon { width: 20px; height: 20px; }
  .topbar-user-avatar { width: 32px; height: 32px; }
  .topbar-actions-menu, .topbar-user-menu {
    position: absolute; top: calc(100% + 5px); left: 8px; right: 8px; min-width: 0; width: auto;
    max-height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto;
  }
  .topbar-actions-item, .topbar-user-menu-action { min-height: 48px; font-size: 15px; }
  .mobile-shell-toggle, .mobile-shell-close { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #dce9ef; border-radius: 12px; background: #fff; color: #245a72; cursor: pointer; }
  .mobile-shell-toggle svg, .mobile-shell-close svg { width: 21px; height: 21px; }
  #mobile-nav-toggle { grid-area: menu; }
  #mobile-agenda-toggle { grid-area: agenda; }
  .mobile-shell-toggle[aria-expanded="true"] { background: #eaf8fb; border-color: #8fd3e2; color: #007e99; }
  .mobile-shell-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; background: #102c4566; backdrop-filter: blur(3px); z-index: 190; }
  .sidebar {
    width: min(360px, calc(100vw - 24px)); max-width: 100%; height: 100dvh; min-height: 0;
    z-index: 200; visibility: hidden; pointer-events: none; transform: translateX(105%);
    transition: transform .2s ease, visibility .2s; box-shadow: -8px 0 30px #102c4522;
  }
  body.mobile-nav-open .sidebar { visibility: visible; pointer-events: auto; transform: translateX(0); }
  .sidebar-rail { width: 56px; padding: calc(16px + env(safe-area-inset-top)) 6px 16px; gap: 10px; overflow-y: auto; }
  .sidebar-rail .rail-item { flex: 0 0 44px; width: 44px; height: 44px; }
  .sidebar-main { width: auto; flex: 1; min-width: 0; min-height: 0; }
  .sidebar-logo { min-height: 82px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; gap: 6px; }
  .sidebar-logo-home { min-width: 0; }
  .sidebar-logo-home img { width: 100%; height: auto; min-height: 38px; }
  .sidebar-context { margin-inline: 16px; padding-block: 10px; }
  .sidebar-context-title { font-size: 19px; }
  .sidebar-context-sub { font-size: 12px; }
  .sidebar .nav-item { min-height: 46px; font-size: 15px; padding-block: 10px; }
  .sidebar .nav-item-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .sidebar .nav-label { font-size: 11px; }
  .sidebar-bottom { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  #global-day-rail {
    width: min(420px, 100vw); height: 100dvh; z-index: 200; visibility: hidden; pointer-events: none;
    transform: translateX(-105%); transition: transform .2s ease, visibility .2s;
  }
  body.mobile-agenda-open #global-day-rail { visibility: visible; pointer-events: auto; transform: translateX(0); }
  body.dayrail-collapsed #global-day-rail .day-rail-content { opacity: 1; transform: none; pointer-events: auto; }
  body.dayrail-collapsed #global-day-rail .day-rail-shell::before, body.dayrail-collapsed #global-day-rail .day-rail-shell::after { display: none; }
  #global-day-rail .day-rail-header { grid-template-columns: minmax(0, 1fr) auto 44px; padding: calc(12px + env(safe-area-inset-top)) 14px 14px; gap: 12px; }
  #global-day-rail .day-rail-date-row { grid-column: 1 / -1; }
  #global-day-rail .day-rail-nav-btn { width: 44px; height: 44px; }
  #global-day-rail .day-rail-date-title { font-size: 16px; }
  #global-day-rail .day-rail-date-sub { font-size: 12px; }
  #global-day-rail .day-rail-body { min-height: 0; overscroll-behavior: contain; padding: 22px 14px calc(28px + env(safe-area-inset-bottom)); }
  #global-day-rail .day-rail-timeline { grid-template-columns: 42px minmax(0, 1fr); }
  #global-day-rail .day-rail-event-title { font-size: 14px; }
  #global-day-rail .day-rail-event-meta, #global-day-rail .day-rail-event-time { font-size: 11px; }
  #global-day-rail .day-rail-footer { display: none; }
  body.auth-locked .mobile-shell-backdrop { display: none; }
}
@media screen and (max-width: 359px) {
  .topbar { column-gap: 0; padding-inline: 4px; }
  .topbar-title { font-size: 16px; }
  .sidebar { width: calc(100vw - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, #global-day-rail { transition: none; }
}

/* Phone refinements only; desktop geometry and saved sidebar preferences are unchanged. */
@media screen and (max-width: 760px) {
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .main > .page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .main :is(input, select, textarea, [contenteditable="true"]) { scroll-margin-block: 90px; }
  .topbar { padding-inline: max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-left)); }
  .sidebar, #global-day-rail, .mobile-shell-backdrop:not([hidden]) {
    top: var(--crm-viewport-top, 0px);
    height: var(--crm-viewport-height, 100dvh);
  }
  .sidebar .sidebar-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .topbar-actions-menu, .topbar-user-menu { max-height: calc(var(--crm-viewport-height, 100dvh) - 90px); }
  .auth-screen { align-items: flex-start; padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .auth-screen-grid { width: 100%; max-width: 440px; margin-block: auto; min-width: 0; }
  .auth-login-panel { padding: 25px 20px; }
  .auth-login-panel .form-input { font-size: 16px; }
  .auth-login-copy h1 { font-size: 25px; }
  .auth-login-copy p { font-size: 14px; }
  .auth-screen :is(.auth-login-footer, .auth-login-help, .auth-meta) { overflow-wrap: anywhere; }
}