, and render
th:replace="~{fragments/pagination :: pagination(results, prevHref, nextHref)}"
below the table. Build prevHref/nextHref server-side with
PaginationLinks.pageLink() (app.web.support) -- see OpportunitiesController
for the pattern.
========================================================================== */
/* ---- Design tokens ----------------------------------------------------- */
:root {
--ct-space-1: 0.25rem;
--ct-space-2: 0.5rem;
--ct-space-3: 0.75rem;
--ct-space-4: 1rem;
--ct-space-5: 1.5rem;
--ct-space-6: 2rem;
--ct-space-8: 3rem;
--ct-radius-sm: 8px;
--ct-radius-md: 12px;
--ct-radius-lg: 16px;
--ct-radius-pill: 999px;
--ct-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.08);
--ct-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
--ct-shadow-lg: 0 8px 30px rgba(15, 23, 42, 0.12);
--ct-sidebar-width: 15.5rem;
--ct-sidebar-width-collapsed: 4.5rem;
--ct-topbar-height: 4rem;
--ct-accent: #6d5bd0;
--ct-accent-contrast: #ffffff;
--ct-card-padding: var(--ct-space-5) var(--ct-space-5);
}
/* ---- Base ---------------------------------------------------------------- */
html {
min-height: 100%;
}
body {
font-size: 15px;
}
main.container {
padding-block: var(--ct-space-6) var(--ct-space-8);
}
/* ---- Buttons -------------------------------------------------------------
Pico's CLASSLESS build (deliberately) ships no .secondary/.outline
modifier classes -- those only exist in Pico's default class-based build.
A bare
is already styled as primary by the classless CSS; these
fill the gap for the two other variants every real app needs, using
Pico's own --pico-secondary-* custom properties (defined even in the
classless build) so they stay theme/dark-mode-correct automatically. */
button.secondary,
[type="submit"].secondary,
[type="button"].secondary,
[role="button"].secondary {
background: var(--pico-secondary-background);
border-color: var(--pico-secondary-border);
color: #fff;
}
button.secondary:is(:hover, :focus),
[type="submit"].secondary:is(:hover, :focus),
[type="button"].secondary:is(:hover, :focus),
[role="button"].secondary:is(:hover, :focus) {
background: var(--pico-secondary-hover-background);
border-color: var(--pico-secondary-hover-border);
}
button.outline,
[type="submit"].outline,
[type="button"].outline,
[role="button"].outline {
background: transparent;
color: var(--pico-primary);
border-color: var(--pico-primary);
}
button.outline:is(:hover, :focus),
[type="submit"].outline:is(:hover, :focus),
[type="button"].outline:is(:hover, :focus),
[role="button"].outline:is(:hover, :focus) {
background: var(--pico-primary);
color: var(--pico-primary-inverse, #fff);
}
button.outline.secondary,
[type="submit"].outline.secondary,
[type="button"].outline.secondary,
[role="button"].outline.secondary {
background: transparent;
color: var(--pico-secondary-background);
border-color: var(--pico-secondary-border);
}
button.outline.secondary:is(:hover, :focus),
[type="submit"].outline.secondary:is(:hover, :focus),
[type="button"].outline.secondary:is(:hover, :focus),
[role="button"].outline.secondary:is(:hover, :focus) {
background: var(--pico-secondary-background);
color: #fff;
}
/* ---- Grid ------------------------------------------------------------
Same story as the button modifiers above: Pico's classless build has no
.grid (it's class-based-tier only). Every form in this app pairs fields
two-up with , so this re-implements Pico's own
documented behavior -- equal-width columns, collapsing to one column
below 576px -- rather than changing every template. */
.grid {
display: grid;
grid-template-columns: 1fr;
column-gap: var(--ct-space-4);
}
@media (min-width: 576px) {
.grid {
/* 0% (not 0/0px) is what makes auto-fit resolve to exactly one
column per direct child, rather than as many as fit. */
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
}
/* ---- App shell: sidebar + topbar + content -------------------------------- */
.app-shell {
display: flex;
min-height: 100vh;
align-items: stretch;
}
.app-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ---- Sidebar ------------------------------------------------------------- */
.app-sidebar {
width: var(--ct-sidebar-width);
flex-shrink: 0;
display: flex;
flex-direction: column;
padding: var(--ct-space-4) var(--ct-space-3);
background: var(--pico-card-background-color);
border-right: var(--pico-border-width) solid var(--pico-muted-border-color);
overflow-y: auto;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: var(--ct-space-2);
text-decoration: none;
color: var(--pico-color);
padding: var(--ct-space-2) var(--ct-space-2) var(--ct-space-5);
font-weight: 700;
font-size: 1.1rem;
}
.sidebar-brand-icon {
font-size: 1.5rem;
line-height: 1;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: var(--ct-space-5);
}
.sidebar-section {
display: flex;
flex-direction: column;
gap: var(--ct-space-1);
}
.sidebar-section-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pico-muted-color);
padding: 0 var(--ct-space-3);
margin-bottom: var(--ct-space-1);
}
.sidebar-link {
display: flex;
align-items: center;
gap: var(--ct-space-3);
padding: var(--ct-space-2) var(--ct-space-3);
border-radius: var(--ct-radius-sm);
text-decoration: none;
color: var(--pico-color);
font-size: 0.92rem;
line-height: 1.4;
}
.sidebar-link:hover {
background: var(--pico-muted-border-color);
}
.sidebar-link.active {
background: color-mix(in srgb, var(--ct-accent) 14%, transparent);
color: var(--ct-accent);
font-weight: 600;
}
.sidebar-link-icon {
font-size: 1.05rem;
width: 1.4rem;
text-align: center;
line-height: 1;
}
/* ---- Topbar ---------------------------------------------------------------- */
.app-topbar {
display: flex;
align-items: center;
gap: var(--ct-space-4);
height: var(--ct-topbar-height);
padding-inline: var(--ct-space-5);
background: var(--pico-card-background-color);
border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
flex-wrap: wrap;
}
.app-topbar form {
margin: 0;
padding: 0;
border: none;
background: none;
}
.search-box {
position: relative;
flex: 1;
max-width: 380px;
margin: 0 !important;
}
.search-box .search-icon {
position: absolute;
left: var(--ct-space-3);
top: 50%;
transform: translateY(-50%);
opacity: 0.55;
font-size: 0.85rem;
pointer-events: none;
}
.search-box input[type="search"] {
margin: 0;
padding-left: calc(var(--ct-space-3) * 2 + 0.85rem);
background: var(--pico-background-color);
border-radius: var(--ct-radius-pill);
height: 2.4rem;
}
.topbar-actions {
display: flex;
align-items: center;
gap: var(--ct-space-2);
margin-left: auto;
}
.topbar-icon-btn {
all: unset;
cursor: pointer;
width: 2.4rem;
height: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ct-radius-pill);
font-size: 1.05rem;
opacity: 0.75;
}
.topbar-icon-btn:hover {
opacity: 1;
background: var(--pico-muted-border-color);
}
.topbar-divider {
width: 1px;
height: 1.6rem;
background: var(--pico-muted-border-color);
margin-inline: var(--ct-space-1);
}
.topbar-user {
display: flex;
align-items: center;
gap: var(--ct-space-2);
}
.topbar-avatar {
width: 2.2rem;
height: 2.2rem;
border-radius: var(--ct-radius-pill);
background: var(--ct-accent);
color: var(--ct-accent-contrast);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
.topbar-user-email {
font-size: 0.85rem;
white-space: nowrap;
display: none;
}
@media (min-width: 1100px) {
.topbar-user-email {
display: inline;
}
}
/* ---- Page header pattern ---------------------------------------------- */
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ct-space-4);
margin-bottom: var(--ct-space-5);
flex-wrap: wrap;
}
.page-header h1 {
margin-bottom: var(--ct-space-1);
}
.page-header p {
margin: 0;
}
/* ---- Card surfaces: sections, details, .card, the login panel --------- */
section,
details,
.card {
background: var(--pico-card-background-color);
border: var(--pico-border-width) solid var(--pico-card-border-color, var(--pico-muted-border-color));
border-radius: var(--ct-radius-md);
box-shadow: var(--ct-shadow-sm);
padding: var(--ct-card-padding);
}
section {
margin-block: var(--ct-space-6);
}
section > h2 {
margin-bottom: var(--ct-space-3);
font-size: 1.05rem;
}
details > summary {
margin: calc(var(--ct-card-padding) * -1);
padding: var(--ct-card-padding);
border-radius: var(--ct-radius-md);
cursor: pointer;
font-weight: 600;
}
details[open] > summary {
border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
border-radius: var(--ct-radius-md) var(--ct-radius-md) 0 0;
margin-bottom: var(--ct-space-4);
}
details > *:not(summary):last-child {
margin-bottom: 0;
}
/* Nested forms inside a card shouldn't add their own border/bg */
section form,
details form {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
/* ---- Stat cards (KPI tiles) --------------------------------------------- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--ct-space-4);
margin-bottom: var(--ct-space-6);
}
.stat-card {
background: var(--pico-card-background-color);
border: var(--pico-border-width) solid var(--pico-muted-border-color);
border-radius: var(--ct-radius-md);
box-shadow: var(--ct-shadow-sm);
padding: var(--ct-space-4) var(--ct-space-5);
border-left: 4px solid var(--stat-accent, var(--ct-accent));
}
.stat-card .stat-value {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.1;
}
.stat-card .stat-label {
font-size: 0.8rem;
color: var(--pico-muted-color);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: var(--ct-space-1);
}
.stat-card.stat-high { --stat-accent: #c0392b; }
.stat-card.stat-medium { --stat-accent: #d99a1f; }
.stat-card.stat-neutral { --stat-accent: var(--pico-muted-color); }
/* ---- Tables -------------------------------------------------------------- */
.table-scroll {
overflow-x: auto;
margin-block: var(--ct-space-4);
}
.table-scroll table {
margin: 0;
}
table thead th {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pico-muted-color);
font-weight: 700;
}
table tbody tr:hover {
background: color-mix(in srgb, var(--pico-muted-border-color) 40%, transparent);
}
/* ---- Badges (status / priority / stage) --------------------------------- */
.badge {
display: inline-block;
padding: 0.15rem 0.65rem;
border-radius: var(--ct-radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.badge-danger {
color: #ffffff;
background: #c0392b;
}
.badge-warning {
color: #7a4a00;
background: #f4c96a;
}
:root:not([data-theme="light"]) .badge-warning,
[data-theme="dark"] .badge-warning {
color: #2a1c00;
}
.badge-success {
color: #ffffff;
background: #1f9d55;
}
.badge-neutral {
color: var(--pico-muted-color);
background: var(--pico-muted-border-color);
}
/* Back-compat aliases used on the Opportunities screen */
.priority-badge {
display: inline-block;
padding: 0.15rem 0.65rem;
border-radius: var(--ct-radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.priority-high { color: #ffffff; background: #c0392b; }
.priority-medium { color: #7a4a00; background: #f4c96a; }
:root:not([data-theme="light"]) .priority-medium,
[data-theme="dark"] .priority-medium { color: #2a1c00; }
.priority-none { color: var(--pico-muted-color); background: var(--pico-muted-border-color); }
/* ---- Theme switch ------------------------------------------------------ */
.theme-switch {
display: inline-flex;
width: max-content;
gap: 0.125rem;
padding: 0.2rem;
background: var(--pico-muted-border-color);
border-radius: var(--ct-radius-pill);
}
.theme-switch button {
all: unset;
cursor: pointer;
width: 1.9rem;
height: 1.9rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--ct-radius-pill);
line-height: 1;
font-size: 0.95rem;
color: var(--pico-color);
opacity: 0.6;
}
.theme-switch button:hover {
opacity: 1;
}
.theme-switch button[aria-pressed="true"] {
background: var(--pico-background-color);
opacity: 1;
box-shadow: var(--ct-shadow-sm);
}
/* ---- Dashboard backgrounds --------------------------------------------
Real NASA photos (images.nasa.gov -- public domain, see
vendor/backgrounds/CREDITS.md for sources). A subtle dark scrim is
layered over each photo so translucent cards keep enough contrast to
stay readable regardless of the photo's own brightness. Selection is a
per-browser preference (localStorage), same mechanism as the theme
switch, applied before first paint via fragments/head.html. */
html[data-bg] {
background-size: cover;
background-position: center;
background-attachment: fixed;
}
html[data-bg="aurora"] {
background-image: linear-gradient(rgba(5, 8, 20, 0.35), rgba(5, 8, 20, 0.35)), url("/vendor/backgrounds/full/aurora.jpg");
}
html[data-bg="honey"] {
background-image: linear-gradient(rgba(20, 10, 0, 0.3), rgba(20, 10, 0, 0.3)), url("/vendor/backgrounds/full/honey.jpg");
}
html[data-bg="meadow"] {
background-image: linear-gradient(rgba(0, 10, 20, 0.25), rgba(0, 10, 20, 0.25)), url("/vendor/backgrounds/full/meadow.jpg");
}
html[data-bg="sunset"] {
background-image: linear-gradient(rgba(10, 5, 20, 0.3), rgba(10, 5, 20, 0.3)), url("/vendor/backgrounds/full/sunset.jpg");
}
html[data-bg="midnight"] {
background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("/vendor/backgrounds/full/midnight.jpg");
}
/* Content surfaces float as frosted glass over an active background;
the sidebar and topbar stay solid so wayfinding never loses contrast. */
html[data-bg]:not([data-bg="none"]) section,
html[data-bg]:not([data-bg="none"]) details,
html[data-bg]:not([data-bg="none"]) .card,
html[data-bg]:not([data-bg="none"]) .stat-card {
background: color-mix(in srgb, var(--pico-card-background-color) 82%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--ct-shadow-lg);
}
html[data-bg]:not([data-bg="none"]) .app-sidebar,
html[data-bg]:not([data-bg="none"]) .app-topbar {
background: color-mix(in srgb, var(--pico-card-background-color) 90%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* ---- Background picker ---------------------------------------------- */
.bg-picker {
position: relative;
}
.bg-picker-panel {
display: none;
position: absolute;
right: 0;
top: 2.8rem;
z-index: 20;
background: var(--pico-card-background-color);
border: var(--pico-border-width) solid var(--pico-muted-border-color);
border-radius: var(--ct-radius-md);
box-shadow: var(--ct-shadow-lg);
padding: var(--ct-space-3);
gap: var(--ct-space-2);
grid-template-columns: repeat(3, 2.6rem);
}
.bg-picker-panel.open {
display: grid;
}
.bg-swatch {
all: unset;
cursor: pointer;
width: 2.6rem;
height: 2.6rem;
border-radius: var(--ct-radius-sm);
border: 2px solid transparent;
background-size: cover;
}
.bg-swatch[aria-pressed="true"] {
border-color: var(--ct-accent);
}
.bg-swatch.bg-swatch-none {
background: repeating-linear-gradient(45deg, var(--pico-muted-border-color), var(--pico-muted-border-color) 4px, transparent 4px, transparent 8px);
}
.bg-swatch-aurora { background-image: url("/vendor/backgrounds/thumbs/aurora.jpg"); }
.bg-swatch-honey { background-image: url("/vendor/backgrounds/thumbs/honey.jpg"); }
.bg-swatch-meadow { background-image: url("/vendor/backgrounds/thumbs/meadow.jpg"); }
.bg-swatch-sunset { background-image: url("/vendor/backgrounds/thumbs/sunset.jpg"); }
.bg-swatch-midnight { background-image: url("/vendor/backgrounds/thumbs/midnight.jpg"); }
/* ---- Pagination ----------------------------------------------------------- */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ct-space-4);
flex-wrap: wrap;
margin-top: var(--ct-space-4);
padding-top: var(--ct-space-4);
border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
}
.pagination-info {
font-size: 0.85rem;
}
.pagination-controls {
display: flex;
gap: var(--ct-space-2);
}
.pagination-controls a[role="button"] {
margin: 0;
padding: var(--ct-space-2) var(--ct-space-4);
}
/* ---- Filter bars: search box + select filters on list pages ------------- */
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ct-space-3);
margin-bottom: var(--ct-space-4);
}
.filter-bar input[type="search"],
.filter-bar select {
margin: 0;
width: auto;
}
.filter-bar input[type="search"] {
min-width: 220px;
flex: 1;
}
/* ---- Dedup checkbox rows (import pages) ----------------------------------- */
.dedup-fields {
display: flex;
flex-wrap: wrap;
gap: var(--ct-space-4);
margin-block: var(--ct-space-3);
}
.dedup-fields label {
display: flex;
align-items: center;
gap: var(--ct-space-2);
width: auto;
margin: 0;
}
.dedup-fields input[type="checkbox"] {
margin: 0;
}
/* ---- Import result summary ------------------------------------------------ */
.import-summary {
display: flex;
flex-wrap: wrap;
gap: var(--ct-space-5);
margin-bottom: var(--ct-space-3);
}
.import-summary strong {
font-size: 1.3rem;
}
/* ---- Sidebar accordion (Imports / Exports) --------------------------------
inside the sidebar reuses the .sidebar-link look for its
instead of the card treatment `details` gets elsewhere. */
.sidebar-accordion {
border: none;
background: none;
box-shadow: none;
padding: 0;
}
.sidebar-accordion > summary {
display: flex;
align-items: center;
gap: var(--ct-space-3);
margin: 0;
padding: var(--ct-space-2) var(--ct-space-3);
border-radius: var(--ct-radius-sm);
font-size: 0.92rem;
font-weight: 400;
list-style: none;
}
.sidebar-accordion > summary::-webkit-details-marker {
display: none;
}
.sidebar-accordion > summary:hover {
background: var(--pico-muted-border-color);
}
.sidebar-accordion[open] > summary {
border-bottom: none;
margin-bottom: 0;
}
.sidebar-accordion-arrow {
margin-left: auto;
transition: transform 0.15s ease;
font-size: 0.7rem;
opacity: 0.6;
}
.sidebar-accordion[open] .sidebar-accordion-arrow {
transform: rotate(90deg);
}
.sidebar-accordion-items {
display: flex;
flex-direction: column;
gap: var(--ct-space-1);
padding-left: var(--ct-space-5);
margin-top: var(--ct-space-1);
}
.sidebar-accordion-items .sidebar-link {
font-size: 0.86rem;
}
@media (max-width: 900px) {
.sidebar-accordion-items,
.sidebar-accordion > summary span:not(.sidebar-link-icon) {
display: none;
}
}
/* ---- Small helpers ------------------------------------------------------ */
.muted {
color: var(--pico-muted-color);
}
.actions-cell {
display: flex;
gap: var(--ct-space-2);
white-space: nowrap;
}
.actions-cell form {
margin: 0;
}
/* ---- Responsive: collapse the sidebar to icons-only on narrow screens -- */
@media (max-width: 900px) {
.app-sidebar {
width: var(--ct-sidebar-width-collapsed);
align-items: center;
}
.sidebar-brand-text,
.sidebar-section-label,
.sidebar-link span:not(.sidebar-link-icon) {
display: none;
}
.sidebar-link {
justify-content: center;
width: 2.75rem;
}
.app-topbar {
padding-inline: var(--ct-space-3);
}
main.container {
padding-inline: var(--ct-space-4);
}
}
@media (max-width: 640px) {
.search-box {
order: 3;
max-width: none;
flex-basis: 100%;
}
.app-topbar {
height: auto;
padding-block: var(--ct-space-3);
}
}