/* ═══════════════════════════════════════════════════════════════════════
* portal.css — phase 31 batch 9 (Tier S rewrite)
*
* Design system:
* • Mobile-first responsive grid; breakpoints 640 / 1024 / 1280.
* • Light + dark themes. Auto via prefers-color-scheme; manual
* override via [data-theme="dark"|"light"] on .
* • Brand colour pulled from --accent (server-injected per
* store.brand_color), with a sensible default.
* • Type stack prefers Inter (loaded by template-side ),
* falls back to system-ui.
* • All interactive widgets are pure CSS where possible:
* for expandable rows, radio+:checked for tabs,
* :target for the lightbox no-JS fallback.
*
* Layered structure (read in order):
* 1. Tokens (custom properties)
* 2. Resets / base typography
* 3. Layout primitives (container, grid, header, footer)
* 4. Components (cards, buttons, badges, chips, tabs, lightbox)
* 5. Section-specific (dossier, calendar, login, etc.)
* 6. Utilities
* 7. Media queries (responsive + dark + print + reduced motion)
* ═══════════════════════════════════════════════════════════════════════ */
/* ─── 1. Tokens ──────────────────────────────────────────────────────── */
:root {
/* Brand. Override per-store via inline style on in _base.j2. */
--accent: #3b82f6; /* default: clean blue */
--accent-fg: #ffffff;
--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
--accent-hover: color-mix(in srgb, var(--accent) 85%, #000);
/* Surfaces */
--bg: #f7f7f8;
--surface: #ffffff;
--surface-2: #f1f3f5;
--surface-hover: #ececef;
--border: #e3e4e8;
--border-strong: #d0d2d8;
/* Text */
--fg: #111418;
--fg-muted: #5b6270;
--fg-subtle: #8a91a0;
--fg-on-accent: #ffffff;
/* Status colours (semantic, not brand) */
--ok: #16a34a;
--warn: #eab308;
--err: #dc2626;
--info: #0891b2;
--ok-soft: color-mix(in srgb, var(--ok) 14%, transparent);
--warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
--err-soft: color-mix(in srgb, var(--err) 14%, transparent);
--info-soft: color-mix(in srgb, var(--info) 14%, transparent);
/* Typography */
--font-sans:
"Inter", "Inter Variable",
-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-mono:
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
/* Spacing scale (multiples of 4px) */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
/* Radii */
--r-1: 4px;
--r-2: 8px;
--r-3: 12px;
--r-4: 16px;
--r-pill: 999px;
/* Shadows */
--shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
--shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
--shadow-3: 0 12px 32px rgba(15, 23, 42, 0.12);
/* Motion */
--t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
--t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
/* Layout */
--container-max: 1180px;
--header-h: 60px;
--content-pad: var(--s-5);
}
/* Dark mode tokens. Active when:
(a) the OS prefers dark AND no manual override, OR
(b) the user has clicked the toggle ([data-theme="dark"]). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0f1115;
--surface: #181b22;
--surface-2: #21252e;
--surface-hover: #2a2f3a;
--border: #2a2f3a;
--border-strong: #3a4150;
--fg: #e8eaef;
--fg-muted: #a1a8b6;
--fg-subtle: #6c7280;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}
}
:root[data-theme="dark"] {
--bg: #0f1115;
--surface: #181b22;
--surface-2: #21252e;
--surface-hover: #2a2f3a;
--border: #2a2f3a;
--border-strong: #3a4150;
--fg: #e8eaef;
--fg-muted: #a1a8b6;
--fg-subtle: #6c7280;
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
}
/* ─── 2. Reset / base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--t-fast);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
h1, h2, h3, h4, h5 {
margin: 0 0 var(--s-3);
line-height: 1.25;
font-weight: 650;
letter-spacing: -0.01em;
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; font-weight: 600; }
p { margin: 0 0 var(--s-3); }
img, svg { max-width: 100%; display: block; }
hr {
margin: var(--s-5) 0;
border: 0;
border-top: 1px solid var(--border);
}
button {
font-family: inherit;
}
/* Skip-to-main link — visible only when keyboard-focused. */
.skip-link {
position: absolute;
top: -40px;
left: var(--s-3);
background: var(--accent);
color: var(--accent-fg);
padding: var(--s-2) var(--s-4);
border-radius: var(--r-2);
z-index: 1000;
}
.skip-link:focus { top: var(--s-3); }
/* ─── 3. Layout ──────────────────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--content-pad);
padding-right: var(--content-pad);
}
main.container {
flex: 1 1 auto;
padding-top: var(--s-6);
padding-bottom: var(--s-12);
}
.app-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--border);
height: var(--header-h);
display: flex;
align-items: center;
}
.app-header__inner {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--content-pad);
display: flex;
align-items: center;
gap: var(--s-4);
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-weight: 650;
color: var(--fg);
letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; color: var(--fg); }
.brand img { height: 26px; width: auto; }
.app-nav {
display: flex;
gap: var(--s-2);
margin-left: auto;
align-items: center;
}
.app-nav a, .app-nav .nav-link {
display: inline-flex;
align-items: center;
gap: var(--s-1);
padding: var(--s-2) var(--s-3);
border-radius: var(--r-2);
color: var(--fg-muted);
font-weight: 500;
font-size: 14px;
}
.app-nav a:hover, .app-nav .nav-link:hover {
background: var(--surface-2);
color: var(--fg);
text-decoration: none;
}
.app-nav a.is-active {
background: var(--accent-soft);
color: var(--accent);
}
.app-footer {
margin-top: auto;
padding: var(--s-8) var(--content-pad);
border-top: 1px solid var(--border);
background: var(--surface);
font-size: 13px;
color: var(--fg-muted);
}
.app-footer__inner {
max-width: var(--container-max);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
justify-content: space-between;
align-items: center;
}
/* ─── 4. Components ──────────────────────────────────────────────────── */
/* Card — surface block with subtle shadow. */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-1);
padding: var(--s-5);
}
.card + .card { margin-top: var(--s-4); }
.card__head {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-4);
}
.card__head h2, .card__head h3 { margin: 0; }
.card__head .spacer { flex: 1; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--s-2);
padding: 9px 16px;
border-radius: var(--r-2);
border: 1px solid transparent;
font: inherit;
font-weight: 550;
font-size: 14px;
line-height: 1.25;
cursor: pointer;
user-select: none;
text-decoration: none;
transition: background var(--t-fast), border-color var(--t-fast),
color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn-primary {
background: var(--accent);
color: var(--accent-fg);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-fg); text-decoration: none; }
.btn-ghost {
background: transparent;
color: var(--fg);
border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }
.btn-danger {
background: var(--err);
color: white;
}
.btn-danger:hover { background: color-mix(in srgb, var(--err) 85%, #000); color: white; text-decoration: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-icon {
padding: 8px;
background: transparent;
border: 1px solid transparent;
color: var(--fg-muted);
border-radius: var(--r-2);
}
.btn-icon:hover { background: var(--surface-2); color: var(--fg); }
/* Badge / chip / pill */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--r-pill);
font-size: 12px;
font-weight: 600;
background: var(--surface-2);
color: var(--fg-muted);
letter-spacing: 0.01em;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 65%, #000); }
.badge-err { background: var(--err-soft); color: var(--err); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-accent{ background: var(--accent-soft); color: var(--accent); }
/* Status dots (used in project cards / invoice rows) */
.dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--fg-subtle);
}
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-err { background: var(--err); }
.dot-info { background: var(--info); }
/* Forms */
.form-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field label { font-size: 13px; font-weight: 600; color: var(--fg-muted); }
.field input, .field select, .field textarea {
font: inherit;
background: var(--surface);
color: var(--fg);
border: 1px solid var(--border);
border-radius: var(--r-2);
padding: 10px 12px;
width: 100%;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
/* Inline alerts */
.alert {
padding: var(--s-3) var(--s-4);
border-radius: var(--r-2);
border-left: 3px solid var(--info);
background: var(--info-soft);
font-size: 14px;
}
.alert-ok { border-color: var(--ok); background: var(--ok-soft); }
.alert-warn { border-color: var(--warn); background: var(--warn-soft); }
.alert-err { border-color: var(--err); background: var(--err-soft); }
/* Empty state */
.empty {
text-align: center;
padding: var(--s-10) var(--s-4);
color: var(--fg-muted);
background: var(--surface-2);
border-radius: var(--r-3);
border: 1px dashed var(--border-strong);
}
.empty svg { margin: 0 auto var(--s-3); opacity: 0.5; }
.empty h4 { color: var(--fg); margin-bottom: var(--s-1); }
/* Tables */
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table th, .table td {
text-align: left;
padding: var(--s-3) var(--s-3);
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.table th {
font-weight: 600;
color: var(--fg-muted);
background: var(--surface-2);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap {
overflow-x: auto;
border-radius: var(--r-3);
border: 1px solid var(--border);
}
.table-wrap .table { border: 0; }
/* Skeleton placeholder shimmer */
.skeleton {
background: linear-gradient(
90deg,
var(--surface-2) 0%,
var(--surface-hover) 50%,
var(--surface-2) 100%
);
background-size: 200% 100%;
animation: shimmer 1.4s ease-in-out infinite;
border-radius: var(--r-2);
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ─── 5. Section-specific ───────────────────────────────────────────── */
/* ── Hero summary cards (dossier top) ── */
.hero-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-4);
margin-bottom: var(--s-6);
}
.hero-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: var(--s-4) var(--s-5);
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: var(--shadow-1);
}
.hero-card__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-muted);
font-weight: 600;
}
.hero-card__value {
font-size: 24px;
font-weight: 650;
font-variant-numeric: tabular-nums;
color: var(--fg);
letter-spacing: -0.02em;
}
.hero-card__sub { font-size: 13px; color: var(--fg-muted); }
.hero-card.is-highlight { border-color: var(--accent); }
.hero-card.is-highlight .hero-card__value { color: var(--accent); }
/* ── 14-day calendar strip ── */
.cal-strip {
display: grid;
grid-template-columns: repeat(14, 1fr);
gap: var(--s-1);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
padding: var(--s-3);
margin-bottom: var(--s-6);
box-shadow: var(--shadow-1);
overflow-x: auto;
}
.cal-strip__day {
min-width: 56px;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--s-2);
border-radius: var(--r-2);
font-size: 13px;
background: var(--surface-2);
color: var(--fg-muted);
}
.cal-strip__day.is-today {
background: var(--accent);
color: var(--accent-fg);
font-weight: 600;
}
.cal-strip__day.has-event {
background: var(--accent-soft);
color: var(--accent);
border: 1px solid var(--accent);
}
.cal-strip__dow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-strip__num { font-size: 16px; font-weight: 650; }
.cal-strip__count {
margin-top: 2px;
font-size: 10px;
font-weight: 600;
background: var(--accent);
color: var(--accent-fg);
border-radius: var(--r-pill);
padding: 1px 6px;
}
/* ── Project card ── */
.project-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
margin-bottom: var(--s-4);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.project-card__head {
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--border);
}
.project-card__title-row {
display: flex;
align-items: center;
gap: var(--s-3);
margin-bottom: var(--s-2);
flex-wrap: wrap;
}
.project-card__title {
font-size: 18px;
font-weight: 650;
margin: 0;
}
.project-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
font-size: 13px;
color: var(--fg-muted);
}
.project-card__progress-wrap {
margin-top: var(--s-3);
display: flex;
align-items: center;
gap: var(--s-3);
}
.progress-bar {
flex: 1;
height: 8px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
}
.progress-bar__fill {
height: 100%;
background: var(--accent);
transition: width var(--t-base);
}
.progress-bar__label {
font-size: 12px;
color: var(--fg-muted);
font-variant-numeric: tabular-nums;
min-width: 60px;
text-align: right;
}
/* ── Project tabs (CSS-only via radio + :checked) ── */
.tabs {
background: var(--surface);
}
.tabs__radios { display: none; }
.tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
padding: 0 var(--s-3);
overflow-x: auto;
}
.tabs__label {
padding: var(--s-3) var(--s-4);
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: var(--fg-muted);
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color var(--t-fast), border-color var(--t-fast);
}
.tabs__label:hover { color: var(--fg); }
.tabs__panel { display: none; padding: var(--s-5); }
/* When the corresponding radio is :checked, show the panel + style label.
The pattern: each radio has id="prj--tab-"; the matching
panel has class="tabs__panel" + id="prj--pane-"; the
matching label uses for="prj--tab-". The combinator below
uses ~ which selects siblings — so radios + labels + panels must
all live as siblings inside the same .tabs container. */
.tabs__radios input[type="radio"]:checked + .tabs__label {
color: var(--accent);
border-bottom-color: var(--accent);
background: var(--surface);
}
/* Show the matching panel by id correspondence. */
.tabs input[type="radio"]:checked ~ .tabs__panel[data-tab="overview"] { display: none; }
.tabs__radios input[type="radio"]#__tab_overview:checked ~ .tabs__panels .tabs__panel[data-tab="overview"] { display: block; }
.tabs__radios input[type="radio"]#__tab_milestones:checked ~ .tabs__panels .tabs__panel[data-tab="milestones"] { display: block; }
.tabs__radios input[type="radio"]#__tab_photos:checked ~ .tabs__panels .tabs__panel[data-tab="photos"] { display: block; }
.tabs__radios input[type="radio"]#__tab_documents:checked ~ .tabs__panels .tabs__panel[data-tab="documents"] { display: block; }
.tabs__radios input[type="radio"]#__tab_invoices:checked ~ .tabs__panels .tabs__panel[data-tab="invoices"] { display: block; }
.tabs__radios input[type="radio"]#__tab_transactions:checked ~ .tabs__panels .tabs__panel[data-tab="transactions"] { display: block; }
.tabs__radios input[type="radio"]#__tab_receipts:checked ~ .tabs__panels .tabs__panel[data-tab="receipts"] { display: block; }
.tabs__radios input[type="radio"]#__tab_notes:checked ~ .tabs__panels .tabs__panel[data-tab="notes"] { display: block; }
/* JS-driven tabs (preferred when JS available — handles per-project
independence). Each project gets its own .tabs--js container with
data-active set by portal.js. */
.tabs--js .tabs__panel { display: none; }
.tabs--js .tabs__panel.is-active { display: block; }
.tabs--js .tabs__label.is-active {
color: var(--accent);
border-bottom-color: var(--accent);
background: var(--surface);
}
/* ── Photo gallery ── */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--s-2);
}
.photo-tile {
display: block;
aspect-ratio: 1;
background: var(--surface-2);
border-radius: var(--r-2);
overflow: hidden;
position: relative;
cursor: zoom-in;
}
.photo-tile img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--t-base);
}
.photo-tile:hover img { transform: scale(1.04); }
.photo-tile__caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--s-2);
font-size: 11px;
color: white;
background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
opacity: 0;
transition: opacity var(--t-fast);
}
.photo-tile:hover .photo-tile__caption,
.photo-tile:focus .photo-tile__caption { opacity: 1; }
/* Lightbox — pure CSS via :target, JS-enhanced via .is-open */
.lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 200;
padding: var(--s-6);
}
.lightbox:target,
.lightbox.is-open { display: flex; }
.lightbox__img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: var(--r-2);
}
.lightbox__close {
position: absolute;
top: var(--s-4);
right: var(--s-4);
background: rgba(0, 0, 0, 0.5);
color: white;
border: 0;
width: 44px; height: 44px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
}
.lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
border: 0;
width: 48px; height: 48px;
border-radius: 50%;
font-size: 22px;
cursor: pointer;
display: none;
}
.lightbox.is-open .lightbox__nav { display: block; }
.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }
.lightbox__caption {
position: absolute;
bottom: var(--s-4);
left: 50%;
transform: translateX(-50%);
color: white;
background: rgba(0, 0, 0, 0.5);
padding: var(--s-2) var(--s-4);
border-radius: var(--r-pill);
font-size: 13px;
max-width: 80%;
}
/* ── Document list ── */
.doc-list { display: flex; flex-direction: column; gap: var(--s-2); }
.doc-item {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3);
border: 1px solid var(--border);
border-radius: var(--r-2);
background: var(--surface);
text-decoration: none;
color: var(--fg);
transition: background var(--t-fast), border-color var(--t-fast);
}
.doc-item:hover {
background: var(--surface-2);
border-color: var(--border-strong);
text-decoration: none;
color: var(--fg);
}
.doc-item__icon {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: var(--r-2);
background: var(--accent-soft);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
}
.doc-item__name { font-weight: 500; flex: 1; word-break: break-word; }
.doc-item__type {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--fg-muted);
background: var(--surface-2);
padding: 2px 8px;
border-radius: var(--r-pill);
}
/* ── Invoice list / expandable rows ── */
.invoice-list { list-style: none; padding: 0; margin: 0; }
.invoice-row {
border: 1px solid var(--border);
border-radius: var(--r-2);
margin-bottom: var(--s-2);
background: var(--surface);
overflow: hidden;
}
.invoice-row[open] { border-color: var(--accent); }
.invoice-row > summary {
padding: var(--s-3) var(--s-4);
display: flex;
align-items: center;
gap: var(--s-3);
cursor: pointer;
list-style: none;
font-size: 14px;
}
.invoice-row > summary::-webkit-details-marker { display: none; }
.invoice-row > summary::before {
content: "›";
display: inline-block;
font-size: 18px;
color: var(--fg-muted);
width: 16px;
transition: transform var(--t-fast);
}
.invoice-row[open] > summary::before { transform: rotate(90deg); }
.invoice-row__num {
font-weight: 600;
font-family: var(--font-mono);
font-size: 13px;
}
.invoice-row__total { font-variant-numeric: tabular-nums; font-weight: 600; }
.invoice-row__balance { color: var(--err); }
.invoice-row__balance.is-paid { color: var(--ok); }
.invoice-row__body {
padding: var(--s-4) var(--s-5);
border-top: 1px solid var(--border);
background: var(--surface-2);
}
/* ── Milestone list ── */
.milestone-list { list-style: none; padding: 0; margin: 0; }
.milestone-item {
padding: var(--s-3);
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-start;
gap: var(--s-3);
}
.milestone-item:last-child { border-bottom: 0; }
.milestone-item__check {
flex: 0 0 auto;
width: 22px; height: 22px;
border: 2px solid var(--border-strong);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px;
}
.milestone-item.is-done .milestone-item__check {
background: var(--ok);
border-color: var(--ok);
color: white;
}
.milestone-item__title { font-weight: 550; }
.milestone-item.is-done .milestone-item__title {
text-decoration: line-through;
color: var(--fg-muted);
}
.milestone-item__sub {
margin-top: var(--s-2);
margin-left: var(--s-4);
padding-left: var(--s-3);
border-left: 2px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--s-1);
}
.milestone-item__sub-row {
display: flex;
align-items: center;
gap: var(--s-2);
font-size: 13px;
color: var(--fg-muted);
}
/* ── Notes list ── */
.note-card {
background: var(--surface-2);
border-radius: var(--r-2);
padding: var(--s-3) var(--s-4);
margin-bottom: var(--s-2);
border-left: 3px solid var(--accent);
}
.note-card__date {
font-size: 11px;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--s-1);
}
.note-card__body {
font-size: 14px;
white-space: pre-wrap;
word-wrap: break-word;
}
/* ── Login / register / centered card ── */
.center-frame {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--header-h) - 80px);
padding: var(--s-6);
}
.auth-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
box-shadow: var(--shadow-2);
padding: var(--s-8);
width: 100%;
max-width: 420px;
}
.auth-card h1 { text-align: center; margin-bottom: var(--s-6); }
.auth-card p.lead {
text-align: center;
color: var(--fg-muted);
margin-bottom: var(--s-6);
}
.auth-card .form-actions {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-top: var(--s-5);
}
.auth-card .alt-link {
text-align: center;
margin-top: var(--s-4);
font-size: 14px;
color: var(--fg-muted);
}
/* ── Calendar (month grid) ── */
.cal-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--r-3);
overflow: hidden;
}
.cal-month-grid__head {
background: var(--surface-2);
padding: var(--s-2);
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.cal-month-grid__cell {
background: var(--surface);
min-height: 100px;
padding: var(--s-2);
font-size: 13px;
}
.cal-month-grid__cell.is-other-month { background: var(--surface-2); color: var(--fg-subtle); }
.cal-month-grid__cell.is-today { background: var(--accent-soft); }
.cal-month-grid__date {
font-weight: 600;
margin-bottom: var(--s-1);
}
.cal-event {
display: block;
padding: 2px 6px;
margin-bottom: 2px;
border-radius: 4px;
background: var(--accent-soft);
color: var(--accent);
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-event.is-busy { background: var(--surface-2); color: var(--fg-muted); }
/* ── Theme toggle button ── */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-2);
color: var(--fg-muted);
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.theme-toggle:hover {
background: var(--surface-2);
color: var(--fg);
}
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root:not([data-theme="light"]) .theme-toggle .icon-sun {
display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-moon,
:root:not([data-theme="light"]) .theme-toggle .icon-moon {
display: block;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: block; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: none; }
}
/* ── Action items badge ── */
.action-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--r-pill);
background: var(--err);
color: white;
font-size: 11px;
font-weight: 700;
margin-left: 6px;
}
/* ── Copy-to-clipboard inline button ── */
.copy-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid var(--border);
color: var(--fg-muted);
padding: 2px 6px;
border-radius: var(--r-1);
font-size: 12px;
cursor: pointer;
margin-left: var(--s-2);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.copy-trigger:hover {
background: var(--surface-2);
color: var(--fg);
border-color: var(--border-strong);
}
.copy-trigger.is-copied {
background: var(--ok-soft);
color: var(--ok);
border-color: var(--ok);
}
/* ── Dashboard list (linked stores) ── */
.link-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--s-4);
}
.link-card {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-3);
text-decoration: none;
color: var(--fg);
transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
box-shadow: var(--shadow-1);
}
.link-card:hover {
text-decoration: none;
color: var(--fg);
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: var(--shadow-2);
}
.link-card__store { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.link-card__client { font-size: 18px; font-weight: 650; }
/* ─── 6. Utilities ───────────────────────────────────────────────────── */
.u-flex { display: flex; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-gap-1 { gap: var(--s-1); }
.u-gap-2 { gap: var(--s-2); }
.u-gap-3 { gap: var(--s-3); }
.u-gap-4 { gap: var(--s-4); }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mb-2 { margin-bottom: var(--s-2); }
.u-mb-3 { margin-bottom: var(--s-3); }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-6 { margin-bottom: var(--s-6); }
.u-text-muted { color: var(--fg-muted); }
.u-text-subtle { color: var(--fg-subtle); }
.u-text-sm { font-size: 13px; }
.u-text-xs { font-size: 12px; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-mono { font-family: var(--font-mono); }
.u-hidden { display: none !important; }
.u-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.u-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── 7. Media queries ──────────────────────────────────────────────── */
@media (max-width: 640px) {
:root { --content-pad: var(--s-3); }
h1 { font-size: 22px; }
h2 { font-size: 19px; }
.field-row { grid-template-columns: 1fr; }
.auth-card { padding: var(--s-5); }
.app-header__inner { gap: var(--s-2); }
.app-nav { gap: 0; }
.app-nav a, .app-nav .nav-link { padding: var(--s-1) var(--s-2); font-size: 13px; }
.hero-card__value { font-size: 20px; }
.cal-strip { padding: var(--s-2); }
.cal-strip__day { min-width: 44px; padding: var(--s-1); }
.cal-strip__num { font-size: 14px; }
.cal-month-grid__cell { min-height: 64px; padding: 4px; font-size: 11px; }
}
@media (min-width: 1024px) {
.dossier-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--s-6);
align-items: start;
}
.dossier-aside {
position: sticky;
top: calc(var(--header-h) + var(--s-4));
}
}
/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* === PASS K: portal calendar v2 components === */
/* ── Timezone banner (calendar + calendar_day) ───────────────── */
.tz-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
padding: var(--s-2) var(--s-3);
margin-bottom: var(--s-4);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-3);
font-size: 13px;
color: var(--fg-muted);
}
.tz-banner__hours { font-size: 12px; }
/* ── Clickable month-grid cell (anchor) ──────────────────────── */
/* Pass K replaces in-month cells with
deep-links to the
day view. Reset anchor defaults + add a tap-friendly hover. */
a.cal-month-grid__cell {
color: inherit;
text-decoration: none;
display: block;
transition: background 0.15s;
}
a.cal-month-grid__cell.is-clickable:hover {
background: var(--surface-2);
cursor: pointer;
}
a.cal-month-grid__cell.is-today.is-clickable:hover {
background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2));
}
a.cal-month-grid__cell:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* ── Slot grid (calendar_day_page) ───────────────────────────── */
/* Responsive: 2 columns on phone, 3 on tablet, 4 on desktop.
≥44 px tap-target to match iOS/Android guidelines. */
.slot-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-2);
padding: var(--s-3);
}
@media (min-width: 540px) {
.slot-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 800px) {
.slot-grid { grid-template-columns: repeat(4, 1fr); }
}
.slot-grid__cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 56px;
padding: var(--s-2);
border-radius: var(--r-3);
border: 1px solid var(--border);
background: var(--surface);
text-decoration: none;
color: inherit;
font-size: 13px;
transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.slot-grid__cell.is-open {
border-color: var(--accent);
color: var(--accent);
cursor: pointer;
}
.slot-grid__cell.is-open:hover {
background: var(--accent-soft);
transform: translateY(-1px);
}
.slot-grid__cell.is-busy {
background: var(--surface-2);
color: var(--fg-subtle);
cursor: not-allowed;
}
.slot-grid__cell.is-busy.is-past {
opacity: 0.55;
text-decoration: line-through;
}
.slot-grid__time {
font-weight: 600;
font-size: 15px;
}
.slot-grid__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
/* ── Duration chips (request_slot form) ──────────────────────── */
.duration-chips {
display: flex;
gap: var(--s-2);
flex-wrap: wrap;
}
.duration-chip {
padding: 10px 16px;
min-height: 44px;
border-radius: var(--r-3);
border: 1px solid var(--border);
background: var(--surface);
color: var(--fg);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.duration-chip:hover {
background: var(--surface-2);
}
.duration-chip.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-fg);
}
.duration-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Nav widget: recent stores (top nav) ─────────────────────── */
.nav-stores {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 var(--s-2);
flex-wrap: wrap;
}
.nav-stores__pill {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background: var(--surface-2);
color: var(--fg-muted);
font-size: 12px;
text-decoration: none;
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.15s, color 0.15s;
}
.nav-stores__pill:hover {
background: var(--accent-soft);
color: var(--accent);
text-decoration: none;
}
@media (max-width: 540px) {
/* On phones, collapse to just the first 2 pills to save space. */
.nav-stores__pill:nth-child(n+3) { display: none; }
}
/* ── Read-only form row (Requested by: …) ────────────────────── */
.form-readonly-row {
display: flex;
align-items: baseline;
gap: var(--s-2);
padding: var(--s-2);
background: var(--surface-2);
border-radius: var(--r-2);
font-size: 14px;
}
/* === END PASS K === */
/* Print. */
@media print {
.app-header, .app-footer, .app-nav, .theme-toggle, .copy-trigger,
.lightbox, .tabs__nav, .cal-strip {
display: none !important;
}
body, .container, main.container {
background: white !important;
color: black !important;
padding: 0 !important;
}
.card, .project-card, .invoice-row, .auth-card {
border: 1px solid #ccc !important;
box-shadow: none !important;
page-break-inside: avoid;
}
.tabs__panel { display: block !important; padding: 0 !important; }
a { color: black !important; text-decoration: underline; }
.photo-tile { break-inside: avoid; }
}
/* ═══════════════════════════════════════════════════════════════════
* PHASE 3 F6 dossier-sign-widget — signature pad styles
*
* Appended to portal.css. All colours via :root tokens so the widget
* inherits the per-store --accent override and the light/dark themes.
* ═══════════════════════════════════════════════════════════════════ */
.sig-block {
margin: var(--s-3) 0;
}
.sig-details {
border: 1px solid var(--border);
border-radius: var(--r-2);
background: var(--surface);
overflow: hidden;
}
.sig-summary {
display: flex;
align-items: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
cursor: pointer;
font-weight: 600;
color: var(--fg);
list-style: none;
user-select: none;
}
/* Hide the native disclosure triangle; we draw our own caret. */
.sig-summary::-webkit-details-marker { display: none; }
.sig-summary::marker { content: ""; }
.sig-summary::after {
content: "";
width: 7px;
height: 7px;
margin-left: auto;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform 150ms ease;
opacity: 0.55;
}
.sig-details[open] .sig-summary::after {
transform: rotate(45deg);
}
.sig-summary__icon {
display: inline-flex;
color: var(--accent);
}
.sig-body {
padding: var(--s-4);
border-top: 1px solid var(--border);
}
.sig-intro {
margin: 0 0 var(--s-4);
font-size: 14px;
}
/* The pad wrapper is position:relative so the placeholder hint can be
* absolutely centred over the canvas. */
.sig-pad-wrap {
position: relative;
width: 100%;
}
.sig-pad {
display: block;
width: 100%;
height: 180px;
border: 1px dashed var(--border-strong);
border-radius: var(--r-2);
/* Always white — a signature is a document field, not themed UI.
* The JS also fills the canvas BITMAP white so the captured PNG
* carries an explicit white background (correct for the PDF embed
* and the operator badge). See the WHITE CANVAS note in portal.js. */
background: #ffffff;
/* touch-action:none lets the customer draw with a finger without the
* browser hijacking the gesture to scroll/zoom the page. */
touch-action: none;
cursor: crosshair;
}
.sig-pad__hint {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
/* Fixed mid-grey — the pad is always white, so this must not follow
* the theme (a light-theme --fg-subtle would vanish on white). */
color: #6b7280;
font-size: 14px;
font-style: italic;
}
.sig-error {
margin: var(--s-2) 0 0;
color: var(--err);
font-size: 13px;
font-weight: 600;
}
/* Each sign-form field wraps its inside the