/* Mobile layout is isolated from the desktop layout. */
.mobile-nav,.mobile-menu-close{display:none}
@media(max-width:720px){
 html{width:100%;scroll-padding-bottom:90px}
 body{width:100%;min-width:0;-webkit-text-size-adjust:100%}
 main{margin:0;min-width:0;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
 button,input,select,textarea,summary{touch-action:manipulation}
 input,select,textarea,.field input,.field select,.field textarea,.filters input,.filters select,.client-combo>input,.table-wrap .inline,.table-wrap .date-shell>input[type=text]{font-size:16px!important}
 button,summary,.row-actions button,#account-controls button{min-height:44px}
 input,select{min-height:44px}
 .signed-out .mobile-nav{display:none}
 .mobile-nav{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:0;padding:7px 6px calc(7px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);box-shadow:0 -3px 16px #0B2A580A}
 .mobile-nav button{display:flex;justify-content:center;align-items:center;padding:9px 3px;font-size:12px;gap:4px;border-radius:8px}
 .mobile-nav button span{font-size:12px}
 aside{display:none}
 body.mobile-menu-open aside{display:block;position:fixed;inset:0 0 calc(70px + env(safe-area-inset-bottom));width:auto;height:auto;overflow-y:auto;z-index:35;padding:24px 18px;background:#fff}
 body.mobile-menu-open aside nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:16px}
 body.mobile-menu-open aside .brand{margin:0 0 20px}
 .mobile-menu-close{display:block;margin:0 0 16px auto}
 header{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));gap:6px}
 header>span:first-child{display:none}
 #account-controls{width:100%;justify-content:flex-end;gap:6px;flex-wrap:wrap}
 #account-controls>span{margin-right:auto;max-width:100%;overflow-wrap:anywhere}
 #account-controls button{font-size:12px;padding:8px}
 .workspace{width:100%;padding:0 10px 16px;min-width:0}
 .heading{padding:10px 0;gap:8px;align-items:stretch;top:env(safe-area-inset-top);z-index:25;margin-bottom:12px}
 .heading h1{font-size:24px;margin:3px 0}
 .heading .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;min-width:0}
 .heading .actions button{font-size:13px;padding:10px 6px;min-width:0;white-space:normal}
 #direct-time{grid-column:1/-1;order:3}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
 .stat{padding:12px!important;min-width:0}
 .stat-value{font-size:23px;margin:8px 0}
 .stat small{font-size:11px;overflow-wrap:anywhere}
 .panel{min-width:0;border-radius:12px}
 .panel-top{padding:8px;display:block}
 #tabs{display:flex;flex-wrap:wrap;gap:4px}
 #tabs button{flex:1 1 auto;padding:8px;font-size:12px}
 #view-switch{display:none!important}
 .filters{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px}
 .filters>*{width:100%;min-width:0!important;max-width:none!important}
 .filters:not(.mobile-filters-open)>:not(input[name=q]):not(.user-filter):not(.mobile-filter-toggle){display:none}
 .filters input,.filters select,.filters .client-combo,.filters .client-search,.filters .date-shell{width:100%;min-width:0;max-width:none}
 .filters label{font-size:12px;justify-content:space-between}
 .filters label .date-shell{width:75%}
 .user-filter summary{min-height:46px}
 .user-filter-panel{position:static;width:100%;max-width:100%;max-height:280px;box-shadow:none;margin-top:6px}
 .client-combo,.field,.client-search{min-width:0;max-width:100%}
 .client-options{top:48px;max-height:240px}
 .client-options button{min-height:44px;white-space:normal;overflow-wrap:anywhere}
 .can-create-client>.create-client,.can-create-project>.create-client{height:36px;min-height:36px;top:4px}
 .field-row{grid-template-columns:minmax(0,1fr)}
 .field .date-shell{min-width:0}
 .calendar-native{min-height:44px}
 .table-wrap{overflow:visible}
 .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%;min-width:0!important}
 .table-wrap thead{display:none}
 .table-wrap tr{padding:12px;border-bottom:8px solid #f6f7f9}
 .table-wrap td{padding:8px 0!important;border:0;overflow-wrap:anywhere}
 .table-wrap td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-weight:600;color:var(--muted);font-size:12px;margin-bottom:5px}
 .column-resize{display:none}
 .mobile-task-cards{display:grid;gap:12px;padding:10px}
 .mobile-task-card{border:1px solid var(--border);border-radius:12px;padding:14px;min-width:0;background:white}
 .mobile-task-card p{overflow-wrap:anywhere}
 .mobile-task-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;color:var(--muted)}
 .mobile-task-title{display:block;text-align:left;width:100%;border:0;background:transparent;padding:10px 0;font-size:17px;font-weight:650;overflow-wrap:anywhere}
 .mobile-task-date{margin-top:8px;color:var(--accent);font-weight:600}
 .mobile-task-hours{margin-top:10px;border-top:1px solid var(--border)}
 .mobile-task-hours>p{font-size:13px;padding:12px 0}
 .mobile-task-hours .sessions input{width:100%;min-height:44px}
 .row-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
 .row-actions button{flex:1;padding:10px 8px;font-size:13px}
 .kanban{grid-template-columns:minmax(0,1fr)!important;padding:10px;overflow:visible}
 .kanban-column{min-height:0;min-width:0;padding:10px}
 .cards{grid-template-columns:minmax(0,1fr);padding:10px}
 .card{min-width:0;overflow-wrap:anywhere}
 .calendar-toolbar{padding:10px;gap:10px;display:block}
 .calendar-navigation{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 50px;gap:4px}
 .calendar-navigation h2{min-width:0;font-size:16px}
 .calendar-navigation button{padding:8px 3px}
 .calendar-modes{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}
 .calendar-agenda-events,.calendar-undated-list{grid-template-columns:minmax(0,1fr)}
 .calendar-event{padding:12px;font-size:14px}
 .calendar-event-title{font-size:14px}
 .calendar-event-heading,.calendar-event-heading strong,.calendar-event small{font-size:12px}
 .mobile-month{padding:0 8px 12px}
 .mobile-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
 .mobile-weekday{text-align:center;color:var(--muted);padding:8px 0;font-size:12px}
 .mobile-month-day{padding:4px 0;min-width:0;min-height:48px;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;gap:2px}
 .mobile-month-day small{font-size:10px;min-height:12px}
 .mobile-month-day.outside{color:#8b9590;background:var(--accent-subtle)}
 .mobile-month-day[aria-current=date]{box-shadow:inset 0 0 0 1px var(--accent)}
 .mobile-month-day[aria-pressed=true]{background:var(--accent);color:white}
 .mobile-day-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 8px}
 .mobile-day-heading h3{font-size:16px;margin:0}
 dialog,#modal{width:100%;max-width:100%;height:var(--mobile-viewport,100dvh);max-height:var(--mobile-viewport,100dvh);margin:0;border:0;border-radius:0;inset:0;padding:16px;padding-top:max(16px,env(safe-area-inset-top));overflow-y:auto}
 #modal{padding:0;overflow:hidden}
 #editor{height:100%;max-height:100%;min-height:0}
 #editor .modal-head{padding:12px;gap:8px;display:flex;flex-wrap:wrap;padding-top:max(12px,env(safe-area-inset-top))}
 #editor .modal-head h2{flex:1 0 100%;font-size:19px}
 #editor .modal-actions{display:flex;flex-wrap:wrap;width:100%;gap:6px;margin:0}
 #editor .modal-actions button{min-height:44px;flex:1;padding:9px 6px;font-size:13px;white-space:normal}
 #editor .modal-actions #close{flex:0 0 44px}
 .modal-body{padding:16px 12px max(24px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior-y:contain}
 .field{font-size:13px}
 .field textarea{min-height:110px}
 .quick-client-body,.export-dialog .quick-client-body{padding:16px 12px}
 .quick-client-head{padding:12px;gap:8px}
 .file-row>span,.file-row>a{min-width:0}
 #toast{left:12px;right:12px;bottom:calc(85px + env(safe-area-inset-bottom));max-width:none;transform:none;text-align:center;overflow-wrap:anywhere}
 #foot{flex-wrap:wrap;gap:8px}
 .login-card{padding:24px 18px}
 body:has(dialog[open]){overflow:hidden}
}