/* PMS brand layer — blend of the Primestay brand spec (brand/BRAND.md v1.0). Comfortaa for prose, JetBrains Mono for EVERY number/ID/date (class .mono). Cream content surface (never pure white pages), violet active states. TWO SHELL THEMES, CSS variables only — switched by data-theme on : - dark (default): charcoal product sidebar, white topbar, cream content. - light ("Primestay"): violet header band, white sidebar, cream content — matches the Primestay portal admin look (ADMIN_LAYOUT in the old app.py). Components only ever consume the semantic --side-* / --topbar-* variables; no selector outside the two theme blocks may hard-code a chrome colour. */ :root { --brand-violet: #7D68FF; --brand-violet-dark: #5F4BD8; --brand-cream: #FFF8F0; --brand-charcoal: #0E0E11; --brand-warm-grey: #E8E2D6; --brand-white: #FFFFFF; --brand-charcoal-muted: #5C5C66; --brand-violet-tint: #F0EDFF; --brand-success: #2D8659; --brand-success-tint: #EEF6F1; --brand-warning: #E0A458; --brand-error: #C92A2A; --brand-error-tint: #FBEAEA; --brand-gold: #8A6D3B; --brand-gold-tint: #FBF3E4; /* block-management status palette — Table B banners & demand chips (bad reuses --brand-error-tint; ok/book/neutral reuse brand tints) */ --block-ok-bg: #E8F4EE; --block-part-bg: #FBF3E6; --block-part-ink: #8A6118; --block-offset-bg: #E6F0FB; --block-offset-ink: #2A5D9C; --block-danger-border: #F2D4D4; --sidebar-w: 236px; /* owners'-portal translucent-white overlays for the violet header chrome (kept in the :root theme block so no selector below carries a raw colour value — rule 10). */ --owner-overlay-soft: rgba(255, 255, 255, 0.12); --owner-overlay: rgba(255, 255, 255, 0.16); --owner-overlay-strong: rgba(255, 255, 255, 0.28); --owner-overlay-border: rgba(255, 255, 255, 0.4); --shadow-soft: 0 2px 8px rgba(14, 14, 17, 0.06); --shadow-lift: 0 6px 20px rgba(14, 14, 17, 0.10); /* jobs surface semantic tones — all reference the base palette above, so the content surface is theme-independent (only the chrome themes differ) and no selector outside :root carries a raw colour value (rule 10). */ --job-urgent: var(--brand-error); --job-urgent-bg: var(--brand-error-tint); --job-attention-bg: var(--block-part-bg); --job-attention-ink: var(--block-part-ink); --job-live-bg: var(--block-part-bg); --job-go: var(--brand-success); --job-go-bg: var(--block-ok-bg); --job-book: var(--brand-violet); } /* ---- theme: dark (default — charcoal chrome, cream content) ---- */ :root, [data-theme="dark"] { --side-bg: var(--brand-charcoal); --side-fg: #C9C5BD; --side-fg-strong: var(--brand-cream); --side-border: rgba(255, 248, 240, 0.08); --side-section-fg: rgba(201, 197, 189, 0.55); --side-hover-bg: rgba(125, 104, 255, 0.14); --side-hover-fg: var(--brand-cream); --side-active-bg: var(--brand-violet); --side-active-fg: #FFFFFF; --side-soon-fg: rgba(201, 197, 189, 0.45); --side-orgchip-fg: #A99BFF; --side-orgpill-bg: rgba(125, 104, 255, 0.22); --side-orgpill-fg: #A99BFF; --side-signout-border: rgba(255, 248, 240, 0.14); --chip-soon-bg: rgba(125, 104, 255, 0.22); --chip-soon-fg: #A99BFF; --topbar-bg: var(--brand-white); --topbar-fg: var(--brand-charcoal); --topbar-muted: var(--brand-charcoal-muted); --topbar-link-hover: var(--brand-violet); --topbar-border: var(--brand-warm-grey); --topbar-shadow: none; --topbar-quiet-fg: var(--brand-charcoal-muted); --topbar-quiet-border: var(--brand-warm-grey); --topbar-quiet-hover: var(--brand-violet); --topbar-chip-bg: var(--brand-cream); --topbar-chip-border: var(--brand-warm-grey); --topbar-chip-fg: var(--brand-charcoal-muted); } /* ---- theme: light ("Primestay" — violet header band, light sidebar) ---- */ [data-theme="light"] { --side-bg: var(--brand-white); --side-fg: var(--brand-charcoal-muted); --side-fg-strong: var(--brand-charcoal); --side-border: var(--brand-warm-grey); --side-section-fg: #76717F; --side-hover-bg: #F2EDE2; --side-hover-fg: var(--brand-charcoal); --side-active-bg: var(--brand-violet-tint); --side-active-fg: var(--brand-violet-dark); --side-soon-fg: #948FA0; --side-orgchip-fg: var(--brand-violet-dark); --side-orgpill-bg: var(--brand-violet-tint); --side-orgpill-fg: var(--brand-violet-dark); --side-signout-border: var(--brand-warm-grey); --chip-soon-bg: var(--brand-violet-tint); --chip-soon-fg: var(--brand-violet-dark); --topbar-bg: linear-gradient(135deg, #7D68FF 0%, #6453E6 100%); --topbar-fg: #FFFFFF; --topbar-muted: rgba(255, 255, 255, 0.78); --topbar-link-hover: #FFFFFF; --topbar-border: transparent; --topbar-shadow: 0 8px 32px rgba(125, 104, 255, 0.15); --topbar-quiet-fg: #FFFFFF; --topbar-quiet-border: rgba(255, 255, 255, 0.4); --topbar-quiet-hover: #FFFFFF; --topbar-chip-bg: rgba(255, 255, 255, 0.15); --topbar-chip-border: rgba(255, 255, 255, 0.3); --topbar-chip-fg: #FFFFFF; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--brand-cream); color: var(--brand-charcoal); font-family: 'Comfortaa', sans-serif; font-size: 15px; line-height: 1.6; } .mono { font-family: 'JetBrains Mono', monospace; } a { color: var(--brand-violet); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { font-weight: 600; line-height: 1.3; } h1 em, h2 em, .login-brand-sub em { font-style: italic; color: var(--brand-violet); } .muted { color: var(--brand-charcoal-muted); } .small { font-size: 12px; } .icon { vertical-align: -3px; flex-shrink: 0; } /* ============ APP SHELL ============ */ .shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--side-bg); color: var(--side-fg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 12px; } [data-theme="light"] .sidebar { border-right: 1px solid var(--side-border); } /* top block: wordmark + workspace switcher chip (portal-parity; single-org today, so the pill is the affordance and the chevron waits for org N+1) */ .side-top { padding: 4px 12px 16px; border-bottom: 1px solid var(--side-border); margin-bottom: 10px; } .side-brand { display: block; text-decoration: none; } .side-brand:hover { text-decoration: none; } .side-mark { font-weight: 700; font-size: 20px; letter-spacing: 1px; color: var(--brand-violet); } .side-org-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 10px; padding: 0; background: none; border: none; color: var(--side-fg); font-family: 'Comfortaa', sans-serif; cursor: pointer; } .side-org-pill { background: var(--side-orgpill-bg); color: var(--side-orgpill-fg); border-radius: 999px; padding: 3px 12px; font-size: 11.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-nav { flex: 1; overflow-y: auto; } .side-section { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--side-section-fg); padding: 18px 12px 8px; } .side-section:first-child { padding-top: 8px; } .side-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--side-fg); text-decoration: none; margin-bottom: 2px; } .side-item .icon { opacity: 0.85; } .side-item span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.side-item:hover { background: var(--side-hover-bg); color: var(--side-hover-fg); text-decoration: none; } .side-item.active { background: var(--side-active-bg); color: var(--side-active-fg); font-weight: 600; } .side-item.active .icon { opacity: 1; } .side-item.soon { color: var(--side-soon-fg); cursor: default; } .side-item.soon .icon { opacity: 0.45; } /* count badge modules publish onto nav items (red pill, mono number) */ .nav-count { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: 9px; background: var(--brand-error); color: #FFFFFF; font-size: 11px; font-weight: 600; } .chip-soon { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; background: var(--chip-soon-bg); color: var(--chip-soon-fg); border-radius: 999px; padding: 2px 8px; } .side-foot { border-top: 1px solid var(--side-border); padding-top: 12px; } .side-user { display: flex; align-items: center; gap: 10px; padding: 4px 12px 10px; } .side-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-violet); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; } .side-user-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .side-email { font-size: 11.5px; color: var(--side-fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-orgchip { font-size: 10px; color: var(--side-orgchip-fg); font-weight: 600; } /* tri-state theme toggle: dark / light / use org default */ .theme-toggle { display: flex; gap: 4px; padding: 0 12px 10px; } .theme-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 0; background: none; border: 1px solid var(--side-signout-border); border-radius: 8px; color: var(--side-fg); cursor: pointer; } .theme-btn:hover { border-color: var(--brand-violet); color: var(--side-hover-fg); } .theme-btn.active { background: var(--side-active-bg); color: var(--side-active-fg); border-color: transparent; } .side-signout { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 1px solid var(--side-signout-border); border-radius: 10px; color: var(--side-fg); font-family: 'Comfortaa', sans-serif; font-size: 12px; font-weight: 600; padding: 8px 12px; cursor: pointer; } .side-signout:hover { border-color: var(--brand-error); color: #E8A0A0; } [data-theme="light"] .side-signout:hover { color: var(--brand-error); } /* ---- content column ---- */ .content { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 34px 18px; background: var(--topbar-bg); color: var(--topbar-fg); border-bottom: 1px solid var(--topbar-border); box-shadow: var(--topbar-shadow); position: relative; z-index: 1; } .crumbs { font-size: 12px; color: var(--topbar-muted); margin-bottom: 2px; } .crumbs a { color: var(--topbar-muted); } .crumbs a:hover { color: var(--topbar-link-hover); } .page-title { margin: 0; font-size: 24px; letter-spacing: -0.3px; } .topbar .btn-quiet { color: var(--topbar-quiet-fg); border-color: var(--topbar-quiet-border); } .topbar .btn-quiet:hover { color: var(--topbar-quiet-hover); border-color: var(--topbar-quiet-hover); } .topbar-side { display: flex; align-items: center; gap: 10px; min-width: 0; } .topbar-actions { display: flex; align-items: center; gap: 10px; } .topbar-chip { background: var(--topbar-chip-bg); border: 1px solid var(--topbar-chip-border); color: var(--topbar-chip-fg); border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .topbar-user { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* content hugs the sidebar (left-aligned, not centered) so the page reads as one connected surface rather than a slab floating in the middle of wide screens. */ main { flex: 1; max-width: 1280px; width: 100%; margin: 0; padding: 30px 40px 48px; } .page-sub { color: var(--brand-charcoal-muted); margin: 0 0 26px; } footer { text-align: center; color: var(--brand-charcoal-muted); font-size: 11px; padding: 18px 0 26px; } /* ============ COMPONENTS ============ */ .card { background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 12px; box-shadow: var(--shadow-soft); overflow: hidden; } /* ---- stat cards (dashboard) ---- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 34px; } .stat-card { background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 22px 24px; display: flex; flex-direction: column; gap: 2px; color: inherit; } .stat-card:hover { text-decoration: none; border-color: var(--brand-violet); } .stat-icon { color: var(--brand-violet); margin-bottom: 8px; } .stat-value { font-size: 34px; font-weight: 600; line-height: 1.1; } .stat-label { font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--brand-charcoal-muted); } .section-title { font-size: 16px; margin: 0 0 14px; } /* ---- filter bar ---- */ .filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } .search-box { display: flex; align-items: center; gap: 8px; background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 10px; padding: 0 12px; flex: 1; min-width: 220px; max-width: 420px; color: var(--brand-charcoal-muted); } .search-box input { border: none; background: none; padding: 10px 0; width: 100%; font-family: 'Comfortaa', sans-serif; font-size: 13.5px; color: var(--brand-charcoal); } .search-box input:focus { outline: none; } .search-box:focus-within { border-color: var(--brand-violet); outline: 1px solid var(--brand-violet); } select { background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 10px; padding: 10px 12px; font-family: 'Comfortaa', sans-serif; font-size: 13px; color: var(--brand-charcoal); cursor: pointer; } .filter-count { font-size: 13px; margin-left: auto; } /* ---- building card grid ---- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .b-card { background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 18px 20px; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s, transform 0.15s; } .b-card:hover { text-decoration: none; border-color: var(--brand-violet); transform: translateY(-1px); } .b-card-head { display: flex; align-items: center; justify-content: space-between; } .b-card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-violet-tint); color: var(--brand-violet); display: flex; align-items: center; justify-content: center; } .b-card-icon.big { width: 50px; height: 50px; border-radius: 12px; } .b-card-name { margin: 6px 0 0; font-size: 16px; } .b-card-address { margin: 0; font-size: 12.5px; color: var(--brand-charcoal-muted); } .b-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--brand-warm-grey); font-size: 12px; } .b-card-open { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-violet); font-weight: 600; } /* ---- chips ---- */ .chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 500; } .chip-units { background: var(--brand-violet-tint); color: var(--brand-violet-dark); } .chip-unit { background: var(--brand-violet-tint); color: var(--brand-violet-dark); font-weight: 600; font-size: 12.5px; padding: 4px 14px; } /* ---- building detail ---- */ .header-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 24px 28px; margin-bottom: 20px; } .header-card-main { display: flex; align-items: center; gap: 18px; } .header-card-name { margin: 0 0 2px; font-size: 19px; } .header-card-main p { margin: 0; font-size: 13px; } .header-card-stats { display: flex; gap: 26px; } .header-stat { display: flex; flex-direction: column; align-items: flex-end; } .header-stat .stat-value { font-size: 28px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--brand-warm-grey); margin-bottom: 20px; } .tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--brand-charcoal-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab.active { color: var(--brand-violet); border-bottom-color: var(--brand-violet); } .tab.disabled { color: rgba(92, 92, 102, 0.5); cursor: default; } .tab.disabled .chip-soon { background: var(--brand-violet-tint); color: var(--brand-violet); } a.tab { text-decoration: none; } a.tab:hover { color: var(--brand-violet); } .unit-list { list-style: none; margin: 0; padding: 0; } .unit-row { display: flex; align-items: center; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--brand-warm-grey); font-size: 13.5px; } .unit-row:last-child { border-bottom: none; } .unit-row:hover { background: var(--brand-violet-tint); } .unit-attrs { font-size: 12.5px; } /* ---- empty states ---- */ .empty-state { text-align: center; padding: 64px 20px; background: var(--brand-white); border: 1px dashed var(--brand-warm-grey); border-radius: 12px; } .empty-icon { display: inline-flex; width: 72px; height: 72px; border-radius: 50%; background: var(--brand-violet-tint); color: var(--brand-violet); align-items: center; justify-content: center; margin-bottom: 14px; } .empty-state h3 { margin: 0 0 4px; font-size: 16px; } .empty-state p { margin: 0 0 6px; font-size: 13.5px; } /* ---- buttons & forms ---- */ .btn { display: inline-block; background: var(--brand-violet); color: #FFFFFF; border: none; border-radius: 10px; padding: 10px 22px; font-family: 'Comfortaa', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; } .btn:hover { background: var(--brand-violet-dark); text-decoration: none; } .btn-sm { padding: 9px 18px; font-size: 13px; } .btn-block { width: 100%; } .btn-quiet { display: inline-block; background: none; border: 1px solid var(--brand-warm-grey); color: var(--brand-charcoal-muted); border-radius: 10px; padding: 8px 16px; font-family: 'Comfortaa', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; } .btn-quiet:hover { border-color: var(--brand-violet); color: var(--brand-violet); text-decoration: none; } label { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 6px; } input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 11px 14px; border: 1px solid var(--brand-warm-grey); border-radius: 10px; background: var(--brand-cream); font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--brand-charcoal); } input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus { outline: 2px solid var(--brand-violet); border-color: var(--brand-violet); } /* ---- login (warm register: 18px radius, generous) ---- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 70% 45% at 50% -8%, rgba(125, 104, 255, 0.16), transparent), var(--brand-cream); padding: 24px; } .login-card { background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 18px; box-shadow: var(--shadow-soft); padding: 44px 48px 32px; width: 100%; max-width: 420px; } .login-brand { margin-bottom: 26px; } .wordmark { display: block; font-weight: 700; font-size: 28px; letter-spacing: 1px; color: var(--brand-violet); } .login-brand-sub { font-size: 13.5px; color: var(--brand-charcoal-muted); } .login-foot { text-align: center; font-size: 10.5px; color: var(--brand-charcoal-muted); margin: 26px 0 0; } /* ---- flash & pagination ---- */ .flash { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; } .flash.error { background: #FBEAEA; color: var(--brand-error); } .flash.success { background: #E8F4EE; color: var(--brand-success); } .pagination { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-size: 13px; color: var(--brand-charcoal-muted); } /* ============ RESPONSIVE ============ */ @media (max-width: 880px) { .sidebar { width: 64px; padding: 14px 8px; } .side-org-switch, .side-item span:nth-child(2), .chip-soon, .side-section, .side-user-meta, .side-signout span, .side-item .nav-count, .topbar-chip { display: none; } .side-top { padding: 4px 0 14px; text-align: center; } .side-item { justify-content: center; padding: 10px 0; } .side-user { justify-content: center; padding: 4px 0 10px; } .side-signout { justify-content: center; } .theme-toggle { flex-direction: column; padding: 0 0 8px; } .topbar { padding: 16px 18px 12px; } main { padding: 18px 18px 28px; } .filter-count { margin-left: 0; width: 100%; } .header-card-stats { width: 100%; } .header-stat { align-items: flex-start; } } /* ============ CORE PAGES (parties · users · imports · forms · tables) ============ Merged from feat/core-pages. The shell layer above owns layout, cards, stat cards, buttons, tabs and chrome; this block adds only the content vocabulary those pages need — tables, form controls, chip variants — all via :root vars. */ /* page heading row used by list/detail content (inside the shell
) */ h1 { font-size: 26px; margin: 0 0 4px; } .breadcrumb { font-size: 13px; color: var(--brand-charcoal-muted); margin-bottom: 18px; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } /* ---- tables ---- */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 12px; font-weight: 600; color: var(--brand-charcoal-muted); padding: 12px 18px; border-bottom: 1px solid var(--brand-warm-grey); } td { padding: 12px 18px; border-bottom: 1px solid var(--brand-warm-grey); font-size: 14px; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--brand-violet-tint); } td.cell-error { background: var(--brand-error-tint); } .row-error { color: var(--brand-error); font-size: 12px; } .row-action { font-size: 12px; color: var(--brand-charcoal-muted); } /* ---- filter row (lighter than the shell .filter-bar) ---- */ .filter-row { display: flex; gap: 10px; margin: 0 0 18px; } .filter-row input[type="text"] { max-width: 320px; } .filter-row select, .filter-row input { width: auto; } /* ---- chip variants (the shell defines the .chip base + .chip-units/.chip-unit) ---- */ .chip { margin-right: 4px; } .chip-person { background: var(--brand-violet-tint); color: var(--brand-violet); } .chip-company { background: var(--brand-gold-tint); color: var(--brand-gold); } .chip-role { background: var(--brand-success-tint); color: var(--brand-success); } .chip-viewer { background: var(--brand-warm-grey); color: var(--brand-charcoal-muted); } .chip-member { background: var(--brand-violet-tint); color: var(--brand-violet); } .chip-admin { background: var(--brand-charcoal); color: var(--brand-cream); } .chip-muted { background: var(--brand-warm-grey); color: var(--brand-charcoal-muted); } .chip-error { background: var(--brand-error-tint); color: var(--brand-error); } /* ---- forms shared by every create/edit page ---- */ .form-card { padding: 26px 30px 30px; } textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--brand-warm-grey); border-radius: 10px; background: var(--brand-cream); font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--brand-charcoal); } select:focus, textarea:focus { outline: 2px solid var(--brand-violet); border-color: var(--brand-violet); } .radio-row, .checkbox-row { display: flex; gap: 10px; flex-wrap: wrap; } .radio-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--brand-warm-grey); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 400; margin: 0; cursor: pointer; background: var(--brand-white); } .radio-pill:has(input:checked) { border-color: var(--brand-violet); background: var(--brand-violet-tint); } .form-actions { display: flex; align-items: center; gap: 14px; margin-top: 26px; } .form-hint { font-size: 12px; color: var(--brand-charcoal-muted); margin: 4px 0 0; } .btn-link { text-decoration: none; display: inline-block; } .btn-link:hover { text-decoration: none; } /* ---- definition grid (party / org detail) ---- */ .detail-grid { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; } .detail-grid dt { font-size: 13px; font-weight: 600; color: var(--brand-charcoal-muted); } .detail-grid dd { margin: 0; font-size: 14px; } /* ---- one-time reveal (temp passwords on invite) ---- */ .reveal-box { background: var(--brand-violet-tint); border: 1px dashed var(--brand-violet); border-radius: 12px; padding: 18px 22px; margin: 18px 0; } .reveal-box .mono { font-size: 18px; } /* ---- block management: banners, chips, weights ---- Renders inside the merged sidebar shell (base.html). The discarded block topbar shell's CSS (.topbar nav / .topnav / global footer) was dropped, and the import-preview rules already live above (via :root vars). */ .banner { border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; } .banner.ok { background: var(--block-ok-bg); color: var(--brand-success); } .banner.bad { background: var(--brand-error-tint); color: var(--brand-error); } .banner.part { background: var(--block-part-bg); color: var(--block-part-ink); } .chip { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: 11px; font-weight: 600; margin-right: 4px; white-space: nowrap; } .chip.ok { background: var(--block-ok-bg); color: var(--brand-success); } .chip.book { background: var(--brand-violet-tint); color: var(--brand-violet); } .chip.offset { background: var(--block-offset-bg); color: var(--block-offset-ink); } .chip.part { background: var(--block-part-bg); color: var(--block-part-ink); } .chip.overdue { background: var(--brand-error-tint); color: var(--brand-error); } .chip.neutral { background: var(--brand-warm-grey); color: var(--brand-charcoal-muted); } .weight-chip { display: inline-block; background: var(--brand-violet-tint); color: var(--brand-violet); border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 500; } td.num, th.num { text-align: right; } tr.total-row td { border-top: 2px solid var(--brand-charcoal); } tr.voided td { opacity: 0.45; } .row-links a { margin-right: 12px; font-size: 13px; } /* ---- block management: forms ---- */ .form-card { margin-top: 28px; padding: 22px 26px; overflow: visible; } .form-card h2 { margin: 0 0 4px; font-size: 18px; } .form-card .muted { font-size: 13px; margin-top: 0; } .form-card .btn { margin-top: 18px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; } .form-grid select, .form-grid input[type="date"], .form-grid input[type="file"] { width: 100%; padding: 10px 12px; border: 1px solid var(--brand-warm-grey); border-radius: 10px; background: var(--brand-cream); font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--brand-charcoal); } .check-row { display: flex; gap: 22px; align-items: center; padding-top: 26px; } .check-row label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0; font-size: 13px; } .danger-zone { border-color: var(--block-danger-border); } /* ---- jobs surface (cleaning / maintenance) ---- */ .kind-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--brand-charcoal-muted); text-transform: capitalize; } .kind-badge .icon { color: var(--brand-violet); } .job-loc { display: inline-flex; align-items: center; gap: 6px; } .job-loc .icon { color: var(--brand-charcoal-muted); flex: none; } .loc-section { margin-top: 4px; } .card-note { padding: 14px 16px; } /* ---- jobs Stage 2: lifecycle actions, quote panel, clear location form ---- */ .btn-danger { display: inline-block; background: none; border: 1px solid var(--brand-error); color: var(--brand-error); border-radius: 10px; padding: 9px 18px; font-family: 'Comfortaa', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-danger:hover { background: var(--brand-error-tint); } .action-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .action-form { display: flex; gap: 8px; align-items: center; margin: 0; } .action-form input[type="date"] { width: auto; margin: 0; } .quote-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--brand-warm-grey); } .quote-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .quote-form > div { display: flex; flex-direction: column; } .quote-form label { margin: 0 0 6px; } .quote-form input, .quote-form select { width: auto; margin: 0; } .loc-fieldset { border: 1px solid var(--brand-warm-grey); border-radius: 12px; padding: 16px 18px 18px; margin: 20px 0 6px; } .loc-fieldset legend { font-size: 14px; font-weight: 700; padding: 0 8px; color: var(--brand-charcoal); } .radio-stack { display: flex; flex-direction: column; gap: 8px; } .radio-line { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13.5px; margin: 0; cursor: pointer; } .radio-line input { margin-top: 3px; } .radio-line strong { font-weight: 600; } .loc-field { margin-top: 16px; } .loc-field .form-hint { margin-top: 6px; } .check-line { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13.5px; margin: 18px 0 0; cursor: pointer; } .check-line input { margin-top: 3px; } .photo-grid { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; } .photo-tile { display: block; width: 120px; height: 120px; border: 1px solid var(--brand-warm-grey); border-radius: 10px; overflow: hidden; } .photo-tile:hover { border-color: var(--brand-violet); } .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; color: var(--brand-charcoal-muted); font-size: 12px; } /* ---- jobs views: building summary + sticky context + board ---- */ .b-card.active { border-color: var(--brand-violet); box-shadow: 0 0 0 1px var(--brand-violet); } .context-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--brand-violet-tint); border: 1px solid var(--brand-warm-grey); border-radius: 10px; padding: 9px 14px; margin-bottom: 18px; font-size: 13.5px; } .context-label { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-charcoal); } .context-label .icon { color: var(--brand-violet); } .context-switch { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .tab-sub { font-size: 11.5px; font-weight: 400; color: var(--brand-charcoal-muted); } .band-tabs { margin-top: 4px; } .band-count { background: var(--brand-warm-grey); color: var(--brand-charcoal-muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; } .tab.active .band-count { background: var(--brand-violet-tint); color: var(--brand-violet-dark); } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .pill { display: inline-flex; align-items: center; border: 1px solid var(--brand-warm-grey); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; color: var(--brand-charcoal-muted); } .pill:hover { border-color: var(--brand-violet); color: var(--brand-violet); text-decoration: none; } .pill.active { background: var(--brand-violet); border-color: var(--brand-violet); color: var(--brand-cream); } .stat-card.flag { border-color: var(--brand-error); } .stat-card.flag .stat-value { color: var(--brand-error); } .stat-card.flag .stat-label { color: var(--brand-error); } /* ---- jobs nav cleanup: per-building accordion + two boxes ---- */ .context-links { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; } .recurring-chip { margin-left: 8px; } .bldg-acc { background: var(--brand-white); border: 1px solid var(--brand-warm-grey); border-radius: 12px; box-shadow: var(--shadow-soft); margin-bottom: 12px; overflow: hidden; } .bldg-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; } .bldg-head::-webkit-details-marker { display: none; } .bldg-head:hover { background: var(--brand-violet-tint); } .bldg-chevron { display: inline-flex; color: var(--brand-charcoal-muted); transition: transform 0.15s; } .bldg-acc[open] .bldg-chevron { transform: rotate(180deg); } .bldg-name { font-weight: 600; font-size: 15px; } .bldg-open { margin-left: auto; font-size: 12px; } .bldg-body { padding: 4px 18px 18px; border-top: 1px solid var(--brand-warm-grey); } .bldg-shortcuts { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 18px; } .job-box { border: 1px solid var(--brand-warm-grey); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; background: var(--brand-cream); } .job-box-title { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--brand-charcoal); } .job-box-title .icon { color: var(--brand-violet); } .job-box-todo { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--brand-charcoal-muted); font-style: italic; } .acc-job { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--brand-warm-grey); flex-wrap: wrap; } .job-box .acc-job:first-of-type { border-top: none; } .acc-job-main { display: flex; flex-direction: column; gap: 2px; min-width: 200px; flex: 1; } .acc-job-title { font-weight: 600; font-size: 13.5px; } .acc-job-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--brand-charcoal-muted); } .acc-job-age { font-size: 12px; min-width: 56px; text-align: right; } .acc-job-who { font-size: 12.5px; min-width: 110px; } .acc-actions { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; } .inline-action { margin: 0; } /* ============ PMS-POLISH / PMS-CALM — jobs summary ============ Content layer (theme-independent base tokens only). Calm by default: buildings are neutral cards, the "needs attention" signal is a quiet chip, and saturated red is reserved for genuinely urgent (an overdue date) and used sparingly — a small dot, never a border. Hierarchy comes from restraint, so the few urgent things catch the eye precisely because everything else is quiet. */ /* ---- one restrained summary line (soft accent, not an alarm block) ---- */ .attention-bar { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 12px; margin-bottom: 20px; background: var(--brand-white); border: 1px solid var(--brand-warm-grey); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; font-size: 13.5px; } .attention-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand-warning); } .attention-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-warning); flex-shrink: 0; } .attention-text { color: var(--brand-charcoal); } .attention-text strong { font-weight: 600; } .attention-text .mono { font-size: 15px; } .attention-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; white-space: nowrap; } .attention-bar.is-clear { border-color: var(--brand-warm-grey); } .attention-bar.is-clear::before { background: var(--brand-success); } .attention-bar.is-clear .attention-text { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-charcoal-muted); } .attention-bar.is-clear .icon { color: var(--brand-success); } /* ---- buildings: calm neutral cards. Flagged ones differ by a quiet chip and a faintly warmer surface — NO red border/rail. All-clear reads lighter. ---- */ .bldg-acc.is-calm .bldg-head .bldg-name { color: var(--brand-charcoal-muted); } .bldg-acc.is-flagged { border-color: var(--brand-warm-grey); } .attn-chip { display: inline-flex; align-items: center; background: var(--job-attention-bg); color: var(--job-attention-ink); border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 600; } .calm-chip { display: inline-flex; align-items: center; background: var(--job-go-bg); color: var(--brand-success); border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 500; } .calm-chip.is-empty { background: var(--brand-warm-grey); color: var(--brand-charcoal-muted); } /* ---- per-job rows: a thin status-toned stripe for gentle hierarchy; overdue is the only saturated-red signal, shown as a small dot. ---- */ .acc-job { border-left: 3px solid transparent; padding-left: 12px; border-radius: 0 8px 8px 0; } .acc-job.tone-live { border-left-color: var(--brand-warning); } .acc-job.tone-go { border-left-color: var(--brand-success); } .acc-job.tone-book { border-left-color: var(--brand-violet); } .acc-job.tone-neutral { border-left-color: var(--brand-warm-grey); } .acc-job.is-overdue { border-left-color: var(--brand-error); } .acc-overdue { color: var(--brand-error); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; } .overdue-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-error); flex-shrink: 0; } /* unassigned is a soft amber cue (a gap to fill), not an alarm */ .acc-unassigned { color: var(--block-part-ink); font-weight: 600; } /* ---- recurrence: schedule cards in the Recurring box + the form picker ---- */ .sched-card { border: 1px solid var(--brand-warm-grey); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--brand-white); } .sched-head { display: flex; align-items: center; gap: 10px; } .sched-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-violet-tint); color: var(--brand-violet); flex-shrink: 0; } .sched-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sched-title { font-weight: 600; font-size: 13.5px; } .sched-cadence { font-size: 12px; color: var(--brand-charcoal-muted); } .sched-upcoming { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; padding-top: 10px; border-top: 1px dashed var(--brand-warm-grey); } .sched-up-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; } .sched-up-date { background: var(--brand-cream); border: 1px solid var(--brand-warm-grey); border-radius: 7px; padding: 2px 9px; font-size: 12px; } .rec-picker { border: 1px solid var(--brand-warm-grey); border-radius: 12px; padding: 4px 18px 18px; margin: 6px 0 4px; background: var(--brand-cream); } .rec-picker .field-label { margin-top: 16px; } .rec-freq.card-picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .pick-card-mini { flex-direction: row; justify-content: center; padding: 10px 12px; gap: 0; } .weekday-row { display: flex; flex-wrap: wrap; gap: 7px; } .weekday-chip { margin: 0; cursor: pointer; font-weight: 600; } .weekday-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .weekday-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 8px 10px; border: 1.5px solid var(--brand-warm-grey); border-radius: 9px; background: var(--brand-white); font-size: 12.5px; color: var(--brand-charcoal-muted); } .weekday-chip:has(input:checked) span { border-color: var(--brand-violet); background: var(--brand-violet-tint); color: var(--brand-violet-dark); } .weekday-chip:has(input:focus-visible) span { outline: 2px solid var(--brand-violet); outline-offset: 2px; } .rec-mode-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .rec-mode-sub { margin-top: 4px; } .rec-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; } .rec-inline select { width: auto; margin: 0; } .rec-monthday input[type="number"] { width: 140px; padding: 10px 12px; border: 1px solid var(--brand-warm-grey); border-radius: 10px; background: var(--brand-white); font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--brand-charcoal); } .rec-dates { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; } .rec-date-field { display: flex; flex-direction: column; } .rec-date-field label { margin: 16px 0 6px; } .rec-date-field input[type="date"] { padding: 10px 12px; border: 1px solid var(--brand-warm-grey); border-radius: 10px; background: var(--brand-white); font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--brand-charcoal); } .rec-note { margin-top: 12px; } /* ---- prominent Services ⇄ Maintenance segmented toggle ---- */ .fam-toggle { display: inline-flex; gap: 4px; padding: 5px; background: var(--brand-warm-grey); border-radius: 14px; margin-bottom: 20px; max-width: 100%; flex-wrap: wrap; } .fam-tab { display: inline-flex; align-items: center; gap: 11px; padding: 11px 22px; border-radius: 10px; color: var(--brand-charcoal-muted); font-weight: 600; background: transparent; } .fam-tab:hover { color: var(--brand-violet); text-decoration: none; } .fam-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand-white); color: var(--brand-charcoal-muted); } .fam-tab-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .fam-tab-label { font-size: 14.5px; } .fam-tab-sub { font-size: 11px; font-weight: 400; color: var(--brand-charcoal-muted); } .fam-tab.active { background: var(--brand-violet); color: #FFFFFF; box-shadow: var(--shadow-soft); } .fam-tab.active .fam-tab-icon { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; } .fam-tab.active .fam-tab-sub { color: rgba(255, 255, 255, 0.82); } /* ---- card / tile pickers (type of job, location) ---- */ .field-label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 8px; } .card-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin-bottom: 4px; } /* Wide (row-layout) cards carry icon + title + description and need far more width than the 124px default; ANY picker containing one gets a wider track so the text never clips — correct by construction, whichever picker it is. The explicit .loc-picker rule below keeps its own width (equal specificity, declared later). */ .card-picker:has(.pick-card-wide) { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .card-picker.loc-picker { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .pick-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 16px 12px; border: 1.5px solid var(--brand-warm-grey); border-radius: 12px; background: var(--brand-white); cursor: pointer; font-weight: 600; margin: 0; transition: border-color 0.12s, background 0.12s, transform 0.12s; } .pick-card:hover { border-color: var(--brand-violet); transform: translateY(-1px); } .pick-card input { position: absolute; opacity: 0; width: 0; height: 0; } .pick-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 11px; background: var(--brand-violet-tint); color: var(--brand-violet); flex-shrink: 0; } .pick-name { font-size: 13.5px; } .pick-card:has(input:checked) { border-color: var(--brand-violet); background: var(--brand-violet-tint); box-shadow: 0 0 0 1px var(--brand-violet); } .pick-card:has(input:checked) .pick-icon { background: var(--brand-violet); color: #FFFFFF; } .pick-card:has(input:focus-visible) { outline: 2px solid var(--brand-violet); outline-offset: 2px; } .pick-card-wide { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; } .pick-card-wide .pick-icon { width: 40px; height: 40px; } /* min-width:0 lets the text column shrink inside the flex row (otherwise it refuses to go below its content width and spills past the card border); overflow-wrap then makes long titles/descriptions wrap cleanly instead of clipping. */ .pick-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pick-name, .pick-sub { overflow-wrap: anywhere; } .pick-sub { font-size: 12px; font-weight: 400; color: var(--brand-charcoal-muted); } /* ---- "this repeats" toggle card ---- */ .repeat-toggle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--brand-warm-grey); border-radius: 12px; background: var(--brand-white); cursor: pointer; margin: 0 0 4px; font-weight: 400; } .repeat-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .repeat-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--brand-violet-tint); color: var(--brand-violet); flex-shrink: 0; } .repeat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .repeat-name { font-weight: 600; font-size: 14px; } .repeat-sub { font-size: 12px; color: var(--brand-charcoal-muted); } .repeat-switch { margin-left: auto; flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px; background: var(--brand-warm-grey); position: relative; transition: background 0.15s; } .repeat-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-white); box-shadow: var(--shadow-soft); transition: transform 0.15s; } .repeat-toggle:has(input:checked) { border-color: var(--brand-violet); background: var(--brand-violet-tint); } .repeat-toggle:has(input:checked) .repeat-icon { background: var(--brand-violet); color: #FFFFFF; } .repeat-toggle:has(input:checked) .repeat-switch { background: var(--brand-violet); } .repeat-toggle:has(input:checked) .repeat-switch::after { transform: translateX(18px); } .repeat-toggle:has(input:focus-visible) { outline: 2px solid var(--brand-violet); outline-offset: 2px; } /* ---- building facilities ---- */ .section-head { margin: 32px 0 14px; } .section-head .section-title { margin: 0 0 2px; } .facilities-block { margin-bottom: 8px; } .facilities-card { padding: 18px 20px 20px; } .facility-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .facility-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--brand-warm-grey); border-radius: 999px; background: var(--brand-violet-tint); font-size: 13.5px; font-weight: 600; color: var(--brand-charcoal); } .facility-chip.is-custom { background: var(--brand-gold-tint); } .facility-chip-icon { display: inline-flex; color: var(--brand-violet); } .facility-chip.is-custom .facility-chip-icon { color: var(--brand-gold); } .facility-remove-form { margin: 0; display: inline-flex; } .facility-remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(14, 14, 17, 0.06); color: var(--brand-charcoal-muted); cursor: pointer; padding: 0; } .facility-remove:hover { background: var(--brand-error); color: #FFFFFF; } .facility-manage { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--brand-warm-grey); } .facility-manage-title { margin: 0 0 12px; font-size: 13.5px; font-weight: 700; } .facility-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; } .facility-tile-form { margin: 0; } .facility-tile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 1px dashed var(--brand-warm-grey); border-radius: 11px; background: var(--brand-cream); color: var(--brand-charcoal); font-family: 'Comfortaa', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; } .facility-tile:hover { border-color: var(--brand-violet); border-style: solid; background: var(--brand-violet-tint); } .facility-tile-icon { display: inline-flex; color: var(--brand-violet); flex-shrink: 0; } .facility-tile-label { flex: 1; } .facility-tile-add { display: inline-flex; color: var(--brand-charcoal-muted); } .facility-tile:hover .facility-tile-add { color: var(--brand-violet); } .facility-custom-label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; } .facility-custom-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; } .facility-custom-row input[type="text"] { flex: 1; min-width: 200px; } .facility-custom-row .btn-quiet { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 880px) { main { padding: 18px 18px 28px; } .attention-bar { flex-wrap: wrap; } .attention-link { margin-left: 0; } .fam-toggle { width: 100%; } .fam-tab { flex: 1; justify-content: center; } .rec-dates { flex-direction: column; gap: 0; } } /* OpCo switcher (top nav) — layout only; the