/* Shared page headings and list controls. */
main.container { padding-block-start: .75rem; }
main.container h1.page-title { margin-block: 0 .65rem; font-size: 1.5rem; line-height: 1.5; overflow-wrap: anywhere; }
main.container .project-list-header .page-title { margin: 0; }
.page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-block-end: .65rem; min-width: 0; }
main.container .page-toolbar .page-title { margin: 0; }
.page-toolbar > .actions-row, .page-toolbar > p, .page-toolbar > .scope-filters { margin: 0; }
.page-toolbar > .scope-filters { flex: 1 1 auto; min-width: 0; gap: .5rem; }
.page-toolbar .scope-links a { min-height: 2rem; padding: .3rem .55rem; font-size: .8rem; }
.page-toolbar > .quick-filters { flex: 1 1 21rem; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; align-items: center; gap: .5rem; }
.page-toolbar .tag-filter-field { flex: 1 1 12rem; min-width: 0; width: auto; }
.page-toolbar .tag-filter-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-toolbar .quick-filters .btn { align-self: center; }
.page-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.page-filter-form select { min-width: 0; max-width: 100%; padding: .4rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; }
.page-toolbar .more-info { margin: 0; padding: 0; border: 0; }
main.container .entity-page-header { margin-block-end: .65rem; gap: .5rem .75rem; }
main.container .entity-page-header .page-title { margin: 0; }
main.container > .help-text, main.container > .page-lead { margin-block: .35rem .75rem; }

/* Notes: title, search, filters and import share the first row. */
main.container .notes-heading { flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .65rem; }
main.container .notes-heading .page-title { margin: 0; }
main.container .notes-heading .notes-subtitle { margin: .1rem 0 0; }
main.container .notes-browse-bar { flex: 1 1 20rem; min-width: 0; margin: 0; }
main.container .notes-search { min-width: 0; }
main.container .notes-search input { min-width: 0; padding-block: .5rem; }
main.container .notes-capture { max-width: none; margin: 0 0 .65rem; padding: .35rem; }
main.container .notes-filter-inputs { margin-bottom: .65rem; padding: .65rem; }

