Aug 5 - Update (new design)

app/static/css/theme_modern.css

@@ -30,8 +30,9 @@ body.jqc-modern {
   --jqc-faint:      #93A1AB;
   --jqc-border:     #E3E8EC;
   --jqc-border-2:   #CFD9E0;
-  --jqc-surface:    #F5F8FA;
+  --jqc-surface:    #F5F8FA;   /* subtle fill — hovers, muted rows (theme.css) */
   --jqc-surface-2:  #EEF3F6;
+  --jqc-card-bg:    #FFFFFF;   /* raised surfaces — cards, KPI tiles, sidebar */
   --jqc-accent:     #155F82;
   --jqc-accent-700: #0F4A66;
   --jqc-accent-50:  #DCEBF5;
@@ -164,7 +165,7 @@ body.jqc-modern {
   bottom: 0;
   left: 0;
   width: var(--jqc-sidebar-w);
-  background: #fff;
+  background: var(--jqc-card-bg);
   border-right: 1px solid var(--jqc-border);
   overflow-y: auto;
   z-index: 1030;
@@ -274,8 +275,11 @@ body.jqc-modern {
   letter-spacing: -.02em;
   color: var(--jqc-ink);
   margin: 0;
-  text-align: center;
 }
+/* Opt-in centring — the default is left-aligned. `.center` on the head block
+   centres the title and its sub-line together. */
+.jqc-modern .jqc-page-head.center,
+.jqc-modern .jqc-page-title.center { text-align: center; }
 .jqc-modern .jqc-page-sub {
   color: var(--jqc-muted);
   font-size: .95rem;
@@ -289,18 +293,18 @@ body.jqc-modern {
   box-shadow: var(--jqc-shadow);
 }
 .jqc-modern .card-header {
-  background: #fff;
+  background: var(--jqc-card-bg);
   border-bottom: 1px solid var(--jqc-border);
   color: var(--jqc-ink);
   font-weight: 700;
   padding: .9rem 1.15rem;
 }
 .jqc-modern .card-header.bg-light,
-.jqc-modern .card-header.bg-white { background: #fff !important; }
+.jqc-modern .card-header.bg-white { background: var(--jqc-card-bg) !important; }
 .jqc-modern .card-body { padding: 1.15rem; }
 
 .jqc-modern .jqc-card {
-  background: #fff;
+  background: var(--jqc-card-bg);
   border: 1px solid var(--jqc-border);
   border-radius: 16px;
   box-shadow: var(--jqc-shadow);
@@ -333,7 +337,7 @@ body.jqc-modern {
 
 /* KPI tiles */
 .jqc-modern .jqc-kpi {
-  background: #fff;
+  background: var(--jqc-card-bg);
   border: 1px solid var(--jqc-border);
   border-radius: 16px;
   box-shadow: var(--jqc-shadow);
@@ -379,7 +383,7 @@ a.jqc-kpi:hover { box-shadow: var(--jqc-shadow-md); transform: translateY(-1px);
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: #fff;
+  background: var(--jqc-card-bg);
   border: 1px solid var(--jqc-border);
   border-radius: 16px;
   box-shadow: var(--jqc-shadow);
@@ -399,17 +403,27 @@ a.jqc-kpi:hover { box-shadow: var(--jqc-shadow-md); transform: translateY(-1px);
 
 /* ── 7. Tables — dark teal header, as in the deck ────────────────────────── */
 .jqc-modern .table { --bs-table-border-color: var(--jqc-border); margin-bottom: 0; }
+
+/* Recoloured via Bootstrap's own table CSS variables rather than !important, so
+   a page that deliberately wants a different header (table-dark, a tinted
+   report header) can still override it with a normal rule. */
 .jqc-modern .table > thead > tr > th,
 .jqc-modern .table thead.table-light > tr > th,
 .jqc-modern .table > thead th {
-  background: var(--jqc-brand) !important;
-  color: #fff !important;
-  border-color: var(--jqc-brand-700) !important;
+  --bs-table-bg: var(--jqc-brand);
+  --bs-table-color: #fff;
+  background-color: var(--jqc-brand);
+  color: #fff;
+  border-color: var(--jqc-brand-700);
   font-weight: 600;
   font-size: .88rem;
   vertical-align: middle;
-  white-space: nowrap;
 }
+
+/* nowrap only where the column set is known-narrow (dashboard panels); wide
+   tables such as the issues list and audit trail must be free to wrap rather
+   than force a horizontal scroll on iPad portrait. */
+.jqc-modern .jqc-card .table > thead th { white-space: nowrap; }
 .jqc-modern .table > tbody > tr > td { vertical-align: middle; font-size: .92rem; }
 .jqc-modern .table-hover > tbody > tr:hover > * { background-color: var(--jqc-brand-025); }
 .jqc-modern .jqc-table-wrap {
@@ -447,7 +461,7 @@ a.jqc-kpi:hover { box-shadow: var(--jqc-shadow-md); transform: translateY(-1px);
 
 /* Filter bar — the rounded pill row from the deck */
 .jqc-modern .jqc-filter-bar {
-  background: #fff;
+  background: var(--jqc-card-bg);
   border: 1px solid var(--jqc-border);
   border-radius: 16px;
   box-shadow: var(--jqc-shadow);