/* 10.19: one responsive layout for phones, unfolded touch screens and desktop. */
/* Safe insets protect top controls, not a blank stripe along the whole page. */
body{padding-inline:0}
.topbar{--topbar-gutter:38px;padding-left:max(var(--topbar-gutter),var(--safe-left));padding-right:max(var(--topbar-gutter),var(--safe-right))}
.modal-backdrop,.modal-backdrop:has(.work-modal){padding-inline:12px}
.modal .modal-head{--modal-head-gutter:25px;padding-left:max(var(--modal-head-gutter),var(--safe-left));padding-right:max(var(--modal-head-gutter),var(--safe-right))}
.main{min-width:0}
/* A stable row height prevents wheel selection drifting across breakpoints. */
.work-modal .wheel-field{--wheel-row:44px}
.content,.panel-body,.modal form,.modal-head h2{min-width:0}
.modal-head{gap:16px;position:sticky;top:0;z-index:3;background:var(--surface,#fff)}.modal-head h2{overflow-wrap:anywhere}.modal-head .icon-btn{flex-shrink:0}
.modal-backdrop{overscroll-behavior:contain}
.modal{overscroll-behavior:contain;scroll-padding-block:80px}
body:has(.modal-backdrop){overflow:hidden}
.form-actions{flex-wrap:wrap}.form-actions .btn{max-width:100%;white-space:normal}
.table-wrap{max-width:100%;overscroll-behavior-x:contain}
.topbar{flex-wrap:wrap}.top-actions{min-width:0}.page-head>div{min-width:0}
/* Width stays CSS-driven; only the keyboard's visible height needs JS on iOS. */
.keyboard-visible .modal-backdrop{top:var(--keyboard-top);bottom:auto;height:var(--keyboard-height);padding-block:8px;align-items:flex-start}
.keyboard-visible .modal-backdrop .modal{max-height:calc(var(--keyboard-height) - 16px)}
.keyboard-visible .modal-head{position:static}
.keyboard-visible .modal .form-actions{position:static}
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){
 .layout,.layout.sidebar-collapsed{display:block}
 .main{width:100%}
 .sidebar,.sidebar-collapsed .sidebar{width:252px;max-width:calc(100vw - 56px);z-index:50;transform:translateX(calc(-100% - var(--safe-left)));visibility:hidden;pointer-events:none}
 .sidebar.open,.sidebar-collapsed .sidebar.open{transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:0 0 0 100vmax #0006}
 .breadcrumb{display:none}.mobile-menu{display:flex}
 .topbar{--topbar-gutter:16px;gap:10px}.top-actions{gap:8px}
 .btn,.icon-btn{min-height:44px}.icon-btn{min-width:44px;justify-content:center}
 .content{max-width:none}
}
@media(min-width:761px) and (max-width:1366px){
 .content{padding:24px 24px calc(32px + var(--safe-bottom))}
 .modal-backdrop .modal{width:100%;max-width:1040px}
 .modal-backdrop .invoice-review-modal{max-width:1160px}
 .modal .modal-head{--modal-head-gutter:24px;padding-block:24px}.modal form{padding:24px}
 .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .quick-work>.form-grid>.field.full{grid-column:auto}
 .quick-work>.form-grid>.internal-entry{align-self:stretch}
 .field input,.field select,.field textarea,.search input{font-size:16px;min-height:44px}
 .page-head{flex-wrap:wrap}.page-head .right-actions{flex-wrap:wrap}
 .work-table .work-time{white-space:normal}
 .ticket-table table{min-width:0}.ticket-table th,.ticket-table td{overflow-wrap:anywhere}
 .ticket-table th{white-space:normal}
 .overview-split,.reports-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .grid-main,.details-grid{grid-template-columns:1fr}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* The unfolded screen has room for the same two panels as desktop. */
 .login{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
 .login-art{padding:clamp(24px,4vw,50px);min-width:0}
 .login-art h1{font-size:clamp(36px,4.5vw,60px)}
 .login-box{padding-inline:clamp(24px,4vw,45px)}
}
@media(min-width:1100px) and (max-width:1366px){
 .grid-main{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}
 .details-grid{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr)}
}
@media(max-width:600px){
 .topbar{--topbar-gutter:8px;gap:4px}.top-actions{gap:2px}
 .topbar>.mobile-menu{min-width:32px}.topbar .top-actions>.icon-btn{min-width:36px}
}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}}

/* Inner views use the space of their panel, including tables inside dialogs.
   Desktop column widths must never squeeze the unfolded-phone layout. */