/* Documents: search and the expandable filters sit with the page actions. */
main.container .dms-heading { margin: 0 0 .65rem; gap: .5rem .75rem; flex-wrap: wrap; }
main.container .dms-heading .page-title, main.container .dms-heading .actions-row { margin: 0; }
main.container .dms-index > .dms-heading { justify-content: flex-start; }
main.container .dms-index .dms-filters { display: flex; flex: 1 1 26rem; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
main.container .dms-index .dms-search-row { flex: 1 1 16rem; min-width: 0; margin: 0; gap: .5rem; }
main.container .dms-search-row input { min-width: 0; }
main.container .dms-index .dms-filters > details > summary { cursor: pointer; padding: .4rem; font-size: .85rem; }
main.container .dms-index .dms-filters > details[open] { flex: 1 1 100%; min-width: 0; }
main.container .dms-index .dms-filter-content { padding: .65rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
main.container .dms-list-header { margin-block: 0 .5rem; }

/* Messenger: conversation browsing is available in the heading. */
main.container .msg-page-heading { flex-wrap: wrap; gap: .5rem .75rem; margin-block: 0 .65rem; }
main.container .msg-page-heading .page-title { margin: 0; }
.msg-list-controls { display: flex; flex: 1 1 22rem; align-items: center; gap: .5rem; min-width: 0; }
#messenger-app .msg-list-controls #msg-conversation-search { flex: 1 1 14rem; min-width: 0; width: auto; }
#messenger-app .msg-list-controls #msg-mode { flex: 0 1 11rem; min-width: 0; width: auto; }
main.container .msg-sidebar-tools { padding: .65rem; gap: .5rem; }

/* Calendar controls share one row; keep the view beside date buttons on mobile. */
main.container .cal-header { gap: .5rem .75rem; }
main.container .cal-header h1 { margin: 0; font-size: 1.5rem; }
main.container .cal-header p { margin: .1rem 0 0; font-size: .8rem; }
main.container #pm-calendar-app .cal-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 7rem; align-items: center; gap: .5rem; margin-block: .65rem; padding: .6rem; }
main.container #pm-calendar-app .cal-toolbar .btn { min-height: 32px; padding: .3rem .55rem; font-size: .75rem; }
main.container #pm-calendar-app .cal-toolbar > .cal-actions { flex-wrap: nowrap; gap: .4rem; }
main.container #pm-calendar-app .cal-navigation { gap: .3rem; }
main.container #cal-period { margin: 0; font-size: .85rem; white-space: nowrap; }
main.container #pm-calendar-app .cal-filter-field { display: flex; flex-direction: row; align-items: center; gap: .3rem; min-width: 0; margin: 0; }
main.container #pm-calendar-app .cal-view-field { width: 7rem; justify-self: end; }
main.container #pm-calendar-app .cal-filter-field > label { margin: 0; font-size: .75rem; }
main.container #pm-calendar-app .cal-filter-field > select { flex: 1; width: 0; min-width: 0; min-height: 32px; padding: .3rem .5rem .3rem 1.6rem; font-size: .75rem; }
main.container .cal-natural-disclosure { position: relative; flex: 0 0 auto; min-width: 0; }
main.container .cal-natural-disclosure > summary { cursor: pointer; color: var(--color-primary); font-size: .75rem; padding: .35rem; white-space: nowrap; }
main.container .cal-natural-disclosure[open] { flex: 0 0 auto; }
main.container #pm-calendar-app .cal-natural { position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; z-index: 60; box-sizing: border-box; width: min(32rem, calc(100vw - 2rem)); margin: 0; padding: .85rem; box-shadow: 0 10px 36px #0002; }
main.container .cal-natural .cal-actions { flex-wrap: wrap; }
main.container .cal-natural .form-control { min-width: 0; flex-basis: 100%; }
main.container #cal-status:empty, main.container #cal-invitations:empty { margin: 0; }
main.container .cal-legend { margin: 0; }

/* Upcoming dates use the same compact heading pattern. */
main.container .cal-upcoming { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .65rem; margin-bottom: .65rem; }
main.container .cal-upcoming > header { flex: 1 1 20rem; align-items: center; gap: .5rem; }
main.container .cal-upcoming-tabs { margin: 0; }
main.container #cal-upcoming-content { flex: 1 1 100%; }
main.container #cal-upcoming-content > p, main.container #cal-upcoming-content > ol { margin-block: .25rem 0; }

/* Dashboard and work reports keep related controls together on wide screens. */
main.dashboard-container .dashboard-header-row {
    padding: .75rem .85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}
main.dashboard-container .dashboard-header-row h2 { font-size: 1.25rem; line-height: 1.6; }
main.dashboard-container .dashboard-header-row .btn,
main.dashboard-container .dashboard-header-row .project-page-size-form,
main.dashboard-container .dashboard-header-row .dashboard-sort {
    align-items: center; justify-content: center;
    box-sizing: border-box; min-height: 42px; margin: 0; font-size: .8rem;
}
main.dashboard-container .dashboard-header-row .btn:not(button[type=submit]) { display: inline-flex; }
main.dashboard-container .dashboard-header-row .quick-filters { padding: 0; border: 0; background: transparent; }
main.dashboard-container .dashboard-sidebar-toggle { width: 42px; height: 42px; }
main.dashboard-container .dashboard-header-row .filter-field select,
main.dashboard-container .dashboard-header-row .select2-selection--multiple {
    box-sizing: border-box; min-height: 42px; font-size: .8rem;
}
main.dashboard-container .dashboard-header-row > .filter-count {
    flex: 1 0 100%; grid-column: 1 / -1; width: auto; margin: 0;
    padding-block-start: .5rem; border-block-start: 1px solid var(--color-border);
    font-size: .72rem; color: var(--color-muted); line-height: 1.7;
}
@media (min-width: 761px) {
    main.dashboard-container .dashboard-header-row .quick-filters > button { display: inline-flex; }
    main.container .dashboard-header-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .65rem; }
    main.container .dashboard-header-title { flex: 0 1 auto; }
    main.container .dashboard-header-row .project-header-actions { margin: 0; gap: .5rem; }
    main.container .dashboard-header-row .quick-filters { flex: 1 1 34rem; align-items: center; gap: .5rem; padding: 0; border: 0; background: transparent; }
    main.container .dashboard-header-row .filter-field:not(.tag-filter-field) { flex-direction: row; align-items: center; gap: .35rem; }
    main.container .dashboard-header-row .filter-field select { min-width: 0; width: 8rem; }
    main.container .dashboard-header-row .tag-filter-field { flex: 1 1 11rem; min-width: 0; width: auto; }
    main.container .dashboard-header-row .tag-filter-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    main.container .dashboard-header-row .quick-filters .btn { align-self: center; }
    main.container .work-tree:has(> .work-tree-search) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 22rem); gap: .35rem .75rem; }
    main.container .work-tree:has(> .work-tree-search) > * { grid-column: 1 / -1; }
    main.container .work-tree:has(> .work-tree-search) > .work-tree-toolbar { grid-area: 1 / 1; margin: 0; gap: .5rem; }
    main.container .work-tree:has(> .work-tree-search) > .work-tree-search { grid-area: 1 / 2; margin: 0; }
    main.container .work-tree-search > span { flex-shrink: 0; }
}

