/* ========================================================================== CRM Imobiliar — stylesheet Version 1.5.1 Five sections: tokens, primitives, chrome, components, responsive. Every selector here is used by a template; nothing is defined twice. Leads run cold → warm → hot, so the palette IS a temperature scale — steel blue through amber to ember, green for sold, grey for lost. Everything else stays quiet so that on a list of forty leads the status colour is the only thing raising its voice. Depth is used sparingly and consistently: surfaces sit on the page, the things you can act on lift slightly when you point at them, and the top bar floats above the content it scrolls over. ========================================================================== */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { color-scheme: light; /* Surfaces — cool paper, with the page itself very slightly shaded so that white cards read as raised rather than as holes. */ --paper: #eef1f2; --paper-2: #e6eaec; --surface: #ffffff; --surface-2: #f5f8f8; --line: #e0e5e6; --line-2: #c6cfd1; /* Ink */ --ink: #121a1d; --ink-2: #48575e; --ink-3: #7a8a92; /* Brand — the deep teal of an architect's ink */ --brand: #0f3f47; --brand-2: #17636f; --brand-3: #1f7f8e; --brand-tint: #e3eef0; /* Temperature scale */ --cold: #3f72a4; --cold-tint: #e8f0f7; --warm: #b0741c; --warm-tint: #fbf1de; --hot: #b8422a; --hot-tint: #fbe8e3; --sold: #2b7350; --sold-tint: #e3f1ea; --lost: #7c878c; --lost-tint: #edefef; --meeting: #6b4fa8; --meeting-tint: #ede9f7; --danger: #b3261e; /* Type */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Rhythm — one 4px scale. Every gap, padding and margin here is one of these. A value that is not on the scale is a mistake. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --stack: var(--s6); /* Shape */ --r1: 8px; --r2: 12px; --r3: 16px; --pill: 999px; --pill-pad: var(--s1) var(--s3); /* Elevation — tinted with the ink colour rather than pure black, so shadows look like shade on paper instead of grey haze. */ --sh-1: 0 1px 2px rgba(18, 26, 29, .05); --sh-2: 0 1px 2px rgba(18, 26, 29, .05), 0 2px 6px rgba(18, 26, 29, .06); --sh-3: 0 2px 4px rgba(18, 26, 29, .05), 0 6px 16px rgba(18, 26, 29, .09); --sh-4: 0 4px 8px rgba(18, 26, 29, .06), 0 12px 32px rgba(18, 26, 29, .14); --ring: 0 0 0 3px rgba(23, 99, 111, .20); /* Tap targets: 44px is the smallest comfortable one on a phone. */ --tap: 44px; } /* Dark is a choice, not a guess: it applies when somebody asks for it, never because their operating system happens to be set that way. The toggle in the top bar writes the attribute on , and the server reads it back on the next request so the page never flashes white first. */ [data-theme="dark"] { --paper: #0d1316; --paper-2: #0a0f11; --surface: #161f23; --surface-2: #1d272c; --line: #29343a; --line-2: #3d4b52; --ink: #e9eff1; --ink-2: #b0bec4; --ink-3: #82939b; --brand: #7fc4cf; --brand-2: #9ad6df; --brand-3: #b3e4eb; --brand-tint: #15303a; --cold-tint: #1a2b3c; --warm-tint: #322610; --hot-tint: #391b13; --sold-tint: #133025; --lost-tint: #222b2f; --meeting-tint: #241d3d; --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --sh-2: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 8px 20px rgba(0, 0, 0, .45); --sh-4: 0 4px 10px rgba(0, 0, 0, .55), 0 16px 40px rgba(0, 0, 0, .55); color-scheme: dark; } /* ========================================================================== 2. Primitives ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100svh; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--paper); background-image: radial-gradient(120% 80% at 50% 0%, var(--surface-2) 0%, var(--paper) 45%, var(--paper-2) 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } h1, h2 { margin: 0; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; } p { margin: 0; } a { color: var(--brand-2); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: var(--r1); } .skip-link { position: absolute; left: -9999px; top: var(--s2); padding: var(--s2) var(--s4); background: var(--surface); border-radius: var(--r1); box-shadow: var(--sh-4); z-index: 100; } .skip-link:focus { left: var(--s4); } .hint { font-size: 12px; color: var(--ink-3); } /* --- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .btn:hover { background: var(--surface-2); box-shadow: var(--sh-2); transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); box-shadow: var(--sh-1); } .btn--primary { background: linear-gradient(180deg, var(--brand-2) 0%, var(--brand) 100%); border-color: var(--brand); color: #fff; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .12); } .btn--primary:hover { background: linear-gradient(180deg, var(--brand-3) 0%, var(--brand-2) 100%); border-color: var(--brand-2); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .16); } .btn--wa { background: linear-gradient(180deg, #2f7d56 0%, var(--sold) 100%); border-color: var(--sold); color: #fff; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .12); } .btn--wa:hover { background: linear-gradient(180deg, #358a5f 0%, #2f7d56 100%); } .btn--quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-3); font-weight: 550; } .btn--quiet:hover { background: var(--surface-2); color: var(--ink); box-shadow: none; transform: none; } .btn--sm { min-height: 34px; padding: 0 var(--s3); font-size: 13px; } .btn--block { width: 100%; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface); color: var(--ink-3); box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .icon-btn:hover { background: var(--brand-tint); color: var(--brand); border-color: transparent; box-shadow: var(--sh-2); transform: translateY(-1px); text-decoration: none; } .icon-btn--wa:hover { background: var(--sold-tint); color: var(--sold); } .icon { display: block; flex: none; } .btn .icon { margin-right: calc(var(--s1) * -1); } /* --- forms --------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: var(--s4); } .form__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); flex-wrap: wrap; } .form__actions .hint { margin-right: auto; } .field { display: flex; flex-direction: column; gap: var(--s2); } .field > label { font-size: 13px; font-weight: 620; color: var(--ink-2); letter-spacing: .01em; } .field-error { color: var(--danger); font-size: 13px; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="search"], input[type="file"], select, textarea { width: 100%; min-height: var(--tap); padding: var(--s3); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */ box-shadow: inset 0 1px 2px rgba(18, 26, 29, .04); transition: border-color .12s ease, box-shadow .12s ease; } textarea { min-height: 108px; resize: vertical; line-height: 1.55; font-size: 15px; } input[type="file"] { padding: var(--s2) var(--s3); box-shadow: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: var(--ring), inset 0 1px 2px rgba(18, 26, 29, .04); } input[aria-invalid="true"] { border-color: var(--danger); } /* Native date and time controls differ in every browser. Give them the same shape as every other field, and tabular figures so they stop jittering. */ input[type="date"], input[type="time"] { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .01em; padding-right: var(--s2); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: .4; cursor: pointer; padding: var(--s1); border-radius: var(--r1); } input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: .9; } select { appearance: none; padding-right: var(--s6); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%237a8a92' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s3) center; } input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; box-shadow: none; accent-color: var(--brand-2); cursor: pointer; } /* --- badges, flags, avatars ---------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--pill-pad); border-radius: var(--pill); font-size: 12px; font-weight: 640; line-height: 1.35; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(18, 26, 29, .04); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--cold { color: var(--cold); background: var(--cold-tint); } .badge--warm { color: var(--warm); background: var(--warm-tint); } .badge--hot { color: var(--hot); background: var(--hot-tint); } .badge--meeting { color: var(--meeting); background: var(--meeting-tint); } .badge--sold { color: var(--sold); background: var(--sold-tint); } .badge--lost { color: var(--lost); background: var(--lost-tint); } .badge--budget, .badge--plain { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); font-size: 11px; font-weight: 570; box-shadow: none; } .badge--budget { font-family: var(--mono); } .badge--budget::before, .badge--plain::before { display: none; } /* The follow-up flag: the most important signal on a lead row. */ .flag { display: inline-flex; align-items: baseline; gap: var(--s1); padding: var(--pill-pad); border-radius: var(--pill); font-size: 12px; font-weight: 640; line-height: 1.35; white-space: nowrap; } .flag time { font-family: var(--mono); font-size: 11px; font-weight: 500; opacity: .75; } .flag--quiet { color: var(--warm); background: var(--warm-tint); box-shadow: inset 0 0 0 1px rgba(176, 116, 28, .18); } .flag--due { color: var(--cold); background: var(--cold-tint); box-shadow: inset 0 0 0 1px rgba(63, 114, 164, .18); } .flag--overdue { color: #fff; background: linear-gradient(180deg, #c94a30 0%, var(--hot) 100%); box-shadow: var(--sh-1); } .avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 12px; font-weight: 660; color: #fff; background: var(--brand); box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .18); user-select: none; } .avatar--c0 { background: #3f72a4; } .avatar--c1 { background: #2b7350; } .avatar--c2 { background: #85559b; } .avatar--c3 { background: #b0741c; } .avatar--c4 { background: #17636f; } .avatar--c5 { background: #a8503e; } .tag { padding: 0 var(--s2); border-radius: var(--pill); background: var(--brand-tint); color: var(--brand); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } /* --- alerts and surfaces ------------------------------------------------- */ .alert { padding: var(--s3) var(--s4); margin-bottom: var(--s4); border: 1px solid transparent; border-radius: var(--r2); font-size: 14px; box-shadow: var(--sh-1); } .alert--flash { display: flex; align-items: flex-start; gap: var(--s3); } .alert--flash > span { flex: 1; } .alert__close { flex: none; padding: 0 var(--s1); border: 0; background: none; color: inherit; opacity: .6; font-size: 20px; line-height: 1; cursor: pointer; } .alert__close:hover { opacity: 1; } .alert--ok { background: var(--sold-tint); border-color: rgba(43, 115, 80, .35); color: var(--sold); } .alert--bad { background: var(--hot-tint); border-color: rgba(184, 66, 42, .35); color: var(--hot); } .alert--warn { background: var(--warm-tint); border-color: rgba(176, 116, 28, .35); color: var(--warm); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s5); box-shadow: var(--sh-2); } .placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s7) var(--s4); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r3); text-align: center; color: var(--ink-3); } .placeholder--sm { padding: var(--s5) var(--s4); } /* ========================================================================== 3. Chrome ========================================================================== */ /* The mark is the temperature scale itself, compressed into a square. */ .brand__mark { display: block; width: 24px; height: 24px; flex: none; border-radius: var(--r1); background: linear-gradient(150deg, var(--cold) 0%, var(--warm) 52%, var(--hot) 100%); box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .25); } .brand__mark--lg { width: 44px; height: 44px; border-radius: var(--r2); margin: 0 auto var(--s4); } .scale-strip { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; background: linear-gradient(90deg, var(--cold), var(--warm) 55%, var(--hot)); } .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2); } .topbar::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--cold), var(--warm) 55%, var(--hot)); } .topbar__inner { display: flex; align-items: center; gap: var(--s4); max-width: 1180px; margin: 0 auto; padding: var(--s3) var(--s4); } .topbar__user { display: flex; align-items: center; gap: var(--s2); } .topbar__profile { display: flex; align-items: center; gap: var(--s2); color: var(--ink); border-radius: var(--pill); } .topbar__profile:hover { text-decoration: none; } .topbar__profile:hover .topbar__meta strong { color: var(--brand-2); } .topbar__meta { display: flex; flex-direction: column; line-height: 1.25; } .topbar__meta strong { font-size: 14px; font-weight: 620; transition: color .12s ease; } .topbar__meta small { font-size: 12px; color: var(--ink-3); } .topbar__logout { margin: 0; } .brand { display: flex; align-items: center; gap: var(--s2); color: var(--ink); } .brand:hover { text-decoration: none; } .brand__name { font-weight: 690; letter-spacing: -.025em; white-space: nowrap; } /* The navigation is a segmented control: the active item is a raised pill rather than a differently coloured word. */ .nav { display: flex; gap: var(--s1); flex: 1; margin-left: var(--s3); padding: var(--s1); border-radius: var(--pill); background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(18, 26, 29, .05); } .nav__link { padding: var(--s2) var(--s3); border-radius: var(--pill); color: var(--ink-2); font-size: 14px; font-weight: 570; transition: background .12s ease, color .12s ease, box-shadow .12s ease; } .nav__link:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); text-decoration: none; } .nav__link.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--sh-2); font-weight: 640; } .shell { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); } /* flow-root so a child's top margin cannot escape the page wrapper. */ .page { display: flow-root; } .page__head { margin-bottom: var(--s5); } .page__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); } .page__title { font-size: 26px; } .page__sub { margin-top: var(--s1); font-size: 14px; color: var(--ink-3); } .page--narrow { max-width: 660px; } .back-link { display: inline-block; margin-bottom: var(--s2); font-size: 13px; color: var(--ink-3); } .back-link:hover { color: var(--brand-2); } .head-actions { display: flex; gap: var(--s2); } /* --- login and error pages ----------------------------------------------- */ .body--centered { display: flex; align-items: center; justify-content: center; min-height: 100svh; } .auth { width: 100%; padding: var(--s4); } .auth__card { width: 100%; max-width: 396px; margin: 0 auto; padding: var(--s6) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-4); } .auth__card--error { text-align: center; } .auth__title { font-size: 22px; text-align: center; } .auth__sub { margin: var(--s2) 0 var(--s5); font-size: 14px; color: var(--ink-3); text-align: center; } .error__code { margin-bottom: var(--s2); font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: -.04em; color: var(--line-2); } .password__out { margin-top: var(--s3); } /* ========================================================================== 4. Components ========================================================================== */ /* --- filter bar ---------------------------------------------------------- */ .filters { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); margin-bottom: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-2); } .filters__search { display: flex; gap: var(--s2); } .filters__search input { flex: 1; } .filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--s2); } .filters__row select { min-height: 38px; font-size: 14px; } .chips { display: flex; flex-wrap: wrap; gap: var(--s2); } .chip { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 570; line-height: 1.3; box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .chip:hover { background: var(--surface-2); box-shadow: var(--sh-2); transform: translateY(-1px); text-decoration: none; } .chip__count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .chip.is-active { color: #fff; border-color: transparent; box-shadow: var(--sh-2); } .chip.is-active .chip__count { color: rgba(255, 255, 255, .75); } .chip.is-active { background: linear-gradient(180deg, var(--brand-2), var(--brand)); } .chip--cold.is-active { background: linear-gradient(180deg, #4a80b4, var(--cold)); } .chip--warm.is-active { background: linear-gradient(180deg, #c2822a, var(--warm)); } .chip--hot.is-active { background: linear-gradient(180deg, #c94a30, var(--hot)); } .chip--meeting.is-active { background: linear-gradient(180deg, #7d5fbd, var(--meeting)); } .chip--sold.is-active { background: linear-gradient(180deg, #327f5a, var(--sold)); } .chip--lost.is-active { background: linear-gradient(180deg, #8b969b, var(--lost)); } .chip--warning { border-color: rgba(176, 116, 28, .4); color: var(--warm); background: var(--warm-tint); } .chip--warning.is-active { background: linear-gradient(180deg, #c2822a, var(--warm)); color: #fff; } /* --- saved views --------------------------------------------------------- */ .views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s4); } .view { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2) var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); box-shadow: var(--sh-1); font-size: 13px; font-weight: 570; } .view a { color: var(--ink-2); } .view a:hover { text-decoration: none; color: var(--ink); } .view.is-active { border-color: transparent; background: var(--brand-tint); box-shadow: var(--sh-2); } .view.is-active a { color: var(--brand); font-weight: 640; } .view form { margin: 0; display: flex; } .view__x { border: 0; background: none; cursor: pointer; padding: 0 var(--s1); color: var(--ink-3); font-size: 16px; line-height: 1; } .view__x:hover { color: var(--danger); } .view-save { display: flex; align-items: center; gap: var(--s2); } .view-save input { width: 200px; min-height: 34px; font-size: 13px; padding: 0 var(--s3); } /* --- lists --------------------------------------------------------------- */ .lead-list, .task-list { margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-2); } .lead { position: relative; display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s4) var(--s4) var(--s5); border-bottom: 1px solid var(--line); transition: background .12s ease; } .lead:last-child { border-bottom: 0; } /* A ribbon of the lead's own temperature down the left edge, so the state of a whole list can be read without stopping to read the badges. */ .lead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); } .lead--cold::before { background: var(--cold); } .lead--warm::before { background: var(--warm); } .lead--hot::before { background: var(--hot); } .lead--meeting::before { background: var(--meeting); } .lead--sold::before { background: var(--sold); } .lead--lost::before { background: var(--lost); opacity: .5; } .lead__pick { display: flex; align-items: center; padding-top: var(--s1); flex: none; } .lead__main { flex: 1; min-width: 0; } .lead__name { display: block; font-size: 15px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; } .lead__name:hover { text-decoration: none; } /* The whole row opens the lead. The name is still the only link — it simply grows an invisible layer over the row. Nothing is duplicated for a screen reader, keyboard order is unchanged, and the controls that do something else sit above it. */ .lead__name::after { content: ""; position: absolute; inset: 0; z-index: 1; } .lead__pick, .lead__actions { position: relative; z-index: 2; } .lead:hover { background: var(--surface-2); } .lead:hover .lead__name { color: var(--brand-2); } /* Keyboard users get the same outline the mouse gets a background for. */ .lead:has(.lead__name:focus-visible) { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--brand-2); } .lead__name:focus-visible { outline: none; } .lead__badges { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0; } .lead__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--ink-2); } .lead__note-date { margin-right: var(--s2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .lead__note--empty { color: var(--ink-3); font-style: italic; } .lead__side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); flex: none; } .lead__actions { display: flex; gap: var(--s1); } /* Who owns this lead: a coloured dot plus a short name, which can be read — unlike a bare initial in a circle. */ .owner { display: inline-flex; align-items: center; gap: var(--s2); font-size: 12px; font-weight: 570; color: var(--ink-3); white-space: nowrap; } .owner__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: var(--sh-1); } .owner--none { color: var(--warm); font-weight: 620; } .owner--none .icon { opacity: .8; } /* --- agenda -------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-bottom: var(--stack); } .stat { position: relative; overflow: hidden; padding: var(--s4); text-align: center; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-2); transition: transform .12s ease, box-shadow .12s ease; } .stat:hover { transform: translateY(-2px); box-shadow: var(--sh-3); text-decoration: none; } .stat__num { display: block; font-family: var(--mono); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; } .stat__label { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; } .stat--alert { background: linear-gradient(180deg, var(--hot-tint), var(--surface) 140%); border-color: rgba(184, 66, 42, .35); } .stat--alert .stat__num, .stat--alert .stat__label { color: var(--hot); } .stat--warn { background: linear-gradient(180deg, var(--warm-tint), var(--surface) 140%); border-color: rgba(176, 116, 28, .35); } .stat--warn .stat__num, .stat--warn .stat__label { color: var(--warm); } .agenda { margin-bottom: 0; } .agenda + .agenda { margin-top: var(--stack); } .agenda--muted { opacity: .85; } .agenda__title { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); font-size: 12px; font-weight: 660; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); } .agenda__count { padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); font-family: var(--mono); font-size: 11px; color: var(--ink-2); } .agenda--overdue .agenda__title { color: var(--hot); } .agenda--overdue .agenda__count { background: var(--hot-tint); border-color: rgba(184, 66, 42, .35); color: var(--hot); } /* --- dashboard: agenda full width, panels in a row beneath ---------------- */ .board { display: grid; grid-template-columns: 1fr 320px; gap: var(--s4); align-items: start; } .board__main, .board__side { min-width: 0; } .board__side { display: flex; flex-direction: column; gap: var(--s3); } /* One row, equal columns, equal height however many rows each one holds. */ .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--s3); margin-top: var(--stack); align-items: stretch; } .panel { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-2); overflow: hidden; } .panel__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 660; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); } .panel__link { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; } .panel__list { flex: 1; margin: 0; padding: 0; list-style: none; } .panel__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s5) var(--s4); color: var(--ink-3); text-align: center; } .panel__notes { flex: 1; margin: 0; padding: var(--s3) var(--s4) var(--s3) var(--s5); font-size: 13px; line-height: 1.5; color: var(--ink-2); } .panel__notes li + li { margin-top: var(--s2); } .panel__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); } /* A plain label beside a figure, as opposed to the badge rows on the dashboard. */ .breakdown__row > span:first-child { font-size: 13px; color: var(--ink-2); } /* Rows inside a panel are tighter than a full list row: more of them fit, and they are read at a glance rather than acted on. */ .mini { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); } /* Same stretched link as the leads list: the whole row opens the lead. */ .mini__name::after { content: ""; position: absolute; inset: 0; z-index: 1; } .mini:last-child { border-bottom: 0; } .mini:hover { background: var(--surface-2); } .mini__who { display: flex; flex-direction: column; gap: 0; min-width: 0; } .mini__name { display: block; font-size: 13px; font-weight: 620; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini__name:hover { color: var(--brand-2); text-decoration: none; } /* A row whose name carries the owner dot as well. */ .mini__name.owner { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; } .mini__meta { display: flex; align-items: center; gap: var(--s2); flex: none; } .mini__when { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .breakdown__row { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); } .breakdown__row:last-child { border-bottom: 0; } .breakdown__row:hover { background: var(--surface-2); } .breakdown__row a:hover { text-decoration: none; } .breakdown__count { font-family: var(--mono); font-size: 14px; font-weight: 650; color: var(--ink); } /* --- theme toggle -------------------------------------------------------- */ .theme { margin: 0; display: flex; } .theme-corner { position: absolute; top: var(--s4); right: var(--s4); z-index: 10; } /* --- a short list plus "other" -------------------------------------------- */ .field--choice { position: relative; } .choice__other { margin-top: var(--s2); } /* --- reminders ----------------------------------------------------------- */ .task-list--inline { margin-bottom: var(--s4); } .task { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); transition: background .12s ease; } .task:last-child { border-bottom: 0; } .task:hover { background: var(--surface-2); } .task--overdue::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #c94a30, var(--hot)); } /* The date column anchors the row: day on top, time beneath, aligned so a whole agenda can be scanned in one pass. */ .task__when { display: flex; flex-direction: column; flex: none; width: 108px; } .task__day { font-size: 13px; font-weight: 650; color: var(--cold); } .task__time { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .task--overdue .task__day { color: var(--hot); } .task__body { flex: 1; min-width: 0; } .task__title { font-size: 14px; font-weight: 570; } .task__lead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); font-size: 13px; } .task__lead a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .task:has(.task__lead a:focus-visible) { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--brand-2); } .task__agent { font-size: 11px; color: var(--ink-3); } .task__actions { display: flex; align-items: center; gap: var(--s1); flex: none; position: relative; z-index: 2; } .task__actions form { margin: 0; } /* --- scheduling form ----------------------------------------------------- */ .task-form { margin-bottom: var(--s4); } .task-form--prompt { border-color: var(--brand-2); box-shadow: var(--sh-3), 0 0 0 3px var(--brand-tint); } .task-form__prompt { margin-bottom: var(--s3); font-weight: 650; } .task-form .field { margin-bottom: var(--s3); } .task-form__skip { display: inline-block; margin-top: var(--s3); font-size: 13px; color: var(--ink-3); } .task-form__exact { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s2); } .task-form__exact .field { flex: 1; min-width: 132px; margin-bottom: 0; } .quick-picks { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); } .quick-pick { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 620; cursor: pointer; box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .quick-pick:hover { background: var(--brand-tint); border-color: var(--brand-2); color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-1px); } .quick-pick small { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--ink-3); } .quick-pick:hover small { color: var(--brand); } /* --- lead detail --------------------------------------------------------- */ .split { display: grid; grid-template-columns: 348px 1fr; gap: var(--s4); align-items: start; } .split__side, .split__main { min-width: 0; } /* stop long words widening the grid */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .readonly-pair { padding: var(--s3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2); } .readonly-pair__label { display: block; font-size: 12px; font-weight: 620; color: var(--ink-3); } .readonly-pair__value { font-family: var(--mono); font-size: 15px; } .readonly-pair small { display: block; margin-top: var(--s2); font-size: 12px; color: var(--ink-3); } .note-form { margin-bottom: var(--s4); } .note-form__label { display: block; margin-bottom: var(--s2); font-size: 13px; font-weight: 620; color: var(--ink-2); } .note-form textarea { margin-bottom: var(--s3); } .timeline { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; } .timeline__item { padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand-2); border-radius: var(--r2); box-shadow: var(--sh-1); } .timeline__head { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); } .timeline__head strong { display: block; font-size: 13px; } .timeline__head time { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .timeline__body { font-size: 14px; line-height: 1.55; word-break: break-word; } .activity { margin-top: var(--s4); } .activity__summary { cursor: pointer; font-size: 13px; font-weight: 620; color: var(--ink-3); padding: var(--s2) 0; list-style: revert; } .activity__summary:hover { color: var(--ink); } .activity__list { margin: var(--s2) 0 0; padding: var(--s3) var(--s4); list-style: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2); } .activity__item { display: flex; gap: var(--s3); padding: var(--s2) 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid var(--line); } .activity__item:last-child { border-bottom: 0; } .activity__item time { flex: none; width: 108px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } /* --- bulk selection ------------------------------------------------------ */ .bulk { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s4); margin-bottom: var(--s3); background: linear-gradient(180deg, var(--brand-tint), var(--surface) 160%); border: 1px solid var(--brand-2); border-radius: var(--r3); box-shadow: var(--sh-3); } .bulk__all { display: flex; align-items: center; gap: var(--s2); font-size: 13px; font-weight: 640; color: var(--brand); } .bulk select { width: auto; min-height: 36px; font-size: 13px; padding-top: 0; padding-bottom: 0; } .bulk__danger { color: var(--danger); } .bulk__danger:hover { background: var(--hot-tint); } /* --- import -------------------------------------------------------------- */ .note-card { margin-top: var(--s4); } .note-card__title { font-size: 14px; font-weight: 650; margin-bottom: var(--s2); } .mapping { margin-bottom: var(--stack); } .mapping__title { font-size: 13px; font-weight: 650; color: var(--ink-2); margin-bottom: var(--s3); } .mapping__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); } .mapping select { min-height: 38px; font-size: 14px; } .preview { margin-bottom: var(--stack); } .preview__more { margin-top: var(--s2); text-align: center; } .preview .agenda__title { margin-bottom: var(--s2); } .row-check { position: relative; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .row-check:last-child { border-bottom: 0; } .row-check::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .row-check--new::before { background: var(--sold); } .row-check--update::before { background: var(--cold); } .row-check--duplicate::before { background: var(--warm); } .row-check--invalid::before { background: var(--hot); } .row-check--invalid .row-check__phone { color: var(--hot); } .row-check__line { flex: none; width: 34px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .row-check__body { flex: 1; min-width: 0; } .row-check__name { font-size: 14px; font-weight: 570; } .row-check__phone { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .verdict { display: flex; flex-direction: column; align-items: flex-end; flex: none; max-width: 46%; font-size: 12px; font-weight: 640; text-align: right; } .verdict small { font-size: 11px; font-weight: 400; color: var(--ink-3); } .verdict--new { color: var(--sold); } .verdict--update { color: var(--cold); } .verdict--duplicate { color: var(--warm); } .verdict--invalid { color: var(--hot); } .commit .btn[disabled] { opacity: .5; cursor: not-allowed; } /* --- team ---------------------------------------------------------------- */ .team { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--stack); } .member { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh-2); transition: box-shadow .12s ease; } .member:hover { box-shadow: var(--sh-3); } .member--off { opacity: .62; } .member__who { display: flex; align-items: center; gap: var(--s3); flex: 1; min-width: 0; } .member__name { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: var(--s2); } .member__meta { font-size: 12px; color: var(--ink-3); } .member__off { color: var(--warm); font-weight: 640; } .member__stats { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: var(--ink-3); } .member__stats strong { font-family: var(--mono); color: var(--ink); } .member__late, .member__late strong { color: var(--hot); } .member__seen { font-size: 11px; } .member__actions { flex: none; } .member__actions summary { list-style: none; user-select: none; } .member__actions summary::-webkit-details-marker { display: none; } .member__panel { display: flex; flex-direction: column; gap: var(--s2); width: 100%; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); } .member[open] { display: block; } .inline-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } .inline-form input, .inline-form select { flex: 1; min-width: 150px; min-height: 36px; font-size: 14px; } .new-user { margin-bottom: var(--stack); } /* --- audit log ----------------------------------------------------------- */ .log { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); font-size: 13px; } .log:last-child { border-bottom: 0; } .log:hover { background: var(--surface-2); } .log__when { flex: none; width: 116px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .log__who { flex: none; width: 124px; font-weight: 640; } .log__what { flex: 1; color: var(--ink-2); min-width: 0; } .log__ip { flex: none; font-family: var(--mono); font-size: 10px; color: var(--ink-3); } /* --- duplicates ---------------------------------------------------------- */ .pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); padding: var(--s4); border-bottom: 1px solid var(--line); } .pair:last-child { border-bottom: 0; } .pair:hover { background: var(--surface-2); } .pair__side { min-width: 0; } .pair__side--right { text-align: right; } .pair__link { display: flex; flex-direction: column; align-items: center; gap: var(--s2); flex: none; } .pair__reason { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--warm); white-space: nowrap; } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s4); } .compare__side { display: flex; flex-direction: column; gap: var(--s2); } .compare__name { font-size: 17px; font-weight: 650; } .compare__facts { margin: 0; display: flex; flex-direction: column; gap: var(--s1); font-size: 13px; } .compare__facts > div { display: flex; justify-content: space-between; gap: var(--s2); } .compare__facts dt { color: var(--ink-3); } .compare__facts dd { margin: 0; text-align: right; } .compare__count { padding: var(--s2) 0; margin-top: auto; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); } /* --- pagination ---------------------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: center; gap: var(--s1); margin-top: var(--s5); } .pager__link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); color: var(--ink-2); font-family: var(--mono); font-size: 14px; box-shadow: var(--sh-1); transition: transform .12s ease, box-shadow .12s ease; } .pager__link:hover { background: var(--surface-2); box-shadow: var(--sh-2); transform: translateY(-1px); text-decoration: none; } .pager__link.is-active { background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-color: var(--brand); color: #fff; } .pager__gap { padding: 0 var(--s1); color: var(--ink-3); } /* ========================================================================== 5. Responsive — agents work from phones, so this is the real layout ========================================================================== */ @media (max-width: 980px) { .split { grid-template-columns: 1fr; } .board { grid-template-columns: 1fr; } /* Beside a form the notes come first; stacked, the form should. */ .board__side { order: 2; } .board__main { order: 1; } } @media (max-width: 720px) { /* Top bar: brand and avatar on one line, navigation on its own scrollable row beneath, still a segmented control. */ .topbar__inner { flex-wrap: wrap; row-gap: var(--s2); padding: var(--s3); } .brand { order: 1; } .topbar__user { order: 2; margin-left: auto; } .topbar__meta { display: none; } .nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nav::-webkit-scrollbar { display: none; } .nav__link { white-space: nowrap; padding: var(--s2) var(--s4); } .shell { padding: var(--s4) var(--s3) var(--s7); } .page__title { font-size: 22px; } .page__head { margin-bottom: var(--s4); } .page__head--split { flex-direction: column; align-items: stretch; } .head-actions { flex-wrap: wrap; } .head-actions .btn { flex: 1; min-width: 130px; } .grid2 { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } .stat { padding: var(--s3); } .stat__num { font-size: 26px; } .card { padding: var(--s4); } .filters__search { flex-direction: column; } .filters__search .btn { width: 100%; } /* A lead row on a phone: name and badges first, the two things you actually tap kept large and on the right. */ .lead { gap: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); } .lead__side { flex-direction: column-reverse; } .lead__actions .icon-btn { width: var(--tap); height: var(--tap); } .task { flex-wrap: wrap; padding: var(--s3); } .task__when { flex-direction: row; align-items: baseline; gap: var(--s2); width: auto; } .task__body { order: 3; flex-basis: 100%; } .task__actions { margin-left: auto; } .task__actions .icon-btn { width: var(--tap); height: var(--tap); } .task-form__exact { flex-direction: column; align-items: stretch; } .panels { grid-template-columns: 1fr; gap: var(--s2); margin-top: var(--s5); } .panel__title { padding: var(--s2) var(--s3); } .mini, .breakdown__row { padding: var(--s2) var(--s3); } .member__who { flex-basis: 100%; } .member__stats { align-items: flex-start; flex-direction: row; gap: var(--s3); flex-wrap: wrap; } .member__actions { width: 100%; } .member__actions summary { width: 100%; } .log { flex-wrap: wrap; gap: var(--s1) var(--s2); } .log__when, .log__who { width: auto; } .log__what { flex-basis: 100%; } .log__ip { display: none; } .row-check { flex-wrap: wrap; } .verdict { max-width: none; align-items: flex-start; text-align: left; flex-basis: 100%; } .pair { grid-template-columns: 1fr; gap: var(--s3); } .pair__side--right { text-align: left; } .pair__link { flex-direction: row; justify-content: space-between; } .compare { grid-template-columns: 1fr; } .view-save { width: 100%; } .view-save input { flex: 1; width: auto; } /* The bulk bar follows you up the screen instead of scrolling away. */ .bulk { position: sticky; bottom: var(--s3); z-index: 10; box-shadow: var(--sh-4); padding-bottom: max(var(--s3), env(safe-area-inset-bottom)); } /* Room for the home indicator on a modern phone. */ .shell { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom)); } } /* Pointer-based hover effects are noise on a touch screen: a tap would leave rows stuck in their hover state. */ @media (hover: none) { .btn:hover, .chip:hover, .stat:hover, .pager__link:hover, .quick-pick:hover, .icon-btn:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }