/* GRID 21 · Canonical App Shell and App Tools · 2026-10-21
   Scope deliberately excludes workspace home, dashboards, forms and global menus.
   All handlers and data attributes belong to GRID's original application. */
body.grid-podio-app-page.grid21-shell-ready{
  --g21-line:var(--grid-line, var(--border, #e1e6e9));
  --g21-text:var(--grid-text, var(--text, #1c272c));
  --g21-muted:var(--grid-muted, var(--muted, #69757b));
  --g21-surface:var(--grid-surface, var(--surface, #fff));
  --g21-bg:var(--grid-bg, #f4f6f7);
  --g21-tint:var(--grid-primary-soft, #eaf2f5);
  --g21-accent:var(--grid-primary,#4c7d90);
}
body.grid-podio-app-page.grid21-shell-ready :is(.podio-toolbar,.podio-subtoolbar) .btn,
body.grid-podio-app-page.grid21-shell-ready :is(.podio-toolbar,.podio-subtoolbar) select,
body.grid-podio-app-page.grid21-shell-ready :is(.podio-toolbar,.podio-subtoolbar) input{
  -webkit-tap-highlight-color:transparent;
}
body.grid-podio-app-page.grid21-shell-ready :is(.podio-toolbar,.podio-subtoolbar) .btn:focus-visible,
body.grid-podio-app-page.grid21-shell-ready :is(.podio-toolbar,.podio-subtoolbar) input:focus-visible,
body.grid-podio-app-page.grid21-shell-ready :is(.podio-toolbar,.podio-subtoolbar) select:focus-visible{
  outline:2px solid var(--g21-accent)!important;
  outline-offset:2px!important;
}
/* Unify interaction surfaces rather than piling outlines around each control. */
body.grid-podio-app-page.grid21-shell-ready .grid-special-views{
  border:1px solid var(--g21-line)!important;
  border-radius:12px!important;
  background:var(--g21-bg)!important;
  overflow:hidden!important;
}
body.grid-podio-app-page.grid21-shell-ready .grid-special-views .btn{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--g21-muted)!important;
  font-weight:620!important;
  box-shadow:none!important;
  transition:background .14s,color .14s!important;
}
body.grid-podio-app-page.grid21-shell-ready .grid-special-views .btn.active{
  background:var(--g21-surface)!important;
  color:var(--g21-accent)!important;
  box-shadow:0 1px 4px rgba(20,30,40,.075)!important;
}
body.grid-podio-app-page.grid21-shell-ready .grid-special-views .btn:focus-visible{
  outline-offset:-2px!important;
}
/* Popovers are genuine app operations, not modal overlays hiding the whole page. */
body.grid-podio-app-page.grid21-shell-ready .grid-layout-trigger{
  border-color:var(--g21-line)!important;
  background:var(--g21-surface)!important;
  box-shadow:none!important;
  color:var(--g21-text)!important;
}
body.grid-podio-app-page.grid21-shell-ready .grid-layout-trigger [data-layout-view-label]{
  display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.grid-podio-app-page.grid21-shell-ready .grid-layout-trigger [data-layout-view-label] span{
  color:var(--g21-muted)!important;
  font-weight:500!important;
}

@media (max-width:720px){
  /* App title and creation action are one intentional section. */
  body.grid-podio-app-page.grid21-shell-ready .main>.content{
    padding:18px 16px calc(78px + var(--safe-bottom,env(safe-area-inset-bottom,0px)))!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .content>.page-head{
    display:block!important;margin:0!important;padding:0!important;border:0!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .page-head>div:first-child{
    margin:0 0 19px!important;min-height:52px!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    column-gap:12px!important;
    padding-right:min(38vw,156px)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .current-app-eyebrow{
    width:48px!important;height:48px!important;border-radius:14px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .page-head .page-title{
    font-size:clamp(19px,5.7vw,25px)!important;letter-spacing:-.038em!important;font-weight:790!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .page-head .subtitle{
    margin-top:4px!important;font-size:11px!important;line-height:1.4!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.create-record-btn{
    top:4px!important;right:0!important;min-height:40px!important;
    max-width:min(39vw,153px)!important;border-radius:11px!important;
    font-weight:720!important;font-size:11px!important;
    padding:9px 11px!important;box-shadow:none!important;
  }
  /* Section A: view mode + native saved view. No duplicate settings row. */
  body.grid-podio-app-page.grid21-shell-ready .page-head>.podio-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 46px!important;
    gap:10px!important;margin:0!important;padding:0!important;
    width:100%!important;align-items:stretch!important;
    overflow:visible!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.grid-special-views{
    display:flex!important;
    grid-column:1/-1!important;grid-row:1!important;
    width:100%!important;height:46px!important;
    padding:3px!important;gap:2px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views>.btn{
    flex:1 1 0!important;min-width:0!important;min-height:38px!important;
    height:38px!important;padding:6px 4px!important;
    display:flex!important;justify-content:center!important;gap:6px!important;
    border-radius:9px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views .toolbar-label{
    display:inline!important;font-size:12px!important;font-weight:650!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views .icon,
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views svg{
    width:17px!important;height:17px!important;flex:none!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.view-select-wrap{
    grid-column:1!important;grid-row:2!important;order:unset!important;
    display:flex!important;width:100%!important;min-width:0!important;max-width:none!important;
    height:46px!important;min-height:46px!important;padding:0 12px!important;
    border:1px solid var(--g21-line)!important;
    background:var(--g21-surface)!important;border-radius:11px!important;gap:9px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .view-select-wrap .eyebrow{
    display:block!important;font-size:10px!important;font-weight:760!important;
    letter-spacing:.015em!important;text-transform:none!important;color:var(--g21-muted)!important;
    flex:none!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .view-select-wrap select{
    min-width:0!important;width:100%!important;flex:1 1 0!important;
    font-size:13px!important;font-weight:650!important;color:var(--g21-text)!important;
    background:transparent!important;min-height:42px!important;padding:0 24px 0 0!important;
    text-overflow:ellipsis!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>[data-open-view-settings]{
    display:inline-flex!important;grid-column:2!important;grid-row:2!important;
    width:46px!important;height:46px!important;min-width:46px!important;
    border:1px solid var(--g21-line)!important;border-radius:11px!important;
    color:var(--g21-muted)!important;background:var(--g21-surface)!important;
    padding:0!important;justify-content:center!important;align-items:center!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.grid-layout-picker{
    display:none!important; /* moved by JS into the compact lower utility strip */
  }
  /* Keep the app header focused; admin tools remain reachable from app settings on desktop. */
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>[data-open-import],
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>[data-open-export],
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>[data-open-app-settings]{display:none!important}

  /* Section B: search, filter & sorting once; low-emphasis count & layout. */
  body.grid-podio-app-page.grid21-shell-ready .content>.podio-subtoolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px 44px!important;
    grid-template-rows:46px 36px!important;
    gap:9px 8px!important;margin:12px 0 16px!important;padding:0!important;
    border:0!important;background:transparent!important;align-items:center!important;
    overflow:visible!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.app-local-search{
    grid-column:1!important;grid-row:1!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    height:46px!important;flex:none!important;margin:0!important;order:unset!important;
    position:relative!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.app-local-search input{
    width:100%!important;height:46px!important;min-height:46px!important;
    padding:0 43px 0 14px!important;background:var(--g21-surface)!important;
    border:1px solid var(--g21-line)!important;border-radius:12px!important;
    font-size:13px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>[data-quick-filter]{grid-column:2!important;grid-row:1!important;}
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>[data-quick-sort]{grid-column:3!important;grid-row:1!important;}
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>[data-quick-filter],
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>[data-quick-sort]{
    display:inline-flex!important;width:44px!important;height:46px!important;min-height:46px!important;
    min-width:44px!important;padding:0!important;justify-content:center!important;align-items:center!important;
    border:1px solid var(--g21-line)!important;border-radius:12px!important;
    background:var(--g21-surface)!important;color:var(--g21-muted)!important;
    position:relative!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar :is([data-quick-filter],[data-quick-sort]) .filter-count:not(:empty){
    position:absolute!important;top:-5px;right:-4px;min-width:17px;height:17px;
    border:2px solid var(--g21-surface);font-size:9px;
  }
  /* Advanced columns live in native view settings; bulk selection remains usable. */
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>[data-open-view-settings][data-view-section="columns"]{
    display:none!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.record-count{
    grid-column:1!important;grid-row:2!important;
    justify-self:start!important;align-self:center!important;
    margin:0!important;padding:0 1px!important;
    font-size:11px!important;font-weight:650!important;color:var(--g21-muted)!important;
    white-space:nowrap!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.grid-layout-picker{
    grid-column:2/4!important;grid-row:2!important;
    justify-self:end!important;display:block!important;width:auto!important;
    max-width:calc(100vw - 135px)!important;min-width:0!important;overflow:visible!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar .grid-layout-trigger{
    width:auto!important;max-width:100%!important;min-width:0!important;
    height:34px!important;min-height:34px!important;
    display:flex!important;justify-content:flex-start!important;
    padding:5px 8px!important;gap:5px!important;
    border:0!important;border-radius:8px!important;
    background:transparent!important;box-shadow:none!important;
    font-size:11px!important;color:var(--g21-muted)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar .grid-layout-trigger::before{
    content:'Layout:';font-size:11px;font-weight:500;color:var(--g21-muted);flex:none;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar .grid-layout-trigger [data-layout-view-label]{
    display:block!important;min-width:0!important;flex:0 1 auto!important;
    font-weight:750!important;font-size:11px!important;color:var(--g21-text)!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar .grid-layout-trigger [data-layout-view-label]>span{display:none!important}
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar .grid-layout-trigger>[data-icon="grid"],
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar .grid-layout-trigger>svg:first-child{display:none!important}
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>[data-bulk-select-visible]{
    display:inline-flex!important;grid-column:3!important;grid-row:2!important;
    width:34px!important;height:34px!important;min-width:34px!important;
    justify-self:end!important;align-self:center!important;
    padding:0!important;border:0!important;background:transparent!important;
    color:var(--g21-muted)!important;
  }
  /* The column control shares the count row only if core has injected bulk mode.
     In that case the layout dropdown is shifted over to leave a real tap target. */
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar:has(>[data-bulk-select-visible]:not([hidden]))>.grid-layout-picker{
    grid-column:2/4!important;margin-right:36px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready:has([data-view-mode="kanban"].active) .podio-subtoolbar>.grid-layout-picker,
  body.grid-podio-app-page.grid21-shell-ready:has([data-view-mode="calendar"].active) .podio-subtoolbar>.grid-layout-picker{display:none!important;}
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.kanban-field-picker,
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.calendar-field-picker{
    grid-column:1/-1!important;grid-row:3!important;min-width:0!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.sync-note,
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.view-dirty{
    display:none!important;
  }
  /* GRID2 overview already shows the record total in its section heading. */
  body.grid2-overview-mode.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.record-count{
    display:none!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid2-overview-head{
    margin:6px 2px 13px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid2-record-list{gap:9px!important}
  body.grid-podio-app-page.grid21-shell-ready .grid2-record{
    border-radius:14px!important;min-height:74px!important;box-shadow:none!important;
  }
  /* Popovers use reachable bottom sheets on mobile, not off-screen two-column panels. */
  body.grid21-shell-ready .grid-quick-popover.grid-filter-popover,
  body.grid21-shell-ready .grid-quick-popover.grid-sort-popover,
  body.grid21-shell-ready .grid-quick-popover.grid-layout-popover{
    position:fixed!important;left:10px!important;right:10px!important;
    top:auto!important;bottom:calc(74px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-width:none!important;max-height:min(68dvh,600px)!important;
    overflow:auto!important;border-radius:18px!important;
    box-shadow:0 15px 50px rgba(15,23,42,.18)!important;
    overscroll-behavior:contain;
  }
  body.grid21-shell-ready .grid-quick-popover .grid-popover-arrow{display:none!important}
  body.grid21-shell-ready .grid-filter-popover .grid-filter-layout{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    min-height:0!important;
  }
  body.grid21-shell-ready .grid-filter-popover .grid-filter-layout>aside{
    max-height:180px!important;overflow:auto!important;
    border-right:0!important;border-bottom:1px solid var(--g21-line)!important;
  }
  body.grid21-shell-ready .grid-filter-popover .grid-filter-layout>main{
    min-width:0!important;padding:16px!important;
  }
  body.grid21-shell-ready .grid-filter-popover .grid-filter-fields{
    display:flex!important;overflow-x:auto!important;gap:6px!important;padding:5px 10px 13px!important;
  }
  body.grid21-shell-ready .grid-filter-popover .grid-filter-fields>button{
    flex:0 0 auto!important;min-height:36px!important;border:1px solid var(--g21-line)!important;
    border-radius:9px!important;padding:6px 10px!important;
  }
  body.grid21-shell-ready .grid-filter-popover .grid-filter-editor{min-width:0!important;gap:11px!important}
}
@media (max-width:360px){
  body.grid-podio-app-page.grid21-shell-ready .page-head>div:first-child{
    padding-right:0!important;margin-bottom:57px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.create-record-btn{
    top:57px!important;left:0!important;right:auto!important;max-width:72vw!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views>.btn{gap:4px!important;padding-inline:2px!important}
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views .toolbar-label{font-size:11px!important}
}
@media (min-width:721px) and (max-width:1100px){
  body.grid-podio-app-page.grid21-shell-ready .content>.page-head{
    border-bottom:1px solid var(--g21-line)!important;
    padding-bottom:19px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .page-head>.podio-toolbar{
    gap:8px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views{padding:3px!important}
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views .btn{
    min-height:38px!important;border-radius:9px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .content>.podio-subtoolbar{
    padding:14px 0!important;margin:0 0 14px!important;
    border-bottom:1px solid var(--g21-line)!important;
  }
}
@media (min-width:1101px){
  /* Desktop has a real app canvas, not a tiny pane swimming in grey. */
  body.grid-podio-app-page.grid21-shell-ready .main>.content{
    width:calc(100% - 40px)!important;max-width:1640px!important;
    margin:22px auto 36px!important;
    grid-template-columns:228px minmax(0,1fr)!important;
    border:1px solid var(--g21-line)!important;
    border-radius:16px!important;overflow:visible!important;
    box-shadow:0 12px 44px rgba(23,44,57,.035)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .content>.grid-podio-view-rail{
    padding:21px 13px!important;border-right:1px solid var(--g21-line)!important;
    background:var(--g21-surface)!important;
    border-radius:16px 0 0 16px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-podio-rail-head{margin-bottom:22px!important}
  body.grid-podio-app-page.grid21-shell-ready .grid-podio-rail-head strong{font-size:16px!important}
  body.grid-podio-app-page.grid21-shell-ready .grid-podio-rail-items button{
    border-radius:9px!important;min-height:39px!important;
    padding:9px 11px!important;font-size:12px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .content>.page-head{
    min-height:72px!important;padding:14px 23px!important;
    border-bottom:1px solid var(--g21-line)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .page-head>.podio-toolbar{
    display:flex!important;gap:8px!important;align-items:center!important;
    flex-wrap:wrap!important;width:100%!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.grid-special-views{
    display:flex!important;order:0!important;padding:3px!important;
    min-height:40px!important;gap:2px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views>.btn{
    min-height:36px!important;height:36px!important;
    border-radius:8px!important;padding:7px 11px!important;
    gap:7px!important;font-size:12px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.view-select-wrap{display:none!important;}
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.grid-layout-picker{order:1!important;}
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar .grid-layout-trigger{
    min-height:40px!important;border-radius:10px!important;padding:8px 11px!important;
    font-size:12px!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.soft-icon-btn{
    order:2!important;width:40px!important;height:40px!important;
    border:1px solid var(--g21-line)!important;border-radius:10px!important;
    color:var(--g21-muted)!important;background:var(--g21-surface)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-toolbar>.create-record-btn{
    order:10!important;min-height:40px!important;margin-left:auto!important;
    border-radius:10px!important;padding:8px 15px!important;font-weight:700!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .content>.podio-subtoolbar{
    display:flex!important;flex-wrap:wrap!important;
    padding:11px 23px!important;gap:8px!important;
    min-height:65px!important;margin:0!important;
    border-bottom:1px solid var(--g21-line)!important;
    background:var(--g21-surface)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.app-local-search{
    min-width:240px!important;max-width:440px!important;
    flex:1 1 280px!important;margin:0!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.app-local-search input{
    height:41px!important;border-radius:10px!important;
    background:var(--g21-surface)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.soft-icon-btn{
    width:40px!important;height:40px!important;min-width:40px!important;
    border:1px solid var(--g21-line)!important;border-radius:10px!important;
    background:var(--g21-surface)!important;color:var(--g21-muted)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .podio-subtoolbar>.record-count{
    margin-left:auto!important;font-size:12px!important;font-weight:600!important;
    color:var(--g21-muted)!important;
  }
  body.grid-podio-app-page.grid21-shell-ready .content>.card{
    border-radius:0 0 16px 0!important;
  }
  /* The enhanced view rail replaces GRID2's duplicate horizontal view list. */
  body.grid-podio-app-page.grid21-shell-ready .grid2-views-rail{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  body.grid-podio-app-page.grid21-shell-ready .grid-special-views .btn{transition:none!important}
}