@media (max-width: 760px) {
    main.dashboard-container .dashboard-header-row .tag-filter-field { grid-column: 1 / -1; width: auto; min-width: 0; }
    main.container h1.page-title, main.container .cal-header h1 { font-size: 1.25rem; }
    .page-toolbar > .scope-filters, .page-toolbar > .quick-filters { flex-basis: 100%; }
    .page-toolbar .scope-user-form { min-width: 0; max-width: 100%; }
    .page-toolbar .scope-user-form select { min-width: 0; flex: 1; }
    main.container .notes-heading > div:first-child { flex: 1; }
    main.container .notes-browse-bar { flex-basis: 100%; order: 1; }
    main.container .dms-heading { flex-direction: row; align-items: center; }
    main.container .dms-index .dms-filters { flex-basis: 100%; }
    main.container .dms-heading .actions-row { gap: .4rem; }
    main.container .msg-list-controls { flex-basis: 100%; order: 1; }
    main.container .msg-page-heading > div:first-child { flex: 1; }
    main.container .msg-page-heading p { font-size: .75rem; }
    main.container #pm-calendar-app .cal-toolbar .btn,
    main.container #pm-calendar-app .cal-filter-field > select { min-height: 44px; }
    main.container #pm-calendar-app .cal-filter-field > select { font-size: 16px; }
    main.container #pm-calendar-app .cal-toolbar > .cal-actions:not(.cal-navigation) { flex: 1; }
    main.container #pm-calendar-app #cal-new { flex: 1; }
    main.container .cal-natural-disclosure > summary { display: flex; align-items: center; min-height: 44px; }

}
@media (max-width: 700px) {
    main.container #pm-calendar-app .cal-toolbar { grid-template-columns: auto minmax(0, 1fr) auto 4.5rem; gap: .25rem; padding: .4rem; }
    main.container #cal-period { text-align: center; white-space: normal; font-size: .72rem; }
    main.container .cal-legend { gap: 3px; }
    main.container #pm-calendar-app .cal-kind-filter { flex-basis: 16px; width: 16px; height: 16px; }
    main.container #pm-calendar-app .cal-navigation { gap: 2px; }
    main.container #pm-calendar-app .cal-navigation > .btn { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px; padding-inline: 0; font-size: .7rem; }
    main.container #pm-calendar-app .cal-view-field { width: 4.5rem; }
    main.container #pm-calendar-app .cal-view-field > select { height: 34px; min-height: 34px; padding-inline: .35rem 1.2rem; font-size: .875rem; }
    main.container #pm-calendar-app .cal-view-field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
    main.container #pm-calendar-app .cal-toolbar { grid-template-columns: auto minmax(0, 1fr) 4.5rem; }
    main.container #cal-period { grid-column: 1 / -1; grid-row: 1; }
    main.container #pm-calendar-app .cal-navigation { justify-content: center; }
}
@media print { .msg-list-controls { display: none; } }

/* Page controls use one shared surface across modules. */
main.container :is(.page-control-bar, .page-toolbar, .entity-page-header, .dms-heading, .msg-page-heading) {
    box-sizing: border-box; padding: .6rem .75rem; min-width: 0;
    border: 1px solid var(--color-border); border-radius: 14px;
    background: var(--color-surface);
}
main.container #pm-correspondence-app .corr-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: 0 0 .75rem; padding: .6rem .75rem;
}
/* Pages without heading actions or filters leave no empty bar behind. */
main.container #pm-correspondence-app .corr-toolbar:not(:has(*)) { display: none; }
main.container .corr-toolbar-main { flex: 1; justify-content: flex-start; gap: .5rem; }
main.container .corr-toolbar .corr-actions { gap: .4rem; }
main.container .notes-toolbar { margin-block: .65rem; padding: .6rem .75rem; }
@media (min-width: 761px) {
    main.container :is(.page-toolbar, .entity-page-header, .dms-heading, .msg-page-heading) { gap: .5rem; }
    main.container :is(.page-control-bar, .page-toolbar, .entity-page-header, .dms-heading) .btn,
    main.container .notes-toolbar .notes-toolbar-button { min-height: 32px; padding: .3rem .55rem; font-size: .78rem; }
    main.container .page-toolbar > .quick-filters { flex-basis: 0; }
    main.container .page-toolbar .tag-filter-field { flex-basis: 8rem; }
    main.container .notes-toolbar-primary { flex-basis: auto; }
    main.container.project-list-container .work-tree-toolbar-main { gap: .4rem; }
    main.container.project-list-container .work-tree-buttons { flex-wrap: nowrap; }
}
@media (min-width: 761px) and (max-width: 1050px) {
    /* Tablet toolbars give the tag search a full row instead of squeezing it beside the filters. */
    main.container .page-toolbar > .quick-filters { flex: 1 1 100%; }
    main.container .page-toolbar .tag-filter-field { flex: 1 1 auto; }
    main.container .page-toolbar .quick-filters .btn { white-space: nowrap; }
}