@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/styles/GenericDetail.module.scss

@@ -34,56 +34,52 @@
     gap: 1rem;
 }
 
-.grid__three {
-    width: 33%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+/* ----------------------------------------------------------------------------
+   The card set. Same four cards, same spec, as `GenericIndex.module.scss` —
+   see the block comment there for why they were unified. The two files carry
+   the same declarations on purpose so a detail page and an index page sit on
+   the same baseline; change one, change the other.
+   -------------------------------------------------------------------------- */
+
+@mixin card-surface {
+    background: var(--item-color, #fff);
+    border: 1px solid var(--border-color, #e1e1e1);
+    border-radius: var(--card-radius, 10px);
+    box-shadow: var(
+        --shadow-sm,
+        0 1px 2px rgba(var(--primary-rgb, 27, 57, 51), 0.08),
+        0 2px 8px rgba(var(--primary-rgb, 27, 57, 51), 0.06)
+    );
     box-sizing: border-box;
+    /* Load-bearing: selects, popovers and tooltips open out of these. */
     overflow: visible;
     position: relative;
-    padding: 20px;
     margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+}
+
+.grid__three {
+    @include card-surface;
+    width: 33%;
+    padding: 20px;
 }
 
 .grid__half {
+    @include card-surface;
     width: 50%;
-    background: var(--item-color);
-    border-radius: 6px;
-    border: 1px solid #dadce0;
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
     padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__full {
+    @include card-surface;
     width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 2px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    /* Was 2px — see GenericIndex. */
+    padding: 0;
 }
 
 .grid__dashfull {
+    @include card-surface;
     width: 100%;
-    background: var(--item-color);
-    border-radius: 6px;
-    border: 1px solid #dadce0;
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
     padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
 }
 
 .grid__subrow {
@@ -94,10 +90,10 @@
     gap: 0.5rem;
 }
 
-/* `page.tabLayout: "underline"` — tabs above the panel rather than beside it.
-   See the note on `tabsUnderlined` in GenericDetail.jsx for when a page wants
-   this. The row becomes a column and both children take the full width; the
-   rail gives up its card, because an underline strip is not a panel. */
+/* The default detail-page layout: tabs above the panel rather than beside it.
+   See the note on `tabsUnderlined` in GenericDetail.jsx. The row becomes a
+   column and both children take the full width; the rail gives up its card,
+   because an underline strip is not a panel. */
 .grid__subrow--stacked {
     flex-direction: column;
     flex-wrap: nowrap;
@@ -107,8 +103,13 @@
 .grid__subnav--underline {
     flex: 0 0 auto;
     width: 100%;
+    /* `min-width: 0` is what lets the strip inside actually scroll: a flex item
+       floors at its content's min-content width by default, so a strip of ten
+       tabs would push this container — and the page — wider instead of
+       overflowing within it. */
+    min-width: 0;
     padding: 0;
-    margin: 8px 0 0;
+    margin: 0;
     background: none;
     border: none;
     border-radius: 0;
@@ -375,7 +376,7 @@
 
     span {
         font-size: 0.875em;
-        color: rgba(var(--background-color-rgb), 0.65);
+        color: rgba(var(--background-color-rgb, 255, 255, 255), 0.65);
     }
 }
 
@@ -533,7 +534,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        background: rgba(var(--primary-rgb), 0.05);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
         color: var(--primary-color);
         border-radius: 6px;
         transition: all 0.2s ease;
@@ -541,7 +542,7 @@
         padding: 12px 16px;
         box-sizing: border-box;
         position: relative;
-        border: 1px solid rgba(var(--primary-rgb), 0.15);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
         line-height: 1.4;
         font-size: 0.9rem;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
@@ -549,7 +550,7 @@
         &:hover {
             transform: translateY(-2px);
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            background: rgba(var(--primary-rgb), 0.08);
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
         }
 
         .file-info {
@@ -580,7 +581,7 @@
                 
                 .file-size {
                     font-size: 0.75rem;
-                    color: rgba(var(--primary-rgb), 0.7);
+                    color: rgba(var(--primary-rgb, 27, 57, 51), 0.7);
                     margin-top: 2px;
                     font-weight: 400;
                 }
@@ -601,7 +602,7 @@
             transition: background-color 0.2s ease;
 
             &:hover {
-                background-color: rgba(var(--primary-rgb), 0.1);
+                background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
             }
 
             svg {
@@ -729,7 +730,7 @@
         width: auto;
         margin: 0;
         padding: 0 2em;
-        border-right: 1px solid rgba(var(--primary-rgb), 0.35);
+        border-right: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.35);
 
         &:first-child {
             padding-left: 0;
@@ -741,7 +742,7 @@
 
         span {
             display: block;
-            color: rgba(var(--primary-rgb), 0.7);
+            color: rgba(var(--primary-rgb, 27, 57, 51), 0.7);
         }
     }
 }
@@ -944,7 +945,7 @@
 .schedulingTable td {
     padding: 0.75rem;
     text-align: left;
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
 }
 
 .schedulingTable th {
@@ -954,11 +955,11 @@
 }
 
 .schedulingTable td {
-    background-color: rgba(var(--primary-rgb), 0.05);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 }
 
 .categoryRow {
-    background-color: rgba(var(--primary-rgb), 0.1);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     text-align: left;
     font-weight: bold;
     font-size: 1.2rem;
@@ -966,7 +967,7 @@
 }
 
 .totalRow {
-    background-color: rgba(var(--primary-rgb), 0.05);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     font-weight: bold;
     text-align: right;
 }
@@ -976,7 +977,7 @@
     height: 14px !important;
     border-radius: 4px;
     background-color: var(--item-color);
-    border: 2px solid rgba(var(--primary-rgb), 0.15);
+    border: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     position: relative;
     cursor: pointer;
     transition: background-color 0.3s, border-color 0.3s;
@@ -989,13 +990,13 @@
 
 .schedulingTable td input[type='checkbox']:focus {
     outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.2);
 }
 
 /* Custom hover effect for better user experience */
 .schedulingTable td input[type='checkbox']:hover {
-    background-color: rgba(var(--primary-rgb), 0.1);
-    border-color: rgba(var(--primary-rgb), 0.25);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
+    border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.25);
 }
 
 .noDataMessage {
@@ -1015,15 +1016,15 @@
 /* Enhanced JSON Rendering Styles */
 .jsonQuestionAnswer {
     padding: 0.75rem;
-    background: rgba(var(--primary-rgb), 0.02);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.02);
     border-radius: 4px;
-    border: 1px solid rgba(var(--primary-rgb), 0.08);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
 }
 
 .questionAnswerPair {
     margin-bottom: 1rem;
     padding: 0.75rem;
-    background: rgba(var(--primary-rgb), 0.01);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.01);
     border-radius: 4px;
     border-left: 3px solid var(--secondary-color);
     
@@ -1051,15 +1052,15 @@
 
 .jsonKeyValue {
     padding: 0.75rem;
-    background: rgba(var(--primary-rgb), 0.02);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.02);
     border-radius: 4px;
-    border: 1px solid rgba(var(--primary-rgb), 0.08);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
 }
 
 .keyValuePair {
     margin-bottom: 0.6rem;
     padding: 0.5rem;
-    background: rgba(var(--primary-rgb), 0.01);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.01);
     border-radius: 3px;
     display: flex;
     gap: 0.5rem;
@@ -1077,8 +1078,8 @@
 }
 
 .jsonRaw {
-    background: rgba(var(--primary-rgb), 0.03);
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.03);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     border-radius: 4px;
     padding: 0.75rem;
     font-family: monospace;
@@ -1217,3 +1218,347 @@
     position: relative;
 }
 
