/* admin-responsive.css — fluid-width + viewport-fit pass (owned by this agent only; do not add JS/markup here). Loaded after admin.css, so every rule here only tightens/extends the existing responsive behaviour already in admin.css (grid auto-fit, .tbl-wrap overflow-x, the <=1180px icon-rail sidebar, the <=640/820/900px stacks). Goals: use large-monitor width instead of wasting it, make tables self-contained with a sticky header and bounded internal scroll, keep laptop widths (1366/1536) comfortable, and tighten mobile touch targets. */ /* --------------------------------------------------------------------------------------------------------------- 1) Large / ultra-wide monitors: stop the fixed 1500px content cap from leaving a dead band of empty page. The KPI/season/report grids already use `repeat(N,1fr)` or `auto-fit`, so letting the container grow simply makes the existing cards/tables wider and more readable — not a manual re-size of any single element. */ @media (min-width:1700px){ .content{max-width:1760px} } @media (min-width:2100px){ .content{max-width:2200px} } @media (min-width:2500px){ .content{max-width:2600px} /* at 2560px+ five fixed KPI columns start looking sparse; let the dashboard/report KPI rows add columns instead of just stretching each card unnecessarily wide */ .kpis.g5{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} } /* --------------------------------------------------------------------------------------------------------------- 2) Tables: sticky header + bounded height so a long list (orders, customers, payments, activity…) scrolls inside its own card instead of forcing the whole page to scroll past a fixed filter bar / KPI row. Desktop & laptop only — on narrow/touch widths a single page scroll remains the simplest, safest behaviour. */ @media (min-width:900px){ .tbl-wrap{max-height:min(640px,70vh);overflow-y:auto} .tbl-wrap table thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 var(--line)} } /* --------------------------------------------------------------------------------------------------------------- 3) Laptop (1366/1536) comfort pass: wide tables with many columns + full-text action buttons (e.g. the "الموديلات" / products table) were the one case that still needed an internal horizontal scrollbar at 1366px. Tightening padding/buttons here shrinks that overflow a lot without hiding any column or data. */ @media (max-width:1480px) and (min-width:901px){ .tbl-wrap th,.tbl-wrap td{padding:9px 10px;font-size:13px} .tbl-wrap .btn.sm{height:27px;padding:0 8px;font-size:11.5px;gap:4px} .tbl-wrap .thumb{width:36px;height:46px} } /* --------------------------------------------------------------------------------------------------------------- 4) Mobile (<=480px): the icon-only sidebar rail from admin.css's 1180px breakpoint is still a fixed 76px — shrink it further on true phone widths so it wastes less of a 390px screen, and make sure every tap target (buttons, icon buttons, nav icons) clears the 40px minimum. A real slide-in drawer would need a hamburger button + JS toggle (see report — out of scope for a CSS-only pass), so this is the best fit within CSS. */ @media (max-width:480px){ .side{width:60px} #nav a{padding:10px 6px} .btn{min-height:40px} .btn.sm{min-height:40px} .icon-btn{width:40px;height:40px} .av{width:36px;height:36px} /* quantity stepper (reservation edit) was 28px — under the 40px tap-target minimum */ .stepper button{width:40px;height:40px;font-size:16px} .stepper input{width:48px;height:40px} /* filter inputs/selects (orders, reports, customers…) were 38px tall with a 140px hard min-width that forced sideways crowding on a 360-430px phone; wrap already applies per-field, just make each field a full-width, full-height tap target once it wraps to its own line */ .filters select,.filters input{height:44px;min-width:0;flex:1 1 100%} .kv4{grid-template-columns:1fr} } /* --------------------------------------------------------------------------------------------------------------- 5) Small polish: KPI / seasons / report grids already use responsive grids, but at the exact laptop widths (1280-1480) a 5-up KPI row can get visually tight next to the 256px sidebar; drop to 3-up a little earlier than admin.css's existing 1180px step so cards keep comfortable padding instead of wrapping their numbers. */ @media (max-width:1320px) and (min-width:1181px){ .kpis.g5{grid-template-columns:repeat(3,minmax(0,1fr))} } /* --------------------------------------------------------------------------------------------------------------- 6) Settings screen (round 6 redesign, admin-settings.js): its cards use .g2e (always 2 equal columns — admin.css only auto-collapses .g2/.g3/.g5 at <=1180px, not .g2e, since the dashboard's own .g2e use needs to stay 2-up on tablets). Settings cards are each a full form, so collapse to 1 column earlier, at tablet width already, well before the 360-430px phone range this task is about. */ @media (max-width:900px){ .settings-grid{grid-template-columns:1fr} } /* --------------------------------------------------------------------------------------------------------------- 7) Mobile-first shell rebuild (<=820px, phones ~360-430px). The old pass above only shrank the icon-only rail and hid the search/season controls outright, which is exactly the "can't use it from a phone" complaint. This replaces the rail with a real off-canvas drawer (full labels, slide-in from the right since the app is RTL, overlay, Esc/overlay/item-tap to close) and keeps the topbar usable instead of hiding half of it. The matching toggle/overlay/focus JS lives in admin.js (toggleMenu-style handlers near the bottom of the file) — this file only does CSS, per this file's own header rule. Desktop/tablet (>820px) is untouched: every rule below is scoped to the <=820px (or narrower) media queries. */ @media (max-width:820px){ /* --- off-canvas drawer (overrides the <=1180px icon-rail from admin.css for this narrower range, since this stylesheet loads after admin.css and wins on equal specificity) --- */ .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none; border:1px solid var(--line);border-radius:10px;background:#fff;font-size:18px;line-height:1} .nav-toggle:hover{background:#f8fafc} .side{position:fixed;top:0;right:0;height:100vh;width:min(84vw,300px);max-width:300px; transform:translateX(100%);transition:transform .25s ease;z-index:1001;box-shadow:-16px 0 40px rgba(0,0,0,.3)} .side.open{transform:translateX(0)} .side-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:12px 12px 0 auto; border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;font-size:15px} .side-close:hover{background:rgba(255,255,255,.12)} /* re-show the full nav labels this file's own 1180px rule (and admin.css's) hides for the icon rail */ .brand div:last-child,#nav a b,#nav a em,.usr div:last-child,.u-sw,.pw{display:revert} .brand{padding:14px 16px 16px} #nav{padding:10px 10px 14px} #nav a{justify-content:flex-start;padding:12px 14px;font-size:14.5px} #nav a span.i{width:24px;font-size:17px} .side-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.52);z-index:1000; opacity:0;pointer-events:none;transition:opacity .2s ease} .side-overlay.open{opacity:1;pointer-events:auto} body.side-locked{overflow:hidden} /* --- topbar: keep search + season usable instead of hiding them; search collapses to an icon, expands on tap --- */ .top{padding:0 10px} .search{position:static;width:40px;height:40px;padding:0;justify-content:center;overflow:hidden; border-radius:10px;transition:width .2s ease} .search span{cursor:pointer;font-size:16px;flex:none} .search input{display:none;min-width:0} .search.expanded{width:min(68vw,260px);justify-content:flex-start;padding:0 10px} .search.expanded input{display:block} .s-res{width:min(92vw,320px);right:-6px} .sel-top{width:92px;font-size:12px;padding:0 6px} .who{padding:4px 8px} } @media (max-width:480px){ .sel-top{width:72px} } /* --------------------------------------------------------------------------------------------------------------- 8) Global "never scroll sideways" safety net + basic hierarchy/touch polish (<=820px). These are page-level rules, not per-screen markup — they apply to every admin screen built on top of .card/.form/.grid/.btn/etc. */ @media (max-width:820px){ html,body{overflow-x:hidden} img,svg{max-width:100%} .ph,.card,.oh,.filters{word-wrap:break-word;overflow-wrap:break-word} .grid,.dash-grid,.od-grid,.oh-stats,.kv,.diff,.rpt-sum{min-width:0} .grid>*,.dash-grid>*,.od-grid>*,.g2>*,.g2e>*,.g3>*,.g4>*,.g5>*{min-width:0} .ph{align-items:flex-start} .ph h1{font-size:19px} .form,.kv{grid-template-columns:1fr} /* 44px tap targets everywhere, 16px inputs (stops iOS auto-zoom on focus) */ .btn{min-height:44px} .btn.sm{min-height:40px} .icon-btn{width:42px;height:42px} input,select,textarea{font-size:16px} .filters select,.filters input{height:44px} /* modals become full-width bottom sheets with an internal scroll area; the footer (.m-f) stays pinned because .modal is already display:flex/flex-direction:column/overflow:hidden with .m-b as the only scrolling child */ .modal-bg{align-items:flex-end;padding:0} .modal,.modal.wide{width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:90vh;margin:0} } /* --------------------------------------------------------------------------------------------------------------- 9) Generic table → stacked card conversion (<=720px), for every .tbl-wrap table across the app (reservations, customers, products, stock, payments, users, activity…). admin.js fills each from its own text (CSS alone can't read header text), once per render via a MutationObserver on #view. Exception, not the rule: a table whose markup carries a `.keep-table` class (on the table or its .tbl-wrap) is left as a normal scrollable table — for wide data grids that genuinely need the columns side by side — and gets a soft edge fade on both sides as a scroll affordance instead of collapsing into cards. */ @media (max-width:720px){ .tbl-wrap:not(.keep-table){border:0;background:none;overflow-x:visible} .tbl-wrap:not(.keep-table) table:not(.keep-table){display:block;width:100%} .tbl-wrap:not(.keep-table) table:not(.keep-table) thead{display:none} .tbl-wrap:not(.keep-table) table:not(.keep-table) tbody{display:block} .tbl-wrap:not(.keep-table) table:not(.keep-table) tr{display:block;background:#fff;border:1px solid var(--line); border-radius:14px;padding:4px 12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(15,23,42,.04)} .tbl-wrap:not(.keep-table) table:not(.keep-table) tr:last-child{margin-bottom:0} .tbl-wrap:not(.keep-table) table:not(.keep-table) tbody tr:hover{background:#fff} .tbl-wrap:not(.keep-table) table:not(.keep-table) td{display:flex;align-items:center;justify-content:space-between; gap:10px;padding:9px 0;border-bottom:1px dashed #eef1f7;white-space:normal;text-align:left} .tbl-wrap:not(.keep-table) table:not(.keep-table) td:last-child{border-bottom:0} .tbl-wrap:not(.keep-table) table:not(.keep-table) td::before{content:attr(data-label);font-weight:600; color:var(--mut);font-size:11.5px;flex:none} .tbl-wrap:not(.keep-table) table:not(.keep-table) td:not([data-label])::before, .tbl-wrap:not(.keep-table) table:not(.keep-table) td[data-label=""]::before{content:none} /* a colspan "no results" row — keep it centred text, not a label/value row */ .tbl-wrap:not(.keep-table) table:not(.keep-table) td[colspan]{display:block;text-align:center;border:0;padding:24px 0} .tbl-wrap:not(.keep-table) table:not(.keep-table) td .btn{min-height:40px} .tbl-wrap:not(.keep-table) table:not(.keep-table) td .thumb{width:40px;height:50px} .tbl-wrap.keep-table,table.keep-table{position:relative} .tbl-wrap.keep-table::before,.tbl-wrap.keep-table::after, table.keep-table::before,table.keep-table::after{content:'';position:absolute;top:0;bottom:0;width:22px; pointer-events:none;z-index:4} .tbl-wrap.keep-table::after,table.keep-table::after{right:0;background:linear-gradient(to left,rgba(255,255,255,.95),rgba(255,255,255,0))} .tbl-wrap.keep-table::before,table.keep-table::before{left:0;background:linear-gradient(to right,rgba(255,255,255,.95),rgba(255,255,255,0))} }