/* Shared layout foundation. Components wrap according to usable space, including zoom. */
:root {
  --layout-width: 96rem;
  --layout-gutter: clamp(1rem, 2.4vw, 2rem);
  --layout-gap: 1rem;
  --panel-padding: clamp(1rem, 1.8vw, 1.5rem);
  --control-height: 2.625rem;
  --surface-radius: .75rem;
}

html { scrollbar-gutter: stable; }
body { overflow-wrap: break-word; }
button { transition-property: background-color, border-color, color, box-shadow, opacity; transition-duration: 160ms; }
button, input, select, textarea { max-inline-size: 100%; }
button { touch-action: manipulation; }
img, svg { max-inline-size: 100%; }
[hidden] { display: none !important; }

.app-page .app-main,
.app-page .general-agent-page {
  inline-size: 100%;
  max-inline-size: var(--layout-width);
  min-inline-size: 0;
  margin: 0 auto;
  padding: 1.75rem var(--layout-gutter) 3rem;
}
.app-main > .general-overview-page,
.app-main #general-overview {
  inline-size: 100%; max-inline-size: none; margin: 0; padding: 0;
}
.app-header { padding: .875rem var(--layout-gutter); }
.app-header-primary { max-inline-size: calc(var(--layout-width) - 2 * var(--layout-gutter)); gap: var(--layout-gap); }
.app-context-inner, .area-nav-wrap, .app-footer-inner {
  inline-size: 100%; max-inline-size: var(--layout-width); padding-inline: var(--layout-gutter);
}
.app-page .app-page-context, .app-brand, .app-header-primary > *,
.app-main > *, .general-agent-page > *, .area-page > *, .general-agent-content > * { min-inline-size: 0; }
.app-brand-copy { white-space: normal; }
.app-page .account-dropdown { min-inline-size: 0; inline-size: auto; }
.app-page .account-menu-btn { inline-size: auto; min-block-size: var(--control-height); max-inline-size: min(18rem, 35vw); }
.app-header-primary { grid-template-columns: auto minmax(0, 1fr) auto; }
.app-page-context { grid-column: auto; grid-row: auto; }
.app-footer-inner { flex-wrap: wrap; align-items: center; }
.workspace-nav { position: relative; z-index: 35; }
.app-page nav.daily-links, .app-page .bi-view-switch { position: static; z-index: auto; }
.app-page .area-nav-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.workspace-dropdown, .workspace-dropdown > .area-nav-btn { inline-size: auto; }
.workspace-dropdown > .area-nav-btn { white-space: normal; text-align: left; }
.area-nav-btn { min-block-size: var(--control-height); font-weight: 650; }
.dropdown-menu { min-inline-size: min(16rem, calc(100vw - 2 * var(--layout-gutter))); max-inline-size: calc(100vw - 2 * var(--layout-gutter)); }
.dropdown-item { white-space: normal; overflow-wrap: anywhere; }

.app-page .filters { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin: 0; }
.app-page .filter-toolbar { padding: .875rem; border-radius: var(--surface-radius); }
.app-page .filter, .app-page .filter.date { flex: 1 1 11rem; min-inline-size: 0; max-inline-size: 18rem; }
.app-page .action-filter { flex: 1 1 auto; min-inline-size: 0; inline-size: auto; max-inline-size: none; margin-inline-start: auto; }
.app-page .action-filter > .hdr-btn { inline-size: 100%; }
.app-page .btn-group, .app-page .management-menus { display: flex; flex-wrap: wrap; gap: .5rem; inline-size: auto; min-inline-size: 0; }
.app-page .btn-group > *, .app-page .management-menus > * { min-inline-size: 0; }
.app-page .btn-group > .hdr-btn, .app-page .btn-group > .management-menus { flex: 1 1 auto; inline-size: auto; }
.app-page .management-menus > .dropdown, .app-page .management-menus > .dropdown > .hdr-btn { inline-size: auto; }
.app-page .management-menus > #configDropdown > .dropdown-menu { left: auto; right: 0; }
.app-page .hdr-btn, .app-page .small-btn { block-size: auto; min-block-size: var(--control-height); padding-block: .625rem; white-space: normal; justify-content: center; line-height: 1.35; }
.app-page .filter input, .app-page .filter select { inline-size: 100%; min-inline-size: 0; block-size: var(--control-height); }
.app-page .filter label, .app-page .bi-search, .app-page .bi-sort { font-size: .75rem; line-height: 1.4; }
.header-status-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
.period-strip { flex-wrap: wrap; flex-direction: row; gap: .5rem 1rem; }
.quality-strip { flex-wrap: wrap; justify-content: start; min-inline-size: 0; }
.purchase-filter-strip { inline-size: auto; max-inline-size: none; margin: 0 0 1.25rem; gap: .75rem; padding: var(--panel-padding); box-shadow: none; }
.purchase-filter-strip label { flex: 1 1 11rem; min-inline-size: 0; }
.purchase-filter-strip select { inline-size: 100%; min-inline-size: 0; }