+
+/* ==========================================================================
+   2026 pass — the detail page
+   --------------------------------------------------------------------------
+   Appended, so these are targeted overrides of the rules above and the cascade
+   order is doing real work.
+
+   The 6.15 overview rework (label-above-value pairs on a real two-column grid,
+   a muted dash for an empty field) stands and is not touched. What is dated is
+   everything around it: the title in its own white slab, `--br` corners at 5px
+   when every other surface in the app is now 12-14px, no elevation at all, and
+   a floating action bar that hangs over the page with no ground of its own.
+   ========================================================================== */
+
+.grid__subrow,
+.grid__subrow--stacked {
+    --gd-surface: var(--background-color, #fff);
+    --gd-ink: var(--paragraph-color, #2b2b2b);
+    /* The three below defer to the app's own tokens first so a detail panel,
+       an index card and the data grid all draw the SAME hairline, the same
+       corner and the same lift. The local expressions stay as fallbacks for a
+       host that declares none of them. */
+    --gd-line: var(
+        --border-color,
+        color-mix(in srgb, var(--gd-ink) 12%, transparent)
+    );
+    --gd-muted: color-mix(in srgb, var(--gd-ink) 62%, transparent);
+    --gd-quiet: color-mix(in srgb, var(--gd-ink) 3%, var(--gd-surface));
+    --gd-radius: var(--detail-card-radius, var(--card-radius, 14px));
+    --gd-motion: var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+    /* One contact shadow plus one ambient — a single large blur reads as a
+       smudge rather than as a raised surface. */
+    --gd-shadow: var(
+        --shadow-sm,
+        0 1px 2px color-mix(in srgb, var(--primary-color, #1b3933) 8%, transparent),
+        0 8px 24px -12px color-mix(in srgb, var(--primary-color, #1b3933) 18%, transparent)
+    );
+
+    align-items: flex-start;
+    gap: var(--spacing-md, 1rem);
+}
+
+/* -- the title ------------------------------------------------------------ */
+
+/* Was a full-width white slab with a hard edge, so the page arrived as two
+   stacked boxes before any content. The breadcrumb is type on the page ground
+   now, and the panels below are the only containers. */
+.crmtitle,
+.crmtitle--alternate {
+    padding: 0 0.25rem 0.85rem;
+    background: none;
+    border: 0;
+    box-shadow: none;
+}
+
+.titleInfo {
+    color: var(--muted-color, #6b7688);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+}
+
+/* -- the two panels ------------------------------------------------------- */
+
+.grid__subnav,
+.grid__subcontent {
+    border: 1px solid var(--gd-line);
+    border-radius: var(--gd-radius);
+    background: var(--gd-surface);
+    box-shadow: var(--gd-shadow);
+}
+
+/* The rail is a list of destinations, not a panel of content: it gets the
+   same surface but tighter padding so the tabs sit closer to their edge. */
+.grid__subnav {
+    padding: 0.4rem;
+    align-self: flex-start;
+}
+
+.grid__subcontent {
+    padding: var(--spacing-md, 1rem);
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* The underline tab strip is a strip, not a panel — giving it a card as well
+   would box a row of text. */
+.grid__subnav--underline {
+    padding: 0;
+    border: 0;
+    border-bottom: 1px solid var(--gd-line);
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+}
+
+/* -- section headings ----------------------------------------------------- */
+
+.gridtxt__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding-bottom: 0.6rem;
+    margin-bottom: 0.9rem;
+    border-bottom: 1px solid var(--gd-line);
+    color: var(--heading-color, var(--primary-color, #1b3933));
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.gridtxt__meta {
+    color: var(--gd-muted);
+    font-size: 0.75rem;
+    font-weight: 400;
+}
+
+/* -- overview fields ------------------------------------------------------ */
+
+.overviewLabel {
+    color: var(--gd-muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.overviewValue {
+    color: var(--gd-ink);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    /* A value can be an address or a long note; it must wrap rather than push
+       the column wider than its track. */
+    overflow-wrap: anywhere;
+}
+
+.overviewEmpty {
+    color: var(--gd-muted);
+}
+
+/* -- the floating action bar ---------------------------------------------- */
+
+/* It stays pinned bottom-right — every detail page in every project is laid
+   out around that — but it had no ground of its own, so on a short page the
+   buttons floated over the page background with nothing behind them. A pill
+   with the same elevation as the panels gives them somewhere to sit. */
+.polActions {
+    padding: 0.4rem;
+    border: 1px solid var(--gd-line);
+    border-radius: var(--radius-pill, 999px);
+    background: color-mix(in srgb, var(--gd-surface) 92%, transparent);
+    backdrop-filter: blur(8px);
+    box-shadow:
+        0 2px 4px color-mix(in srgb, var(--primary-color, #1b3933) 10%, transparent),
+        0 16px 32px -14px color-mix(in srgb, var(--primary-color, #1b3933) 30%, transparent);
+}
+
+/* -- states --------------------------------------------------------------- */
+
+.noDataMessage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 6rem;
+    color: var(--gd-muted);
+    font-size: 0.875rem;
+}
+
+/* A nested grid already carries its own card from DataGrid's 2026 pass;
+   double-carding it puts a panel inside a panel. */
+.grid__subcontent [class*='dataGridContainer'] {
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+@media (max-width: 900px) {
+    .grid__subrow,
+    .grid__subrow--stacked {
+        flex-direction: column;
+    }
+
+    .grid__subnav {
+        width: 100%;
+    }
+}
+
+/* ============================================================================
+ * 2026 pass — the rail column
+ * ----------------------------------------------------------------------------
+ * The same two structural faults GenericIndex had, and they are worse on a
+ * detail page than on an index:
+ *
+ *   1. The row was flex, with the rail on `flex: 1` and the panel on
+ *      `flex: 0 1 80%`. Those two fight over the leftover space, so the rail's
+ *      width moved with the content beside it — a tab list that changes width
+ *      when you switch tabs.
+ *   2. The rail did not stick. A detail page is the LONGEST page in the app —
+ *      a form, its tables, its notes — so scrolling to the bottom of one tab
+ *      left no way to reach another without scrolling all the way back.
+ *
+ * The card stays, unlike on the index. There the grid drew its own card and the
+ * rail's was a second one nested around it; here the content panel is a real
+ * panel holding a form, so a card rail beside a card panel is consistent
+ * rather than doubled.
+ *
+ * Tokens shared with GenericIndex (`--index-rail-*`) on purpose: the two pages
+ * share one rail, and a project retuning it should not have to find two names.
+ * ==========================================================================*/
+
+.grid__subrow {
+    display: grid;
+    grid-template-columns:
+        minmax(var(--index-rail-min, 190px), var(--index-rail-width, 224px))
+        minmax(0, 1fr);
+    align-items: start;
+}
+
+.grid__subnav {
+    position: sticky;
+    top: var(--index-rail-top, 88px);
+    max-height: calc(100vh - var(--index-rail-offset, 120px));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+
+    /* No card, matching GenericIndex.
+    
+       This kept its card at first, on the reasoning that a card rail beside a
+       card content panel is consistent. In use it is not: the rail is 250px of
+       content next to a panel ten times its height, so the card ENDS and
+       leaves a bordered box floating above a large empty column — the same
+       fault the index had. And the two pages sit next to each other in one
+       app, so a bordered rail on one and a borderless rail on the other reads
+       as a bug rather than as a distinction. */
+    background: none;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+}
+
+/* The rail items need the same accent-edge gutter the index gives them, or the
+   3px edge on the selected item pushes its label sideways. */
+.grid__subnav > ul li a {
+    position: relative;
+    padding-left: calc(var(--spacing-md, 1rem) - 3px);
+    border-left: 3px solid transparent;
+    border-radius: var(--radius-sm, 6px);
+    color: var(--paragraph-color, #52606d);
+}
+
+.grid__subnav > ul li:hover a {
+    background: color-mix(
+        in srgb,
+        var(--primary-color, #1b3933) 6%,
+        transparent
+    );
+    color: var(--heading-color, #111827);
+}
+
+/* The stacked layout puts the tabs ABOVE the panel, so the row is one column
+   and nothing sticks — a strip pinned over the content it labels would cover
+   the first field of every form.
+
+   `grid-template-columns: none` undoes the two-column track the rail layout
+   sets above; without it the strip and the panel would each be handed a
+   column and the panel would keep the rail's 224px hole beside it. */
+.grid__subrow--stacked {
+    display: flex;
+    grid-template-columns: none;
+}
+
+.grid__subrow--stacked .grid__subnav {
+    position: static;
+    max-height: none;
+    overflow: visible;
+}
+
+/* Both children run the full width. The panel's own `flex: 0 1 80%` was
+   written for a ROW — in a column it is a height basis, which is nonsense
+   here — and its 80% was the rail's column tax. That column is reclaimed:
+   this is the whole point of the layout. */
+.grid__subrow--stacked > .grid__subnav,
+.grid__subrow--stacked > .grid__subcontent {
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+}
+
+/* The strip is separated from the panel by the panel's own margin, so the
+   strip's is zeroed above and the gap is stated once, here. A tab row butted
+   straight onto the card below it reads as a header of that card rather than
+   as a control above it. */
+.grid__subrow--stacked > .grid__subcontent {
+    margin: var(--spacing-md, 1rem) 0 0;
+}
+
+@media (max-width: 759px) {
+    .grid__subrow {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .grid__subnav {
+        position: static;
+        max-height: none;
+        overflow: visible;
+    }
+}
+
+/* ============================================================================
+ * The grid card — one card, not two
+ * ----------------------------------------------------------------------------
+ * The same repair as the block at the end of GenericIndex.module.scss, for the
+ * grids a detail page renders in a `.grid__full`. See that file for the full
+ * reasoning; in short, `.grid__full` is the only element wrapping both the
+ * toolbar and the table, so it is the card, and the grid's own container gives
+ * up its border, radius and shadow to sit flush inside it.
+ *
+ * `[class*='dataGridContainer']` matches DataGrid.module.scss's hashed local
+ * name, which this file cannot spell directly. It does NOT match
+ * `dataGridTopContainer` or `dataGridBottomContainer` — neither contains that
+ * substring.
+ * ==========================================================================*/
+
+.grid__full:has([class*='dataGridContainer']) {
+    /* Selects, row-action popovers and the pager dropdown open out of the card. */
+    overflow: visible;
+
+    /* Descendant, not `>`: the toolbar and the grid share an unclassed wrapper
+       div, so the card's only direct child is that wrapper. And the radius is
+       spelled out rather than `inherit`, because inheriting would take the
+       wrapper's 0. See the matching block in GenericIndex.module.scss. */
+    [class*='dataGridContainer'] {
+        border: 0;
+        box-shadow: none;
+        border-radius: calc(var(--card-radius, 10px) - 1px);
+        overflow: hidden;
+    }
+
+    [class*='dataGridTopContainer'] {
+        border-top-left-radius: calc(var(--card-radius, 10px) - 1px);
+        border-top-right-radius: calc(var(--card-radius, 10px) - 1px);
+        border-bottom-color: var(--border-color, #e1e1e1);
+    }
+}