/* Shared resizable web layout. Based on Apple's Duo + Safari 27.1 guidance:
   size from available containers, preserve state, respect all four safe edges.
   No device sniffing, fixed device dimensions, orientation locks or zoom locks.
   Viewport Segments / Device Posture are previews, not baseline dependencies. */
:root{
  --wh-safe-top:env(safe-area-inset-top,0px);
  --wh-safe-right:env(safe-area-inset-right,0px);
  --wh-safe-bottom:env(safe-area-inset-bottom,0px);
  --wh-safe-left:env(safe-area-inset-left,0px);
}
.main-content{container-name:workhub-page;container-type:inline-size}
.calendar-save-feedback{margin:12px 18px;padding:14px;border:1px solid var(--orange);border-radius:12px;background:var(--surface);color:var(--text);font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.main-content>section,.main-content>section>div{min-width:0;max-width:100%}
:is(.home-heading,.section-heading,.project-index-hero,.department-report-hero,.board-hero,.m365-library-hero,.factory-schedule-hero)>div{min-width:0}
:is(.company-project-card,.project-summary,.personal-todo-item,.department-report-item,.notification-item) :is(h2,h3,h4,p,small){overflow-wrap:anywhere}
:is(.table-wrap,.todo-table-wrap,.consent-table-wrap,.onedrive-table-wrap,.overseas-table-scroll,.horizontal-timeline-scroll,.outlook-month-panel,.factory-calendar-shell){min-width:0;max-width:100%;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.company-project-board{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.os-exhibition-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
:is(.project-index-actions,.department-report-controls,.m365-library-actions,.factory-toolbar,.calendar-toolbar-actions,.board-toolbar,.todo-list-actions){min-width:0;max-width:100%;flex-wrap:wrap}
:is(.project-index-actions,.department-report-controls)>label{flex:1 1 150px;min-width:0;max-width:100%}
.app-shell :is(input,select,textarea){box-sizing:border-box;min-width:0;max-width:100%}
:is(.department-tabs,.overseas-sales-tabs,.board-tabs,.view-tabs,.todo-filters){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
:is(.department-tabs,.overseas-sales-tabs,.board-tabs,.view-tabs,.todo-filters)>button{flex:0 0 auto;white-space:nowrap}
.todo-list-head{flex-wrap:wrap}
.todo-advanced-filters{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.todo-advanced-filters .wide-filter{grid-column:1/-1}
.reminder-control{min-width:0;max-width:100%}
.project-task-preview li{min-width:0}
.project-task-preview li>*{min-width:0;overflow-wrap:anywhere}
.overseas-summary{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.overseas-filters>label{min-width:0;max-width:100%;flex:1 1 180px}
.overseas-filters input{min-width:0;width:100%}

/* Container queries adapt embedded/narrow panes without assuming a device. */
@container workhub-page (max-width:720px){
  :is(.todo-hero,.notification-hero,.project-index-hero,.department-report-hero,.board-hero,.m365-library-hero,.factory-schedule-hero,.outlook-calendar-toolbar){flex-direction:column;align-items:stretch}
  .reminder-control{width:100%}
  .home-project-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-project-search{grid-column:1/-1}
  .department-report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .department-report-item{grid-template-columns:minmax(0,1fr)}
  .report-item-side{min-width:0;grid-template-columns:minmax(0,1fr)}
  .report-item-meta{justify-items:start}
  .department-status-options{width:100%;min-width:0}
  .notification-layout{grid-template-columns:minmax(0,1fr)}
  .home-weekly-work{grid-template-columns:minmax(0,1fr)}
  .workspace-toolbar{align-items:stretch;flex-direction:column}
  .toolbar-actions{display:flex!important;min-width:0;width:100%;overflow-x:auto;flex-wrap:nowrap}
  .toolbar-actions>*{flex:0 0 auto}
  .m365-library-actions{width:100%}
  .overseas-header{align-items:stretch}
  .overseas-actions{width:100%}
}
@container workhub-page (max-width:400px){
  .home-project-filters{grid-template-columns:minmax(0,1fr)}
  .personal-todo-item{grid-template-columns:minmax(0,1fr)}
  .personal-todo-item .todo-side{grid-column:auto;text-align:left}
  .personal-todo-item>button{justify-self:start}
  .todo-list-actions{width:100%}
}

/* Sheets, editors and fixed panels are independent of the page container. */
dialog[id]{box-sizing:border-box;min-width:0;inset:max(12px,var(--wh-safe-top)) max(12px,var(--wh-safe-right)) max(12px,var(--wh-safe-bottom)) max(12px,var(--wh-safe-left));max-width:calc(100% - var(--wh-safe-left) - var(--wh-safe-right) - 24px)!important;max-height:calc(100dvh - var(--wh-safe-top) - var(--wh-safe-bottom) - 24px)!important;margin:auto;overflow:auto;overscroll-behavior:contain;scroll-padding-block:20px}
dialog[id] :is(form,fieldset,.detail-shell,.daily-sales-detail-shell,.overseas-form){min-width:0;max-width:100%;box-sizing:border-box}
dialog[id] :is(.form-grid,.factory-form-grid,.board-form-grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
dialog[id] .full-field{grid-column:1/-1}
dialog[id] :is(.dialog-header,.detail-head,.dialog-footer,.overseas-form footer){min-width:0;gap:12px;flex-wrap:wrap}
dialog[id] :is(.dialog-header,.detail-head)>div{flex:1 1 180px;min-width:0}
dialog[id] :is(h2,h3,p,pre){overflow-wrap:anywhere}
dialog[id] :is(input,select,textarea,.rich-editor){min-width:0;max-width:100%;box-sizing:border-box;font-size:17px}
dialog[id] :is(.dialog-footer,.overseas-form footer){background:var(--surface);position:sticky;bottom:0}
.chat-drawer{top:var(--wh-safe-top);right:var(--wh-safe-right);width:min(600px,calc(100% - var(--wh-safe-left) - var(--wh-safe-right)));height:calc(100dvh - var(--wh-safe-top) - var(--wh-safe-bottom));max-height:calc(100dvh - var(--wh-safe-top) - var(--wh-safe-bottom));min-width:0;grid-template-rows:auto auto auto auto minmax(0,1fr) auto}
.chat-drawer:not(.open){visibility:hidden;pointer-events:none}
.chat-drawer.open{visibility:visible;pointer-events:auto}
.chat-messages,.chat-composer{min-width:0;min-height:0}
.chat-composer textarea{min-height:44px;max-height:24dvh}
.toast-region{right:max(12px,var(--wh-safe-right));left:max(12px,var(--wh-safe-left));bottom:calc(var(--mobile-nav-height,0px) + var(--wh-safe-bottom) + 12px);justify-items:end;pointer-events:none}
.toast{width:min(380px,100%);min-width:0;max-width:100%;pointer-events:auto;border-color:var(--line);background:var(--surface);color:var(--text);box-shadow:var(--shadow);opacity:1;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.toast strong{color:inherit;font-size:16px;font-weight:800;line-height:1.5;opacity:1}
.toast span{color:inherit;margin-top:5px;font-size:14px;line-height:1.6;opacity:1}

@media(max-width:1050px){
  /* Keep navigation in its own layout row. Safari can retain a stale fixed
     layer after folding/rotation; a flowing row never covers the scroller. */
  body:has(.app-shell:not([hidden])){height:100dvh;min-height:0;padding-bottom:0;overflow:hidden}
  .app-shell:not([hidden]),.app-shell.email-mode:not([hidden]){display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden}
  .app-shell .sidebar{position:relative;inset:auto;order:2;flex:0 0 auto;height:auto!important;min-height:0;max-height:none;width:100%;margin:0}
  .app-shell .sidebar .nav-list{flex:0 0 auto;min-height:76px;align-items:stretch}
  .app-shell .main-content,.app-shell.email-mode .main-content{order:1;flex:1 1 0;height:auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  .app-shell .main-content{padding-top:max(14px,var(--wh-safe-top));padding-left:max(18px,var(--wh-safe-left));padding-right:max(18px,var(--wh-safe-right));padding-bottom:calc(var(--mobile-nav-height,94px) + var(--wh-safe-bottom) + 24px)}
  .app-shell .sidebar{padding-left:max(8px,var(--wh-safe-left));padding-right:max(8px,var(--wh-safe-right));padding-bottom:calc(7px + var(--wh-safe-bottom))}
  .app-shell .main-content{padding-bottom:24px}
  .app-shell.email-mode .main-content{overflow:hidden;padding-bottom:8px}
  .app-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,[contenteditable=true]){font-size:16px}
  .calendar-nav-dropdown{left:max(12px,var(--wh-safe-left));right:max(12px,var(--wh-safe-right));max-height:calc(100dvh - var(--mobile-nav-height,94px) - var(--wh-safe-top) - var(--wh-safe-bottom) - 24px)}
  .permission-user-toolbar,.permission-save-bar{position:static;top:auto;bottom:auto}
}
@media(pointer:coarse){
  .app-shell :is(.primary-button,.secondary-button,.text-button,.icon-button,.view-tab,.todo-filter,.calendar-arrow,.calendar-preview-arrow,.factory-view-toggle>button,.board-tabs>button,.overseas-actions>button,.calendar-toolbar-actions button),dialog[id] button{min-height:44px}
  .app-shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select),dialog[id] :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px}
  .app-shell :is(input[type=checkbox],input[type=radio]),dialog[id] :is(input[type=checkbox],input[type=radio]){min-width:20px;min-height:20px}
}
@media(prefers-reduced-motion:reduce){.app-shell *,dialog[id] *{scroll-behavior:auto;transition:none!important;animation:none!important}}