.app-page .page-heading { align-items: start; flex-wrap: wrap; gap: .75rem; margin-block-end: 1.5rem; }
.app-page .page-heading > div { flex: 1 1 20rem; min-inline-size: 0; }
.app-page .page-heading h1, .app-page .page-heading h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.3rem + .65vw, 2rem); letter-spacing: -.025em; line-height: 1.25; }
.app-page .page-heading p { font-size: .875rem; line-height: 1.6; }
.context-badge { white-space: normal; line-height: 1.5; max-inline-size: 100%; }
.app-page .panel { min-inline-size: 0; padding: var(--panel-padding); border-radius: var(--surface-radius); box-shadow: var(--shadow); }
.app-page .operation-disclosure { padding: 0; }
.operation-disclosure-body { padding: var(--panel-padding); }
.app-page .panel-title, .bi-section-heading h2, .bi-section-heading h3 { font-size: 1rem; line-height: 1.45; }
.app-page .panel-sub { font-size: .8125rem; line-height: 1.6; margin-block: .5rem 1rem; }
.panel-header-flex, .panel-heading-row { flex-wrap: wrap; align-items: start; gap: .75rem; }
.panel-header-flex > *, .panel-heading-row > * { min-inline-size: 0; }

.app-page .metric-grid, .app-page .daily-kpis .metric-grid, .app-page .area-page > .metric-grid,
.app-page .day-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--layout-gap); }
.app-page .grid-2, .app-page .grid-equal, .app-page .daily-overview-grid,
.app-page .team-charts-grid, .app-page .tatodesk-table-grid,
.app-page .coverage-primary-grid, .app-page .coverage-secondary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--layout-gap); align-items: stretch;
}
.app-page .grid-3, .app-page .general-channel-grid, .app-page .general-agent-list,
.app-page .bi-benchmark-grid, .app-page .bi-detail-grid, .app-page .general-activity-summary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--layout-gap);
}
.metric-grid > *, .grid-2 > *, .grid-3 > *, .grid-equal > *, .daily-overview-grid > *,
.general-channel-grid > *, .bi-benchmark-grid > *, .bi-detail-grid > * { min-inline-size: 0; }
.app-page .metric-card, .app-page .daily-kpi, .app-page .bi-result-card { padding: var(--panel-padding); border-radius: var(--surface-radius); }
.metric-label { min-inline-size: 0; line-height: 1.5; }
.app-page .metric-value, .app-page .daily-kpi .metric-value { font-size: clamp(1.5rem, 1.35rem + .5vw, 2rem); line-height: 1.25; font-variant-numeric: tabular-nums; }
.metric-header .info-btn { margin-top: .2rem; }
.metric-help, .metric-comparison { font-size: .75rem; line-height: 1.5; }
.app-page .bi-benchmark-grid article + article, .app-page .bi-detail-grid article + article,
.app-page .general-activity-summary article + article { border-left: 0; padding-inline-start: 0; }
.app-page .bi-benchmark-grid article, .app-page .bi-detail-grid article { padding: 1rem; border: 1px solid var(--line); border-radius: var(--surface-radius); }
.bi-benchmark-result { align-items: baseline; flex-wrap: wrap; }
.bi-benchmark-result strong { flex-shrink: 0; }
.bi-view-switch { flex-wrap: wrap; gap: .5rem 1.5rem; }
.bi-view-switch button { min-block-size: var(--control-height); flex: 0 1 auto; }
.bi-controls { gap: .75rem; align-items: end; }
.bi-controls .bi-channel-switch { flex: 1 1 20rem; inline-size: auto; flex-wrap: wrap; }
.bi-channel-switch button { flex: 1 1 auto; min-inline-size: 0; white-space: normal; }
.app-page .bi-search, .app-page .bi-sort { flex: 1 1 11rem; inline-size: auto; min-inline-size: 0; margin-inline-start: 0; }
.bi-search input, .bi-sort select { inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-height); }
.bi-team-context { gap: .75rem 1.25rem; }
.bi-team-insight, .bi-card-alert { overflow-wrap: anywhere; }
.bi-trend-heading { flex-wrap: wrap; }
.bi-trend-svg { min-inline-size: min(100%, 32rem); }

