/* Shared phone layout. Loaded after module styles so all screens use the same small-screen rules. */
.menu-backdrop{display:none}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid #3683c0;outline-offset:2px}
@media(max-width:760px){
  html{scroll-padding-top:14px}
  body,.workspace,.main,.content,#view{min-width:0;max-width:100%}
  .workspace{display:block}
  .content{width:100%;padding:18px 12px calc(88px + env(safe-area-inset-bottom));margin:0}
  #view{min-width:0}
  #view > *{max-width:100%;min-width:0}
  .topbar{height:auto;min-height:60px;padding:8px 12px;gap:8px}
  .top-start,.top-actions{min-width:0;gap:7px}
  .top-start{flex:0 0 auto}
  .top-actions{margin-inline-start:auto;flex-wrap:nowrap}
  .topbar :is(.icon-btn,.top-icon){min-width:42px;min-height:42px}
  .global-search{display:none}
  .search-results{inset-inline-start:12px;inset-inline-end:12px;right:auto;left:auto;width:auto;max-width:none}
  .sidebar{width:min(310px,85vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;z-index:51;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .menu-backdrop.open{display:block;position:fixed;inset:0;z-index:50;width:100%;height:100dvh;border:0;background:#102b4280;cursor:pointer}
  .gateway-art{min-height:160px;padding:18px 20px}.art-middle h1{font-size:30px;line-height:1.3}.gateway-panel{padding:22px 16px 36px}.stack-form{margin-top:20px;gap:13px}
  .page-heading{display:block;margin-bottom:18px}.page-heading h1{font-size:clamp(20px,6vw,27px);overflow-wrap:anywhere}
  .heading-actions,.section-title .toolbar,.toolbar{display:flex;flex-wrap:wrap;min-width:0;max-width:100%;gap:8px}
  .heading-actions > *, .section-title .toolbar > *{max-width:100%;min-width:0}
  .heading-actions select{flex:1 1 180px}
  .section-title{display:flex;align-items:stretch;flex-direction:column;min-width:0;gap:10px;margin-block:20px 10px}
  .section-title h2{overflow-wrap:anywhere}
  .pill-tabs{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;flex-wrap:nowrap;padding:5px}
  .pill-tabs button{min-height:42px;padding:9px 13px;flex:none}
  .metrics,.dashboard-module-grid,.dashboard-lower,.split{grid-template-columns:minmax(0,1fr)}
  .card,.dashboard-hero,.notice{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .dashboard-hero,.inventory-hero,.finance-flow-hero{flex-wrap:wrap;padding:18px}
  .chart{overflow-x:auto}
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-actions button{min-width:0;white-space:normal;padding:13px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .form-grid > *, :is(.rfq-edit-shell,.rfq-decision-shell,.priority-shell,.procurement-dialog,.finance-dialog,.safety-dialog,.edms-dialog,.contract-payment-dialog,.monthly-budget-dialog) #form-fields > *{min-width:0;max-width:100%}
  input,select,textarea{max-width:100%;min-width:0}
  input[type=file]{white-space:normal;overflow-wrap:anywhere}
  :is(#view,#dialog,#gateway) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
  .inline-actions,.modal-actions{flex-wrap:wrap;min-width:0}
  .tiny,.icon-btn{min-height:40px;min-width:40px}
  .btn{white-space:normal;text-align:center;min-height:44px}
  .table-wrap,.priority-table-scroll,.edms-table-wrap,.monthly-budget-table-scroll,.gantt-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .table-wrap:not(.mobile-table-wrap) table{max-width:none}
  /* Table headers remain in the accessibility tree; the cards repeat their column names. */
  .mobile-table-wrap{overflow:visible;max-height:none;border:0;background:transparent;box-shadow:none}
  .mobile-card-table,.mobile-card-table tbody{display:block;width:100%;min-width:0!important;max-width:100%}
  .mobile-card-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mobile-card-table tbody{display:grid;gap:10px}
  .mobile-card-table tbody tr{display:block;min-width:0;padding:5px 13px;border:1px solid #dbe7f0;border-radius:13px;background:#fff;box-shadow:0 3px 12px #173f6010}
  .mobile-card-table td{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);align-items:start;gap:9px;width:100%;min-width:0;max-width:100%;min-height:38px;margin:0;padding:9px 0;border-top:1px solid #edf2f7;white-space:normal;text-align:start;overflow-wrap:anywhere}
  .mobile-card-table .mobile-cell-value{min-width:0;max-width:100%;overflow-wrap:anywhere}
  .mobile-card-table td:first-child{border-top:0;font-weight:700}
  .mobile-card-table td::before{content:attr(data-label);font-size:11px;line-height:1.8;color:#637f95;font-weight:700;overflow-wrap:anywhere}
  .mobile-card-table td :is(button,a){white-space:normal;overflow-wrap:anywhere}
  .mobile-card-table td .inline-actions{align-items:stretch}
  .mobile-card-table td .tiny{white-space:normal;min-height:40px}
  .gantt-card .card-head{padding:12px 14px}.gantt-scroll{max-height:min(62dvh,630px)}
  .gantt-board{max-width:none}.gantt-name{width:125px;padding:5px 8px}.gantt-name small{font-size:10px}
  .gantt-bar{min-height:28px;top:12px}
  .cbs-summary,.schedule-import-form,.org-role-grid,.org-mapping,.org-board-body,.policy-row,.letter-card-grid,.grn-review-grid,.contract-statement-list{grid-template-columns:minmax(0,1fr)}
  dialog,#dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:auto;border-radius:14px}
  dialog #entity-form,#dialog #entity-form{min-width:0;max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;padding:14px}
  dialog #form-fields,#dialog #form-fields{min-width:0;max-width:100%}
  dialog .modal-head{gap:8px}dialog .modal-head h2{font-size:18px;line-height:1.5;overflow-wrap:anywhere}
  dialog .modal-actions{gap:8px}dialog .modal-actions .btn{flex:1 1 130px}
  .rfq-edit-shell,.rfq-decision-shell{width:auto;min-width:0;max-width:100%}
  .petty-total-card{min-width:0;max-width:100%;width:100%}
  .petty-form-hero,.rfq-edit-intro,.monthly-budget-form-hero{flex-wrap:wrap}
  .petty-header-grid,.petty-optional-grid,.petty-line-grid,.petty-report-filters,.priority-queue-stats,.priority-level-options{grid-template-columns:minmax(0,1fr)}
  .safety-filter,.org-language-actions,.petty-search,.edms-filters input{min-width:0;max-width:100%;width:100%}
  .procurement-filterbar,.purchase-workspace .procurement-filterbar{grid-template-columns:minmax(0,1fr)}
  .contract-terms,.edms-table-wrap,.priority-table-scroll{max-width:100%;overflow-x:auto}
  .toast{inset-inline:12px;left:auto;right:auto;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none;width:auto}
}
@media(max-width:390px){
  .content{padding-inline:10px}.metrics{grid-template-columns:minmax(0,1fr)}
  .topbar{padding-inline:7px}.top-actions{gap:3px}
  .mobile-card-table td{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:6px}
  .quick-actions{grid-template-columns:minmax(0,1fr)}
  .gantt-name{width:112px}
}
@media(max-height:550px) and (max-width:760px){
  .gateway-art{min-height:110px}.art-middle{display:none}
  dialog,#dialog{max-height:calc(100dvh - 8px)}
}