/* ITDA v30.94 · unified responsive/adaptive layer
   One feature/data flow, adaptive presentation only. Loaded last so every screen
   follows the same tablet/mobile ergonomics without duplicating page logic. */

:root{
  --itda-touch:44px;
  --itda-mobile-gutter:12px;
  --itda-tablet-gutter:18px;
  --itda-safe-bottom:env(safe-area-inset-bottom,0px);
}

html{min-width:0;overflow-x:clip}
body{min-width:0}
.page-shell,.panel,.panel-body,.form-container,.toolbar,.data-wrap{min-width:0}
img,video,canvas,svg,iframe{max-width:100%}

/* Keep long text/data from forcing the whole page wider. */
.title-link,.page-desc,.help,.detail-value,.document-detail,.comment-body,
.event-body,.prep-task-head,.schedule-detail-grid,.reader-status-card{overflow-wrap:anywhere;word-break:keep-all}

/* Tablet: same functions, roomier adaptive layout. */
@media(max-width:1050px){
  .page-shell{padding-left:var(--itda-tablet-gutter);padding-right:var(--itda-tablet-gutter)}
  .page-actions,.toolbar,.toolbar-left,.toolbar-right{min-width:0}
  .settings-tabs,.tab-nav,.sub-nav,.permission-group-list{
    max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none
  }
  .settings-tabs::-webkit-scrollbar,.tab-nav::-webkit-scrollbar,.sub-nav::-webkit-scrollbar,.permission-group-list::-webkit-scrollbar{display:none}
  .settings-tabs>*,.tab-nav>*{flex:0 0 auto}

  /* FullCalendar keeps one source of truth; only toolbar/layout adapts. */
  .fc .fc-toolbar{gap:8px;flex-wrap:wrap}
  .fc .fc-toolbar-title{font-size:1.25rem!important}
  .fc .fc-button{min-height:40px}
}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden!important}
  body{-webkit-tap-highlight-color:transparent}
  .page-shell{padding-left:var(--itda-mobile-gutter)!important;padding-right:var(--itda-mobile-gutter)!important}
  .page-shell>*{max-width:100%;min-width:0}

  /* iOS Safari does not zoom fields when text is >= 16px. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  button,.btn,.icon-btn,a[role="button"],summary{touch-action:manipulation}
  .btn:not(.btn-xs),button:not(.fc-button):not(.ck-button):not(.workspace-page-number){min-height:var(--itda-touch)}

  /* Common page controls become thumb-friendly without changing actions. */
  .toolbar,.toolbar-left,.toolbar-right,.filter-row,.filter-bar,.filters,.search-row{
    width:100%;max-width:100%;min-width:0
  }
  .toolbar{align-items:stretch!important}
  .toolbar-left,.toolbar-right{gap:8px!important}
  .toolbar-left>.btn,.toolbar-right>.btn,.toolbar-left>button,.toolbar-right>button{flex:1 1 auto}
  .toolbar select,.toolbar input,.toolbar .control{max-width:100%!important}

  /* Forms keep the exact same submit/validation flow; presentation becomes one column. */
  .form-grid,.settings-form-grid,.schedule-detail-grid,.permission-action-grid{grid-template-columns:1fr!important}
  .field,.field.full,.form-grid>.full{grid-column:auto!important;min-width:0}
  .field input,.field select,.field textarea{width:100%;max-width:100%;box-sizing:border-box}
  .form-actions,.modal-form-actions{position:relative;z-index:1}

  /* Read-only tables are cardified by mobile_readability.js. Tables that must remain
     editable stay horizontally scrollable inside their own container, never the page. */
  .data-wrap,.table-wrap,.table-responsive,.table-scroll,.admin-table-wrap,.list-table-wrap,.finance-table-wrap,
  .slack-user-table-wrap{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  table:not(.mobile-card-table){max-width:none}

  /* Pagination: compact, scrollable page numbers, same server/AJAX behavior. */
  .itda-pagination-wrap,.workspace-library-pagination{
    width:100%;max-width:100%;grid-template-columns:1fr!important;gap:10px!important;align-items:stretch!important
  }
  .itda-pagination{width:100%;max-width:100%;display:flex!important;align-items:center!important;gap:6px!important;min-width:0}
  .itda-page-numbers,.workspace-page-numbers{
    min-width:0;flex:1 1 auto;justify-content:flex-start!important;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 1px
  }
  .itda-page-numbers::-webkit-scrollbar,.workspace-page-numbers::-webkit-scrollbar{display:none}
  .itda-page-numbers>a,.itda-page-numbers>span,.workspace-page-number{
    flex:0 0 auto;min-width:40px!important;min-height:40px!important;display:grid!important;place-items:center
  }
  .itda-page-edge,.workspace-page-edge{flex:0 0 auto;min-height:40px!important;display:inline-flex!important;align-items:center;justify-content:center}
  .itda-pagination-info,.itda-page-status{width:100%}

  /* Existing feature modals stay the same modal/data/API. On phones they become
     full-width sheets/full-screen surfaces and keep their internal scroll. */
  .modal-backdrop,.workspace-modal-backdrop,.global-register-backdrop,.global-login-backdrop{
    overscroll-behavior:contain
  }
  .modal,.workspace-modal,.global-register-modal,.global-login-modal,.post-login-detail-modal{
    max-width:100vw!important
  }
  .modal-body,.workspace-modal-body,.global-register-body,.global-login-modal-body,.post-login-detail-body{
    min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch
  }
  .modal-head,.workspace-modal-head,.global-register-head,.global-login-modal-head{
    padding-left:14px!important;padding-right:14px!important
  }
  .modal-foot{padding-bottom:calc(10px + var(--itda-safe-bottom))!important}

  /* Nested/detail modal flow: the parent search/library modal is hidden by JS, not
     destroyed. Do not let the page or bottom nav appear between the two layers. */
  body.modal-open .mobile-bottom-nav,
  body.global-register-open .mobile-bottom-nav,
  body.workspace-detail-open .mobile-bottom-nav{display:none!important}

  /* FullCalendar mobile presentation. No separate mobile calendar/data. */
  .fc{max-width:100%;font-size:13px}
  .fc .fc-header-toolbar{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin-bottom:12px!important
  }
  .fc .fc-toolbar-chunk{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px}
  .fc .fc-toolbar-title{font-size:18px!important;line-height:1.25!important;text-align:center}
  .fc .fc-button{min-height:40px!important;padding:.45em .7em!important;font-size:12px!important}
  .fc .fc-daygrid-day-frame{min-height:62px}
  .fc .fc-col-header-cell-cushion,.fc .fc-daygrid-day-number{font-size:12px}
  .fc .fc-event{font-size:11px}

  /* Rich editor and document/detail content stay inside the viewport. */
  .ck-editor,.ck-editor__main,.ck-editor__editable,.document-detail,.viewer-content{max-width:100%!important;min-width:0!important}
  .ck-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ck-content pre{max-width:100%;overflow:auto}

  /* Settings/permissions retain every control but remove desktop-only columns. */
  .permission-layout,.permission-editor-head,.permission-module-body,.account-group-filterbar{grid-template-columns:1fr!important}
  .permission-editor{min-width:0}
  .settings-tabs,.tab-nav{padding-bottom:2px}

  /* Action rows never disappear off the right edge. */
  .user-row-actions,.row-actions,.page-actions,.modal-foot,.workspace-result-actions{
    max-width:100%;flex-wrap:wrap
  }
  .user-row-actions form{max-width:100%}

  /* Very long labels in navigation/buttons truncate instead of widening the page. */
  .sub-item,.mobile-nav-subgrid a,.btn{min-width:0}
  .sub-item{white-space:nowrap}
}

