/* TCC responsive workspace. Screen-only; no data, route or workflow changes.
   Specific component rules intentionally avoid calendar/time-grid structure. */
@media screen and (max-width:1600px) {
  body .main, body .content, body .topbar-left, body .topbar-right { min-width:0; }
  body .content { width:100%; max-width:100%; box-sizing:border-box; }
  body .content :where(input,select,textarea) { max-width:100%; box-sizing:border-box; }
  body :where(.card-head,.toolbar,.form-actions,.ops-dialog-footer,.chat-dialog-actions,.sot-actions,.blog-actions,.employee-filter-actions) { flex-wrap:wrap; }
  body :where(.table-wrap,.directory-table-wrap,.accounting-table-wrap,.fa-table-wrap) { max-width:100%; overflow-x:auto!important; min-width:0; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  body :where(.table-wrap,.directory-table-wrap,.accounting-table-wrap,.fa-table-wrap) table { margin-bottom:0; }
  body :where(.filter-row,.employee-filter-grid,.form-grid,.modal-form-grid,.field-grid,.people-form-grid-v3526,.accounting-form-grid) > * { min-width:0; }
  body :where(.filter-row,.toolbar) { gap:10px; flex-wrap:wrap; }
  body :where(.filter-row) > label { flex:1 1 170px; min-width:0; }
  body :where(.form-actions,.ops-dialog-footer,.chat-dialog-actions) { gap:8px; }
  /* Keep every native dialog within both the width and the usable height. */
  html body dialog, html body[class] dialog[class] { box-sizing:border-box; max-width:calc(100vw - 24px)!important; max-height:calc(100vh - 24px)!important; max-height:calc(100dvh - 24px)!important; overflow:auto; overscroll-behavior:contain; }
  html body dialog :where(input,select,textarea) { max-width:100%; box-sizing:border-box; }
  html body :where(.ops-dialog-head,.phase69-dialog-head,.chat-dialog-head,.payroll-cra-dialog-head,.accounting-dialog-head,.form-preview-dialog-head,.employee-document-preview-actions) { flex-wrap:wrap; gap:10px; }
  body :where(.employee-workspace-header,.employee-workspace-header-actions,.employee-workspace-footer,.schedule-drawer-head-v4,.schedule-drawer-footer-v4,.tk-drawer-head-v3528,.tk-drawer-actions-v3528,.applicant-drawer-head-v200,.applicant-drawer-footer-v200) { flex-wrap:wrap; gap:10px; }
  body :where(.employee-workspace-main,.employee-workspace-body,.tk-drawer-body-v3528,.applicant-drawer-body-v200,.sp-drawer-panel-v22) { min-width:0; min-height:0; }
  body :where(.employee-document-preview-panel,.form-preview-dialog) { max-width:calc(100vw - 24px)!important; max-height:calc(100dvh - 24px)!important; }
  body :where(.employee-document-preview-panel,.form-preview-dialog) iframe { max-width:100%; min-height:0; }
  body :where(.auth-shell,.auth-live-shell) { max-width:100%; box-sizing:border-box; }
}
/* Preserve the existing phone headers and bottom navigation below 821px. */
@media screen and (min-width:821px) and (max-width:1600px) {
  html body .topbar { padding:14px 18px!important; gap:12px!important; align-items:flex-start; flex-wrap:wrap; }
  html body .topbar-left { flex:1 1 280px; }
  html body .topbar-left > div { min-width:0; }
  html body .topbar-left h1 { overflow-wrap:anywhere; }
  html body .topbar-left p { max-width:65ch; }
  html body .topbar-right { flex:1 1 520px; justify-content:flex-end; flex-wrap:wrap; gap:8px!important; }
  html body .topbar-right > .btn { white-space:normal; text-align:center; }
  html body .topbar-date { flex:none; }
  html body .content { padding:18px!important; }
}
@media screen and (min-width:1025px) and (max-width:1600px) {
  html body .app-shell { grid-template-columns:210px minmax(0,1fr)!important; }
  html body .app-shell > .sidebar { width:210px!important; padding-left:10px; padding-right:10px; box-sizing:border-box; }
  html body .sidebar .brand-logo { max-width:100%; object-fit:contain; }
}
/* The existing sidebar-open controls drive the tablet drawer as well. */
@media screen and (min-width:821px) and (max-width:1024px) {
  html body .app-shell { display:block!important; }
  html body .app-shell > .sidebar { position:fixed!important; inset:0 auto 0 0!important; width:278px!important; max-width:calc(100vw - 40px); height:100vh!important; height:100dvh!important; transform:translateX(-105%)!important; transition:transform .2s ease; z-index:100; }
  html body.sidebar-open .app-shell > .sidebar { transform:translateX(0)!important; }
  html body .topbar-left > .icon-btn.mobile-only, html body .sidebar-close.mobile-only { display:grid!important; flex:none; place-items:center; }
  html body .sidebar-scrim { display:none!important; }
  html body.sidebar-open .sidebar-scrim { display:block!important; position:fixed; inset:0; z-index:99; background:rgba(18,31,51,.4); }
  html body .topbar { position:relative; }
}
@media screen and (max-width:1600px) and (min-height:501px) {
  body .sidebar { min-height:0; }
  body .sidebar > .nav { min-height:0; overflow-y:auto; overscroll-behavior-y:contain; }
}
@media screen and (max-width:1600px) {
  /* Reserve room for the sidebar and filter actions on small laptops. */
  body .employee-directory-filter { grid-template-columns:minmax(0,1fr)!important; }
  body .employee-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  body .employee-filter-grid :where(input,select) { min-width:0; }
  body .employee-filter-actions { white-space:normal; }
  body .employee-directory-table td:last-child :where(.btn,button) { margin-bottom:4px; }
  body .recruit-applicant-controls { grid-template-columns:minmax(0,1fr)!important; }
  body .recruit-applicant-controls .filter-row { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  body :where(.payroll-overview-grid,.payroll-detail-grid,.accounting-section-grid,.form-editor-grid,.recruit-settings-grid) { grid-template-columns:minmax(0,1fr)!important; }
  body .payroll-employee-summary { grid-template-columns:minmax(180px,1.4fr) repeat(2,minmax(110px,1fr))!important; }
  body .payroll-premium-row { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  body .payroll-cra-dialog-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body :where(.tk-filters,.tk-filter-other-row,.finance-invoice-filter-grid) { display:flex; flex-wrap:wrap; gap:10px; }
  body :where(.tk-filters,.tk-filter-other-row,.finance-invoice-filter-grid) > * { min-width:0; flex:1 1 170px; }
}
@media screen and (max-width:1280px) {
  .section-grid,.ops-dashboard-grid-v3528,.msg-admin-grid,.client-health-grid-v20,.employee-overview-columns,.employee-work-grid,.recruit-settings-grid { grid-template-columns:minmax(0,1fr)!important; }
  .stat-grid,.stats-grid,.recruit-summary,.payroll-run-totals,.employee-compliance-stats { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .employee-filter-grid,.recruit-applicant-controls .filter-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media screen and (max-width:1024px) {
  body :where(.modal-form-grid,.field-grid,.people-form-grid-v3526,.accounting-form-grid,.schedule-create-grid-v10,.schedule-manage-grid-v4,.tk-drawer-form-grid-v3528,.client-health-form-grid-v20,.payroll-statutory-grid) { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body :where(.schedule-drawer-v4,.tk-drawer-v3528,.applicant-drawer-v200) { max-width:calc(100vw - 20px)!important; max-height:calc(100dvh - 20px)!important; }
  body .employee-workspace-body { grid-template-columns:190px minmax(0,1fr)!important; }
  body :where(.employee-workspace-sidebar,.employee-workspace-main) { padding:14px; }
  body :where(.employee-workspace-header-actions,.employee-document-actions,.employee-requirement-actions) { flex-wrap:wrap; }
  body :where(.detail-site .container,.landing-site .container) { max-width:100%; box-sizing:border-box; }
  body :where(.insights-grid,.content-hero-grid,.contact-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:820px) {
  body .employee-workspace-body { grid-template-columns:minmax(0,1fr)!important; }
  body :where(.section-grid,.msg-admin-grid,.accounting-section-grid,.client-health-grid-v20,.employee-overview-columns) { grid-template-columns:minmax(0,1fr)!important; }
  body .employee-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  body :where(.ops-dialog-body,.phase69-dialog-body,.accounting-dialog-body,.payroll-cra-dialog-body) { padding:14px; }
  body :where(.clinic-grid,.auth-shell,.auth-live-shell) { min-width:0; }
  body :where(.card-head,.msg-head,.sot-head) { gap:10px; flex-wrap:wrap; }
  body :where(.sot-tools,.group-form-grid) { grid-template-columns:minmax(0,1fr)!important; }
}
@media screen and (max-width:600px) {
  body :where(.employee-filter-grid,.recruit-applicant-controls .filter-row,.form-grid,.modal-form-grid,.field-grid,.people-form-grid-v3526,.accounting-form-grid,.schedule-create-grid-v10,.schedule-manage-grid-v4,.tk-drawer-form-grid-v3528,.client-health-form-grid-v20,.payroll-statutory-grid,.payroll-cra-dialog-grid,.payroll-premium-row,.recruit-question-grid) { grid-template-columns:minmax(0,1fr)!important; }
  body :where(.form-grid,.modal-form-grid,.field-grid,.people-form-grid-v3526,.accounting-form-grid) > .span-2 { grid-column:1/-1!important; }
  body .payroll-employee-summary { grid-template-columns:minmax(0,1fr)!important; }
  html body dialog, html body[class] dialog[class] { max-width:calc(100vw - 16px)!important; max-height:calc(100dvh - 16px)!important; }
  body :where(.ops-dialog-footer,.chat-dialog-actions,.form-actions,.accounting-dialog-actions) > .btn { white-space:normal; }
  body :where(.insights-grid,.content-hero-grid,.contact-grid) { grid-template-columns:minmax(0,1fr)!important; }
}
/* A short landscape tablet still needs access to the dialog's bottom controls. */
@media screen and (max-width:1600px) and (max-height:700px) {
  html body dialog, html body[class] dialog[class] { max-height:calc(100dvh - 16px)!important; }
  body :where(.ops-dialog-body,.phase69-dialog-body,.chat-dialog-body,.accounting-dialog-body,.payroll-cra-dialog-body) { max-height:calc(100dvh - 180px); overflow-y:auto; }
  body .topbar { position:relative; }
}
@media (prefers-reduced-motion:reduce) {
  html body .app-shell > .sidebar { transition:none!important; }
}
/* Secondary dashboards, client tabs and form-builder subpages. */
@media screen and (min-width:821px) and (max-width:1280px) {
  html body :where(.ops360-grid-2,.ops360-grid-equal,.scheduler-panels-v73,.scheduler-lower-v73,.hr-dash-panels-v75,.hr-dash-lower-v75,.client-grid-v1,.form-builder-shell,.client-care-assignment-box-v72,.cp-overview-grid-v25,.cp-secondary-grid-v25,.client-finance-admin-columns-v124) { grid-template-columns:minmax(0,1fr)!important; }
  html body :where(.ops360-kpis,.ops360-finance-kpis,.ops360-compliance-row,.hr-dash-metrics-v75,.scheduler-metrics-v73,.care-grid,.client-funding-overview-v18) { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html body :where(.client-care-mini-form-v72,.form-card-main) { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  html body .employee-workspace-drawer { width:calc(100vw - 24px)!important; }
  html body :where(.employee-overview-grid,.employee-work-stats,.employee-hr-stats,.employee-hr-detail-grid) { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media screen and (max-width:820px) {
  html body :where(.form-builder-shell,.client-care-assignment-box-v72,.cp-overview-grid-v25,.cp-secondary-grid-v25,.client-finance-admin-columns-v124,.scheduler-panels-v73,.scheduler-lower-v73,.hr-dash-panels-v75,.hr-dash-lower-v75) { grid-template-columns:minmax(0,1fr)!important; }
  html body :where(.form-card-main,.client-care-mini-form-v72) { grid-template-columns:minmax(0,1fr)!important; }
  html body :where(.client-care-mini-form-v72,.field-grid,.form-card-main) > * { min-width:0; max-width:100%; }
  html body :where(.schedule-assignment-grid-v14,.schedule-assignment-compact-v60,.schedule-assignment-balanced) { grid-template-columns:minmax(0,1fr)!important; }
  html body :where(.clinic-grid,.grid) > * { min-width:0; }
  html body .grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
}
@media screen and (max-width:600px) {
  html body :where(.employee-overview-grid,.employee-hr-detail-grid,.client-care-plan-fields-v72,.client-finance-admin-row-v124,.applicant-name-grid-v200) { grid-template-columns:minmax(0,1fr)!important; }
}
@media screen and (max-width:1600px) and (pointer:coarse) {
  html body :where(.btn,.icon-btn,.dialog-close,.sidebar-close,.sot-send) { min-height:44px!important; }
  html body :where(.icon-btn,.dialog-close,.sidebar-close) { min-width:44px!important; }
  html body :where(.employee-filter-grid,.filter-row,.modal-form-grid) :where(input:not([type=checkbox]):not([type=radio]),select) { min-height:44px!important; }
}