/* ============================================================ DOORSTEP — Design System v1 Drop-in stylesheet for Flask/Jinja templates. Place at: app/static/css/doorstep.css Load before any page-specific CSS, after resetting Bootstrap. ============================================================ */ /* ---------- 1. Tokens ---------- */ :root { /* Brand */ --ds-blue: #0008D4; --ds-blue-tint: #E8E9F9; --ds-heritage: #5B3608; --ds-heritage-tint: #F3EDE3; /* Ink scale (text) */ --ds-ink: #0A0C14; --ds-ink-2: #25272E; --ds-ink-3: #4A4D57; --ds-ink-4: #7E818A; --ds-ink-5: #A8ABB2; /* Lines + surfaces */ --ds-line: #E1E3E4; --ds-line-2: #EAECED; --ds-surf: #FFFFFF; --ds-surf-2: #F8F9FA; --ds-surf-3: #F3F4F5; /* Semantic */ --ds-good: #1D7A3A; --ds-good-tint: #E3F2E8; --ds-warn: #8A5A00; --ds-warn-tint: #F6ECD6; --ds-bad: #A61B1B; --ds-bad-tint: #F6E0E0; /* Radii + shadows */ --ds-radius: 14px; --ds-radius-sm: 10px; --ds-radius-xs: 6px; --ds-shadow: 0 1px 0 rgba(10, 12, 20, .03), 0 10px 32px rgba(10, 12, 20, .04); --ds-shadow-float: 0 1px 0 rgba(10, 12, 20, .03), 0 18px 44px rgba(10, 12, 20, .10); /* Type */ --ds-font-display: 'Space Grotesk', system-ui, sans-serif; --ds-font-body: 'Manrope', system-ui, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Sidebar brand logo — tweak these to reposition/resize the logo + tag. */ --ds-logo-width: 270px; /* logo image width */ --ds-logo-pad-left: 4px; /* nudge the logo right (positive) or left */ --ds-logo-pad-top: 6px; /* space above the logo */ --ds-logo-pad-bottom: 24px; /* space below the brand block (before the nav) */ --ds-logo-color: var(--ds-heritage); /* any CSS color — tints the logo SVG shape */ /* Agency tag ("AGENCY · FOO REALTY") below the logo — or hide it entirely. */ --ds-logo-tag-display: block; /* 'none' hides the tag; 'block' shows it */ --ds-logo-tag-align: center; /* left | center | right */ --ds-logo-tag-gap: 10px; /* vertical gap between logo and tag */ --ds-logo-tag-offset-x: 0px; /* horizontal nudge of the tag */ /* Login-page logo knobs — tweak size, color, and spacing for /auth/login. */ --ds-login-logo-width: 180px; /* width of the logo mark */ --ds-login-logo-color: var(--ds-ink); /* tint (use --ds-heritage for gold) */ --ds-login-logo-gap: 20px; /* space below the logo */ --ds-login-logo-align: center; /* left | center | right */ } /* Login-page logo mask. Reuses the logo.png shape as a mask so tinting via --ds-login-logo-color works in both light and dark themes. */ .ds-login-logo { display: block; width: var(--ds-login-logo-width); aspect-ratio: 3 / 1; background-color: var(--ds-login-logo-color); -webkit-mask: url("../img/logo.png?v=2") no-repeat center / contain; mask: url("../img/logo.png?v=2") no-repeat center / contain; margin-left: auto; margin-right: auto; } .ds-login-logo-wrap { text-align: var(--ds-login-logo-align); margin-bottom: var(--ds-login-logo-gap); } /* ---------- 1b. Dark theme ---------- */ /* Applied when . Inline script in base.html head sets this before paint so there's no flash. */ :root[data-theme="dark"] { /* Brand — brighter on dark bg for contrast */ --ds-blue: #7F95FF; --ds-blue-tint: rgba(127, 149, 255, 0.16); --ds-heritage: #D39A5B; --ds-heritage-tint: rgba(211, 154, 91, 0.14); /* Ink scale — inverted (light on dark) */ --ds-ink: #E8EAEE; --ds-ink-2: #C4C7CE; --ds-ink-3: #9699A1; --ds-ink-4: #6E7078; --ds-ink-5: #4C4E55; /* Lines + surfaces — surf is elevated (cards), surf-2 is app bg (deepest), surf-3 is hover/chip (most elevated) */ --ds-line: #2A2D33; --ds-line-2: #22252B; --ds-surf: #15171B; --ds-surf-2: #0B0D10; --ds-surf-3: #1F2128; /* Semantic — brighter + translucent tints for dark */ --ds-good: #4ADE80; --ds-good-tint: rgba(74, 222, 128, 0.14); --ds-warn: #FBBF24; --ds-warn-tint: rgba(251, 191, 36, 0.14); --ds-bad: #F87171; --ds-bad-tint: rgba(248, 113, 113, 0.14); /* Shadows — subtle on dark (cards rely on surface contrast, not shadow) */ --ds-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25); --ds-shadow-float: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.45); /* Logo is masked and tinted via --ds-logo-color — pure white on dark bg. */ --ds-logo-color: #ffffff; color-scheme: dark; } /* Remap legacy Material tokens (app.css) to Doorstep surfaces in dark mode, so anything still styled via app.css (body bg, cards, dividers) inherits the dark palette instead of staying white. */ :root[data-theme="dark"] { --surface: var(--ds-surf-2); --surface-container-lowest: var(--ds-surf); --surface-container-low: var(--ds-surf-3); --surface-container: var(--ds-surf-3); --surface-container-high: var(--ds-line); --surface-container-highest: var(--ds-line); --surface-dim: var(--ds-line-2); --primary-fixed: var(--ds-blue-tint); --error-container: var(--ds-bad-tint); /* app.css cascades body color through --on-surface and --on-surface-variant. Without this remap, body text stays near-black in dark mode — causing every heading/table cell/label that inherits body color to vanish. */ --on-surface: var(--ds-ink); --on-surface-variant: var(--ds-ink-3); --outline: var(--ds-line); --outline-variant: var(--ds-line-2); } /* Accent surfaces use `background: var(--ds-ink)` for contrast. In light mode --ds-ink is near-black so white text reads; in dark mode it flips to near- white so the #fff text vanishes. Flip those text colors to the dark surface. */ :root[data-theme="dark"] .ds-nav a.active, :root[data-theme="dark"] .ds-nav a.active .ds-icon, :root[data-theme="dark"] .ds-btn.primary, :root[data-theme="dark"] .ds-btn.primary:hover, :root[data-theme="dark"] .ds-tab.on .n, :root[data-theme="dark"] .ds-chip.active, :root[data-theme="dark"] .ds-toggle button.on, :root[data-theme="dark"] .ds-pager button.on, :root[data-theme="dark"] .ds-seg label:has(input:checked), :root[data-theme="dark"] .ds-seg label:has(input:checked):hover { color: var(--ds-surf); } :root[data-theme="dark"] .ds-nav a.active .count { background: rgba(10, 12, 20, 0.18); color: var(--ds-surf); } /* Component overrides that need more than a token swap in dark mode. Keep brand identity on platform badges (myhome orange, ss blue, sold purple) but use translucent backgrounds so they don't glare on the dark surface. */ :root[data-theme="dark"] .ds-src.myhome { background: rgba(232, 119, 34, 0.16); color: #F3A368; } :root[data-theme="dark"] .ds-src.ss, :root[data-theme="dark"] .ds-src.ssge { background: rgba(0, 113, 206, 0.18); color: #6AAEE8; } :root[data-theme="dark"] .ds-src.doorstep { background: var(--ds-heritage-tint); color: var(--ds-heritage); } :root[data-theme="dark"] .ds-pill.sold { background: rgba(75, 43, 174, 0.22); color: #A696E8; } /* Modal/dropdown surfaces from Bootstrap — force dark bg so popovers match. */ :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu { /* !important to beat app.css, which hardcodes `.modal-content { background: var(--surface-container-lowest)#FFFFFF !important }` — that white box + light --ds-ink text rendered the modal invisible in dark mode. Use the brightest surface (surf-3) so the modal lifts off the darker page, plus a real drop-shadow for elevation. */ background: var(--ds-surf-3) !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important; border-color: var(--ds-line); } :root[data-theme="dark"] .dropdown-item { color: var(--ds-ink-2); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background: var(--ds-surf-3); color: var(--ds-ink); } :root[data-theme="dark"] .dropdown-divider { border-color: var(--ds-line); } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Darker scrim so the page recedes behind the modal (default .5 is weak over an already-dark page). */ :root[data-theme="dark"] .modal-backdrop.show { opacity: 0.72 !important; } /* Bootstrap form controls inside dark modals. app.css forces .form-control to white (#FFFFFF !important) with a light/grey text token, which made the deal modal's fields and labels unreadable in dark mode. Re-skin to dark tokens — scoped to .modal-content so other (legacy) pages are untouched. */ :root[data-theme="dark"] .modal-content .form-control, :root[data-theme="dark"] .modal-content .form-select { background-color: var(--ds-surf) !important; /* recessed: darker than the surf-3 modal */ color: var(--ds-ink) !important; border: 1px solid var(--ds-line) !important; /* visible edge — --ds-line-2 was invisible */ } :root[data-theme="dark"] .modal-content .form-control:hover, :root[data-theme="dark"] .modal-content .form-select:hover { border-color: var(--ds-ink-4) !important; } :root[data-theme="dark"] .modal-content .form-control:focus, :root[data-theme="dark"] .modal-content .form-select:focus { border-color: var(--ds-heritage) !important; box-shadow: 0 0 0 3px var(--ds-heritage-tint) !important; } :root[data-theme="dark"] .modal-content .form-control::placeholder { color: var(--ds-ink-5) !important; } /* Native date-picker glyph is black by default — invert it on dark fields. */ :root[data-theme="dark"] .modal-content input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; } :root[data-theme="dark"] .modal-content .form-label { color: var(--ds-ink-2) !important; } :root[data-theme="dark"] .modal-content .modal-title { color: var(--ds-ink) !important; } :root[data-theme="dark"] .modal-content .text-danger { color: var(--ds-bad) !important; } /* ---------- 2. Base ---------- */ * { box-sizing: border-box } html, body { background: var(--ds-surf-2); color: var(--ds-ink); font-family: var(--ds-font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 } .ds-display, .ds-serif { font-family: var(--ds-font-display); letter-spacing: -0.01em } .ds-mono { font-family: var(--ds-font-mono) } /* ---------- 3. App shell (sidebar + main) ---------- */ .ds-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh } .ds-sidebar { background: var(--ds-surf); border-right: 1px solid var(--ds-line-2); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 22px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; } .ds-sidebar::-webkit-scrollbar { width: 6px; } .ds-sidebar::-webkit-scrollbar-thumb { background: var(--ds-line-2); border-radius: 3px; } .ds-sidebar::-webkit-scrollbar-track { background: transparent; } .ds-brand { display: block; padding: var(--ds-logo-pad-top) 8px var(--ds-logo-pad-bottom) var(--ds-logo-pad-left); text-decoration: none; } .ds-brand-img { display: block; width: var(--ds-logo-width); max-width: 100%; aspect-ratio: 3 / 1; /* matches logo.png natural aspect (3000×1000) */ background-color: var(--ds-logo-color); -webkit-mask: url("../img/logo.png?v=2") no-repeat left center / contain; mask: url("../img/logo.png?v=2") no-repeat left center / contain; } .ds-brand-tag { display: var(--ds-logo-tag-display); font-size: 10px; color: var(--ds-ink-4); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-top: var(--ds-logo-tag-gap); text-align: var(--ds-logo-tag-align); transform: translateX(var(--ds-logo-tag-offset-x)); } .ds-nav-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-ink-5); font-weight: 600; padding: 16px 10px 8px } .ds-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ds-ink-3); font-weight: 500; font-size: 13.5px; margin-bottom: 1px; position: relative; } /* Icon stays put when a long label wraps to a second line. */ .ds-nav a .ds-icon { flex-shrink: 0; align-self: flex-start; margin-top: 1px; } .ds-nav a:hover { background: var(--ds-surf-3); color: var(--ds-ink) } .ds-nav a.active { background: var(--ds-ink); color: #fff } .ds-nav a.active .ds-icon { color: #fff } /* Locked Pro features (Analytics/Commissions shown to Lite users with the little lock indicator). Same layout as a normal nav link, just dimmed so it reads as "available behind upgrade" rather than "I shouldn't click". */ .ds-nav a.ds-locked { color: var(--ds-ink-4); } .ds-nav a.ds-locked .ds-icon { opacity: 0.6; } .ds-nav a.ds-locked:hover { color: var(--ds-ink-2); background: var(--ds-surf-3); } .ds-nav a .ds-icon { width: 20px; height: 20px; color: var(--ds-ink-4) } .ds-nav a .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--ds-ink-4); background: var(--ds-surf-3); padding: 2px 7px; border-radius: 99px; font-family: var(--ds-font-mono) } .ds-nav a.active .count { background: rgba(255, 255, 255, .14); color: #fff } .ds-sidebar-foot { margin-top: auto; border-top: 1px solid var(--ds-line-2); padding-top: 14px } .ds-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px } .ds-me:hover { background: var(--ds-surf-3) } .ds-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--ds-heritage), #8B5A1C); color: #fff; display: grid; place-items: center; font-weight: 600; font-family: var(--ds-font-display); font-size: 13px; flex-shrink: 0; } .ds-me-name { font-weight: 600; font-size: 13px } .ds-me-role { font-size: 11px; color: var(--ds-ink-4); letter-spacing: 0.04em } .ds-main { min-width: 0; padding: 26px 40px 80px } /* ---------- 4. Masthead (editorial top) ---------- */ .ds-masthead { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 8px 0 22px; border-bottom: 1px solid var(--ds-ink); margin-bottom: 24px; } .ds-masthead .ds-edition { display: flex; align-items: baseline; gap: 14px; font-family: var(--ds-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ds-ink-3); text-transform: uppercase } .ds-edition .dot { width: 4px; height: 4px; background: var(--ds-ink-3); border-radius: 50%; display: inline-block } .ds-masthead h1 { font-family: var(--ds-font-display); font-weight: 500; font-size: 64px; line-height: 0.95; letter-spacing: -0.035em; color: var(--ds-ink); margin-top: 10px } .ds-masthead h1 em { font-style: italic; font-weight: 400; color: var(--ds-heritage) } .ds-masthead .actions { display: flex; gap: 8px; align-items: center } /* ---------- 5. Buttons ---------- */ .ds-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font-weight: 600; font-size: 13px; background: var(--ds-surf); color: var(--ds-ink-2); border: 1px solid transparent; transition: all .15s; } .ds-btn:hover { background: var(--ds-surf-3) } .ds-btn.primary { background: var(--ds-ink); color: #fff } .ds-btn.primary:hover { background: var(--ds-ink-2) } .ds-btn.ghost { background: transparent } .ds-btn .ds-icon { width: 18px; height: 18px } /* Search input */ .ds-search { display: flex; align-items: center; gap: 8px; background: var(--ds-surf); padding: 9px 14px; border-radius: 99px; color: var(--ds-ink-4); min-width: 360px; } .ds-search input { border: 0; outline: 0; font: inherit; color: var(--ds-ink); flex: 1; background: transparent } .ds-search .kbd { font-family: var(--ds-font-mono); font-size: 10px; color: var(--ds-ink-4); background: var(--ds-surf-3); padding: 2px 5px; border-radius: 4px } /* Make the leading search icon a real submit button (was a bare so clicking it did nothing — only Enter submitted the form). */ .ds-search-submit { background: transparent; border: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; color: inherit; cursor: pointer; } .ds-search-submit:hover { color: var(--ds-ink); } .ds-search-submit:focus-visible { outline: 2px solid var(--ds-heritage); outline-offset: 2px; border-radius: 4px; } /* ─── Agent picker chips (team goals create form) ───────────────────── Compact "tap-to-select" pills with an initial-circle avatar. Selected state is driven by :has(input:checked) — no JS per-chip click needed. */ .ds-chip-btn { border: 1px solid var(--ds-line-2); background: var(--ds-surf); color: var(--ds-ink-3); padding: 3px 10px; font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 99px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .ds-chip-btn:hover { background: var(--ds-surf-2); color: var(--ds-ink); border-color: var(--ds-ink-4); } .ds-chip-btn:active { transform: translateY(1px); } .agent-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--ds-line-2); border-radius: 12px; background: var(--ds-surf-2); max-height: 240px; overflow-y: auto; } .agent-chip-empty { color: var(--ds-ink-4); font-size: 12px; padding: 6px; } .agent-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; background: var(--ds-surf); border: 1px solid var(--ds-line); border-radius: 99px; cursor: pointer; font-size: 13px; color: var(--ds-ink-2); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; user-select: none; position: relative; } .agent-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .agent-chip:hover { background: var(--ds-surf-3); border-color: var(--ds-ink-4); color: var(--ds-ink); } .agent-chip-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #E8D49B 0%, #C9A961 100%); color: #14161C; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; } .agent-chip-name { font-weight: 500; } .agent-chip-role { font-size: 10px; font-weight: 600; color: var(--ds-ink-4); text-transform: uppercase; letter-spacing: 0.08em; padding: 1px 5px; border: 1px solid var(--ds-line-2); border-radius: 4px; } .agent-chip-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: transparent; color: transparent; margin-left: 2px; transition: background 0.12s ease, color 0.12s ease; } .agent-chip:has(input:checked) { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-surf); box-shadow: 0 2px 8px rgba(20, 22, 28, 0.18); } .agent-chip:has(input:checked) .agent-chip-role { color: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.18); } .agent-chip:has(input:checked) .agent-chip-check { background: var(--ds-heritage, #C9A961); color: #14161C; } .agent-chip:focus-within { outline: 2px solid var(--ds-heritage, #C9A961); outline-offset: 2px; } /* ─── Per-agent goal group rows (team_goals list view) ────────────── */ .agent-goal-group { padding: 14px 0; border-top: 1px solid var(--ds-line-2); } .agent-goal-group:first-child { border-top: 0; } .agent-goal-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .agent-goal-group-title { font-size: 14px; font-weight: 600; color: var(--ds-ink); margin-bottom: 4px; } .agent-goal-group-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ds-ink-4); } .agent-goal-group-agents { display: flex; flex-wrap: wrap; gap: 6px; } .agent-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; background: var(--ds-surf-2); border: 1px solid var(--ds-line-2); border-radius: 99px; font-size: 12px; color: var(--ds-ink-2); text-decoration: none; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .agent-pill:hover { background: var(--ds-surf-3); border-color: var(--ds-ink-4); color: var(--ds-ink); } .agent-pill-avatar { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #E8D49B 0%, #C9A961 100%); color: #14161C; font-weight: 700; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; } /* ---------- 6. Cards + overview ---------- */ .ds-card { background: var(--ds-surf); border-radius: var(--ds-radius); padding: 22px; box-shadow: var(--ds-shadow); position: relative; } .ds-k-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-ink-4); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .ds-k-label .ds-icon { width: 14px; height: 14px } /* ---------- 7. Bulletin / attention rail ---------- */ .ds-bulletin { background: var(--ds-surf); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); overflow: hidden } .ds-bulletin-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--ds-line-2) } .ds-bulletin-head h3 { font-family: var(--ds-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px } .ds-pulse { width: 7px; height: 7px; background: var(--ds-bad); border-radius: 50%; box-shadow: 0 0 0 0 rgba(166, 27, 27, .4); animation: ds-pulse 2s infinite } @keyframes ds-pulse { 70% { box-shadow: 0 0 0 8px rgba(166, 27, 27, 0) } 100% { box-shadow: 0 0 0 0 rgba(166, 27, 27, 0) } } .ds-bulletin-body { display: grid; grid-template-columns: repeat(5, 1fr) } .ds-bul-item { padding: 18px 22px; border-right: 1px solid var(--ds-line-2) } .ds-bul-item:last-child { border-right: 0 } .ds-bul-item .kind { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; margin-bottom: 8px } .ds-bul-item.urgent .kind { color: var(--ds-bad) } .ds-bul-item.warn .kind { color: var(--ds-warn) } .ds-bul-item.info .kind { color: var(--ds-blue) } .ds-bul-item.good .kind { color: var(--ds-good) } .ds-bul-item .count { font-family: var(--ds-font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--ds-ink) } .ds-bul-item .title { font-size: 12.5px; color: var(--ds-ink-2); margin-top: 6px; font-weight: 500; line-height: 1.35 } /* ---------- 8. Tabs ---------- */ .ds-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ds-line); overflow-x: auto } .ds-tab { padding: 14px 20px; font-size: 13px; font-weight: 500; color: var(--ds-ink-4); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 9px; transition: color .15s; } .ds-tab:hover { color: var(--ds-ink-2) } .ds-tab.on { color: var(--ds-ink); border-bottom-color: var(--ds-ink); font-weight: 600 } .ds-tab .n { font-family: var(--ds-font-mono); font-size: 11px; background: var(--ds-surf-3); padding: 2px 8px; border-radius: 99px; color: var(--ds-ink-3); font-weight: 500 } .ds-tab.on .n { background: var(--ds-ink); color: #fff } .ds-tab.urgent .n { background: var(--ds-bad-tint); color: var(--ds-bad) } .ds-tab.warn .n { background: var(--ds-warn-tint); color: var(--ds-warn) } /* Favorites tab — set apart from the lifecycle-status tabs: pushed to the far right and tinted in the heritage accent so it reads as a distinct kind of view (personal bookmarks), not another status. */ .ds-tab.fav { margin-left: auto; color: var(--ds-heritage); } .ds-tab.fav:hover { color: var(--ds-heritage); opacity: 0.82; } .ds-tab.fav.on { color: var(--ds-heritage); border-bottom-color: var(--ds-heritage); font-weight: 600; } .ds-tab.fav .n { background: var(--ds-heritage-tint); color: var(--ds-heritage) } .ds-tab.fav.on .n { background: var(--ds-heritage); color: #fff } /* ---------- 9. Chips (filter strip) ---------- */ .ds-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--ds-surf); font-size: 12px; font-weight: 500; color: var(--ds-ink-2); box-shadow: var(--ds-shadow); } .ds-chip .ds-icon { width: 14px; height: 14px; color: var(--ds-ink-4) } .ds-chip.active { background: var(--ds-ink); color: #fff } .ds-chip.active .ds-icon { color: #fff } /* ---------- 10. Sheet (table) ---------- */ .ds-sheet { background: var(--ds-surf); border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); overflow: hidden } .ds-table { width: 100%; border-collapse: collapse; font-size: 13px } .ds-table thead th { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink-4); font-weight: 600; text-align: left; padding: 14px 18px; background: var(--ds-surf-2); border-bottom: 1px solid var(--ds-line-2); white-space: nowrap; } .ds-table thead th.num { text-align: right } .ds-table tbody td { padding: 16px 18px; border-bottom: 1px solid var(--ds-line-2); vertical-align: middle } .ds-table tbody tr:last-child td { border-bottom: 0 } .ds-table tbody tr:hover { background: var(--ds-surf-2) } .ds-table.compact tbody td { padding: 9px 18px } .ds-table.compact thead th { padding: 10px 18px } .ds-addr { font-weight: 600; color: var(--ds-ink); font-size: 13.5px; font-family: var(--ds-font-display); letter-spacing: -0.005em } .ds-addr-sub { font-size: 11.5px; color: var(--ds-ink-4); margin-top: 2px; font-family: var(--ds-font-mono); letter-spacing: 0.02em } .ds-price { font-family: var(--ds-font-display); font-size: 15px; font-weight: 500; color: var(--ds-ink); letter-spacing: -0.01em; text-align: right } .ds-price .cur { color: var(--ds-ink-4); font-size: 11px; margin-right: 2px; font-weight: 500 } .ds-num { text-align: right; font-family: var(--ds-font-mono); font-weight: 500; color: var(--ds-ink-2) } /* ---------- 11. Source badges ---------- */ .ds-src { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase } .ds-src .d { width: 5px; height: 5px; border-radius: 50% } .ds-src.myhome { background: #FFF1E6; color: #9A4400 } .ds-src.myhome .d { background: #E87722 } .ds-src.ss, .ds-src.ssge { background: #E6F0F8; color: #004680 } .ds-src.ss .d, .ds-src.ssge .d { background: #0071CE } .ds-src.doorstep { background: var(--ds-heritage-tint); color: var(--ds-heritage) } .ds-src.doorstep .d { background: var(--ds-heritage) } /* ─── Dashboard filter panel (collapsible) ───────────────────────────── Compact 6-up grid for filter fields, with a bottom action bar that holds Sort + Apply/Clear. min-width:0 lets fields shrink instead of forcing the grid to overflow into a 4-2-1 zigzag. */ .ds-filter-panel { margin-bottom: 18px; padding: 18px 20px; } .ds-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; } .ds-filter-grid > .ds-field { min-width: 0; gap: 4px; } /* Neutralize doorstep-forms.css `.ds-field + .ds-field { margin-top: 18px }` which staggers fields on row 2 when the grid wraps. */ .ds-filter-grid .ds-field + .ds-field { margin-top: 0; } .ds-filter-grid .ds-input { padding: 8px 12px; font-size: 13px; box-sizing: border-box; } .ds-filter-grid .ds-select { padding: 8px 34px 8px 12px; /* keep right room for the chevron SVG */ font-size: 13px; box-sizing: border-box; background-position: right 10px center; background-size: 16px 16px; } /* ds-popsel triggers in filter grid must match the compressed .ds-input density (8px 12px / 13px) — otherwise they sit ~8px taller and the row looks staggered. */ .ds-filter-grid .ds-popsel-trigger { padding: 8px 12px; font-size: 13px; } @media (max-width: 1280px) { .ds-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .ds-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ds-filter-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ds-line-2); } .ds-filter-actions .ds-field { flex: 0 0 220px; min-width: 0; gap: 4px; } .ds-filter-actions .ds-select { padding: 8px 34px 8px 12px; font-size: 13px; box-sizing: border-box; background-position: right 10px center; background-size: 16px 16px; } .ds-filter-actions .ds-popsel-trigger { padding: 8px 12px; font-size: 13px; } .ds-filter-actions .ds-btn { white-space: nowrap; } /* ---------- 12. Status pills ---------- */ .ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 600 } .ds-pill.active { background: var(--ds-good-tint); color: var(--ds-good) } .ds-pill.rented { background: var(--ds-blue-tint); color: var(--ds-blue) } .ds-pill.sold { background: #E8E6F3; color: #4B2BAE } .ds-pill.rerent { background: var(--ds-warn-tint); color: var(--ds-warn) } .ds-pill.unavail { background: var(--ds-bad-tint); color: var(--ds-bad) } .ds-pill.uploaded { background: var(--ds-surf-3); color: var(--ds-ink-3) } .ds-pill.archived { background: transparent; color: var(--ds-ink-4); border: 1px dashed var(--ds-line-2); padding: 3px 11px; } .ds-pill.coop { background: var(--ds-heritage-tint); color: var(--ds-heritage); } /* ---------- 13. Flag dots ---------- */ .ds-flag { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0 } .ds-flag.warn { background: var(--ds-warn) } .ds-flag.bad { background: var(--ds-bad) } .ds-flag.good { background: var(--ds-good) } /* ---------- 14. Toggle (view switcher) ---------- */ .ds-toggle { display: flex; background: var(--ds-surf); border-radius: 99px; padding: 3px; box-shadow: var(--ds-shadow) } .ds-toggle button { padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--ds-ink-4); display: inline-flex; align-items: center; gap: 6px } .ds-toggle button.on { background: var(--ds-ink); color: #fff } .ds-toggle button .ds-icon { width: 16px; height: 16px } /* ---------- 15. Row hover actions ---------- */ .ds-row-act { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity .15s } .ds-table tbody tr:hover .ds-row-act { opacity: 1 } .ds-row-act button { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; color: var(--ds-ink-4) } .ds-row-act button:hover { background: var(--ds-surf-3); color: var(--ds-ink) } .ds-row-act .ds-icon { width: 18px; height: 18px } /* ---------- 16. Pagination ---------- */ .ds-pagination { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; font-size: 13px; color: var(--ds-ink-4) } .ds-pager { display: flex; gap: 4px; align-items: center } .ds-pager button { width: 32px; height: 32px; border-radius: 8px; color: var(--ds-ink-3); font-weight: 500; font-family: var(--ds-font-mono); font-size: 12px } .ds-pager button:hover { background: var(--ds-surf-3) } .ds-pager button.on { background: var(--ds-ink); color: #fff } .ds-pager button:disabled { color: var(--ds-ink-5); cursor: not-allowed } /* ---------- 17. Icon base ---------- */ .ds-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; color: currentColor; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round } /* ---------- 18. Utility ---------- */ .ds-hidden { display: none !important } .ds-dim { color: var(--ds-ink-4) } /* ============================================================ 19. Mobile (≤ 900px) The shared design system never had mobile rules — this block compacts the core layout, masthead, cards, table, and inline widgets. Page-specific inline grids are collapsed in base.html via attribute selectors (inline styles beat class specificity). ============================================================ */ @media (max-width: 900px) { /* Shell padding — base.html already sets ds-main padding, but add a fallback in case some pages skip the shell. */ .ds-main { padding: 16px 14px 60px; } /* Masthead — stack title over actions, scale H1 */ .ds-masthead { grid-template-columns: 1fr; gap: 14px; padding: 4px 0 16px; margin-bottom: 18px; align-items: start; } .ds-masthead h1 { font-size: 38px; margin-top: 6px; line-height: 1.0; } .ds-masthead .ds-edition { font-size: 10px; gap: 10px; flex-wrap: wrap; } .ds-masthead .actions { flex-wrap: wrap; gap: 8px; width: 100%; } .ds-masthead .actions .ds-search { flex: 1 1 100%; /* full-row search input */ order: -1; /* put search on top of action buttons */ } /* Cards — tighter padding */ .ds-card { padding: 16px; } /* Bulletin — stack dual urgent/info items */ .ds-bulletin-body { grid-template-columns: 1fr !important; } /* Sheet / table — allow horizontal scroll + compact cells. Extend the horizontal-scroll treatment to any card that wraps a table directly (several admin pages put inside .ds-card without wrapping in .ds-sheet). */ .ds-sheet { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ds-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ds-table { font-size: 12.5px; min-width: 560px; } .ds-table thead th { padding: 10px 12px; font-size: 10px; } .ds-table tbody td { padding: 12px; } .ds-table.compact thead th, .ds-table.compact tbody td { padding: 8px 12px; } /* Row-action buttons — hover doesn't exist on touch, always show */ .ds-row-act { opacity: 1; } /* Buttons inside masthead/actions — slightly smaller */ .ds-masthead .actions .ds-btn { padding: 8px 12px; font-size: 12.5px; } /* Pagination — wrap to two lines instead of squeezing */ .ds-pagination { flex-wrap: wrap; gap: 10px 16px; padding: 14px 4px; } /* Tabs — already scroll horizontally via overflow-x, just tighten */ .ds-tab { padding: 12px 14px; font-size: 12.5px; } /* Toggle / chip / pill — tighten for thumb-friendly density */ .ds-chip { padding: 6px 10px; } .ds-toggle button { padding: 6px 11px; } /* Search input on narrow viewports — hide the ⌘K keyboard hint */ .ds-search .kbd { display: none; } /* Brand in sidebar stays normal width; sidebar drawer is already handled in base.html. */ } @media (max-width: 480px) { /* Very narrow phones (≤ iPhone SE / mini) */ .ds-masthead h1 { font-size: 32px; } .ds-main { padding: 14px 12px 60px; } } /* ─── Responsive utilities (opt-in) ─── */ /* Use these on any grid that should collapse on mobile. Declaring the desktop column count inline via the modifier keeps the HTML readable. */ .ds-grid-resp { display: grid; } .ds-grid-resp.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-grid-resp.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-grid-resp.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-grid-resp.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Two-column layout that collapses: main + fixed-width rail. */ .ds-split-rail { display: grid; gap: 18px; align-items: start; } .ds-split-rail.rail-340 { grid-template-columns: minmax(0, 1fr) 340px; } .ds-split-rail.rail-360 { grid-template-columns: minmax(0, 1fr) 360px; } @media (max-width: 900px) { /* 4/5-col stat grids drop to 2 cols to stay readable. */ .ds-grid-resp.cols-4, .ds-grid-resp.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Rail layouts stack below the main column. */ .ds-split-rail.rail-340, .ds-split-rail.rail-360 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { /* On phones, collapse everything to a single column. */ .ds-grid-resp.cols-2, .ds-grid-resp.cols-3, .ds-grid-resp.cols-4, .ds-grid-resp.cols-5 { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ Global form-control polish — shadcn-style focus ring + cursor ============================================================ Catches unclassed native /