/* mobile.css — responsive overrides layered on top of style.css. Loaded AFTER style.css in index.html , so plain rules here already win on equal specificity; !important is used only where inline style="..." attributes in app.js-rendered markup would otherwise out-rank us. */ /* ============================================================ ≤720px — phones / small tablets in portrait ============================================================ */ @media (max-width: 720px) { /* ---------- global safety ---------- */ html, body { overflow-x: hidden; } * { min-width: 0; } /* ---------- login screen ---------- */ .login-box { width: 100%; max-width: 360px; padding: 0 6px; } .login-card { padding: 20px 18px; } .login-logo .circle { width: 76px; height: 76px; } .login-logo .title { font-size: 19px; } /* ---------- shell / sidebar -> top bar ---------- */ .shell { flex-direction: column; min-height: auto; } aside.sidebar { width: 100%; height: auto; position: static; flex-direction: column; border-right: none; border-bottom: 1px solid rgba(244,240,231,.1); transform: none !important; /* the desktop slide-in/out drawer doesn't apply to the mobile top bar */ box-shadow: none; } .sidebar-toggle, .sidebar-backdrop { display: none; } /* sidebar is always visible as a top bar on mobile */ .sidebar-brand { padding: 12px 14px; border-bottom: none; } .sidebar-brand .mark { width: 28px; height: 28px; } .sidebar-brand .name { font-size: 13px; } .sidebar-brand .sub { font-size: 8px; } /* nav becomes a horizontally-scrollable strip instead of a vertical list */ nav.side-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px 10px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } nav.side-nav a { flex: none; white-space: nowrap; padding: 8px 12px; font-size: 12px; gap: 6px; } .sidebar-foot { margin-top: 0; border-top: 1px solid rgba(244,240,231,.1); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; white-space: normal; } .sidebar-foot br { display: none; } .sidebar-foot a { margin-top: 0; } /* ---------- main content ---------- */ main.content { padding: 16px 14px 40px; } .content-head { margin-bottom: 16px; gap: 10px; } .view-title { font-size: 21px; } .kicker { font-size: 10px; } /* ---------- weather widget ---------- */ .weather-widget { padding: 7px 12px; gap: 8px; } .weather-widget .weather-icon { font-size: 18px; } .weather-widget .weather-temp { font-size: 13px; } .weather-widget .weather-cond { display: none; } .weather-widget .weather-wind { display: none; } /* ---------- stat-row / panel ---------- */ .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; } .panel { padding: 14px; min-width: 0; } .panel .big { font-size: 26px; overflow-wrap: anywhere; } .panel .lbl, .panel .meta { white-space: normal; overflow-wrap: anywhere; } /* ---------- two-col: force single column on mobile ---------- Several call sites set an inline style="grid-template-columns:…" (quotes/calendar/sign views) which beats an un-!important rule regardless of stylesheet order, so !important is required here. */ .two-col { grid-template-columns: 1fr !important; gap: 12px; } .list-row { grid-template-columns: 90px 1fr 74px; gap: 8px; font-size: 12.5px; } .list-row .stage, .list-row * { overflow-wrap: anywhere; white-space: normal; } .job-row { flex-wrap: wrap; gap: 4px 10px; } .job-row span { overflow-wrap: anywhere; white-space: normal; } /* ---------- quotes ---------- */ .q-item-row { grid-template-columns: 1fr auto auto; gap: 8px; font-size: 12.5px; } .q-item-row span { overflow-wrap: anywhere; white-space: normal; } .q-detail { padding: 16px; } /* ---------- invoices: 6-col grid -> stacked label/value cards ---------- */ .inv-head { display: none; } .inv-row { grid-template-columns: 1fr !important; gap: 6px; padding: 14px 16px; } .inv-row > * { display: flex !important; justify-content: space-between !important; align-items: center; gap: 10px; text-align: left !important; white-space: normal; overflow-wrap: anywhere; } .inv-row > *::before { flex: none; font: 700 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sage); margin-right: 10px; } /* fixed column order from app.js: code / job+customer / issued / amount / status / actions */ .inv-row > *:nth-child(1)::before { content: "Invoice"; } .inv-row > *:nth-child(2)::before { content: "Job / customer"; } .inv-row > *:nth-child(3)::before { content: "Issued"; } .inv-row > *:nth-child(4)::before { content: "Amount"; } .inv-row > *:nth-child(5)::before { content: "Status"; } .inv-row > *:nth-child(6)::before { content: ""; } .inv-row > *:nth-child(6) { justify-content: flex-end !important; flex-wrap: wrap; } /* the "No invoices yet." placeholder row is plain text, not the 6-span structure — it has no nth-child(1..6) matches beyond its single implicit text node, so no spurious label is injected for it. */ /* ---------- job calendar ---------- */ .cal-grid { gap: 4px; grid-template-columns: repeat(7, minmax(40px, 1fr)); overflow-x: auto; } .cal-dow { font-size: 8px; } .cal-cell { min-height: 54px; padding: 4px; border-radius: 5px; } .cal-cell .num { font-size: 9px; margin-bottom: 3px; } .cal-job { font-size: 8.5px; line-height: 1.15; padding: 2px 4px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-detail { position: static; padding: 16px; } .photo-thumb { height: 64px; } /* ---------- e-sign ---------- */ .sign-item { padding: 12px 14px; } .sign-pad { padding: 16px; } .sign-box input { font-size: 22px; } .upload-row { gap: 6px; } } /* ============================================================ ≤480px — extra-small phones ============================================================ */ @media (max-width: 480px) { .login-card { padding: 16px 14px; } .login-logo .circle { width: 64px; height: 64px; } .login-logo .title { font-size: 17px; } main.content { padding: 12px 10px 32px; } .view-title { font-size: 18px; } /* four stats are still too tight in 2 columns at this width */ .stat-row { grid-template-columns: 1fr; gap: 8px; } .panel .big { font-size: 24px; } nav.side-nav a { padding: 7px 10px; font-size: 11.5px; } .list-row { grid-template-columns: 1fr; gap: 2px; } .list-row .stage { order: -1; } .q-item-row { grid-template-columns: 1fr; gap: 2px; } .q-item-row span { text-align: left !important; } .inv-row { padding: 12px 14px; } .inv-row > * { font-size: 12.5px; } .cal-grid { grid-template-columns: repeat(7, minmax(34px, 1fr)); } .cal-cell { min-height: 44px; } .cal-job { font-size: 8px; } .sign-box input { font-size: 18px; } .photo-carousel .pc-stage { height: 160px; } .photo-carousel .pc-caption-title { font-size: 12px; } .photo-carousel .pc-arrow { width: 28px; height: 28px; font-size: 15px; } }