/* Adapt the existing GlassRota surfaces. No separate card-based phone rota. */
.touch-shift-grip { display:none; }
.gr-touch-ghost { position:fixed!important; pointer-events:none!important; z-index:100100!important; opacity:.85; margin:0!important; transition:none!important; box-shadow:0 8px 24px #0005; }
.gr-drag-badge { position:fixed; top:0; left:0; z-index:100101; pointer-events:none; background:var(--accent-primary); color:white; border-radius:16px; padding:7px 12px; font:600 12px/1.2 system-ui; box-shadow:0 3px 12px #0003; }
.gr-drag-badge.invalid { background:#b83d3d; }
.gr-moving-source { opacity:.35; }
.gr-copy-source { outline:2px solid white; outline-offset:-3px; }
.gr-drop-target { box-shadow:inset 0 0 0 2px var(--accent-primary); }
.gr-drop-invalid { box-shadow:inset 0 0 0 2px var(--accent-danger); }
@media(max-width:1100px) and (any-pointer:coarse) {
    .touch-rota .shift,.touch-rota .week-shift-entry { touch-action:pan-x pan-y; -webkit-touch-callout:none; user-select:none; }
    .touch-rota .shift { min-height:0; box-sizing:border-box; }
    .touch-rota .touch-shift-grip { display:flex; position:absolute; bottom:2px; left:2px; align-items:center; justify-content:center; width:28px; height:28px; min-width:0; min-height:0; padding:5px 8px; margin:0; background:transparent; border:0; border-radius:3px; color:white; box-shadow:none; touch-action:none; cursor:grab; z-index:8; }
    .touch-shift-grip svg { width:10px; height:16px; pointer-events:none; }
    .touch-rota .shift-handle,.touch-rota .shift-delete-btn,.touch-rota .week-shift-delete-btn { display:none!important; }
    .touch-rota .dropdown-item,.touch-rota .nav-tab { min-height:44px; }
    .touch-rota .employee-shifts-row,.touch-rota .employee-row-header { flex-shrink:0; box-sizing:border-box; }
    .touch-rota .employee-header { position:sticky; top:0; z-index:950; }
    .touch-rota .context-row-header { top:60px!important; flex-shrink:0; }
    .touch-rota .context-row-track { flex-shrink:0; }
    .touch-rota #employee-list-container { overflow-y:auto; scrollbar-width:none; }
    .touch-rota #deployment-graph-container { min-width:0!important; }
    .touch-rota .employee-spacer-row { flex-shrink:0; }
    .touch-rota .week-shift-entry { position:relative; padding-bottom:8px; min-height:38px; }
    .touch-rota .week-shift-entry .touch-shift-grip { left:0; bottom:0; width:24px; height:24px; padding:4px 7px; }
    .touch-rota .week-shift-time { padding-left:18px; }
}
@media(min-width:701px) and (max-width:1100px) {
    .app-header { height:auto; min-height:76px; flex-wrap:nowrap; gap:10px; padding:6px 12px; }
    .app-header .title-date { flex:1; flex-wrap:wrap; min-width:0; gap:6px 10px; }
    .app-header .title-date>img { width:140px; height:auto!important; margin:0!important; }
    #current-user-display,#current-date-display { display:none!important; }
    .health-widget-wrapper { margin:0!important; }
    #venue-switcher-container { margin:0!important; padding:0!important; border:0!important; min-width:0; }
    #venue-switcher-btn { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-financials { flex-basis:100%; margin:0!important; font-size:11px!important; white-space:nowrap; }
    .header-actions { gap:6px; align-self:flex-start; padding-top:2px; }
    .gr-theme-toggle { width:38px; height:38px; }
    #manage-btn { min-height:38px; padding:8px 10px; }
    .day-view-controls,.week-view-controls { flex-wrap:nowrap; height:54px; box-sizing:border-box; gap:6px; padding:6px 12px; }
    .day-view-controls>label,.week-view-controls>label { display:none; }
    .day-view-controls>div:not(.premium-action-group):not(.header-spacer) { display:none; }
    .day-view-controls input[type="date"],.week-view-controls input[type="date"] { width:126px; min-width:0; box-sizing:border-box; font-size:12px; }
    .day-view-action-button,.week-view-action-button { white-space:nowrap; padding:7px 9px; font-size:12px; }
    .premium-action-group { margin-left:0!important; padding-left:4px!important; gap:0!important; flex-shrink:0; }
    .premium-action-group .icon-button { padding:6px; }
    #daily-brief-btn { margin-right:0!important; padding:7px!important; font-size:12px!important; white-space:nowrap; }
    #add-employee-shortcut-btn-day-header,#add-employee-shortcut-btn-week { display:none!important; }
    #export-pdf-btn { white-space:nowrap; font-size:12px; padding:7px; }
    .modal-content { max-width:calc(100vw - 32px)!important; max-height:calc(100dvh - 32px)!important; overflow:auto; }
}
@media(min-width:701px) and (max-width:900px) {
    #day-view-forecast-btn,#week-costs-btn { font-size:0; }
    #day-view-forecast-btn::after,#week-costs-btn::after { content:'Costs'; font-size:12px; }
    #daily-brief-btn { font-size:0!important; gap:0!important; width:32px; height:32px; justify-content:center; }
    #daily-brief-btn svg { width:16px!important; height:16px!important; }
}
@media(max-width:700px) {
    :root { --employee-list-width:112px; --sidebar-width:112px; --hour-width:62px; --row-height:70px; }
    body { min-width:0!important; padding-bottom:0!important; overflow:hidden; }
    #app-content-container { height:100dvh!important; min-width:0; overflow:hidden; padding-bottom:0; box-sizing:border-box; }
    .app-header { height:auto!important; min-height:70px; padding:8px 10px!important; gap:6px!important; flex-shrink:0; flex-wrap:nowrap; }
    .title-date { flex:1; min-width:0; gap:6px!important; flex-wrap:wrap; }
    .app-header .title-date>img { max-width:110px; height:auto!important; max-height:34px; margin:0!important; object-fit:contain; }
    #current-date-display,#current-user-display,.header-financials { display:none!important; }
    .health-widget-wrapper { margin:0!important; }
    .health-dropdown { position:fixed!important; left:10px!important; right:10px!important; top:100px!important; width:auto!important; max-height:calc(100dvh - 170px)!important; }
    .health-list-container { max-height:calc(100dvh - 270px)!important; }
    #venue-switcher-container { flex-basis:100%; margin:0!important; padding:0!important; border:0!important; min-width:0; }
    #venue-switcher-btn { max-width:100%; padding:5px 10px!important; min-height:32px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-actions,.header-controls { gap:6px!important; }
    #manage-btn { min-height:40px; padding:8px!important; }
    .gr-theme-toggle { width:38px; height:38px; }
    .header-actions .header-help-btn { display:none; }
    #manage-dropdown,#venue-dropdown { position:fixed!important; top:95px!important; left:10px!important; right:10px!important; width:auto!important; max-height:calc(100dvh - 155px); overflow:auto; z-index:10010!important; }
    .dropdown-item { min-height:44px; white-space:normal; }
    .app-main { min-width:0; min-height:0; overflow:hidden; }
    #day-view-container,#week-view-container { flex:1; min-width:0; min-height:0; overflow:hidden; }
    .day-view-controls,.week-view-controls { display:none!important; }
    .day-view-main-content { flex:1; min-height:0; }
    .gr-phone-toolbar { display:flex; flex-wrap:wrap; align-items:center; padding:4px 8px 0; border-bottom:1px solid var(--border-color); background:var(--bg-secondary); flex-shrink:0; gap:2px; z-index:100; }
    .gr-compact-button,.gr-rota-more>summary { display:flex; align-items:center; justify-content:center; width:36px; height:40px; min-height:40px; flex:0 0 36px; margin:0; padding:8px; color:var(--text-secondary); background:transparent; border:0; border-radius:6px; cursor:pointer; box-sizing:border-box; }
    .gr-compact-button:hover,.gr-rota-more>summary:hover { color:var(--accent-primary); background:var(--bg-tertiary); }
    .gr-compact-button:disabled { opacity:.3; }
    .gr-compact-button svg,.gr-rota-more svg { width:18px; height:18px; }
    .gr-date-picker { flex:1; min-width:95px; text-align:center; position:relative; font-size:13px; font-weight:600; color:var(--text-primary); white-space:nowrap; line-height:40px; }
    .gr-date-picker input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
    .gr-rota-more { position:relative; }
    .gr-rota-more summary { list-style:none; }
    .gr-rota-more summary::-webkit-details-marker { display:none; }
    .gr-rota-actions { position:absolute; right:0; top:100%; width:240px; padding:8px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-secondary); box-shadow:0 10px 35px #0004; }
    .gr-rota-actions .dropdown-item { display:block; width:100%; text-align:left; }
    .gr-gesture-hint { color:var(--text-secondary); font-size:12px; line-height:1.5; padding:8px; }
    .gr-phone-financials { display:flex; justify-content:space-between; flex-basis:100%; margin:0; padding:8px 6px 10px; gap:14px; color:var(--text-primary); background:transparent; border:0; text-align:left; cursor:pointer; }
    .gr-phone-financials>span { display:flex; gap:5px; align-items:baseline; }
    .gr-phone-financials small { color:var(--text-secondary); font-size:10px; }
    .gr-phone-financials strong { font-size:12px; font-weight:600; }
    .employee-header,.timeline-header { height:42px; min-height:42px; }
    .employee-header { font-size:11px; }
    .phone-rota .context-row-header { top:42px!important; font-size:11px; padding:0 6px; }
    .employee-row-header { padding:6px 8px; }
    .employee-name { font-size:11px; line-height:1.2; }
    .employee-name-row { flex-wrap:wrap; gap:3px; }
    .employee-weekly-hours { font-size:9px; margin-left:0; }
    .employee-department,.employee-job-title { font-size:9px; margin-top:1px; }
    .shift { font-size:10px; }
    .shift-time,.shift-hours { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .shift-edit-btn { display:none; }
    #rota-grid-scrollable { padding-bottom:155px; }
    #employee-list { padding-bottom:155px; }
    #deployment-graph-container { min-width:0!important; overflow:visible; bottom:calc(50px + env(safe-area-inset-bottom))!important; left:112px!important; height:130px!important; }
    #deployment-graph-container.hidden { height:0!important; }
    #deployment-graph-container .graph-toggle-lip { position:absolute; bottom:100%; left:0; right:0; height:26px; transform:none!important; padding:4px 12px!important; margin:0!important; width:100%!important; white-space:nowrap; font-size:10px!important; }
    #deployment-graph-container .graph-content-wrapper { overflow-x:auto; }
    #deployment-graph-container svg { height:125px; }
    #bottom-nav { padding-bottom:env(safe-area-inset-bottom); overflow-x:auto; justify-content:flex-start; z-index:100!important; box-shadow:none!important; }
    #bottom-nav .nav-tab { min-width:43px; min-height:50px; padding:6px; flex:1 0 auto; font-size:11px; }
    #week-view-container { overflow:auto; }
    #week-view-grid-table { min-width:960px; }
    #boutique-filter-dropdown { position:fixed!important; inset:auto 8px calc(62px + env(safe-area-inset-bottom))!important; width:auto!important; max-height:70dvh; overflow:auto; box-sizing:border-box; z-index:10020!important; }
    .b-dept-pill { min-height:40px; box-sizing:border-box; display:flex; align-items:center; }
    .modal { padding:0!important; align-items:stretch!important; z-index:20000!important; }
    .modal-content { width:100%!important; min-width:0!important; max-width:100%!important; height:auto!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; padding:20px 16px calc(20px + env(safe-area-inset-bottom))!important; overflow:auto!important; box-sizing:border-box; overscroll-behavior:contain; }
    .modal-content input,.modal-content select,.modal-content textarea { font-size:16px!important; max-width:100%; box-sizing:border-box; }
    .modal-content .modal-actions { position:sticky; bottom:0; background:var(--bg-secondary); padding:12px 0; flex-wrap:wrap; z-index:2; }
    #modal-update-shift-btn { position:sticky; bottom:0; z-index:2; min-height:48px; margin-top:16px; }
    .modal-content button,.modal-close { min-height:44px; min-width:44px; }
    .modal-content table { display:block; max-width:100%; overflow-x:auto; }
    .modal-content .form-row,.time-inputs-container,.weight-pills-container { flex-wrap:wrap; }
    #global-nav-container { overflow-x:auto; flex-shrink:0; max-width:100%; }
    #glassrota-trial-banner { font-size:11px!important; gap:4px!important; padding:5px 8px!important; }
}