/* Summary toolbar only; other working modes retain their existing controls. */
#app-shell .summary-period-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
#app-shell .summary-period-controls .date-range-button { flex:0 1 300px; width:300px; min-width:0; gap:10px; }
#app-shell .summary-period-controls .date-range-copy { flex:1; text-align:left; }
#app-shell #summary-insights-toggle { display:flex; align-items:center; gap:10px; min-height:44px; margin-left:auto; }
#app-shell #summary-insights-toggle[hidden], #summary-insights-panel[hidden], #summary-insights:has(#date-range-button.is-hidden):has(#summary-insights-toggle[hidden]) { display:none!important; }
#summary-insights-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
#summary-insights-panel { animation:summary-insights-open .18s ease-out; }
@keyframes summary-insights-open { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { #summary-insights-panel { animation:none; } }
@media(max-width:600px) {
  #app-shell .summary-period-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  #app-shell .summary-period-controls :is(#date-range-button, #comparison-range-button) { grid-area:auto; grid-column:1; width:100%; }
  #app-shell #summary-insights-toggle { grid-column:2; grid-row:1 / 3; align-self:start; margin-left:0; }
}
#app-shell[data-portal-page="dashboard"] .table-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; min-height: 36px; border-bottom: 0; padding: 0; margin-bottom: 10px; }
#app-shell[data-portal-page="dashboard"] .table-heading-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
#app-shell[data-portal-page="dashboard"] .table-heading-title h2 { margin: 0; font-size: 16px; }
#app-shell[data-portal-page="dashboard"] .table-heading-title .table-row-count { font-size: 12px; color: var(--portal-muted); white-space: nowrap; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions { position:relative; container-type:inline-size; display: flex; flex: 1 1 450px; min-width:0; flex-wrap: nowrap; gap: 4px; align-items: center; justify-content: flex-end; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions .table-search-field { flex: 1 1 180px; width: auto; min-width: 140px; max-width: none; margin: 0; }
#app-shell[data-portal-page="dashboard"] .table-search-field > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app-shell[data-portal-page="dashboard"] .table-search-field input { height: 36px; min-height: 36px; font-size: 13px; padding: 8px 10px; border-radius: 5px; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions .column-settings-button { height: 36px; min-height: 36px; padding: 7px 10px; border-radius: 5px; font-size: 12px; box-shadow: none; white-space: nowrap; }
#app-shell[data-portal-page="dashboard"] #applied-filters-count { display: inline; font-size: 12px; color: inherit!important; }
#app-shell[data-portal-page="dashboard"] #applied-filters-count[hidden] { display: none; }
#app-shell .applied-filters-toolbar.is-empty { display: none!important; }
#app-shell[data-portal-page="dashboard"] .applied-filters-toolbar { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; margin-bottom: 10px; border: 0; background: transparent; cursor: default; }
#app-shell[data-portal-page="dashboard"] #applied-filters-list { display: contents!important; }
#app-shell[data-portal-page="dashboard"] .applied-filter-tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 4px 7px; border: 1px solid var(--portal-line); border-radius: 4px; font: inherit; font-size: 12px!important; background: var(--portal-soft); cursor: pointer; }
#app-shell .applied-filter-tag .filter-remove-icon { flex: none; font-size: 15px; }
#app-shell .applied-filter-tag > span:first-child { min-width: 0; text-align: left; overflow-wrap: anywhere; }
#app-shell .compact-clear-filters { border: 0; padding: 5px 6px; color: var(--portal-muted); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
#app-shell #grouping-level-controls { flex-basis: 100%; }

/* Summary overview: one row for count, levels and the right-edge view action. */
#app-shell #summary-count { display:contents; }
#app-shell :is(.summary-count-short, .summary-count-tiny), #app-shell #summary-expand, #summary-expand .summary-minimize { display:none; }
#app-shell[data-portal-page="dashboard"] .table-heading { container-type:inline-size; }
#app-shell[data-portal-page="dashboard"] .table-heading-title { flex:1 1 100%; flex-wrap:nowrap; gap:8px; }
#app-shell[data-portal-page="dashboard"] :is(#table-title, .grouping-level-label) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#app-shell[data-portal-page="dashboard"] #refresh-table { display:none; }
#app-shell[data-portal-page="dashboard"] #summary-count { display:block; flex:0 1 auto; min-width:0; margin:0; padding:0; border:0; background:transparent; color:var(--portal-muted); font:12px/1.4 system-ui,sans-serif; text-align:left; cursor:pointer; white-space:nowrap; }
#app-shell[data-portal-page="dashboard"] #row-count { display:block; overflow:hidden; text-overflow:ellipsis; }
#app-shell[data-portal-page="dashboard"] #grouping-level-controls { flex:0 0 auto; padding-left:8px; gap:0; }
#app-shell[data-portal-page="dashboard"] .grouping-level-button { width:36px; height:36px; }
#app-shell[data-portal-page="dashboard"] #summary-count { overflow:hidden; text-overflow:ellipsis; }
#app-shell[data-portal-page="dashboard"] #summary-expand { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; min-height:36px; margin-left:auto; padding:6px; }
#summary-expand svg, #summary-back-top svg { width:20px; height:20px; flex:none; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions { flex-basis:100%; }
#app-shell.summary-expanded[data-portal-page="dashboard"] > .topbar { display:none!important; }
#app-shell.summary-expanded #summary-expand .summary-maximize { display:none; }
#app-shell.summary-expanded #summary-expand .summary-minimize { display:block; }
#summary-back-top { position:fixed; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); right:calc(16px + env(safe-area-inset-right, 0px)); z-index:55; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:8px; border:1px solid var(--portal-line); border-radius:6px; background:var(--portal-surface); color:var(--portal-text); box-shadow:0 3px 12px #0002; }
#summary-back-top[hidden], body:has(dialog[open]) #summary-back-top { display:none!important; }
@container(max-width:600px) {
  #app-shell[data-portal-page="dashboard"] #summary-count #row-count { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  #app-shell[data-portal-page="dashboard"] .summary-count-short { display:inline; }
  #app-shell[data-portal-page="dashboard"] .table-heading-title { gap:6px; }
}
@container(max-width:380px) {
  #app-shell[data-portal-page="dashboard"] .summary-count-short { display:none; }
  #app-shell[data-portal-page="dashboard"] .summary-count-tiny { display:inline; }
  #app-shell[data-portal-page="dashboard"] .table-heading-title { gap:4px; }
  #app-shell[data-portal-page="dashboard"] #grouping-level-controls { padding-left:4px; }
  #app-shell[data-portal-page="dashboard"] .grouping-level-buttons { gap:2px; }
}
@media(pointer:coarse) {
  #app-shell[data-portal-page="dashboard"] :is(#summary-count, .grouping-level-button, #summary-expand) { min-height:44px; }
  #app-shell[data-portal-page="dashboard"] .grouping-level-button { min-width:44px; }
  #app-shell[data-portal-page="dashboard"] #summary-expand { flex-basis:44px; width:44px; }
}
@media(max-width:600px) {
  #app-shell[data-portal-page="dashboard"] .table-heading-actions { flex-basis: 100%; justify-content: flex-start; }
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .table-search-field { flex-basis: 140px; }
  #app-shell[data-portal-page="dashboard"] .table-search-field input { min-height: 40px; font-size: 16px; }
}

#app-shell #summary-search-toggle { display:none; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions.is-search-open { z-index:20; }
@container(max-width:680px) {
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .portal-action-label { display:none; }
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .column-settings-button { position:relative; flex:0 0 40px; width:40px; min-width:40px; padding:8px; justify-content:center; }
  #app-shell[data-portal-page="dashboard"] #applied-filters-count:not([hidden]) { position:absolute; top:-4px; right:-2px; padding:0 3px; border-radius:6px; font-size:10px; background:var(--portal-surface); }
}
@container(max-width:400px) {
  #app-shell[data-portal-page="dashboard"] #summary-search-toggle { display:inline-flex; }
  #app-shell[data-portal-page="dashboard"] #summary-search-toggle svg { width:20px; height:20px; }
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .table-search-field { display:none; }
  #app-shell[data-portal-page="dashboard"] .table-heading-actions.is-search-open .table-search-field { display:block; position:absolute; top:calc(100% + 6px); left:0; right:0; width:auto; min-width:0; z-index:45; padding:6px; border:1px solid var(--portal-line); border-radius:6px; background:var(--portal-surface); box-shadow:0 6px 18px #0002; }
}

#app-shell #applied-filters-count { display: none; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions .portal-density { position: relative; display: block; flex: 0 0 118px; min-width: 0; order: 0; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions .portal-density > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app-shell[data-portal-page="dashboard"] .table-heading-actions .portal-density select { min-height: 36px; height: 36px; padding: 6px; border-radius: 5px; }
@media(max-width:600px) {
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .portal-density { flex-basis: 106px; }
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .column-settings-button,
  #app-shell[data-portal-page="dashboard"] .table-heading-actions .portal-density select { min-height: 40px; height: 40px; }
}

/* Fit the retained Summary toolbar at 320px without hiding an action. */
@container(max-width:300px) {
  #app-shell[data-portal-page="dashboard"]:not([data-summary-pilot="v11"]) .table-heading-actions .column-settings-button {
    flex-basis:36px; width:36px; min-width:36px; padding:6px;
  }
  #app-shell[data-portal-page="dashboard"]:not([data-summary-pilot="v11"]) .table-heading-actions .portal-density {
    flex-basis:calc(100% - 200px); min-width:64px;
  }
}