.app-page .table-wrap, .app-page .bi-team-table, .app-page .bi-trend-data {
  min-inline-size: 0; max-inline-size: 100%; overflow: auto; overscroll-behavior-inline: contain; scrollbar-width: thin;
}
.app-page .table-wrap table { min-inline-size: 42rem; }
.app-page .tatodesk-team-table-wrap table { min-inline-size: 74rem; }
.app-page .activity-priority-table-wrap table { min-inline-size: 58rem; }
.table-pagination, .contextual-pagination, .picker-actions, .row-actions { flex-wrap: wrap; gap: .5rem; min-inline-size: 0; }
.chart, .general-chart, .vchart-scroll, .heat-scroll { min-inline-size: 0; max-inline-size: 100%; }
.vchart-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.chart-legend { flex-wrap: wrap; gap: .625rem 1rem; }
.hrow { grid-template-columns: minmax(5rem, 28%) minmax(0, 1fr); }
.hbar-line { grid-template-columns: minmax(0, 1fr) minmax(3rem, auto); }
.hlabel { white-space: normal; overflow-wrap: anywhere; }
.stack-row { grid-template-columns: minmax(5rem, 28%) minmax(0, 1fr) auto; }
.donut-legend { min-inline-size: 0; max-inline-size: 100%; }
.donut-wrap { gap: 1rem; }
.workload-controls, .sync-strip-actions { flex-wrap: wrap; min-inline-size: 0; }
.workload-controls select { min-inline-size: 0; max-inline-size: 100%; }
.app-page .tatodesk-sync-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.app-page .mapping-source-grid, .app-page .source-quality-grid, .app-page .user-form-grid,
.app-page .justification-form-grid, .app-page .source-choice-grid, .app-page .method-grid,
.app-page .ticket-detail-grid, .app-page .empty-steps, .app-page .general-directory-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.app-page .preview-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.calendar-form, .ticket-search { flex-wrap: wrap; align-items: end; }
.calendar-form input, .ticket-search input { flex: 1 1 12rem; min-inline-size: 0; min-block-size: var(--control-height); }
.team-charts-grid > *, .tatodesk-table-grid > *, .method-grid > *, .source-choice-grid > * { min-inline-size: 0; }
.tatodesk-mapping-select { min-inline-size: 0; }
.app-page .modal-backdrop { padding: var(--layout-gutter); }
.modal-card { max-inline-size: min(100%, var(--dialog-width, 54rem)); max-block-size: calc(100dvh - 2 * var(--layout-gutter)); }
.users-modal-card { --dialog-width: 62rem; }
.password-modal-card { --dialog-width: 35rem; }
.justification-modal-card { --dialog-width: 45rem; }
.modal-header, .modal-footer { flex-wrap: wrap; gap: .75rem; padding: var(--panel-padding); }
.modal-header > div { flex: 1 1 12rem; min-inline-size: 0; }
.modal-body { min-inline-size: 0; padding: var(--panel-padding); }
.close-modal-btn { flex: 0 0 auto; }
.form-field input, .form-field select, .form-field textarea { min-inline-size: 0; max-inline-size: 100%; }
.app-page .disclosure-drawer { inline-size: min(100%, 30rem); max-block-size: 100dvh; }

@media (max-width: 55rem) {
  .app-header-primary { grid-template-columns: minmax(0, 1fr) auto; }
  .app-page-context { grid-column: 1 / -1; grid-row: 2; }
  .app-page .filter, .app-page .filter.date { max-inline-size: none; }
  .app-page .action-filter { flex-basis: 100%; }
  .app-page .action-filter > .action-label { display: none; }
}
@media (max-width: 38rem) {
  .app-page .account-menu-btn { max-inline-size: 8rem; }
  .app-brand-copy strong { font-size: .75rem; }
  .app-brand-logo { inline-size: 2.25rem; block-size: 2.25rem; }
  .app-page .area-nav-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-dropdown > .area-nav-btn { inline-size: 100%; text-align: center; }
  .workspace-dropdown:nth-child(even) > .workspace-dropdown-menu { left: auto; right: 0; }
  .app-page .bi-team-table table { min-inline-size: 0; }
  .app-page .daily-context .reading { grid-template-columns: 1fr; }
  .app-page .btn-group > .hdr-btn { flex-basis: calc(50% - .5rem); }
  .app-page .management-menus { flex-basis: 100%; }
  .app-page .management-menus > .dropdown, .app-page .management-menus > .dropdown > .hdr-btn { inline-size: 100%; }
  .bi-view-switch { gap: .5rem; }
  .bi-view-switch button { flex: 1 1 6rem; font-size: .8125rem; }
  .bi-benchmark-result { gap: .5rem; }
  .app-footer-inner { align-items: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}