.adaptive-records{container:records / inline-size;min-width:0}
@container records (max-width:1100px){
 .table-wrap.adaptive-records>table{display:block!important;table-layout:auto!important;min-width:0!important;width:100%!important}
 .table-wrap.adaptive-records>table>thead{display:table-header-group!important;position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
 .table-wrap.adaptive-records>table>tbody,.table-wrap.adaptive-records>table>tfoot{display:block!important;width:100%}
 .table-wrap.adaptive-records>table>tbody>tr,.table-wrap.adaptive-records>table>tfoot>tr{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 24px;padding:22px!important;border-bottom:1px solid var(--line);width:100%}
 .table-wrap.adaptive-records>table>tbody>tr:first-child{border-top:1px solid var(--line)}
 .table-wrap.adaptive-records>table>tbody>tr>td,.table-wrap.adaptive-records>table>tfoot>tr>td{display:block!important;min-width:0!important;max-width:none!important;width:auto!important;padding:0!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere;font-size:14px;line-height:1.55;text-align:left}
 .table-wrap.adaptive-records>table>tbody>tr>td::before,.table-wrap.adaptive-records>table>tfoot>tr>td::before{content:attr(data-record-label)!important;display:block!important;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0;line-height:1.5;margin-bottom:5px}
 .table-wrap.adaptive-records>table>tbody>tr>td.record-wide,.table-wrap.adaptive-records>table>tfoot>tr>td.record-wide{grid-column:1/-1}
 .table-wrap.adaptive-records>table>tbody>tr>td.record-wide::before,.table-wrap.adaptive-records>table>tfoot>tr>td.record-wide::before{display:none!important}
 .table-wrap.adaptive-records>table>tbody>tr>td.record-actions,.table-wrap.adaptive-records>table>tfoot>tr>td.record-actions{display:flex!important;flex-wrap:wrap;gap:10px}
 .table-wrap.adaptive-records>table .cell-sub,.table-wrap.adaptive-records>table .ticket-num{font-size:12px;line-height:1.5}
 .table-wrap.adaptive-records>table .ticket-client b,.table-wrap.adaptive-records>table .ticket-title{font-size:15px;line-height:1.5}
 .table-wrap.adaptive-records>table .work-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
 .table-wrap.adaptive-records>table .work-actions .btn{width:auto}
 .table-wrap.adaptive-records>table .work-description summary{font-size:14px;padding:10px 0}
 .table-wrap.adaptive-records>table .work-time{font-size:15px;white-space:normal}
 .table-wrap.adaptive-records>table .badge{font-size:12px;white-space:normal}
 .table-wrap.adaptive-records>table .btn{min-height:44px;font-size:13px;white-space:normal}
}
@container records (max-width:600px){
 .table-wrap.adaptive-records>table>tbody>tr,.table-wrap.adaptive-records>table>tfoot>tr{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:18px 16px!important}
}
@container records (max-width:300px){
 .table-wrap.adaptive-records>table>tbody>tr,.table-wrap.adaptive-records>table>tfoot>tr{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1366px){
 #app:not([data-view="dashboard"]) .content .panel-head p{font-size:13px;line-height:1.6}
 #app:not([data-view="dashboard"]) .content .kv{font-size:14px;line-height:1.6}
 #app:not([data-view="dashboard"]) .content .tabs{flex-wrap:wrap;gap:4px 20px;overflow:visible;padding-bottom:8px}
 #app:not([data-view="dashboard"]) .content .tab{font-size:14px;min-height:44px}
 .modal .kv{font-size:14px;line-height:1.6}
 .modal .form-hint{font-size:13px;line-height:1.65}
 .modal .field{font-size:13px}
 .modal .field input,.modal .field select,.modal .field textarea{font-size:16px}
}
@media(min-width:761px) and (max-width:1100px){
 #app:not([data-view="dashboard"]) .overview-split{grid-template-columns:minmax(0,1fr)}
 .compact-report-main{grid-template-columns:minmax(0,1fr) auto}
 .compact-report .report-actions{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
 .work-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .work-filters .field{min-width:0}
}
@media(max-width:760px){
 .modal .modal-head{--modal-head-gutter:16px}
 #app:not([data-view="dashboard"]) .page-head{flex-wrap:wrap}
 #app:not([data-view="dashboard"]) .page-head .right-actions{justify-content:flex-start}
 #app:not([data-view="dashboard"]) .toolbar .search{min-width:0;flex-basis:100%}
 .modal .invoice-review-grid{grid-template-columns:minmax(0,1fr)}
 .modal .form-actions{gap:12px}
}

@container records (max-width:1100px){.table-wrap.adaptive-records>table>tbody>tr>td:first-child>b{font-size:16px}}
@container records (max-width:1100px){
 .table-wrap.adaptive-records>table .billing-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:flex-start}
 .table-wrap.adaptive-records>table .billing-actions .btn{width:auto;min-height:44px;flex:0 1 auto}
 .table-wrap.adaptive-records>table>tfoot>tr>td:empty{display:none!important}
}
@container records (min-width:700px) and (max-width:1100px){
 .table-wrap.adaptive-records.ticket-table>table>tbody>tr{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:1366px){
 .compact-report h3{font-size:15px;line-height:1.5}
 .compact-report .report-actions .btn{font-size:13px}
}
@media(min-width:761px) and (max-width:1366px){
 #app:not([data-view="dashboard"]) .table-wrap td{font-size:14px;line-height:1.5}
 #app:not([data-view="dashboard"]) .table-wrap th{font-size:11px;white-space:normal}
 #app:not([data-view="dashboard"]) .table-wrap .cell-sub{font-size:12px;line-height:1.5}
 #app:not([data-view="dashboard"]) .table-wrap .ticket-title,#app:not([data-view="dashboard"]) .table-wrap .ticket-client b{font-size:14px}
}
@media(max-width:1100px){
 #app:not([data-view="dashboard"]) .overview-split .kv{display:grid;grid-template-columns:minmax(100px,.8fr) minmax(0,1.4fr);gap:16px}
}
@container records (max-width:1100px){
 .table-wrap.adaptive-records>table>tfoot.work-totals>tr>td::before{display:none!important}
}
@media(min-width:761px) and (max-width:1366px){
 #app:not([data-view="dashboard"]) .table-wrap .work-time{font-size:15px}
}

/* Every multiline editor reserves four text lines, including mobile font sizes. */
body textarea,body .field textarea,body .inline-form textarea,body .quick-work textarea{
 line-height:1.5;
 padding-block:11px;
 min-height:calc(6em + 24px);
 resize:vertical;
}