/* Shared phone/tablet layout. Wide data surfaces scroll locally, not the page. */ @media (min-width: 1280px) { #appShell.is-task-workstation > .sidebar { width: 80px; padding: 24px 12px; overflow-x: hidden; overflow-y: auto; z-index: 1100; transition: width 160ms ease; } #appShell.is-task-workstation > .content { margin-left: 80px; } #appShell.is-task-workstation > .sidebar:hover, #appShell.is-task-workstation > .sidebar:focus-within { width: 260px; } #appShell.is-task-workstation .sidebar__brand { padding: 24px 6px !important; } #appShell.is-task-workstation .sidebar__logo-wrapper { flex: 0 0 44px; } #appShell.is-task-workstation .nav__item { padding: 13px 16px; flex-shrink: 0; } #appShell.is-task-workstation .sidebar .label, #appShell.is-task-workstation .sidebar__brand-text, #appShell.is-task-workstation #sidebarSignOutBtn { opacity: 0; white-space: nowrap; flex-shrink: 0; } #appShell.is-task-workstation .sidebar:hover .label, #appShell.is-task-workstation .sidebar:focus-within .label, #appShell.is-task-workstation .sidebar:hover .sidebar__brand-text, #appShell.is-task-workstation .sidebar:focus-within .sidebar__brand-text, #appShell.is-task-workstation .sidebar:hover #sidebarSignOutBtn, #appShell.is-task-workstation .sidebar:focus-within #sidebarSignOutBtn { opacity: 1; } #appShell.is-task-workstation .sidebar-user .avatar { flex-shrink: 0; } #appShell.is-task-workstation .workflow-advance-widget { left: 96px; } } @media (prefers-reduced-motion: reduce) { #appShell.is-task-workstation > .sidebar { transition: none; } } #appShell .calendar-shell { grid-template-columns: 280px minmax(0, 1fr); } #appShell .calendar-shell > * { min-width: 0; } @media (max-width: 1279px) { #appShell .content { min-width: 0; } #appShell .search-shell--wide { grid-template-columns: auto minmax(0, 1fr) auto; padding: 0 16px; } #appShell .intake-prospects-fab { left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } #appShell .view { min-width: 0; max-width: 100%; } #appShell .mp-tabs { padding: 0 12px; } #appShell .mp-tabs__buttons { min-width: 0; overflow-x: auto; flex: 1; } #appShell .mp-tab { flex-shrink: 0; width: auto !important; } #appShell .mp-tabs__case-info { max-width: 25%; min-width: 0; } #appShell .workflow-stepper-wrapper { overflow-x: auto; } #appShell .workflow-stepper { min-width: 600px; } #appShell .marketing-toolbar { flex-wrap: wrap; } #appShell .marketing-toolbar__actions { flex-wrap: wrap; min-width: 0; } } @media (max-width: 1024px) { #appShell > .content { padding: 0 !important; } #appShell main { padding: 16px 16px 88px; min-width: 0; } #appShell .search-shell--wide { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; } #appShell .header-left { grid-column: 1; grid-row: 1; } #appShell .header-right { grid-column: 2; grid-row: 1; min-width: 0; } #appShell .header-center { grid-column: 1 / -1; grid-row: 2; margin: 0; } #appShell .header-right .header-divider { display: none; } #appShell .header-quick-actions { display: none; } #appShell .mp-header__top, #appShell .ep-profile-header, #appShell .contacts-header, #appShell .documents-header, #appShell .reports-hero, #appShell .reports-toolbar, #appShell .activities-header { flex-wrap: wrap; gap: 16px; } #appShell .mp-header__text, #appShell .ep-profile-header > div, #appShell .documents-header > div { min-width: 0; max-width: 100%; } #appShell .mp-header__title { overflow-wrap: anywhere; } #appShell .contacts-header__actions, #appShell .contacts-actions, #appShell .documents-actions__controls, #appShell .documents-header__actions, #appShell .reports-actions, #appShell .reports-filters, #appShell .activities-header__actions { flex-wrap: wrap; min-width: 0; max-width: 100%; } #appShell .documents-actions__search { width: 100%; min-width: 0; } #appShell .documents-summary-strip { flex-wrap: wrap; } #appShell .start-here-grid { grid-template-columns: minmax(0, 1fr); } #appShell .contacts-master-detail { flex-direction: column; height: auto; } #appShell .contacts-master-list { width: 100%; max-height: 360px; border-right: 0; } #appShell .contacts-detail-panel { min-width: 0; padding: 16px; } #appShell .intake-master-detail { height: auto; min-height: 0; } #appShell .intake-detail-panel { min-width: 0; padding: 16px; overflow: visible; } #appShell .calendar-tabs-row { overflow-x: auto; } #appShell .calendar-tab-btn { flex: 0 0 auto; } #appShell .mp-tabs__case-info { display: none !important; } #appShell .matter-profile__body { padding: 16px; min-width: 0; } #appShell .mp-header { padding: 16px !important; } #appShell .mp-header__top { padding: 12px 0; } #appShell .mp-breadcrumb { padding: 0; flex-wrap: wrap; } #appShell .ep-profile { min-width: 0; width: 100%; padding: 16px; } #appShell .ep-profile-body > * { min-width: 0; max-width: 100%; } #appShell .contacts-filters { flex-wrap: wrap; } #appShell .documents-tabs { overflow-x: auto; max-width: 100%; } #appShell .documents-tabs .tab { flex-shrink: 0; } #appShell .reports-toolbar { grid-template-columns: minmax(0, 1fr); } #appShell .reports-view { grid-template-columns: minmax(0, 1fr); } #appShell .builder-grid { grid-template-columns: minmax(0, 1fr); } #appShell .builder-header { flex-wrap: wrap; } #appShell .calendar-shell { grid-template-columns: minmax(0, 1fr); } #appShell .canvas-grid { grid-template-columns: minmax(0, 1fr); } #appShell .canvas-card--wide { grid-column: 1; } #appShell .ep-profile-body { grid-template-columns: minmax(0, 1fr); } #appShell .table-wrap, #appShell .table-wrapper, #appShell .matters-table-wrap, #appShell .settings-table-wrap, #appShell .ep-table-wrap, #appShell .workflow-table-wrap { max-width: 100%; overflow-x: auto; } .modal:not(.hidden) { padding: 12px; } .modal .modal__content { min-width: 0; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px); overflow-y: auto !important; overscroll-behavior: contain; } .modal .modal__header { gap: 12px; } .modal .modal__header h3 { min-width: 0; overflow-wrap: anywhere; } .modal .modal__close { flex-shrink: 0; } .modal .modal__actions { flex-wrap: wrap; } .modal .form-grid > * { min-width: 0; } .modal .pipeline-form__row > label { min-width: 0; } .modal .pipeline-form__row input, .modal .pipeline-form__row select { min-width: 0; max-width: 100%; } } @media (max-width: 600px) { #appShell main { padding: 12px 12px 88px; } #appShell .hero--searchbar { padding: 10px 0; } #appShell .mp-header__title { font-size: 24px; line-height: 1.3; } #appShell .workflow-advance-fab { max-width: calc(100vw - 160px); white-space: normal; font-size: 12px !important; padding: 10px 12px !important; } .heirlo-widget { right: 12px !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; } #appShell .search-shell--wide { padding: 0 12px; } #appShell .header-left #quickIntakeBtn { min-width: 44px; min-height: 44px; } #appShell .header-right { gap: 8px; } #appShell .header-right button { min-height: 44px; } #appShell .start-here-header, #appShell .activities-date { flex-wrap: wrap; } #appShell .start-here-progress { min-width: 0; max-width: 100%; } #appShell .start-here-header__actions { grid-template-columns: minmax(0, 1fr); width: 100%; } #appShell .start-here-progress { grid-template-columns: minmax(0, 1fr); } #appShell .canvas-actions { display: flex; flex-wrap: wrap; gap: 8px; } #appShell .marketing-sub-view, #appShell .marketing-date-range { min-width: 0; max-width: 100%; } #appShell .marketing-date-range__presets, #appShell .marketing-date-range__custom { flex-wrap: wrap; min-width: 0; } #superadminProfileModal .modal__header + div { overflow-x: auto; } #superadminProfileModal .superadmin-profile-tab { flex-shrink: 0; } #superadminProfileModal #panel-overview > div { grid-template-columns: minmax(0, 1fr) !important; } #appShell .contacts-header__actions input, #appShell .activities-header__actions input, #appShell .activities-header__actions select { min-width: 0; max-width: 100%; } #appShell .intake-profile-workspace .intake-profile-sidebar, #appShell .intake-preview__grid { grid-template-columns: minmax(0, 1fr); } #appShell .intake-workstation-header__actions { flex-wrap: wrap; } #appShell .intake-profile-workspace { padding: 0; } #appShell .intake-preview { padding: 0; } #appShell .intake-preview__actions { flex-wrap: wrap; } #appShell .intake-preview__actions button, #appShell .intake-filter-btn, #appShell .intake-lifecycle-tabs button, #appShell .intake-profile-workspace button { min-height: 44px; } #appShell .mp-header__actions { flex-wrap: wrap; } #appShell .ep-profile-header { padding: 16px; } #appShell .reports-filters label { max-width: 100%; } .modal .modal__content { padding: 16px !important; border-radius: 8px !important; } .modal .form-grid { grid-template-columns: minmax(0, 1fr) !important; } .modal .form-grid > * { grid-column: 1 / -1 !important; } #profileModal .profile-layout { grid-template-columns: minmax(0, 1fr); } #profileModal .profile-card { min-width: 0; } #profileModal .profile-field { flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; } .modal input:not([type="checkbox"]):not([type="radio"]), .modal select, .modal textarea, #appShell input:not([type="checkbox"]):not([type="radio"]), #appShell select, #appShell textarea { min-width: 0; max-width: 100%; font-size: 16px; } .modal input:not([type="checkbox"]):not([type="radio"]), .modal select { min-height: 44px; } .modal .modal__actions button { min-height: 44px; } .heirlo-panel, .heirlo-panel.expanded { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 96px) !important; right: 12px !important; } } /* Estate identity review uses a native modal for keyboard focus containment. */ .estate-identity-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow: auto; border: 1px solid #d6dce3; border-radius: 8px; padding: 24px; color: #20252b; background: #fff; } .estate-identity-dialog::backdrop { background: rgb(0 0 0 / 45%); } .estate-identity-dialog header, .estate-identity-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .estate-identity-dialog h3 { font-size: 20px; margin: 0; } .estate-identity-dialog label { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 14px; } .estate-identity-dialog input, .estate-identity-dialog select { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid #cbd2da; border-radius: 4px; font-size: 16px; background: #fff; color: #20252b; } .estate-identity-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .estate-identity-fields label:has([name="address"]) { grid-column: 1 / -1; } .estate-identity-dialog button { padding: 10px 14px; border: 1px solid #cbd2da; border-radius: 4px; background: #fff; color: #20252b; cursor: pointer; } .estate-identity-dialog button[type="submit"] { background: #a51c38; color: #fff; border-color: #a51c38; } .estate-identity-dialog button:disabled { opacity: .5; cursor: default; } .estate-identity-dialog [data-review-status] { font-size: 14px; overflow-wrap: anywhere; } @media (max-width: 480px) { .estate-identity-fields { grid-template-columns: minmax(0, 1fr); } .estate-identity-dialog { padding: 16px; } }