July 4 - Update responsive

app/static/css/mobile_phone.css

@@ -0,0 +1,82 @@
+/* ════════════════════════════════════════════════════════════════════════
+   mobile_phone.css — phone-width (<768px) responsive polish.
+
+   Layered ON TOP of ipad_responsive.css (which handles iPad/tablet widths
+   1024/820/768) and Bootstrap 5 (whose grid already stacks col-md-* below
+   768px). These rules refine the patterns Bootstrap doesn't: page-header
+   rows, action toolbars, oversized headings, table density, and tap targets
+   on small phones.
+   ════════════════════════════════════════════════════════════════════════ */
+
+/* ── Proper .table-responsive wrappers win over the iPad catch-all ──
+   ipad_responsive.css turns bare tables into `display:block` scroll blocks at
+   ≤1024px. Tables we explicitly wrap in .table-responsive should keep true
+   table layout INSIDE the scroll container (cleaner columns + header align). */
+.table-responsive > table,
+.table-responsive table {
+  display: table !important;
+  width: 100%;
+}
+
+/* ── Phone layout (≤576px) ── */
+@media (max-width: 576px) {
+  /* Tighter page gutters so content isn't cramped by container padding. */
+  .container-fluid.mt-4 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  /* Page-header rows: title + action button stack instead of squeezing.
+     Scoped to DIRECT children of the content container, so the navbar, card
+     headers, dropdown headers, and in-table flex rows are all untouched. */
+  .container-fluid.mt-4 > .d-flex.justify-content-between {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  /* A single action button in that header grows to full width under the title. */
+  .container-fluid.mt-4 > .d-flex.justify-content-between > .btn,
+  .container-fluid.mt-4 > .d-flex.justify-content-between > a.btn {
+    width: 100%;
+  }
+
+  /* Softer headings so long titles don't wrap awkwardly on narrow screens. */
+  h1, .h1 { font-size: 1.5rem; }
+  h2, .h2 { font-size: 1.3rem; }
+  h3, .h3 { font-size: 1.15rem; }
+
+  /* Toolbars / explicit button rows wrap rather than overflow. */
+  .btn-toolbar { flex-wrap: wrap; }
+
+  /* Denser tables so more columns fit before horizontal scroll kicks in. */
+  .table { font-size: 0.875rem; }
+  .table > :not(caption) > * > * { padding: 0.4rem 0.5rem; }
+
+  /* Card padding a touch tighter than the 820px iPad rule. */
+  .card-body { padding: 0.85rem; }
+
+  /* Pagination wraps instead of overflowing the viewport. */
+  .pagination { flex-wrap: wrap; row-gap: 0.25rem; }
+
+  /* Near-full-width modal dialogs on phones. */
+  .modal-dialog:not(.modal-fullscreen) { margin: 0.5rem; }
+
+  /* Large stat/KPI numbers scale down so cards don't overflow. */
+  .display-1, .display-2, .display-3 { font-size: 2.25rem; }
+  .display-4 { font-size: 2rem; }
+  .display-5 { font-size: 1.6rem; }
+  .display-6 { font-size: 1.4rem; }
+
+  /* Comfortable tap target for icon-only action buttons in table rows. */
+  td .btn-sm { min-height: 38px; }
+}
+
+/* ── Very small phones (≤380px) ── */
+@media (max-width: 380px) {
+  .container-fluid.mt-4 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  h2, .h2 { font-size: 1.2rem; }
+  .btn { font-size: 0.9rem; }
+  .table { font-size: 0.82rem; }
+}

app/templates/base.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/ipad_responsive.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile_phone.css') }}">
     {% if tenant_branding %}
     <style>
       :root {

app/templates/customers/manage.html

@@ -126,7 +126,7 @@
         <span><i class="bi bi-diagram-3 me-1"></i> Contract Assignments</span>
       </div>
       {% if assignments %}
-      <div class="card-body p-0">
+      <div class="card-body p-0 table-responsive">
         <table class="table table-hover table-sm mb-0">
           <thead class="table-light">
             <tr>

app/templates/dashboard.html

@@ -277,7 +277,7 @@
     <a href="{{ url_for('inspections.index', date_from=today_str, date_to=today_str) }}"
        class="btn btn-sm btn-outline-secondary">View all</a>
   </div>
-  <div class="card-body p-0">
+  <div class="card-body p-0 table-responsive">
     <table class="table table-sm table-hover mb-0" style="font-size:.85rem;">
       <thead class="table-light">
         <tr>
@@ -319,7 +319,7 @@
     <span class="fw-semibold"><i class="bi bi-person-check me-1 text-primary"></i>My Open Issues</span>
     <a href="{{ url_for('issues.index') }}" class="btn btn-sm btn-outline-secondary">View all</a>
   </div>
-  <div class="card-body p-0">
+  <div class="card-body p-0 table-responsive">
     <table class="table table-hover mb-0" style="font-size:.85rem;">
       <thead class="table-light">
         <tr>

app/templates/issues/verification_queue.html

@@ -63,7 +63,7 @@
     </span>
   </div>
 
-  <div class="card-body p-0">
+  <div class="card-body p-0 table-responsive">
     <table class="table table-hover mb-0">
       <thead class="table-light" style="font-size:.82rem;">
         <tr>

app/templates/landing/index.html

@@ -27,6 +27,14 @@
     .plan-feat .no  { color:#cbd5e1; }
     footer { background:#0f172a;color:#94a3b8;padding:2.5rem 0; }
     footer a { color:#cbd5e1;text-decoration:none; }
+    /* Phone polish — scale the oversized hero/section spacing on small screens */
+    @media (max-width:576px){
+      .hero { padding:3rem 0 2.5rem; }
+      .hero h1 { font-size:1.9rem; }
+      .hero .lead { font-size:1.05rem; }
+      .section { padding:3rem 0; }
+      .price-amt { font-size:1.75rem; }
+    }
   </style>
 </head>
 <body>

app/templates/reports/scorecard.html

@@ -138,7 +138,7 @@
       <div class="card-header bg-light fw-semibold">
         <i class="bi bi-building me-1"></i> Score by Area
       </div>
-      <div class="card-body p-0">
+      <div class="card-body p-0 table-responsive">
         <table class="table table-sm mb-0">
           <thead class="table-light">
             <tr><th>Area</th><th class="text-center">Avg Score</th><th class="text-center">Inspections</th></tr>
@@ -169,7 +169,7 @@
       <div class="card-header bg-warning text-dark fw-semibold">
         <i class="bi bi-arrow-repeat me-1"></i> Follow-up Required
       </div>
-      <div class="card-body p-0">
+      <div class="card-body p-0 table-responsive">
         <table class="table table-sm mb-0">
           <thead class="table-light">
             <tr><th>Inspection</th><th>Date</th><th>Score</th><th></th></tr>
@@ -206,7 +206,7 @@
       <div class="card-header bg-light fw-semibold">
         <i class="bi bi-bug me-1"></i> Open Issues
       </div>
-      <div class="card-body p-0">
+      <div class="card-body p-0 table-responsive">
         <table class="table table-sm table-hover mb-0">
           <thead class="table-light">
             <tr><th>ID</th><th>Severity</th><th>Area</th><th>Description</th><th>Status</th><th>Reported</th><th></th></tr>