/* /css/mobile.css */ @media (max-width: 599px){ html::before{ content:"mobile"; position:fixed; z-index:9999; bottom:6px; right:8px; background:#0ea5e9; color:#fff; padding:2px 6px; border-radius:6px; font:12px/1 system-ui; } } /* ---------- Mobile only ---------- */ @media (max-width: 599px) { /* Center the content column on phones */ .main-content{ margin-left: 0 !important; padding: 12px; display: flex; /* so we can center children */ flex-direction: column; align-items: center; /* horizontal centering */ } /* Center the tiles area and keep it narrow */ #mobileHome{ width: 100%; max-width: 420px; /* keeps it centered/nice */ margin: 12px auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Make tiles square buttons */ #mobileHome .tile{ display: grid; place-items: center; gap: 8px; background:#fff; border: 1px solid #dbe2ea; border-radius: 16px; aspect-ratio: 1 / 1; padding: 14px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } #mobileHome .tile__icon{ font-size: 32px; } #mobileHome .tile__label{ font-size: 14px; color:#0f172a; } /* Hide stray desktop floaters that overlap the header */ .sidebar-toggle, .collapse-toggle, .fab, .quickbar, .floating-controls, .left-rail-buttons, .main-fab, .main-quick-actions, .button-collapse, .button-profile{ display: none !important; } /* layout reset */ html, body { height: 100%; } body { margin: 0; background:#f3f4f6; } /* hide desktop chrome */ .main-content .topbar { display: none; } /* the desktop topbar inside .main-content */ .sidebar { position: fixed; inset: 0 auto 0 0; /* left off-canvas */ width: 260px; transform: translateX(-100%); transition: transform .25s ease, box-shadow .25s ease; z-index: 1001; } /* when open (we toggle a class on ) */ html.sidebar--open .sidebar { transform: translateX(0); box-shadow: 2px 0 24px rgba(0,0,0,.25); } /* scrim behind sidebar */ #scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1000; } html.sidebar--open #scrim { opacity: 1; pointer-events: auto; } /* mobile top bar */ .topbar.topbar--mobile { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px; background: #0f172a; color: #fff; z-index: 1002; border-bottom: 1px solid rgba(255,255,255,.08); } .topbar__btn { appearance: none; border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; padding: 8px; border-radius: 8px; } .topbar__btn:active { background: rgba(255,255,255,.08); } .topbar__title { font-weight: 700; letter-spacing:.2px; } .topbar__logo::before { content: "🔧 AssignMate"; } /* content spacing (since desktop topbar is hidden) */ .main-content { margin-left: 0 !important; /* ignore desktop sidebar space */ padding: 12px; } /* dashboard cards -> full width stack */ .inventory-header { margin-top: 8px; } .inventory-table, .inventory-card, .dashboard-card, .card, .panel { width: 100% !important; max-width: 100% !important; } /* grid cards that used to be 2-up/3-up */ [class*="grid"], .cards, .dashboard-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } /* calendar day cells: increase tap targets */ .calendar-day { min-height: 64px; padding: 6px; } .calendar-day .day-number { font-size: 14px; } /* assignment table -> clean list */ table.inventory-table { border-collapse: separate; border-spacing: 0 8px; } table.inventory-table thead { display: none; } table.inventory-table tr { display: block; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); } table.inventory-table td { display: grid; grid-template-columns: 110px 1fr; font-size: 14px; padding: 6px 0; border: 0; } table.inventory-table td::before { content: attr(data-i18n); color: #64748b; margin-right: 8px; text-transform: capitalize; } /* modal: fill screen on mobile */ .modal .modal-content { width: 100% !important; max-width: none !important; height: 100dvh; max-height: 100dvh; margin: 0 !important; border-radius: 0 !important; } /* --- Home tiles --- */ .mobile-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 4px; } .mobile-tiles .tile { display: grid; place-items: center; gap: 6px; background: #ffffff; border: 1px solid #dbe2ea; border-radius: 14px; padding: 18px 10px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .tile__icon { font-size: 28px; } .tile__label { color:#0f172a; } /* hide completed/contacts in the main list if you prefer them under hamburger */ /* (optional; your menu already has them) */ } /* ——— Phone polish ——— */ /* a) Respect iPhone notch & make header height correct */ .topbar.topbar--mobile{ padding-top: max(env(safe-area-inset-top, 0px), 0px); height: calc(56px + env(safe-area-inset-top, 0px)); } /* b) Hide any desktop-only floating controls/quick buttons */ .sidebar-toggle, .collapse-toggle, .fab, .quickbar, .floating-controls, .left-rail-buttons, .main-fab, .main-quick-actions, .button-collapse, .button-profile { display: none !important; } /* c) Ensure the desktop topbar never shows on phones */ .main-content .topbar { display: none !important; } /* d) Sidebar + scrim layering so the drawer feels native */ .sidebar { z-index: 1001; } #scrim { z-index: 1000; } /* e) Make the home tiles look like square buttons */ .mobile-tiles{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; padding: 12px; } .mobile-tiles .tile{ display: grid; place-items: center; gap: 8px; background: #fff; border: 1px solid #dbe2ea; border-radius: 16px; padding: 14px 10px; aspect-ratio: 1 / 1; /* <- square cards */ box-shadow: 0 1px 2px rgba(0,0,0,.05); } .tile__icon{ font-size: 34px; line-height: 1; } .tile__label{ font-size: 14px; color:#0f172a; } /* f) Give content a bit of breathing room under the header */ .main-content{ padding: 10px 12px 16px; margin-left: 0 !important; } /* phones only */ .topbar--mobile { display: flex !important; } /* or block, depending on your markup */ #scrim { display: block !important; } #mobileHome { display: grid !important; }