/* Shared mobile layout. Documents keep their original layout when printed. */
.mobile-cell-label{display:none}
.portal-menu-close{display:none}
@media screen{
  .metric.highlight,.metric.highlight .metric-head,.metric.highlight .metric-foot,.metric.highlight .metric-value,.weekhead{color:var(--ink)}
}
@media screen and (max-width:1024px){
  :root{--mobile-gutter:clamp(16px,4.5vw,24px)}
  html{scroll-padding-block:80px 24px}
  body{overflow-wrap:break-word}
  .login{grid-template-columns:minmax(0,1fr);padding-inline:20px}
  .login-wrap{width:min(100%,390px);min-width:0;margin-inline:auto}
  .shell,.portal-shell{display:block}
  .main,.workspace,.content,.panel,.wk-card,.field,.actions{min-width:0}
  .content,.portal-shell .workspace{padding:28px var(--mobile-gutter) max(32px,env(safe-area-inset-bottom));width:100%}
  .content>:is(.panel,.wk-card,.metrics,.callout,.toolbar,.wk-grid,.records-section){margin-bottom:24px}
  .metrics,.grid-main,.grid-equal,.wk-grid{gap:16px}
  .metric{padding:20px}.metrics-three .metric-head,.metrics-three .metric-foot{font-size:14px;line-height:1.5}
  .pagehead,.heading{align-items:flex-start;flex-wrap:wrap;gap:18px;margin-bottom:28px}
  h1,.pagehead h1,.heading h1{font-size:clamp(28px,7.5vw,36px);line-height:1.2}
  .pagehead p,.heading p{font-size:15px;line-height:1.65}
  .pagehead>.actions,.heading>.actions{width:100%;gap:10px;flex-wrap:wrap}
  .btn,.btn.small,.iconbtn,.navitem,.tab,.brand-month-arrow{min-height:44px}
  .iconbtn{min-width:44px;width:44px;height:44px;flex:none}
  .btn,.btn.small{padding:11px 14px;font-size:14px;line-height:1.5;white-space:normal;overflow-wrap:break-word}
  .btn svg{flex:none}
  input:not([type=checkbox]):not([type=radio]),select,textarea,.field input,.wk-drawer .field input,.wk-drawer .field select,.wk-drawer .field textarea{font-size:16px;max-width:100%;min-width:0}
  .field{margin-block:18px}.field label{font-size:14px;line-height:1.5;margin-bottom:8px}
  .field input:not([type=checkbox]):not([type=radio]),.field select{min-height:48px}
  .field textarea{min-height:116px;line-height:1.6}
  .sb-form-grid,.sb-company-columns,.sb-profile-layout,.rp-form-grid,.rp-entry-fields,.fn-form-grid,.wk-form-grid,.detail-grid,.settings-grid,.pf-fields{grid-template-columns:minmax(0,1fr);gap:0}
  .detail-grid{gap:18px}.sb-company-columns{gap:24px}
  .toolbar,.rp-toolbar,.expense-toolbar{align-items:stretch;gap:14px}
  .toolbar .searchfield,.toolbar .actions,.toolbar select{width:100%;max-width:100%;min-width:0}
  .searchfield input{min-height:46px;font-size:16px}
  .tabs,.rp-tabs,.candidate-controls .tabs{display:flex;flex-wrap:wrap;overflow:visible;width:100%;max-width:100%;gap:6px;white-space:normal}
  .tab{flex:1 1 auto;padding:10px 12px;text-align:center;font-size:14px;white-space:normal}
  .rp-tabs .tab{flex:1 1 125px}.rp-tabs{margin-block:0 22px}
  .topbar,.portal-shell .topbar{position:sticky;top:0;z-index:40;height:auto;min-height:64px;padding:10px var(--mobile-gutter);padding-top:max(10px,env(safe-area-inset-top));gap:8px}
  .breadcrumb{min-width:0;gap:6px}.breadcrumb b{font-size:14px;overflow-wrap:anywhere}.workspace-crumb{display:none!important}
  .top-actions{gap:4px;flex:none}.top-actions .demo{display:none}.mobile-menu{display:inline-flex}
  .top-actions select,.weekend-toggle{min-height:44px}
  .sidebar,.portal-shell .sidebar{position:fixed;inset:0 auto 0 0;z-index:90;width:min(300px,calc(100vw - 48px));height:100dvh;transform:translateX(-110%);overflow-y:auto;padding:24px 18px max(20px,env(safe-area-inset-bottom));padding-top:max(24px,env(safe-area-inset-top))}
  .sidebar.open,.menu-open .sidebar{transform:translateX(0)}
  .portal-nav-open{overflow:hidden}.portal-menu-close{display:block;align-self:flex-end;margin-bottom:18px}
  .sidebar .navitem{font-size:15px;padding:12px;gap:12px}.sidebar .profile,.sidebar-user{padding-top:20px}
  .menu-open .sidebar-backdrop{display:block;position:fixed;inset:0;z-index:89;background:rgb(23 25 28 / 45%);border:0}
  .drawer,.drawer.wide,.drawer.invoice-drawer{width:100%;max-width:100%;height:var(--visual-height,100dvh);max-height:var(--visual-height,100dvh);top:var(--visual-top,0px)}
  .drawer-head{flex:none;padding:16px var(--mobile-gutter);padding-top:max(16px,env(safe-area-inset-top));gap:16px;align-items:flex-start}
  .drawer-head h2{margin:5px 0;font-size:clamp(18px,4.8vw,21px);line-height:1.4;min-width:0}
  .drawer-body,.wk-drawer .drawer-body,.invoice-drawer .drawer-body{min-height:0;padding:24px var(--mobile-gutter);overscroll-behavior:contain;scroll-padding-block:20px;-webkit-overflow-scrolling:touch}
  .drawer-foot,.wk-drawer .drawer-foot{position:static;flex:none;gap:10px;padding:14px var(--mobile-gutter) max(14px,env(safe-area-inset-bottom));max-height:40%;overflow-y:auto;box-shadow:0 -4px 16px rgb(0 0 0 / 4%)}
  .drawer-foot .btn{flex:1 1 130px;min-width:0}.drawer-foot .btn.primary{flex-basis:100%}
  .modal{top:calc(var(--visual-top,0px) + var(--visual-height,100dvh)/2);width:calc(100% - 32px);max-height:calc(var(--visual-height,100dvh) - 32px);padding:24px 20px;overscroll-behavior:contain}
  .modal>h2{padding-right:40px;font-size:22px}.modal>.iconbtn{top:12px;right:12px}
  .modal .actions,.dialog .actions{flex-wrap:wrap;gap:10px}.modal .actions .btn,.dialog .actions .btn{flex:1 1 120px}
  .dialog-backdrop{top:var(--visual-top,0px);height:var(--visual-height,100dvh);padding:16px}
  .dialog{max-height:100%;overflow-y:auto;padding:24px 20px;overscroll-behavior:contain}
  .panel-head,.wk-card>header{padding:20px;gap:16px;flex-wrap:wrap}.wk-setting-body,.settings-body{padding:20px;line-height:1.7}
  .wk-setting-body p:last-child{margin-bottom:0}
  .callout{padding:20px;gap:16px;margin-block:0 24px}.callout .btn,.callout .linkbtn{margin-left:0}.callout .btn{width:100%}
  .callout>div{min-width:0}.callout small{line-height:1.6;margin-top:6px}
  .records-key-values>div{grid-template-columns:1fr;gap:5px;padding:14px 0}.records-key-values dd{font-size:15px}
  .records-pagination,.crm-pagination{gap:14px;align-items:stretch;flex-direction:column}.records-pagination .actions,.crm-pagination>div{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;gap:10px}
  .list-row{gap:16px;padding:20px;align-items:flex-start}.list-row>div{flex:1 1 100%;min-width:0}.list-row>.btn{width:100%}
  .note,.records-context{font-size:14px;line-height:1.7}
  .board{display:flex;flex-direction:column;gap:24px;overflow:visible}
  .wk-row{flex-wrap:wrap;padding:18px;gap:12px}.wk-row-main{flex-basis:calc(100% - 55px);min-width:0}.wk-row-tail{margin-left:0;flex-wrap:wrap}
  .wk-next,.wk-section-head,.sb-section-head{flex-wrap:wrap;gap:14px}.wk-next .btn{width:100%}
  .wk-followup-card{padding:20px;gap:18px}.wk-followup-next .actions{gap:10px}.wk-followup-next .btn{flex:1 1 140px}
  .wk-attention-filters{gap:12px}.wk-focus{min-height:100px;padding:16px}
  .wk-optional>summary{flex-wrap:wrap;gap:8px}.wk-optional>summary>span{flex-basis:100%;margin-left:26px}
  .ct-option,.cf-option{min-height:44px}.cf-panel{max-height:calc(var(--visual-height,100dvh) - 32px)}
  .fn-cost-row{grid-template-columns:minmax(0,1fr);gap:10px}.fn-cost-row button{grid-column:auto}
  .expense-card{padding:20px;margin-bottom:16px}.expense-card-head{flex-wrap:wrap;gap:12px}.expense-card-amount{max-width:100%}
  .expense-card-actions{gap:12px;margin-top:18px}.expense-card-actions .btn{flex:1 1 130px}
  .expense-toolbar .field,.expense-toolbar .actions{width:100%}.expense-toolbar .field{align-items:stretch;flex-direction:column}.expense-toolbar .brand-month-field{width:100%}
  .expense-admin-desktop{display:none}.expense-admin-mobile{display:block}
  .portal-shell .week-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .portal-shell .report-tools{gap:16px;align-items:flex-start;flex-direction:column}.portal-shell .report-tools .btn{width:100%}
  .summary-actions .actions{display:flex;flex-wrap:wrap;gap:10px}.summary-actions .btn{flex:1 1 100%}
  .report-summary{padding:20px;margin-bottom:28px}.summary-strip{gap:14px}.summary-strip strong{font-size:clamp(20px,5.5vw,26px)}.summary-strip p{font-size:13px;line-height:1.5}
  .brand-month-trigger{min-height:48px}.month-control{max-width:100%}.month-control .brand-month-field{flex:1;min-width:0}
  .pagefoot{gap:12px;margin-top:32px;padding-bottom:env(safe-area-inset-bottom);font-size:12px;line-height:1.6}
  /* Row cards retain all cells and their original table semantics. */
  .mobile-records-wrap{overflow:visible;max-height:none}
  .records-table:has(.mobile-records){background:transparent;border:0;border-radius:0;overflow:visible}
  .mobile-records,.records-table table.mobile-records,.invoice-paper .invoice-lines.mobile-records{display:block;width:100%;min-width:0;max-width:100%;table-layout:auto;white-space:normal}
  .mobile-records colgroup{display:none}
  .mobile-records thead{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mobile-records tbody{display:grid;gap:16px}
  .mobile-records tbody>tr{overflow:hidden;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
  .mobile-records tbody>tr:hover{background:var(--surface)}
  .mobile-records tbody>tr>td,.records-table .mobile-records td{display:block;position:static;min-width:0;max-width:none;width:auto;height:auto;padding:0;border:0;box-shadow:none;text-align:left;white-space:normal;overflow-wrap:anywhere;font-size:15px;line-height:1.6}
  .mobile-records tbody>tr>td:first-child{grid-column:1/-1;font-weight:500;font-size:16px;background:var(--section-tint);margin:-20px -20px 0;padding:16px 20px;border-bottom:1px solid var(--line)}
  .mobile-records td:first-child .mobile-cell-label{display:none}
  .mobile-cell-label{display:block;margin-bottom:6px;color:var(--muted);font-size:13px;font-weight:300;line-height:1.5}
  .mobile-records .cellsub{white-space:normal;font-size:14px;line-height:1.6;margin-top:5px;font-weight:300}
  .mobile-records td.mobile-actions-cell,.mobile-records td.mobile-wide-cell,.mobile-records td.records-wrap{grid-column:1/-1}
  .mobile-records .mobile-actions-cell .btn{width:100%}.mobile-records .records-cell-preview{display:block;-webkit-line-clamp:unset;overflow:visible}
  .mobile-records .badge{margin:0;white-space:normal;font-size:13px}.mobile-records .records-record{font-size:17px;min-height:44px}
  .mobile-records .crm-person{max-width:100%;width:100%;min-height:44px}.mobile-records .crm-person b{font-size:16px}
  .records-table .mobile-records .rp-missing-row{background:var(--work-plan-bg);border-left:4px solid var(--ink)}
  .records-table .mobile-records .rp-missing-row td:first-child{border-left:0}
}
@media screen and (max-width:370px){
  .mobile-records tbody>tr{grid-template-columns:minmax(0,1fr);padding:18px}
  .mobile-records tbody>tr>td:first-child{margin:-18px -18px 0;padding:16px 18px}
  .summary-strip{gap:10px}.summary-strip p{font-size:12px}
  .expense-card-head{flex-direction:column}.expense-card-amount{text-align:left}
}
@media screen and (min-width:701px) and (max-width:1024px){
  .content,.portal-shell .workspace{padding:32px}
  .mobile-records tbody{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drawer,.drawer.wide{width:min(760px,100%)}.drawer.invoice-drawer{width:min(960px,100%)}
  .drawer .mobile-records tbody{grid-template-columns:minmax(0,1fr)}
  .sb-form-grid,.rp-form-grid,.rp-entry-fields,.fn-form-grid,.wk-form-grid,.detail-grid,.settings-grid,.pf-fields{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .portal-shell .week-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{.mobile-cell-label{display:none!important}}