/* ========================================================================= Greenlight — design system ========================================================================= Hand-written on purpose: there is no CSS build step, so branding colours can be swapped at runtime through the custom properties injected by the Branding service, and a server update never needs Node. --brand / --accent and their derived tints come from . Everything else is defined here. Mobile-first: every rule is written for a 375px phone, and @media (min-width) blocks progressively add tablet and desktop layout. ========================================================================= */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } :where(a) { color: var(--link); } /* ---------- Tokens ---------- */ :root { /* Neutrals — slightly warm, so the brand green does not read as clinical. */ --grey-0: #ffffff; --grey-25: #fbfbfa; --grey-50: #f6f6f5; --grey-100:#eeeeec; --grey-150:#e4e4e1; --grey-200:#d8d8d4; --grey-300:#bebeb8; --grey-400:#95958e; --grey-500:#71716b; --grey-600:#616159; --grey-650:#565651; --grey-700:#3f3f3b; --grey-800:#2a2a27; --grey-900:#1a1a18; --surface: var(--grey-0); --surface-sunken: var(--grey-50); --surface-raised: var(--grey-0); --canvas: var(--grey-25); --text: var(--grey-900); --text-muted: var(--grey-500); --text-subtle: var(--grey-400); --text-invert: #ffffff; --border: var(--grey-150); --border-strong: var(--grey-200); --link: var(--brand-dark, #16794a); /* Semantic */ --danger: #c3352b; --danger-bg: #fdf2f1; --danger-border: #f2c9c5; --warn: #a96a00; --warn-bg: #fff8ea; --warn-border: #f0dcb4; --success: #1c7a4a; --success-bg: #eefaf3; --success-border:#bfe6d1; --info: #1c5f9e; --info-bg: #eef5fd; --info-border: #c5dcf3; /* Project status palette — deliberately distinct at a glance in the grid. */ --status-talks: #8a8a84; --status-confirmed: #2f7fc4; --status-signed: #6b4fd8; --status-underway: #1f9d55; --status-complete: #4c8a76; --status-cancelled: #b0403a; /* Typography */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-md: 0.875rem; --fs-base:0.9375rem; --fs-lg: 1.0625rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; /* Spacing */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10:2.5rem; --s-12:3rem; --radius-sm: 4px; --radius: 7px; --radius-lg: 11px; --radius-xl: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(0 0 0 / .05); --shadow: 0 1px 3px rgb(0 0 0 / .07), 0 1px 2px rgb(0 0 0 / .04); --shadow-md: 0 4px 12px rgb(0 0 0 / .08), 0 2px 4px rgb(0 0 0 / .04); --shadow-lg: 0 12px 32px rgb(0 0 0 / .12), 0 4px 8px rgb(0 0 0 / .06); --sidebar-w: 240px; --header-h: 56px; /* Comfortable thumb target; every interactive element respects it. */ --tap: 44px; --ring: 0 0 0 3px rgb(var(--brand-rgb) / .28); } /* ---------- Base ---------- */ body { /* Nothing should ever scroll the page sideways; wide content scrolls inside its own container instead (tables, the calendar). */ overflow-x: clip; font-family: var(--font); font-size: var(--fs-base); line-height: 1.5; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } h1, h2, h3, h4 { line-height: 1.25; font-weight: 600; letter-spacing: -.011em; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-base); } a { text-underline-offset: 2px; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* Skip link for keyboard users. */ .skip-link { position: absolute; left: var(--s-2); top: -100px; z-index: 100; background: var(--brand); color: var(--brand-contrast); padding: var(--s-2) var(--s-4); border-radius: var(--radius); transition: top .15s; } .skip-link:focus { top: var(--s-2); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* * The UA stylesheet's [hidden] rule loses to any class that sets `display`, * so every element toggled with the hidden attribute — modals, drawers, the * selected-customer block, status panels — would render regardless. This must * stay above the component styles. */ [hidden] { display: none !important; } /* ========================================================================= Layout — app shell ========================================================================= */ .app { min-height: 100dvh; display: flex; flex-direction: column; } /* --- Top bar (always present; becomes the desktop header too) --- */ .topbar { position: sticky; top: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar__brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 650; letter-spacing: -.015em; color: var(--text); text-decoration: none; min-width: 0; } .topbar__brand:hover { text-decoration: none; } .topbar__logo { height: 26px; width: auto; max-width: 150px; object-fit: contain; } .topbar__mark { width: 26px; height: 26px; flex: 0 0 auto; border-radius: var(--radius-sm); background: var(--brand); color: var(--brand-contrast); display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; } .topbar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar__spacer { flex: 1 1 auto; } .icon-button { width: var(--tap); height: var(--tap); flex: 0 0 auto; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; } .icon-button:hover { background: var(--grey-50); color: var(--text); } .icon-button svg { width: 20px; height: 20px; } /* --- Navigation --- */ .nav-toggle { display: grid; } .nav { position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(84vw, 300px); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .22s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; overscroll-behavior: contain; } .nav.is-open { transform: translateX(0); } .nav__scrim { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / .34); opacity: 0; pointer-events: none; transition: opacity .2s; } .nav__scrim.is-open { opacity: 1; pointer-events: auto; } .nav__head { height: var(--header-h); display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); border-bottom: 1px solid var(--border); } .nav__body { padding: var(--s-3) var(--s-2); flex: 1 1 auto; } .nav__section + .nav__section { margin-top: var(--s-5); } .nav__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); padding: 0 var(--s-3); margin-bottom: var(--s-2); } .nav__link { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: 0 var(--s-3); border-radius: var(--radius); color: var(--grey-700); text-decoration: none; font-weight: 500; position: relative; } .nav__link:hover { background: var(--grey-50); color: var(--text); text-decoration: none; } .nav__link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .78; } .nav__link.is-active { background: var(--brand-lighter); color: var(--brand-darker); font-weight: 600; } .nav__link.is-active svg { opacity: 1; } .nav__badge { margin-left: auto; background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); display: grid; place-items: center; } .nav__foot { border-top: 1px solid var(--border); padding: var(--s-3) var(--s-2); } .nav__user { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius); text-decoration: none; color: var(--text); min-height: var(--tap); } .nav__user:hover { background: var(--grey-50); text-decoration: none; } .avatar { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); color: var(--brand-contrast); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; } .nav__user-meta { min-width: 0; line-height: 1.3; } .nav__user-name { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav__user-role { font-size: var(--fs-xs); color: var(--text-muted); } /* --- Main --- */ .main { flex: 1 1 auto; min-width: 0; padding: var(--s-4) var(--s-3) var(--s-12); } .container { max-width: 1360px; margin-inline: auto; } .container--narrow { max-width: 760px; } .container--mid { max-width: 1040px; } /* --- Desktop: permanent sidebar --- */ @media (min-width: 1024px) { .app { flex-direction: row; } .nav { position: sticky; top: 0; height: 100dvh; width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); transform: none; transition: none; } .nav__scrim { display: none; } .nav-toggle { display: none; } .app__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .topbar { padding: 0 var(--s-6); } .topbar__brand { display: none; } .main { padding: var(--s-6) var(--s-6) var(--s-12); } } /* ========================================================================= Page furniture ========================================================================= */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-5); } .page-head__text { flex: 1 1 260px; min-width: 0; } .page-head__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); } .page-title { font-size: var(--fs-2xl); letter-spacing: -.02em; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .page-subtitle { color: var(--text-muted); font-size: var(--fs-md); margin-top: var(--s-1); } .breadcrumb { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-2); } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--text); text-decoration: underline; } .breadcrumb svg { width: 14px; height: 14px; opacity: .5; } @media (min-width: 768px) { .page-title { font-size: var(--fs-3xl); } } /* ========================================================================= Cards & panels ========================================================================= */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card__head { display: flex; align-items: center; /* Wraps rather than forcing the card wider than the viewport: a long title plus an action button will not fit side by side at 375px. */ flex-wrap: wrap; gap: var(--s-2) var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); } .card__head h2, .card__head h3 { font-size: var(--fs-base); font-weight: 650; min-width: 0; flex: 1 1 auto; } .card__head-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .card__body { padding: var(--s-4); } .card__body--flush { padding: 0; } .card__foot { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); background: var(--surface-sunken); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .card__hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-1); } .grid { display: grid; gap: var(--s-4); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--sidebar { grid-template-columns: 1fr; } @media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1180px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--sidebar { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } } .grid > * { min-width: 0; } .stack { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; } .stack > * { min-width: 0; } .stack--sm { gap: var(--s-2); } .stack--lg { gap: var(--s-6); } .row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .row--tight { gap: var(--s-1); } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-4); border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: var(--fs-md); font-weight: 550; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; } .btn:hover { background: var(--grey-50); text-decoration: none; } .btn:active { background: var(--grey-100); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); } .btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .btn--primary:active { background: var(--brand-darker); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn--danger:hover { background: #a72c23; border-color: #a72c23; } .btn--ghost { border-color: transparent; background: transparent; } .btn--ghost:hover { background: var(--grey-50); } .btn--subtle { background: var(--grey-50); border-color: var(--border); } .btn--sm { min-height: 34px; padding: 0 var(--s-3); font-size: var(--fs-sm); } .btn--sm svg { width: 15px; height: 15px; } .btn--block { width: 100%; } .btn--icon { padding: 0; width: var(--tap); } .btn--icon.btn--sm { width: 34px; } .btn-group { display: inline-flex; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-strong); } .btn-group .btn { border: 0; border-radius: 0; min-height: 38px; } .btn-group .btn + .btn { border-left: 1px solid var(--border-strong); } .btn-group .btn.is-active { background: var(--brand-lighter); color: var(--brand-darker); font-weight: 650; } /* ========================================================================= Forms ========================================================================= */ .field { display: flex; flex-direction: column; gap: var(--s-2); } .field + .field { margin-top: var(--s-4); } .label { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; } .label__optional { font-weight: 400; font-size: var(--fs-xs); color: var(--text-subtle); } .input, .select, .textarea { width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); /* 16px stops iOS Safari zooming on focus. */ font-size: 16px; transition: border-color .12s, box-shadow .12s; } @media (min-width: 768px) { .input, .select, .textarea { font-size: var(--fs-base); } } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .input::placeholder, .textarea::placeholder { color: var(--text-subtle); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--grey-50); color: var(--text-muted); cursor: not-allowed; } .textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371716b'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%2371716b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 18px; padding-right: var(--s-8); } html[dir="rtl"] .select { background-position: left var(--s-3) center; padding-right: var(--s-3); padding-left: var(--s-8); } .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); } .input.is-invalid:focus { box-shadow: 0 0 0 3px rgb(195 53 43 / .18); } .field__error { color: var(--danger); font-size: var(--fs-sm); font-weight: 500; } .field__hint { color: var(--text-muted); font-size: var(--fs-sm); } .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: var(--radius) 0 0 var(--radius); } .input-group__addon { display: grid; place-items: center; padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; background: var(--grey-50); color: var(--text-muted); font-size: var(--fs-md); white-space: nowrap; } /* Checkbox & radio */ .check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: var(--tap); cursor: pointer; padding: var(--s-1) 0; } .check input { margin: 0; width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--brand); cursor: pointer; } .check__text { font-size: var(--fs-md); line-height: 1.45; } .check__text strong { font-weight: 600; display: block; } .check__text span { color: var(--text-muted); font-size: var(--fs-sm); } /* A row of toggleable chips — used for weekdays, statuses, filters. */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 38px; padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-sm); font-weight: 550; cursor: pointer; user-select: none; white-space: nowrap; color: var(--grey-700); } .chip:hover { background: var(--grey-50); } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip:has(input:checked) { background: var(--brand-lighter); border-color: var(--brand); color: var(--brand-darker); } .chip:has(input:focus-visible) { box-shadow: var(--ring); } .chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .fieldset { border: 0; padding: 0; margin: 0; } .fieldset > legend { font-size: var(--fs-md); font-weight: 600; padding: 0; margin-bottom: var(--s-2); } .form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid var(--border); } .form-actions--sticky { position: sticky; bottom: 0; background: var(--surface); padding: var(--s-3) var(--s-4); margin: var(--s-4) calc(var(--s-4) * -1) calc(var(--s-4) * -1); border-radius: 0 0 var(--radius-lg) var(--radius-lg); z-index: 10; box-shadow: 0 -4px 12px rgb(0 0 0 / .05); } /* ========================================================================= Badges, pills, alerts ========================================================================= */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; } .badge--neutral { background: var(--grey-100); color: var(--grey-700); } .badge--success { background: var(--success-bg); color: var(--success); } .badge--warn { background: var(--warn-bg); color: var(--warn); } .badge--danger { background: var(--danger-bg); color: var(--danger); } .badge--info { background: var(--info-bg); color: var(--info); } .badge--brand { background: var(--brand-lighter); color: var(--brand-darker); } /* Status pills share one shape; the hue comes from the status token. */ .status { display: inline-flex; align-items: center; gap: 6px; padding: 3px var(--s-2) 3px var(--s-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 650; line-height: 1.45; white-space: nowrap; background: var(--grey-100); color: var(--grey-700); } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .status--talks { background: #f1f1ef; color: #5f5f59; } .status--confirmed { background: #e9f2fb; color: #1f5f95; } .status--signed { background: #efecfd; color: #4c34ad; } .status--underway { background: #e7f7ee; color: #15794a; } .status--complete { background: #eaf4f0; color: #2f6a58; } .status--cancelled { background: #fbeceb; color: #96322c; } .alert { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid; border-radius: var(--radius); font-size: var(--fs-md); line-height: 1.5; } .alert svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; } .alert__body { min-width: 0; flex: 1 1 auto; } .alert__title { font-weight: 650; } .alert ul { margin: var(--s-1) 0 0; padding-left: var(--s-4); list-style: disc; } .alert--success { background: var(--success-bg); border-color: var(--success-border); color: #14603a; } .alert--danger { background: var(--danger-bg); border-color: var(--danger-border); color: #8f2620; } .alert--warn { background: var(--warn-bg); border-color: var(--warn-border); color: #7d4f00; } .alert--info { background: var(--info-bg); border-color: var(--info-border); color: #16497a; } /* Toast-style flash, top-right on desktop, full-width on phones. */ .flash { position: fixed; z-index: 80; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); box-shadow: var(--shadow-lg); animation: flash-in .24s ease-out; } @keyframes flash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (min-width: 768px) { .flash { left: auto; bottom: auto; top: calc(var(--header-h) + var(--s-3)); right: var(--s-4); max-width: 420px; } } /* ========================================================================= Tables & lists ========================================================================= */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { font-size: var(--fs-md); } .table th { text-align: left; font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-sunken); } .table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .table th a:hover { color: var(--text); } .table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--grey-25); } .table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table__actions { text-align: right; white-space: nowrap; width: 1%; } .table__primary { font-weight: 600; } .table__meta { color: var(--text-muted); font-size: var(--fs-sm); } /* Below tablet, tables become stacked cards driven by data-label. */ @media (max-width: 767px) { .table--responsive thead { display: none; } .table--responsive tbody tr { display: block; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); } .table--responsive tbody tr:last-child { border-bottom: 0; } .table--responsive td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 3px 0; border: 0; } .table--responsive td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); flex: 0 0 auto; } .table--responsive td:not([data-label])::before { content: none; } .table--responsive td.table__actions { justify-content: flex-end; padding-top: var(--s-2); width: auto; } .table--responsive td.cell-main { display: block; padding-bottom: var(--s-2); } } .list { display: flex; flex-direction: column; } .list__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; min-height: 56px; } .list__item:last-child { border-bottom: 0; } a.list__item:hover { background: var(--grey-25); text-decoration: none; } .list__item > svg { width: 18px; height: 18px; } .list__main { flex: 1 1 auto; min-width: 0; } .list__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list__meta { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list__aside { flex: 0 0 auto; text-align: right; font-size: var(--fs-sm); color: var(--text-muted); } .empty { padding: var(--s-10) var(--s-4); text-align: center; color: var(--text-muted); } .empty svg { width: 36px; height: 36px; margin: 0 auto var(--s-3); opacity: .35; } .empty__title { font-weight: 600; color: var(--text); margin-bottom: var(--s-1); } .empty__hint { font-size: var(--fs-md); } .empty--sm { padding: var(--s-6) var(--s-4); } .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); } .pagination__pages { display: flex; gap: var(--s-1); margin-left: auto; flex-wrap: wrap; } .pagination__link { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: var(--surface); } .pagination__link:hover { background: var(--grey-50); text-decoration: none; } .pagination__link.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); font-weight: 650; } .pagination__link.is-disabled { opacity: .4; pointer-events: none; } /* Definition list used on every "view" page. */ .dl { display: grid; gap: var(--s-3); } .dl > div { display: grid; gap: 2px; } .dl dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); } .dl dd { font-size: var(--fs-base); } .dl dd.is-empty { color: var(--text-subtle); font-style: italic; } @media (min-width: 640px) { .dl--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } } /* ========================================================================= Calendar ========================================================================= Two layouts over identical markup semantics. .cal--weeks one column per week, seven weekday rows. Scrolls sideways, with the weekday labels pinned to the left edge. This is the spec's primary layout and happens to be the one that survives a 375px screen intact. .cal--classic the familiar month grid: weeks run across, days down. ========================================================================= */ .cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); } .cal-toolbar__label { font-weight: 650; font-size: var(--fs-lg); letter-spacing: -.01em; margin-inline: var(--s-2); white-space: nowrap; } .cal-toolbar__group { display: flex; align-items: center; gap: var(--s-1); } .cal-toolbar__spacer { flex: 1 1 auto; } .cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } /* ---------- Shared day-cell presentation ---------- */ .cal-day { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 5px 6px 6px; border: 0; background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; overflow: hidden; } .cal-day:hover { background: var(--grey-25); } .cal-day:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; z-index: 2; } .cal-day--off { background: var(--grey-50); cursor: default; } .cal-day--off:hover { background: var(--grey-50); } .cal-day--outside { opacity: .45; } .cal-day--today { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; } /* Pressure wash: the busier the day, the warmer the tint. Kept very light so project chips stay legible on top of it. */ .cal-day--busy { background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); } .cal-day--full { background: color-mix(in srgb, var(--warn-bg) 100%, var(--surface)); } .cal-day--over { background: var(--danger-bg); } .cal-day--over:hover { background: color-mix(in srgb, var(--danger-bg) 88%, var(--grey-100)); } .cal-day__head { display: flex; align-items: center; gap: 4px; min-height: 18px; } .cal-day__num { font-size: var(--fs-xs); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text-muted); line-height: 1; } .cal-day--today .cal-day__num { background: var(--accent); color: var(--accent-contrast); border-radius: var(--radius-pill); padding: 3px 6px; margin: -2px -2px -2px 0; } .cal-day__month { font-size: 10px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; } .cal-day__warn { margin-left: auto; width: 16px; height: 16px; flex: 0 0 auto; color: var(--danger); cursor: help; } .cal-day__warn svg { width: 100%; height: 100%; } .cal-day__off-label { font-size: 10px; color: var(--text-subtle); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-day__projects { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cal-chip { display: block; font-size: 11px; line-height: 1.35; padding: 2px 5px; border-radius: var(--radius-sm); border-left: 3px solid var(--chip, var(--grey-400)); background: color-mix(in srgb, var(--chip, var(--grey-400)) 12%, var(--surface)); color: var(--grey-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; text-decoration: none; } a.cal-chip:hover { text-decoration: none; filter: brightness(.96); } .cal-chip--talks { --chip: var(--status-talks); } .cal-chip--confirmed { --chip: var(--status-confirmed); } .cal-chip--signed { --chip: var(--status-signed); } .cal-chip--underway { --chip: var(--status-underway); } .cal-chip--complete { --chip: var(--status-complete); } .cal-chip--cancelled { --chip: var(--status-cancelled); text-decoration: line-through; opacity: .7; } .cal-chip--start { border-radius: var(--radius-sm); } .cal-chip--more { font-size: 10px; color: var(--text-muted); padding: 0 5px; border: 0; background: none; font-weight: 600; } /* ---------- Weeks layout ---------- */ .cal--weeks { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; /* The weekday labels are a sticky column at the left edge. Without matching scroll padding, a snap point aligns the week with the scrollport edge and the browser parks it underneath them. */ scroll-padding-left: 46px; } .cal-weekdays { position: sticky; left: 0; z-index: 3; flex: 0 0 46px; display: grid; grid-template-rows: 34px repeat(7, minmax(74px, 1fr)); background: var(--surface-sunken); border-right: 1px solid var(--border-strong); } .cal-weekdays__spacer { border-bottom: 1px solid var(--border); } .cal-weekdays__day { display: grid; place-items: center; border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); } .cal-weekdays__day:last-child { border-bottom: 0; } .cal-weekdays__day--off { color: var(--grey-300); } .cal-week { flex: 0 0 132px; display: grid; grid-template-rows: 34px repeat(7, minmax(74px, 1fr)); border-right: 1px solid var(--border); scroll-snap-align: start; min-width: 0; } .cal-week:last-child { border-right: 0; } .cal-week__head { display: flex; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--fs-xs); font-weight: 650; color: var(--grey-650); position: sticky; top: 0; z-index: 2; } .cal-week__num { font-variant-numeric: tabular-nums; } .cal-week__range { font-weight: 500; color: var(--text-subtle); font-size: 10px; } .cal-week__head--current { background: var(--brand-lighter); color: var(--brand-darker); } .cal--weeks .cal-day { border-bottom: 1px solid var(--border); } .cal--weeks .cal-day:last-child { border-bottom: 0; } @media (min-width: 768px) { .cal-weekdays { flex-basis: 58px; } .cal-week { flex-basis: 150px; } .cal--weeks { scroll-padding-left: 58px; } } @media (min-width: 1280px) { /* Enough room to let the weeks share the width rather than scroll. */ .cal-week { flex: 1 1 150px; } } /* ---------- Classic month layout ---------- */ .cal--classic { display: block; } .cal-classic__head { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); background: var(--surface-sunken); border-bottom: 1px solid var(--border); } .cal-classic__head div { padding: var(--s-2) 4px; text-align: center; font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); overflow: hidden; } .cal-classic__row { display: grid; grid-template-columns: 30px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--border); } .cal-classic__row:last-child { border-bottom: 0; } .cal-classic__week { display: grid; place-items: center; background: var(--surface-sunken); border-right: 1px solid var(--border); font-size: 10px; font-weight: 650; color: var(--text-subtle); font-variant-numeric: tabular-nums; } .cal-classic__week a { color: inherit; text-decoration: none; } .cal--classic .cal-day { min-height: 88px; border-right: 1px solid var(--border); } .cal--classic .cal-day:last-child { border-right: 0; } @media (min-width: 768px) { .cal-classic__head { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); } .cal-classic__row { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); } .cal-classic__head div { font-size: var(--fs-xs); padding: var(--s-2); } .cal--classic .cal-day { min-height: 118px; } } /* ---------- Legend & summary ---------- */ .cal-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); background: var(--surface-sunken); font-size: var(--fs-xs); color: var(--text-muted); } .cal-legend__item { display: inline-flex; align-items: center; gap: 6px; } .cal-legend__swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-strong); } /* ---------- Day drawer ---------- */ .drawer-scrim { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / .38); } .drawer { position: fixed; z-index: 71; left: 0; right: 0; bottom: 0; max-height: 88dvh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); animation: drawer-up .22s cubic-bezier(.32, .72, 0, 1); } @keyframes drawer-up { from { transform: translateY(100%); } to { transform: none; } } .drawer__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--grey-200); margin: var(--s-2) auto 0; flex: 0 0 auto; } .drawer__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); flex: 0 0 auto; } .drawer__title { font-weight: 650; font-size: var(--fs-lg); } .drawer__body { padding: var(--s-4); overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; } @media (min-width: 768px) { .drawer { left: auto; top: 0; bottom: 0; width: min(440px, 92vw); max-height: none; border-radius: 0; animation: drawer-in .22s cubic-bezier(.32, .72, 0, 1); } @keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } } .drawer__grip { display: none; } } /* Capacity meter used in the drawer and on the dashboard. */ .meter { display: grid; gap: 4px; } .meter__top { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--fs-sm); } .meter__name { font-weight: 600; } .meter__value { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .meter__track { height: 7px; border-radius: var(--radius-pill); background: var(--grey-100); overflow: hidden; } .meter__fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand); transition: width .2s; } .meter--full .meter__fill { background: var(--warn); } .meter--over .meter__fill { background: var(--danger); } .meter--over .meter__value { color: var(--danger); font-weight: 650; } /* ========================================================================= Modals, tabs, misc components ========================================================================= */ .modal-scrim { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / .42); display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow-y: auto; } .modal { position: relative; z-index: 91; width: 100%; max-height: 92dvh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); animation: drawer-up .2s cubic-bezier(.32, .72, 0, 1); } .modal__head { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); flex: 0 0 auto; } .modal__title { font-size: var(--fs-lg); font-weight: 650; } .modal__hint { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; } .modal__body { padding: var(--s-4); overflow-y: auto; flex: 1 1 auto; } .modal__foot { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border); background: var(--surface-sunken); flex: 0 0 auto; } .modal__foot .btn { flex: 1 1 auto; } @media (min-width: 640px) { .modal-scrim { align-items: center; padding: var(--s-4); } .modal { max-width: 540px; border-radius: var(--radius-lg); animation: modal-in .18s ease-out; } @keyframes modal-in { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } } .modal--wide { max-width: 720px; } .modal__foot { justify-content: flex-end; } .modal__foot .btn { flex: 0 0 auto; } } .tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--border); margin-bottom: var(--s-5); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs__link { padding: var(--s-3) var(--s-3); border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-muted); text-decoration: none; font-weight: 550; font-size: var(--fs-md); white-space: nowrap; } .tabs__link:hover { color: var(--text); text-decoration: none; } .tabs__link.is-active { color: var(--brand-darker); border-bottom-color: var(--brand); font-weight: 650; } .stat { display: grid; gap: 2px; padding: var(--s-4); } .stat__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); } .stat__value { font-size: var(--fs-2xl); font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .stat__meta { font-size: var(--fs-sm); color: var(--text-muted); } .stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .stat-row > * { background: var(--surface); } @media (min-width: 900px) { .stat-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .code { font-family: var(--font-mono); font-size: var(--fs-sm); background: var(--grey-50); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); overflow-x: auto; white-space: pre; line-height: 1.55; color: var(--grey-800); } .code--wrap { white-space: pre-wrap; word-break: break-all; } .log { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.6; background: var(--grey-900); color: #d7d7d2; border-radius: var(--radius); padding: var(--s-3); max-height: 380px; overflow: auto; white-space: pre-wrap; word-break: break-word; } .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; flex: 0 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } .divider { height: 1px; background: var(--border); border: 0; margin: var(--s-4) 0; } /* Colour swatch input pairing a native picker with a hex field. */ .colour-field { display: flex; align-items: center; gap: var(--s-2); } .colour-field input[type="color"] { width: 46px; height: 44px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; flex: 0 0 auto; } .colour-field .input { font-family: var(--font-mono); text-transform: lowercase; } .file-drop { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--grey-25); text-align: center; cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); } .file-drop:hover { border-color: var(--brand); background: var(--brand-lighter); color: var(--brand-darker); } .file-drop svg { width: 24px; height: 24px; opacity: .6; } .file-drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; } /* ========================================================================= Auth pages ========================================================================= */ .auth { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--s-5) var(--s-4) var(--s-8); background: radial-gradient(1100px 520px at 50% -8%, var(--brand-lighter), transparent 62%), var(--canvas); } .auth__box { width: 100%; max-width: 400px; } .auth__brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); text-align: center; } .auth__brand img { max-height: 52px; width: auto; } .auth__mark { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--brand); color: var(--brand-contrast); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xl); box-shadow: var(--shadow-md); } .auth__name { font-size: var(--fs-xl); font-weight: 680; letter-spacing: -.02em; } .auth__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--s-5); } .auth__divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0; color: var(--text-subtle); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .auth__divider::before, .auth__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); } .auth__foot { margin-top: var(--s-5); text-align: center; font-size: var(--fs-xs); color: var(--text-subtle); line-height: 1.6; } .auth__foot a { color: var(--text-muted); } /* ========================================================================= Utilities ========================================================================= */ .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font-size: var(--fs-sm); } .tiny { font-size: var(--fs-xs); } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .text-right { text-align: right; } .text-center { text-align: center; } .mono { font-family: var(--font-mono); font-size: .95em; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--s-1); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); } .ml-auto { margin-left: auto; } .flex-1 { flex: 1 1 auto; min-width: 0; } .hide { display: none !important; } @media (max-width: 639px) { .hide-xs { display: none !important; } } @media (max-width: 767px) { .hide-sm { display: none !important; } } @media (min-width: 768px) { .show-sm-only { display: none !important; } } @media (max-width: 1023px) { .hide-md { display: none !important; } } /* Hidden once the sidebar becomes permanent. */ @media (min-width: 1024px) { .hide-lg { display: none !important; } } @media print { .topbar, .nav, .page-head__actions, .cal-toolbar, .form-actions, .flash { display: none !important; } .app { display: block; } .main { padding: 0; } .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; } .cal--weeks { overflow: visible; } } /* Dashboard four-week pressure strip. */ .dash-strip { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 520px) { .dash-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .dash-strip__label { font-size: var(--fs-xs); font-weight: 650; color: var(--text-subtle); margin-bottom: 4px; text-align: center; } .dash-strip__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dash-strip__day { aspect-ratio: 1; display: grid; place-items: center; border-radius: 3px; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--grey-100); color: var(--grey-600); text-decoration: none; } .dash-strip__day:hover { text-decoration: none; outline: 1px solid var(--brand); } .dash-strip__day.is-off { background: var(--grey-50); color: var(--grey-300); } .dash-strip__day.is-busy { background: #fdf0d6; color: #7d5a12; } .dash-strip__day.is-full { background: #fbe3b4; color: #6f4d09; } .dash-strip__day.is-over { background: var(--danger); color: #fff; } .dash-strip__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); } /* Calendar filter popover — a plain
, so it works without JS. */ .cal-filter { position: relative; } .cal-filter > summary { list-style: none; cursor: pointer; } .cal-filter > summary::-webkit-details-marker { display: none; } .cal-filter__panel { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 30; width: min(92vw, 340px); padding: var(--s-4); box-shadow: var(--shadow-lg); } @media (max-width: 639px) { .cal-filter__panel { position: fixed; left: var(--s-3); right: var(--s-3); width: auto; } } /* ---------- Resource allocation picker ---------- */ .alloc-group + .alloc-group { margin-top: var(--s-5); } .alloc-group__head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 650; color: var(--grey-650); padding-bottom: var(--s-2); margin-bottom: var(--s-2); border-bottom: 1px solid var(--border); } .alloc-group__head svg { width: 16px; height: 16px; opacity: .7; } .alloc-grid { display: grid; gap: var(--s-2); } @media (min-width: 640px) { .alloc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .alloc-row { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-height: var(--tap); } .alloc-row:hover { border-color: var(--border-strong); } .alloc-row.is-set { border-color: var(--brand); background: var(--brand-lighter); } .alloc-row__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .alloc-row__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); font-weight: 550; line-height: 1.3; } .alloc-row__name small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-muted); } .alloc-row__input { width: 68px; flex: 0 0 auto; min-height: 38px; text-align: center; padding: 4px; font-variant-numeric: tabular-nums; } /* ---------- Selected customer & combobox ---------- */ .picked { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey-25); } .picked .avatar { background: var(--accent-light); color: var(--accent-dark); } .combo { position: relative; } .combo__results { position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 0; } .combo__results .list__item { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; } .combo__results .list__item + .list__item { border-top: 1px solid var(--border); } .combo__results .list__item:hover, .combo__results .list__item.is-active { background: var(--brand-lighter); } /* Keeps the availability panel in view while the form is scrolled. */ @media (min-width: 1180px) { .conflict-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); } } /* ---------- Project timeline strip ---------- */ .proj-cal { padding: var(--s-4); } .proj-cal__grid { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); } .proj-cal__week { flex: 0 0 auto; } .proj-cal__wnum { font-size: 10px; font-weight: 650; color: var(--text-subtle); text-align: center; margin-bottom: 4px; } .proj-cal__day { position: relative; width: 34px; height: 30px; display: grid; place-items: center; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--grey-100); color: var(--grey-600); border-radius: 3px; margin-bottom: 3px; } .proj-cal__day.is-off { background: var(--grey-50); color: var(--grey-300); } .proj-cal__day.is-on { background: var(--brand); color: var(--brand-contrast); } .proj-cal__day.is-conflict { background: var(--danger); color: #fff; } .proj-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); } .proj-cal__warn { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; } .proj-cal__legend { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--text-muted); } .file-badge { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--grey-100); color: var(--grey-650); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; overflow: hidden; } /* ---------- Repeatable contact rows ---------- */ .contact-row { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-3); background: var(--grey-25); } .contact-row__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); } .contact-row__num { font-size: var(--fs-xs); font-weight: 650; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .04em; } .contact-row__grid { display: grid; gap: var(--s-2); } @media (min-width: 640px) { .contact-row__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .res-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; align-self: flex-start; margin-top: 6px; } .passkey-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey-25); } .passkey-row .avatar { background: var(--brand-lighter); color: var(--brand-darker); } .brand-preview { padding: var(--s-3); border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--grey-25); } .brand-asset { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--grey-25); } /* Icons carry width/height attributes, but flex containers can still stretch them; pin every icon inside common containers. */ .card__head > svg, .list__item > svg, .alert > svg, .hcheck svg, .empty svg, .dl svg { flex: 0 0 auto; } .card__head > svg { width: 18px; height: 18px; opacity: .75; } /* ---------- Health checks ---------- */ .hcheck { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .hcheck__icon { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; margin-top: 1px; } .hcheck--ok { border-color: var(--success-border); background: var(--success-bg); } .hcheck--ok .hcheck__icon { background: var(--success); color: #fff; } .hcheck--warning { border-color: var(--warn-border); background: var(--warn-bg); } .hcheck--warning .hcheck__icon { background: var(--warn); color: #fff; } .hcheck--failed { border-color: var(--danger-border); background: var(--danger-bg); } .hcheck--failed .hcheck__icon { background: var(--danger); color: #fff; }