@media(max-width:430px){
  :root{--itda-mobile-gutter:10px}
  .page-actions{grid-template-columns:1fr!important}
  .page-actions .btn,.page-actions>a,.page-actions>button{width:100%}
  .modal-foot{display:grid!important;grid-template-columns:1fr!important}
  .modal-foot .btn{width:100%!important}
  .itda-page-edge{padding-left:8px!important;padding-right:8px!important;font-size:12px!important}
  .itda-page-numbers>a,.itda-page-numbers>span,.workspace-page-number{min-width:38px!important;min-height:38px!important}
  .fc .fc-button{font-size:11px!important;padding:.4em .55em!important}
}

/* Short-height phones/landscape: keep close/actions reachable. */
@media(max-width:900px) and (max-height:520px){
  .modal:not(.lifeline-detail-modal),.workspace-modal,.global-login-modal{max-height:100dvh!important;border-radius:0!important}
  .server-mobile-nav{top:4px!important;bottom:4px!important}
  .server-mobile-nav-backdrop{inset:0!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* v30.94 · mobile density/readability
   Keep the same search/list functions, but give phone users more result space. */
@media(max-width:760px){
  /* Compact common search/filter areas. Search keeps a full row; secondary filters/actions
     share the next row where possible instead of becoming one tall vertical stack. */
  .toolbar{
    padding:8px 10px!important;
    gap:6px!important;
  }
  .toolbar-left,.toolbar-right{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    width:100%!important;
  }
  .toolbar .search-wrap,
  .toolbar-left>.search-wrap,
  .toolbar-right>.search-wrap,
  .search-row .search-wrap{
    flex:1 1 100%!important;
    width:100%!important;
  }
  .toolbar .search-wrap input,
  .toolbar input[type="search"],
  .search-row input[type="search"]{
    min-height:40px!important;
    height:40px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .toolbar-left>select.control,
  .toolbar-left>input.control:not([type="search"]),
  .toolbar-right>select.control,
  .toolbar-right>input.control:not([type="search"]),
  .filter-row>.control,.filter-bar>.control,.filters>.control{
    flex:1 1 calc(50% - 3px)!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
  }
  .toolbar-left>.btn,.toolbar-left>button,
  .toolbar-right>.btn,.toolbar-right>button{
    flex:1 1 calc(50% - 3px)!important;
    width:auto!important;
    min-width:0!important;
  }
  .filter-row,.filter-bar,.filters,.search-row{
    gap:6px!important;
  }

  /* Integrated search/library: reduce chrome so results appear sooner on a phone. */
  .workspace-modal-backdrop{
    padding:42px 6px 6px!important;
  }
  .workspace-modal{
    max-height:calc(100dvh - 48px)!important;
    border-radius:15px!important;
  }
  .workspace-modal-head{
    min-height:0!important;
    padding:9px 11px!important;
    gap:8px!important;
  }
  .workspace-modal-head h2{
    font-size:16px!important;
    line-height:1.25!important;
  }
  .workspace-modal-close{
    width:32px!important;
    height:32px!important;
    min-height:32px!important;
    border-radius:9px!important;
  }
  .workspace-search-wrap{
    padding:7px 11px 5px!important;
  }
  .workspace-search-input{
    height:40px!important;
    min-height:40px!important;
    border-width:1px!important;
    border-radius:11px!important;
    padding:0 12px!important;
  }
  .workspace-modal-body{
    padding:2px 11px calc(12px + var(--itda-safe-bottom))!important;
  }
  .workspace-group{
    padding:5px 0!important;
  }
  .workspace-group-toggle{
    min-height:40px!important;
    padding:7px 10px!important;
    border-radius:11px!important;
  }
  .workspace-group-results{
    padding:6px 1px 1px!important;
  }
  .workspace-result{
    padding:10px 11px!important;
    margin-bottom:7px!important;
    border-radius:12px!important;
    background:#f7faff!important;
    border-color:#dce7f4!important;
  }
  .workspace-result:active{
    background:#eef5ff!important;
  }
  .workspace-tabs{
    gap:6px!important;
    padding:8px 11px 2px!important;
  }
  .workspace-tab{
    padding:6px 10px!important;
    min-height:38px!important;
    font-size:12px!important;
  }

  /* Read-only list cards: a soft blue-gray surface gives each record a clear boundary
     against the page without turning the UI into a patchwork of strong colors. */
  table.mobile-card-table tbody{
    gap:10px!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty){
    background:#f7faff!important;
    border-color:#d9e5f2!important;
    box-shadow:0 2px 8px rgba(15,23,42,.045)!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty) td{
    border-bottom-color:#e4edf6!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty):active{
    background:#eef5ff!important;
  }
  table.mobile-card-table tr.unread-doc{
    background:#eef6ff!important;
    border-color:#9cc8f8!important;
  }
}

@media(max-width:430px){
  /* On narrow phones keep secondary search controls compact but readable. */
  .toolbar-left>select.control,
  .toolbar-left>input.control:not([type="search"]),
  .toolbar-right>select.control,
  .toolbar-right>input.control:not([type="search"]),
  .filter-row>.control,.filter-bar>.control,.filters>.control{
    flex-basis:calc(50% - 3px)!important;
  }
  .workspace-modal-backdrop{padding-top:34px!important}
  .workspace-modal{max-height:calc(100dvh - 40px)!important}
}

/* v30.95 · mobile-first density inspired by content-heavy reading/services.
   Desktop/tablet stay untouched: every rule below is phone-only. */
.mobile-filter-toggle,.mobile-card-more,.mobile-page-inline-status,.workspace-page-mobile-status{display:none}

@media(max-width:760px){
  /* Search first: keep the keyword field visible, collapse secondary filters by default. */
  .toolbar.mobile-filter-enhanced .mobile-filter-extra{display:none!important}
  .toolbar.mobile-filter-enhanced.mobile-filter-open .mobile-filter-extra{display:flex!important}
  .toolbar.mobile-filter-enhanced.mobile-filter-open input.mobile-filter-extra,
  .toolbar.mobile-filter-enhanced.mobile-filter-open select.mobile-filter-extra{display:block!important}
  .toolbar.mobile-filter-enhanced.mobile-filter-open .range-sep.mobile-filter-extra{display:inline-flex!important}
  .toolbar.mobile-filter-enhanced .mobile-filter-toggle{
    display:inline-flex!important;align-items:center;justify-content:center;gap:5px;
    flex:1 1 calc(50% - 3px)!important;width:auto!important;min-width:0!important;
    min-height:40px!important;padding:0 11px!important;border:1px solid #dbe5f0;border-radius:10px;
    background:#f8fbff;color:#475569;font-size:13px!important;font-weight:800;cursor:pointer
  }
  .toolbar.mobile-filter-enhanced .mobile-filter-toggle.is-active{
    border-color:#a8c7ed;background:#eef6ff;color:#1d4ed8
  }
  .toolbar.mobile-filter-enhanced .mobile-filter-toggle .mobile-filter-count{
    min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;
    background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:900
  }
  .toolbar.mobile-filter-enhanced .mobile-filter-extra.event-toolbar{
    width:100%!important;flex:1 1 100%!important;flex-wrap:wrap!important;gap:6px!important
  }
  .toolbar.mobile-filter-enhanced .mobile-filter-extra.event-toolbar .chip{flex:1 1 calc(50% - 3px)}
  .toolbar.mobile-filter-enhanced .mobile-filter-extra.range-sep{flex:0 0 auto!important;align-items:center;justify-content:center;padding:0 2px}

  /* Compact record cards: primary/title line first, supporting fields in two columns. */
  table.mobile-card-table tbody{gap:9px!important}
  table.mobile-card-table tr:not(.mobile-card-empty){
    position:relative!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:3px 0 5px!important;border-radius:13px!important
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td{
    display:block!important;width:auto!important;min-width:0!important;padding:6px 10px!important;
    border:0!important;line-height:1.4!important
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td::before{
    margin:0 0 2px!important;font-size:10.5px!important;line-height:1.25!important;color:#7b8ba1!important
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-primary{
    grid-column:1/-1!important;order:-2!important;padding:9px 48px 8px 10px!important;
    border-bottom:1px solid #e3edf6!important
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-primary::before{display:none!important}
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-primary .title-link,
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-primary strong{
    font-size:15.5px!important;line-height:1.35!important;font-weight:850!important
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-actions-cell{
    grid-column:1/-1!important;padding:0!important;min-height:0!important;border:0!important
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-actions-cell::before{display:none!important}

  /* One compact overflow action instead of a row of edit/delete/etc. buttons. */
  .mobile-card-more{
    position:absolute;top:7px;right:7px;z-index:4;width:34px;height:34px;min-width:34px!important;min-height:34px!important;
    display:grid!important;place-items:center;border:1px solid #d8e3ef;border-radius:10px;background:#fff;color:#52657b;
    font-size:20px!important;line-height:1!important;font-weight:900;box-shadow:0 1px 5px rgba(15,23,42,.06);cursor:pointer
  }
  .mobile-card-action-menu{
    display:none!important;position:absolute!important;top:44px;right:7px;z-index:12;width:min(240px,calc(100% - 20px));
    padding:7px!important;gap:6px!important;flex-direction:column!important;align-items:stretch!important;
    border:1px solid #d9e4ef;border-radius:12px;background:#fff;box-shadow:0 14px 32px rgba(15,23,42,.18)
  }
  tr.mobile-actions-open .mobile-card-action-menu{display:flex!important}
  tr.mobile-actions-open{z-index:5}
  .mobile-card-action-menu>.btn,.mobile-card-action-menu>a,.mobile-card-action-menu>button,
  .mobile-card-action-menu>form,.mobile-card-action-menu form>.btn,.mobile-card-action-menu form>button{
    width:100%!important;max-width:100%!important;justify-content:flex-start!important;margin:0!important
  }
  .mobile-card-action-menu form{display:block!important}

  /* Mobile pagination becomes Previous · current/total · Next. */
  .itda-page-numbers,.collab-page-numbers,.workspace-page-numbers{display:none!important}
  .itda-pagination,.collab-pagination,.workspace-page-actions{
    display:grid!important;grid-template-columns:minmax(82px,1fr) auto minmax(82px,1fr)!important;
    align-items:center!important;gap:8px!important;width:100%!important
  }
  .itda-pagination .itda-page-edge:first-child,.collab-pagination .collab-page-edge:first-child,.workspace-page-actions .workspace-page-edge:first-child{justify-self:stretch}
  .itda-pagination .itda-page-edge:last-child,.collab-pagination .collab-page-edge:last-child,.workspace-page-actions .workspace-page-edge:last-child{justify-self:stretch}
  .mobile-page-inline-status,.workspace-page-mobile-status{
    display:inline-flex!important;align-items:center;justify-content:center;min-width:62px;height:38px;
    color:#475569;font-size:12px;font-weight:850;white-space:nowrap
  }
  .itda-page-status,.collab-page-status{display:none!important}
  .workspace-library-pagination{gap:7px!important}
  .workspace-page-info{font-size:11px!important;color:#64748b!important}

  /* Integrated search: when one category opens on a phone, keep the list focused. */
  .workspace-group-results .workspace-result{min-height:0!important}
  .workspace-result-top{gap:3px!important}
  .workspace-result-title{font-size:14px!important;line-height:1.35!important}
  .workspace-result-meta,.workspace-result-snippet{font-size:11.5px!important;line-height:1.4!important}

  /* Slightly calmer bottom navigation, preserving the same destinations and functions. */
  .mobile-bottom-nav{min-height:59px!important;padding:4px!important;border-radius:16px!important}
  .mobile-bottom-nav .mobile-bottom-icon{font-size:18px!important}
  .mobile-bottom-nav b{font-size:10.5px!important}
}

@media(max-width:390px){
  table.mobile-card-table tr:not(.mobile-card-empty){grid-template-columns:1fr 1fr!important}
  table.mobile-card-table tr:not(.mobile-card-empty)>td{padding-left:9px!important;padding-right:9px!important}
  .itda-pagination,.collab-pagination,.workspace-page-actions{grid-template-columns:minmax(74px,1fr) auto minmax(74px,1fr)!important;gap:6px!important}
}

/* v30.96 · stronger phone card separation + state-aware surfaces. Desktop untouched. */
@media(max-width:760px){
  table.mobile-card-table tr:not(.mobile-card-empty){
    background:#edf3f9!important;
    border-color:#c8d7e6!important;
    box-shadow:0 2px 9px rgba(15,23,42,.07)!important;
  }
  table.mobile-card-table tr:not(.mobile-card-empty)>td.mobile-card-primary{
    border-bottom-color:#d2dfeb!important;
  }
  table.mobile-card-table tr.mobile-card-state-success:not(.mobile-card-empty){background:#e3f3e9!important;border-color:#a9d4b8!important}
  table.mobile-card-table tr.mobile-card-state-info:not(.mobile-card-empty){background:#e4effd!important;border-color:#a9c8ee!important}
  table.mobile-card-table tr.mobile-card-state-warn:not(.mobile-card-empty){background:#fff1d6!important;border-color:#e9c986!important}
  table.mobile-card-table tr.mobile-card-state-danger:not(.mobile-card-empty){background:#fbe7ea!important;border-color:#e8afb7!important}
  table.mobile-card-table tr.mobile-card-state-note:not(.mobile-card-empty){background:#eeeafb!important;border-color:#c8b9ea!important}
  table.mobile-card-table tr.unread-doc{background:#dcecff!important;border-color:#86b8ee!important}
  table.mobile-card-table tr:not(.mobile-card-empty):active{filter:brightness(.985)}
  .workspace-result{background:#edf3f9!important;border-color:#c8d7e6!important}
  .workspace-result:active{background:#e4edf7!important}
}

/* v30.96 · non-table record cards use the same stronger mobile separation. */
@media(max-width:760px){
  .event-card,.note-card,.bible-note-card,.sharing-card,.sharing-page-card,.lifeline-card,
  .poll-list-card,.prep-task-card,.attachment-card{
    background:#edf3f9!important;
    border-color:#c8d7e6!important;
    box-shadow:0 2px 9px rgba(15,23,42,.07)!important;
  }
  .event-card[data-open="1"]{background:#e4effd!important;border-color:#a9c8ee!important}
  .event-card[data-type="info"]{background:#eeeafb!important;border-color:#c8b9ea!important}
  .event-card[data-open="0"][data-type="register"]{background:#f4edf0!important;border-color:#d8c4cb!important}
  .prep-task-card:has(.badge-success){background:#e3f3e9!important;border-color:#a9d4b8!important}
  .prep-task-card:has(.badge-warning){background:#fff1d6!important;border-color:#e9c986!important}
  .prep-task-card:has(.badge-primary){background:#e4effd!important;border-color:#a9c8ee!important}
  .reader-status-card.is-read{background:#e3f3e9!important;border-color:#a9d4b8!important}
  .reader-status-card.is-unread{background:#fff1d6!important;border-color:#e9c986!important}
  .reader-status-card.is-excluded{background:#edf3f9!important;border-color:#c8d7e6!important}
}