/* V301. Shared, authenticated portal layout. Wide data remains locally scrollable.
   This stylesheet deliberately does not style authentication or print output. */
@media screen {
  body[data-portal-page] :is(.workspace,.content,.page-head,.head-actions,.card,.stack,.ot285,.form-grid,.detail-grid,.report-layout,.team-scope,.team-filters){min-width:0;max-width:100%}
  body[data-portal-page] :is(.field,.form-grid>*,.detail-grid>*,.report-layout>*,.card-head>*,.list-toolbar>*,.team-filters>*){min-width:0}
  body[data-portal-page] :is(.table-wrap,.table-scroll,.ot-table-scroll,.team-table-wrap){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  body[data-portal-page] :is(.head-actions,.card-head,.list-toolbar,.team-filters,.button-row,.form-actions,.report-output-actions){flex-wrap:wrap}
  body[data-portal-page] :is(.head-actions,.button-row,.form-actions)>.btn{max-width:100%;white-space:normal}
  body[data-portal-page] :is(h1,h2,h3,.document-name,.comment-body,.section-note,.field>small){overflow-wrap:anywhere}
  body[data-portal-page] :is(input,select,textarea){max-width:100%}
  body[data-portal-page] :is(dialog.modal,dialog.theme-drawer){overscroll-behavior:contain;overflow-y:auto;scrollbar-gutter:stable}
  body[data-portal-page] dialog.modal{max-height:calc(100dvh - 32px);max-width:calc(100vw - 24px)}
  body[data-portal-page] .sidebar nav{min-height:72px;overscroll-behavior:contain}
  body[data-portal-page] .ot-hero-copy{min-width:0}
  body[data-portal-page] .ot-chart-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  body[data-portal-page] .ot-panel-head{flex-wrap:wrap}
  body[data-portal-page] .ot-period-control{max-width:100%}
  body[data-portal-page] .ot-period-control select{max-width:100%}
}

@media screen and (max-width:1100px){
  body[data-portal-page] .head-actions{max-width:100%!important;justify-content:flex-start}
  body[data-portal-page] .detail-grid,body[data-portal-page] .report-layout{grid-template-columns:minmax(0,1fr)}
  body[data-portal-page] .page-head{flex-wrap:wrap}
  body[data-portal-page] .ot285 .ot-grid{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:none!important}
  body[data-portal-page] .ot285 .ot-grid>.ot-panel{grid-area:auto!important;grid-column:1!important;grid-row:auto!important}
}

@media screen and (max-width:760px){
  body[data-portal-page] .app-shell{display:block;min-width:0}
  body[data-portal-page] .workspace{width:100%;min-width:0}
  body[data-portal-page] .sidebar{width:min(292px,calc(100vw - 48px));height:100dvh;padding-bottom:env(safe-area-inset-bottom);z-index:70;transform:translateX(-100%)}
  body[data-portal-page].nav-open .sidebar{transform:translateX(0)}
  body[data-portal-page] .sidebar .nav-link{min-height:46px;font-size:13px}
  body[data-portal-page] .sidebar .reference-brand-note{display:none}
  body[data-portal-page] .sidebar .brand{padding:19px 22px}
  body[data-portal-page] .sidebar .sidebar-bottom{padding:12px 20px;flex-shrink:0;margin-top:8px}
  body[data-portal-page] .sidebar-signout{min-height:44px}
  body[data-portal-page] .topbar{min-height:64px;height:auto;padding:8px 10px;gap:3px;flex-wrap:nowrap}
  body[data-portal-page] .topbar .mobile-menu{display:inline-flex;flex:0 0 44px}
  body[data-portal-page] .topbar .search-trigger{flex:0 0 44px;width:44px;min-width:44px;max-width:44px;margin-left:0;justify-content:center;padding:10px;background:transparent;border-color:transparent}
  body[data-portal-page] .topbar .search-trigger>span:not(:first-child),body[data-portal-page] .topbar .search-trigger kbd{display:none}
  body[data-portal-page] .topbar-actions{margin-left:auto;gap:0;min-width:0}
  body[data-portal-page] .topbar-divider{display:none}
  body[data-portal-page] .topbar .profile-link{min-height:44px;min-width:44px;justify-content:center}
  body[data-portal-page] .topbar .profile-link>div{display:none}
  body[data-portal-page] :is(.icon-button,.btn,.ot-btn,.lookup-option){min-height:44px}
  body[data-portal-page] .icon-button{min-width:44px}
  body[data-portal-page] .btn{font-size:12px}
  body[data-portal-page] :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=hidden]),select,textarea){font-size:16px;min-height:44px}
  body[data-portal-page] label.field{font-size:13px}
  body[data-portal-page] .content{padding:18px 14px 24px!important}
  body[data-portal-page] .page-head{padding:19px 17px;gap:16px;align-items:flex-start;flex-direction:column;min-height:0}
  body[data-portal-page] .page-head>div:first-child{max-width:100%!important}
  body[data-portal-page] .page-head h1{font-size:28px}
  body[data-portal-page] .page-head p{font-size:13px;line-height:1.6}
  body[data-portal-page] .head-actions{width:100%;gap:8px}
  body[data-portal-page] .head-actions .btn{flex:1 1 130px;padding:10px 12px;white-space:normal;line-height:1.4}
  body[data-portal-page] :is(.form-grid,.detail-grid,.report-layout,.admin-grid){grid-template-columns:minmax(0,1fr)}
  body[data-portal-page] .form-grid .full-span{grid-column:auto}
  body[data-portal-page] :is(.pagination,.card-head){gap:10px}
  body[data-portal-page] .pagination{flex-wrap:wrap}
  body[data-portal-page] .pagination-actions{flex-wrap:wrap;max-width:100%;gap:4px}
  body[data-portal-page] .pagination-actions .btn{min-width:44px}
  body[data-portal-page] .list-search{width:100%;min-width:0;flex:1 1 100%}
  body[data-portal-page] .list-toolbar select{min-width:0;flex:1 1 140px}
  body[data-portal-page] .team-filters{display:flex;flex-wrap:wrap}
  body[data-portal-page] .team-filters>label{flex:1 1 180px}
  body[data-portal-page] .list-toolbar .btn{flex-shrink:0}
  body[data-portal-page] .form-actions .btn{flex:1 1 110px;white-space:normal}
  body[data-portal-page] .detail-meta{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px;gap:16px 12px}
  body[data-portal-page] .detail-meta .kv b{font-size:12px}
  body[data-portal-page] .detail-meta .kv small{font-size:11px}
  body[data-portal-page] dialog.modal{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:12px;margin:auto}
  body[data-portal-page] .modal #modalBody{padding:18px 15px}
  body[data-portal-page] .modal-top{padding:8px 12px;font-size:12px}
  body[data-portal-page] .theme-drawer{width:min(420px,100vw);max-width:100vw;padding-bottom:env(safe-area-inset-bottom)}
  body[data-portal-page] .drawer-top{gap:10px;padding:18px}
  body[data-portal-page] .drawer-top .icon-button{flex-shrink:0}
  body[data-portal-page] .toast-region{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:none}
  body[data-portal-page] .toast{overflow-wrap:anywhere}
  body[data-portal-page] .workspace-footer{padding:12px 14px 22px;flex-wrap:wrap;gap:8px;font-size:10px}
  body[data-portal-page] .ot285{padding-left:0!important;padding-right:0!important}
  body[data-portal-page] .ot285 .ot-hero{margin-left:0!important;margin-right:0!important;max-width:100%;flex-direction:column;align-items:flex-start}
  body[data-portal-page] .ot285 .ot-hero-copy{max-width:100%;width:100%}
  body[data-portal-page] .ot285 .ot-hero-actions{width:100%;margin-left:0;align-self:stretch;align-items:stretch;flex-direction:row;flex-wrap:wrap}
  body[data-portal-page] .ot285 .ot-hero-actions .ot-btn{flex:1 1 130px;white-space:normal;line-height:1.4}
  body[data-portal-page] .ot285 .ot-design-shortcut{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  body[data-portal-page] .ot285 .ot-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body[data-portal-page] .ot285 .ot-kpi-label{font-size:12px}
  body[data-portal-page] .ot285 .ot-kpi-note{font-size:11px;line-height:1.45}
  body[data-portal-page] .ot285 .ot-panel-head h2{font-size:17px}
  body[data-portal-page] .ot285 .ot-panel-head p{font-size:12px}
  body[data-portal-page] .ot285 .ot-panel-head .ot-text-link{font-size:12px;min-height:44px}
  body[data-portal-page] .ot285 .ot-donut-wrap{flex-wrap:wrap;gap:16px}
  body[data-portal-page] .ot285 .ot-status-legend{min-width:120px}
  body[data-portal-page] .ot285 .ot-status-legend li{font-size:12px}
  body[data-portal-page] .ot285 .ot-stage-row{grid-template-columns:minmax(100px,1.5fr) minmax(35px,1fr) 25px;gap:8px;font-size:12px}
  body[data-portal-page] .ot285 .ot-preview-bar>div{flex-wrap:wrap}
  body[data-portal-page] .ot285 .ot-recent .ot-table-scroll{overflow-x:auto}
  body[data-portal-page] #portalThemePreview{padding:12px 14px 0}
  body[data-portal-page] #portalThemePreview .ot-btn{min-height:44px;font-size:12px}
  /* Payment field icons retain their fixed column while the control can shrink. */
  body[data-portal-page] #payment-request-v257{min-width:0;max-width:100%}
  body[data-portal-page] #payment-request-v257 :is(.pr260-layout,.pr260-main,.pr260-side,.pr260-card,.pr257-field,.pr264-control-wrap,.pr264-row3,.pr262-reference){min-width:0;max-width:100%}
  body[data-portal-page] #payment-request-v257 :is(.pr263-grid,.pr264-row3,.pr262-reference,.pr260-docs,.pr260-money,.pc-classification-money,.pr260-side){grid-template-columns:minmax(0,1fr)!important}
  body[data-portal-page] #payment-request-v257 .pr264-control-wrap{min-height:48px!important;height:auto!important;grid-template-columns:42px minmax(0,1fr)!important}
  body[data-portal-page] #payment-request-v257 .pr264-control-wrap>:is(input,select,output,button){min-width:0;min-height:46px!important;height:auto!important;font-size:16px!important;line-height:1.3!important}
  body[data-portal-page] #payment-request-v257 :is(.pr257-field>span,.pr257-nature>span,.pr260-method .field,.pr260-reference .field,.pr260-description .field){font-size:12px!important}
  body[data-portal-page] #payment-request-v257 .pr260-heading h2{font-size:16px!important}
  body[data-portal-page] #payment-request-v257 :is(.pr260-heading p,.pr260-side-title small,.pr260-drop small){font-size:11px!important;line-height:1.5}
  body[data-portal-page] #payment-request-v257 .pr260-top .btn,body[data-portal-page] #payment-request-v257 .pr263-bottom-actions .btn{min-height:44px!important;height:auto!important;white-space:normal;font-size:12px!important}
  body[data-portal-page] #payment-request-v257 .pr257-nature-popup{max-width:100%;width:100%;max-height:min(340px,60dvh);overflow-y:auto}
  body[data-portal-page] #payment-request-v257 .pr257-nature-options button{min-height:44px}
  body[data-portal-page] #payment-request-v257 .pr260-description textarea{min-height:112px;font-size:16px!important}
  body[data-portal-page] #payment-request-v257 .pr260-reference input{min-height:44px;font-size:16px!important}
}
@media screen and (max-width:380px){
  body[data-portal-page] .topbar{padding-inline:6px;gap:0}
  body[data-portal-page] .topbar-actions{gap:0}
  body[data-portal-page] .mini-stat-row{grid-template-columns:minmax(0,1fr)}
  body[data-portal-page] .mini-stat{min-width:0;max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
  body[data-portal-page] .ot285 .ot-kpi-grid{grid-template-columns:minmax(0,1fr)}
  body[data-portal-page] .ot285 .ot-kpi{min-height:105px}
  body[data-portal-page] .approval-stepper{grid-template-columns:minmax(0,1fr)}
  body[data-portal-page] .approval-step-top{flex-direction:row}
  body[data-portal-page] .chart-body{grid-template-columns:minmax(0,1fr)!important;justify-items:center;gap:14px}
}
@media screen and (max-height:620px){
  body[data-portal-page] .sidebar .brand{padding-block:12px}
  body[data-portal-page] .sidebar .reference-brand-note{display:none}
  body[data-portal-page] .sidebar .sidebar-version{display:none}
  body[data-portal-page] .sidebar-bottom{padding-block:8px;margin-top:4px}
}