/* Shared phone and tablet layout. Desktop styling remains in dashboard.css. */
.topbar .mobile-menu-toggle { display: none; }
.mobile-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mobile-table-scroll:focus-visible { outline: 3px solid #b9002b; outline-offset: 3px; }
.content-item-card[hidden], .recipient-option[hidden], [data-no-results][hidden] { display: none !important; }
@media (max-width: 1050px) {
  .content-grid.wide-left { grid-template-columns: minmax(0, 1fr); }
  .app-shell > *, .content-grid > *, .form-row > *, .card, .panel { min-width: 0; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }
  .topbar { height: auto; min-height: 68px; padding: 10px 16px; gap: 12px; flex-wrap: wrap; }
  .topbar .brand { min-width: 0; margin-right: auto; }
  .topbar .brand img { height: 40px; width: auto; }
  .topbar .staff-name { margin: 0; gap: 10px; }
  .topbar .staff-name > span { display: none; }
  .topbar .signout-link { min-height: 44px; display: inline-flex; align-items: center; }
  .mobile-nav-ready .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 9px 14px; background: #24272d; border: 1px solid #646974; color: #fff; border-radius: 10px; font-size: 15px; }
  .mobile-menu-toggle[aria-expanded="true"] { background: #b9002b; border-color: #ef8ca3; }
  .app-shell { display: block; width: 100%; }
  .app-shell .sidebar { position: static; height: auto; min-height: 0; max-height: none; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 12px; gap: 6px; }
  .mobile-nav-ready .app-shell .sidebar { display: none; }
  .mobile-nav-ready .app-shell .sidebar.mobile-open { display: grid; }
  .app-shell .sidebar a { min-width: 0; min-height: 54px; margin: 0; padding: 12px; white-space: normal; }
  .app-shell .sidebar a span { font-size: 15px; }
  .app-shell .sidebar small { display: block; font-size: 11px; line-height: 1.4; }
  .page.dashboard-page { padding: 18px 14px 40px; min-width: 0; }
  .page-heading { min-height: 0; padding: 22px; border-radius: 18px; margin-bottom: 20px; }
  .page-heading h1 { font-size: clamp(25px, 6vw, 34px); line-height: 1.15; overflow-wrap: anywhere; }
  .page-heading .page-description { font-size: 14px; line-height: 1.55; margin-top: 12px; }
  .page-heading .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .content-grid, .content-grid.wide-left, .group-grid, .directory-grid, .module-grid, .form-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .card, .panel { padding: 20px; border-radius: 16px; }
  .card h2, .panel h2 { font-size: 21px; line-height: 1.3; }
  .section-heading { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
  .section-heading > *, .content-item-main > *, .content-title-row > * { min-width: 0; }
  .metric-grid { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { padding: 18px; }
  .page p, .page li, .page h2, .page h3, .page a, .page small, .page label { overflow-wrap: anywhere; }
  button, .button, input, select, textarea { max-width: 100%; }
  button, .button, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="color"]), select, .recipient-dropdown > summary { min-height: 44px; }
  input, select, textarea, .editor-surface { font-size: 16px; }
  input[type="date"], input[type="datetime-local"] { min-width: 0; width: 100%; box-sizing: border-box; }
  textarea { resize: vertical; }
  fieldset { min-width: 0; margin-left: 0; margin-right: 0; }
  .publication-controls { padding: 14px; }
  .publication-controls p { font-size: 13px; line-height: 1.5; }
  .recipient-dropdown > summary { gap: 8px; flex-wrap: wrap; padding: 12px 32px 12px 12px; }
  .recipient-panel { max-height: min(420px, 60dvh); padding: 10px; }
  .recipient-option { min-height: 44px; padding: 8px; margin: 2px 0; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; }
  .editor-toolbar { gap: 6px; padding: 8px; }
  .editor-toolbar button, .editor-toolbar select { min-height: 44px; margin: 0; font-size: 14px; padding: 8px 10px; }
  .editor-toolbar select { max-width: 100%; flex: 1 1 110px; min-width: 0; font-size: 16px; }
  .editor-toolbar .color-tool { min-height: 44px; padding: 6px; }
  .editor-surface { padding: 12px; min-height: 160px; overflow-x: auto; }
  .editor-surface img, .content-detail-body img, .message-body img { max-width: 100%; height: auto; }
  .content-browser { padding: 0; }
  .content-browser-toolbar { padding: 20px 16px 16px; }
  .content-card-list { grid-template-columns: minmax(0, 1fr); padding: 0 12px 16px; gap: 12px; }
  .content-item-main { padding: 16px 54px 16px 12px; gap: 10px; }
  .content-type-icon { width: 40px; height: 44px; flex: 0 0 40px; }
  .event-date-tile { width: 44px; min-width: 44px; height: 62px; }
  .content-title-row { flex-wrap: wrap; gap: 7px; }
  .content-title-row > strong { font-size: 16px; line-height: 1.4; white-space: normal; overflow: visible; }
  .content-item-copy small { white-space: normal; }
  .button-link, .content-create-button, .content-item-menu a { min-height: 44px; }
  .dashboard-welcome { flex-direction: column; align-items: stretch; gap: 16px; }
  .group-list article > div, .directory-grid article { flex-wrap: wrap; }
  .content-item-menu > summary { width: 44px; height: 44px; }
  .content-detail-card { padding: 0; }
  .content-detail-header { padding: 20px 16px; flex-direction: column; align-items: stretch; gap: 16px; }
  .content-detail-header h2 { font-size: 24px; }
  .content-detail-meta { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .content-detail-body { padding: 18px 16px; overflow-wrap: anywhere; }
  .content-detail-card > .attachment-list, .content-detail-card > hr, .content-detail-card > h3, .content-detail-card > .messages, .content-detail-card > form { margin-left: 16px; margin-right: 16px; }
  .attachment-list a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px; max-width: 100%; overflow-wrap: anywhere; }
  .participant-row { flex-wrap: wrap; gap: 10px; }
  .participant-row > * { min-width: 0; }
  .source-list li { overflow-wrap: anywhere; }
  .chat-thread .chat-bubble { width: 94%; padding: 14px !important; border-radius: 18px !important; }
  .chat-thread .chat-message-head { flex-wrap: wrap; }
  .chat-message-head small { font-size: 12px; }
  .chat-thread .message-actions > summary, .chat-thread button.seen-button { min-width: 44px; min-height: 44px; }
  .chat-thread .editor-surface { min-height: 100px; }
  .dashboard-modal { padding: 12px; }
  .dashboard-modal-panel { max-height: 85dvh; width: 100%; }
  .dashboard-modal-body { max-height: 65dvh; }
  .past-due-summary { gap: 16px; }
  .past-due-table { min-width: 460px; }
  .past-due-table th, .past-due-table td { padding: 14px 10px; }
  .past-due-table a { display: inline-flex; min-height: 44px; align-items: center; }
  .login-page { padding: 20px 14px; }
  .login-card { width: 100%; max-width: 440px; padding: 24px; }
  .login-card h1 { font-size: 28px; }
  :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #2463eb; outline-offset: 3px; }
}
@media (max-width: 360px) {
  .topbar { padding: 8px 12px; gap: 8px; }
  .mobile-nav-ready .mobile-menu-toggle { padding: 9px 10px; }
  .page.dashboard-page { padding-left: 10px; padding-right: 10px; }
  .page-heading, .card, .panel { padding: 16px; }
  .content-detail-card, .content-browser { padding: 0; }
}