/* ============================================================ Pet Records — rebuilt UI Single CSS file. Native, zero dependencies. Palettes via CSS custom props on . ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 4px 16px rgba(15, 23, 42, .08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, .14); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --row-h: 44px; --nav-h: 60px; --rail-w: 240px; --container-max: 1320px; } /* ---------- Density ---------- */ html[data-density="comfortable"] { --row-h: 52px; --space-4: 20px; --space-5: 28px; } html[data-density="cozy"] { --row-h: 44px; } html[data-density="compact"] { --row-h: 36px; --space-4: 12px; --space-5: 18px; } /* ---------- Palettes (light) ---------- */ html[data-mode="light"][data-palette="sage"] { --bg: #F4F6F2; --surface: #FFFFFF; --surface-2: #F8FAF6; --border: #E2E6DC; --text: #1F2A24; --text-muted:#5A6660; --accent: #4F6E58; --accent-2: #6E8B73; --accent-text:#FFFFFF; --success: #4F8A5C; --warning: #C58B2A; --danger: #B7423B; --info: #4F6E89; } html[data-mode="light"][data-palette="indigo"] { --bg: #F4F5FA; --surface: #FFFFFF; --surface-2: #F7F8FC; --border: #E0E2EE; --text: #1E1F35; --text-muted:#5A5E78; --accent: #4C53B0; --accent-2: #6D74CA; --accent-text:#FFFFFF; --success: #2F8F62; --warning: #B97A1E; --danger: #B7423B; --info: #4C7BA9; } html[data-mode="light"][data-palette="ember"] { --bg: #FAF4F1; --surface: #FFFFFF; --surface-2: #FCF7F4; --border: #EBDDD3; --text: #2A1B14; --text-muted:#6A554A; --accent: #B0532C; --accent-2: #CC764F; --accent-text:#FFFFFF; --success: #4F8A5C; --warning: #B97A1E; --danger: #A23A2C; --info: #5E7B9A; } html[data-mode="light"][data-palette="slate"] { --bg: #F4F6F8; --surface: #FFFFFF; --surface-2: #F7F9FB; --border: #DFE3E8; --text: #1B232C; --text-muted:#5C6773; --accent: #38556E; --accent-2: #5C7891; --accent-text:#FFFFFF; --success: #3D8F5A; --warning: #B58020; --danger: #B7423B; --info: #4C7BA9; } html[data-mode="light"][data-palette="plum"] { --bg: #F7F4F8; --surface: #FFFFFF; --surface-2: #FAF7FA; --border: #E6DCEA; --text: #261A2C; --text-muted:#6A586F; --accent: #7A3F88; --accent-2: #9762A3; --accent-text:#FFFFFF; --success: #4F8A5C; --warning: #B97A1E; --danger: #B7423B; --info: #4C7BA9; } /* ---------- Palettes (dark) ---------- */ html[data-mode="dark"][data-palette="sage"] { --bg: #14181A; --surface: #1B2222; --surface-2: #232B2B; --border: #2D3837; --text: #E6ECE4; --text-muted:#9CAAA0; --accent: #8FB69A; --accent-2: #B1CFB9; --accent-text:#13201A; --success: #74C58A; --warning: #E2B068; --danger: #E07A72; --info: #82A7C4; } html[data-mode="dark"][data-palette="indigo"] { --bg: #131426; --surface: #1B1D33; --surface-2: #23253E; --border: #2F3252; --text: #E6E8F5; --text-muted:#9CA2C0; --accent: #9DA3F1; --accent-2: #B8BCF4; --accent-text:#16182B; --success: #74C58A; --warning: #E2B068; --danger: #E07A72; --info: #82A7C4; } html[data-mode="dark"][data-palette="ember"] { --bg: #1A1310; --surface: #211915; --surface-2: #2A201C; --border: #3A2C25; --text: #F2E6DF; --text-muted:#B5A095; --accent: #E08A5C; --accent-2: #ECA37C; --accent-text:#1B0F08; --success: #74C58A; --warning: #E2B068; --danger: #E07A72; --info: #82A7C4; } html[data-mode="dark"][data-palette="slate"] { --bg: #121619; --surface: #191F23; --surface-2: #20272D; --border: #2D363E; --text: #E5EAEE; --text-muted:#9AA6B0; --accent: #84A6C2; --accent-2: #A8C4DA; --accent-text:#101418; --success: #74C58A; --warning: #E2B068; --danger: #E07A72; --info: #84A6C2; } html[data-mode="dark"][data-palette="plum"] { --bg: #18121A; --surface: #1F1822; --surface-2: #28202C; --border: #3A2D40; --text: #ECE2F0; --text-muted:#B19AB8; --accent: #C390D0; --accent-2: #D7AAE0; --accent-text:#190E1F; --success: #74C58A; --warning: #E2B068; --danger: #E07A72; --info: #82A7C4; } /* ---------- Base ---------- */ body { margin: 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); font-weight: 600; color: var(--text); letter-spacing: -0.01em; } h1 { font-size: 26px; } h2 { font-size: 21px; } h3 { font-size: 17px; } h4 { font-size: 15px; } p { margin: 0 0 var(--space-3); } small, .small { font-size: 12.5px; color: var(--text-muted); } .muted { color: var(--text-muted); } .eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; } /* ---------- Layout shell ---------- */ .app-nav { position: sticky; top: 0; z-index: 30; height: var(--nav-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 var(--space-5); gap: var(--space-5); } .brand-wrap { display: flex; align-items: center; gap: var(--space-2); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 16px; color: var(--text); text-decoration: none; } .brand:hover { text-decoration: none; } .brand:hover .brand-name { text-decoration: underline; } .brand .brand-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .brand-meta { color: var(--text-muted); font-weight: 500; font-size: 12.5px; padding-left: var(--space-3); border-left: 1px solid var(--border); } .app-nav-links { display: flex; align-items: center; gap: 2px; } .app-nav-links a { padding: 8px 12px; border-radius: 8px; color: var(--text-muted); font-weight: 500; } .app-nav-links a.is-active, .app-nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; } .app-nav-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .search-wrap { position: relative; } .search-input { width: 320px; max-width: 32vw; padding: 8px 36px 8px 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font: inherit; } .search-input:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--surface); } .search-wrap .kbd { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } .search-wrap .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); } /* Sitewide-search results dropdown */ .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: min(520px, calc(100vh - 120px)); overflow-y: auto; z-index: 250; min-width: 360px; } .search-results[hidden] { display: none; } .search-group { padding: 4px 0; } .search-group + .search-group { border-top: 1px solid var(--border); } .search-group-label { padding: 8px 14px 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .search-hit { display: flex; flex-direction: column; padding: 8px 14px; color: var(--text); text-decoration: none; border-left: 2px solid transparent; } .search-hit:hover, .search-hit.is-active { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-left-color: var(--accent); text-decoration: none; } .search-hit-title { font-size: 14px; font-weight: 500; } .search-hit-sub { font-size: 12.5px; margin-top: 1px; } .search-empty { padding: 14px 16px; } @media (max-width: 720px) { .search-results { min-width: 280px; } } .page-tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .user-chip { display: flex; align-items: center; gap: var(--space-2); padding: 4px; padding-right: 10px; border: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-pill); cursor: pointer; color: var(--text); font-size: 13px; } .user-chip:hover { background: var(--surface); } .avatar { --av-bg: var(--accent); --av-fg: var(--accent-text); width: 28px; height: 28px; border-radius: 50%; background: var(--av-bg); color: var(--av-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; object-fit: cover; overflow: hidden; flex-shrink: 0; } .avatar.sq { border-radius: 10px; } .avatar.md { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; } .avatar.lg { width: 56px; height: 56px; font-size: 22px; border-radius: var(--radius-lg); } .avatar.xl { width: 96px; height: 96px; font-size: 36px; border-radius: var(--radius-lg); } .avatar.huge { width: 140px; height: 140px; font-size: 52px; border-radius: var(--radius-lg); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Shell layout (sidebar + main) ---------- */ .app-shell { display: grid; grid-template-columns: var(--rail-w) 1fr; min-height: calc(100vh - var(--nav-h)); } .app-rail { border-right: 1px solid var(--border); background: var(--surface); padding: var(--space-5) var(--space-4); position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto; } .app-rail h6 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: var(--space-5) 0 var(--space-2); } .app-rail h6:first-child { margin-top: 0; } .rail-nav { list-style: none; padding: 0; margin: 0; } .rail-nav li > a { display: flex; align-items: center; gap: var(--space-2); padding: 7px 10px; border-radius: 8px; color: var(--text-muted); font-weight: 500; } .rail-nav li > a:hover, .rail-nav li > a.is-active { background: var(--surface-2); color: var(--text); text-decoration: none; } .rail-nav .count { margin-left: auto; font-size: 12px; color: var(--text-muted); } .app-main { padding: var(--space-6) var(--space-6); max-width: var(--container-max); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .card.compact { padding: var(--space-4); } .card + .card { margin-top: var(--space-4); } .card-row { display: flex; align-items: center; gap: var(--space-3); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .card-header h3 { margin: 0; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); } .stat .stat-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .stat .stat-value { font-size: 30px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin-top: 6px; } .stat .stat-delta { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; } .stat .stat-delta.up { color: var(--success); } .stat .stat-delta.down { color: var(--danger); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn.ghost:hover { color: var(--text); background: var(--surface-2); } .btn.danger { color: var(--danger); border-color: var(--border); } .btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .btn.sm { padding: 4px 10px; font-size: 12.5px; } .btn.icon { padding: 8px; } /* ---------- Inputs ---------- */ .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-3); } .field label { font-size: 12.5px; font-weight: 600; color: var(--text); } .input, select, textarea { width: 100%; font: inherit; color: var(--text); padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); } .input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } textarea { min-height: 96px; resize: vertical; } .help { font-size: 12px; color: var(--text-muted); } /* ---------- Badges / chips ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); } .badge.accent { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .badge.success { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); } .badge.warning { background: color-mix(in srgb, var(--warning) 15%, var(--surface)); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); } .badge.danger { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); } .badge.muted { color: var(--text-muted); } .kbd { display: inline-flex; align-items: center; padding: 2px 6px; font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13.5px; } .table th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .table tbody tr { transition: background .1s; } .table tbody tr:hover { background: var(--surface-2); } .table tr.row-link td:last-child { width: 1px; white-space: nowrap; color: var(--text-muted); } /* ---------- Misc ---------- */ .grid { display: grid; gap: var(--space-4); } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } .flex { display: flex; } .flex.gap-2 { gap: var(--space-2); } .flex.gap-3 { gap: var(--space-3); } .flex.center { align-items: center; } .flex.between { justify-content: space-between; } .flex.col { flex-direction: column; } .flex.wrap { flex-wrap: wrap; } .ml-auto { margin-left: auto; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--space-4); } .tabs a { padding: 10px 12px; color: var(--text-muted); font-weight: 500; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a.is-active, .tabs a:hover { color: var(--text); border-bottom-color: var(--accent); text-decoration: none; } /* ---------- Auth pages ---------- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); background: var(--bg); } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-lg); } .auth-card .brand { justify-content: flex-start; margin-bottom: var(--space-5); } /* ---------- Toast ---------- */ .toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); min-width: 240px; max-width: 360px; font-size: 13.5px; animation: toast-in .18s ease-out; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } /* ---------- Public form / website preview ---------- */ .framed { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } .framed-bar { padding: 8px 12px; background: var(--surface-2); font-size: 12.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-2); } .framed-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); } .framed-body { padding: var(--space-5); } /* ---------- Utility ---------- */ .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Dashboard ============================================================ */ .dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); } .dash-hero h1.dash-greeting { font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; margin: 6px 0 8px; } .dash-hero-actions { display: flex; gap: var(--space-2); } @media (max-width: 720px) { .dash-hero { flex-direction: column; align-items: stretch; } } /* ---- KPI cards: bigger than .stat, with hairline accent rule ---- */ .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; overflow: hidden; } .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .85; } .kpi-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .kpi-value { font-size: 38px; font-weight: 600; letter-spacing: -0.02em; margin-top: 10px; color: var(--text); } .kpi-delta { font-size: 13px; color: var(--text-muted); margin-top: 6px; } .kpi-delta.up { color: var(--success); } .kpi-delta.down { color: var(--danger); } /* ---- Attention list ---- */ .attention-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); } .attention-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .attention-row:last-child { border-bottom: 0; } .attention-row:hover { background: var(--surface-2); } .attention-row .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 600; } .attention-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .attention-title { font-weight: 600; color: var(--text); } .attention-title:hover { color: var(--accent); text-decoration: none; } .attention-sub { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empty-state { border-top: 1px solid var(--border); padding: var(--space-5) 0 0; } /* ---- Heat list (same skeleton, slightly different rhythm) ---- */ .heat-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); } .heat-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .heat-row:last-child { border-bottom: 0; } .heat-row .avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; font-weight: 600; } .heat-text { display: flex; flex-direction: column; gap: 2px; } .heat-name { font-weight: 600; } .heat-sub { font-size: 12.5px; color: var(--text-muted); } /* ---- Accent text (used to colour the user's name in the greeting) ---- */ .text-accent { color: var(--accent); } .text-accent-2 { color: var(--accent-2); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } /* ---- Recent activity feed (dashboard) ---- */ .activity-list { list-style: none; padding: 0; margin: 0; } .activity-day { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: var(--space-3) 0 var(--space-2); border-top: 1px solid var(--border); margin-top: var(--space-2); } .activity-day:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .activity-row { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-3); align-items: center; padding: 10px 0; } .activity-row + .activity-row { border-top: 1px dashed var(--border); } .activity-row .avatar { width: 32px; height: 32px; font-size: 12px; border-radius: 10px; } .activity-body { min-width: 0; } .activity-title { font-weight: 500; color: var(--text); } .activity-title strong { font-weight: 600; } .activity-sub { font-size: 12.5px; color: var(--text-muted); } .activity-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; } /* ============================================================ Dogs — grid + list views ============================================================ */ .dogs-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } .dogs-toolbar h1 { margin: 0; } .dogs-toolbar .sub { color: var(--text-muted); font-size: 13px; } .dogs-toolbar .actions { margin-left: auto; display: flex; gap: var(--space-2); } .dog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); } .dog-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s, box-shadow .15s; } .dog-card:hover { border-color: var(--accent); box-shadow: var(--shadow); } .dog-card .dog-card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4) 0; font-size: 12px; color: var(--text-muted); } .dog-card .role { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; } .dog-card .dog-card-avatar { padding: var(--space-3) 0 var(--space-2); text-align: center; } .dog-card .dog-card-body { padding: 0 var(--space-4) var(--space-4); text-align: center; } .dog-card .dog-name { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin: 0 0 4px; } .dog-card .dog-name a { color: inherit; } .dog-card .dog-name a:hover { color: var(--accent); text-decoration: none; } .dog-card .dog-meta { font-size: 13px; color: var(--text-muted); } .dog-card .dog-card-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); } .dog-card .id { font-family: var(--font-mono); } .dog-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .dog-list .row { display: grid; grid-template-columns: 44px minmax(140px, 1.5fr) 60px 80px 1fr 120px 28px; gap: var(--space-3); padding: 12px var(--space-4); border-bottom: 1px solid var(--border); align-items: center; color: var(--text); } .dog-list .row:last-child { border-bottom: 0; } .dog-list .row:hover { background: var(--surface-2); } .dog-list .row .name { font-weight: 600; } .dog-list .row .id { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .dog-list .row .meta { color: var(--text-muted); font-size: 13px; } .dog-list .row .chev { color: var(--text-muted); text-align: right; } @media (max-width: 900px) { .dog-list .row { grid-template-columns: 44px 1fr auto; } .dog-list .row .col-hide { display: none; } } /* ---- Dogs grid: status + price chip row ---- */ .dog-card-status { margin-top: var(--space-3); display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .dog-price { font-weight: 600; color: var(--text); font-size: 13px; } /* ---- Dogs list view (full data table + inline edit) ---- */ .dog-list-table { padding: 0; overflow-x: auto; } .dog-list-table .table { margin: 0; } .dog-list-table .table td { vertical-align: middle; } .dog-cell { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text); text-decoration: none; } .dog-cell .name { font-weight: 600; display: block; } .dog-cell .id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); display: block; } .dog-cell:hover .name { color: var(--accent); } .input.sm, select.input.sm { padding: 5px 8px; font-size: 12.5px; width: auto; min-width: 110px; min-height: 0; } .price-input { display: inline-flex; align-items: center; } .price-input .price-pre { color: var(--text-muted); margin-right: 2px; } .price-input .input { width: 84px; min-width: 0; } .dog-inline.is-saved { border-color: var(--success); } .dog-inline.is-error { border-color: var(--danger); } @media (max-width: 900px) { .dog-list-table .table th.col-hide, .dog-list-table .table td.col-hide { display: none; } } /* ---- Needs-your-attention: scrollable so the full list is reachable ---- */ .attention-list.scroll { max-height: 460px; overflow-y: auto; } /* ============================================================ Pet profile ============================================================ */ .profile-head { display: grid; grid-template-columns: minmax(180px, auto) 1fr auto; gap: var(--space-5); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .profile-head .role-row { display: flex; gap: var(--space-2); align-items: center; } .profile-head .reg-name { color: var(--text-muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; margin-top: 4px; } .profile-head h1 { margin: 4px 0 var(--space-3); font-size: 32px; } .profile-head .factbar { display: grid; grid-template-columns: repeat(6, minmax(0, max-content)); gap: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); } .profile-head .factbar .lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .profile-head .factbar .val { font-weight: 600; margin-top: 4px; } .profile-head .actions { display: flex; flex-direction: column; gap: var(--space-2); } @media (max-width: 1100px) { .profile-head { grid-template-columns: minmax(120px, auto) 1fr; } .profile-head .actions { grid-column: 1 / -1; flex-direction: row; } } @media (max-width: 720px) { .profile-head .factbar { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } } /* "Other dogs" sub-rail item — uses same .rail-nav, just an avatar dot */ .rail-nav .with-avatar { gap: var(--space-3); } .rail-nav .with-avatar .avatar { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; } /* ---- Photo gallery (profile › pictures) ---- */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); } .photo-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); margin: 0; background: var(--surface-2); } .photo-tile-link { display: block; width: 100%; height: 100%; } .photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; } .photo-tile:hover img { transform: scale(1.04); } .photo-tile.is-main { box-shadow: 0 0 0 2px var(--accent); } .photo-tile-main { position: absolute; top: 8px; left: 8px; pointer-events: none; } .photo-tile-actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transform: translateY(-2px); transition: opacity .12s, transform .12s; } .photo-tile:hover .photo-tile-actions, .photo-tile:focus-within .photo-tile-actions { opacity: 1; transform: none; } .photo-tile-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .65); color: #FFFFFF; border: 0; border-radius: 50%; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, transform .12s; } .photo-tile-btn:hover { background: rgba(15, 23, 42, .85); transform: scale(1.05); } .photo-tile-btn:disabled { opacity: .55; cursor: default; transform: none; } .photo-tile-btn.is-on { background: var(--accent); color: var(--accent-text); } .photo-tile-btn.danger:hover { background: var(--danger); } /* ---- Pedigree tree (profile › pedigree) ---- Horizontal genealogy layout. 5 columns × 16 rows. Each ancestor cell spans 16/2^depth rows so the chart fans out: G0 spans all 16, every G1 spans 8, G2 spans 4, G3 spans 2, G4 spans 1. */ .pedigree-tree { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(38px, auto); column-gap: var(--space-3); row-gap: 6px; overflow-x: auto; padding-bottom: 4px; } .pedigree-head { grid-row: auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; text-align: left; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); } .pedigree-cell { display: flex; align-items: center; gap: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; min-width: 0; position: relative; } .pedigree-cell.is-empty { background: transparent; border-style: dashed; color: var(--text-muted); } .pedigree-cell.is-empty .avatar { display: none; } .pedigree-body { min-width: 0; flex: 1; } .pedigree-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.2; } .pedigree-name a { color: inherit; } .pedigree-name a:hover { color: var(--accent); text-decoration: none; } .pedigree-role { font-size: 11px; color: var(--text-muted); letter-spacing: .04em; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pedigree-meta { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Branch lines — short horizontal line from each ancestor cell to the sibling-pair bracket on its left. Drawn with pseudo-elements so the markup stays clean. */ .pedigree-cell:not(.pedigree-head)::before { content: ""; position: absolute; left: calc(-1 * var(--space-3)); top: 50%; width: var(--space-3); height: 1px; background: var(--border); } .pedigree-tree > .pedigree-cell[style*="grid-column: 1"]::before { display: none; } @media (max-width: 980px) { .pedigree-tree { grid-template-columns: repeat(5, minmax(180px, 1fr)); min-width: 980px; } } /* ---- Litter cards (litters.php, pairings.php) ---- */ .litter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); } .litter-card { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; } .litter-card:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; } .litter-pair { display: flex; align-items: center; gap: var(--space-2); } .litter-pair.lg .avatar { width: 64px; height: 64px; font-size: 24px; border-radius: var(--radius-lg); } .litter-pair-x { color: var(--text-muted); font-weight: 600; font-size: 18px; } .litter-title { font-size: 17px; margin: 0 0 4px; font-weight: 600; color: var(--text); } .litter-meta { font-size: 13px; color: var(--text-muted); } .litter-stats { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); } /* ---- Heat/ovulation tracker (profile › health) ---- */ .ovulation { display: flex; flex-direction: column; gap: var(--space-3); } .ovulation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .ovulation-date { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0; } .ovulation-stat { font-size: 22px; font-weight: 600; margin-top: 4px; } .cycle-bar { position: relative; display: flex; height: 14px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); margin-top: var(--space-2); } .cycle-zone { flex: 0 0 var(--w); height: 100%; } .cycle-zone.proestrus { background: color-mix(in srgb, var(--danger) 55%, var(--surface)); } .cycle-zone.estrus { background: var(--accent); } .cycle-zone.diestrus { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); } .cycle-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--surface); } .cycle-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); font-size: 12px; color: var(--text-muted); } .cycle-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .cycle-legend .dot.proestrus { background: color-mix(in srgb, var(--danger) 55%, var(--surface)); } .cycle-legend .dot.estrus { background: var(--accent); } .cycle-legend .dot.diestrus { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border: 1px solid var(--border); } /* ---- Photo dropzone (Pictures tab) ---- */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; padding: var(--space-5); border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; } .dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--surface); outline: none; } .dropzone.is-hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); transform: scale(1.01); } .dropzone-inner { display: flex; flex-direction: column; gap: 4px; pointer-events: none; } .dropzone-status { list-style: none; padding: 0; margin: var(--space-3) 0 0; width: 100%; font-size: 12.5px; color: var(--text-muted); } .dropzone-status li { padding: 4px 8px; border-top: 1px solid var(--border); } .dropzone-status li.is-error { color: var(--danger); } /* ---- Mating predictor (Plan-litter modal) ---- */ .predictor { margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } .predictor-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); } .predictor-head h3 { margin: 0; font-size: 15px; } .predictor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); } .predictor-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); } .predictor-locus { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; } .predictor-probs { list-style: none; padding: 0; margin: 0; } .predictor-probs li { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; } .predictor-gt { font-family: var(--font-mono); font-weight: 600; } .predictor-pct { color: var(--text-muted); } .predictor-samples { margin-top: var(--space-3); } .predictor-sample { font-size: 12.5px; padding: 4px 0; } .predictor-sample code { font-family: var(--font-mono); font-size: 12px; background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); } /* ---- Bulk-record pup checkbox grid (litter page) ---- */ .pup-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); } .pup-check { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; } .pup-check:hover { background: var(--surface-2); } .pup-check input[type="checkbox"] { accent-color: var(--accent); } .pup-check .avatar { width: 28px; height: 28px; font-size: 12px; border-radius: 8px; } .pup-check-body { display: flex; flex-direction: column; min-width: 0; } .pup-check-name { font-weight: 600; font-size: 13px; } /* ---- Age forecast (litter page) ---- */ .forecast { list-style: none; padding: 0; margin: 0; } .forecast-row { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--space-3); align-items: center; padding: 10px 0; border-top: 1px dashed var(--border); } .forecast-row:first-child { border-top: 0; } .forecast-dot { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, var(--surface)); margin-left: 4px; } .forecast-row.is-past .forecast-dot { background: var(--text-muted); box-shadow: 0 0 0 3px var(--surface-2); } .forecast-row.is-past .forecast-title, .forecast-row.is-past .forecast-date { color: var(--text-muted); text-decoration: line-through; } .forecast-title { font-weight: 600; } .forecast-hint { font-size: 12px; } .forecast-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); } /* ---- Sold-to badge on puppy cards (litter page) ---- */ .sold-to { display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; margin-top: var(--space-2); line-height: 1.4; } .sold-to a { color: var(--accent); } /* ---- Parent fieldset (Add parents modal) ---- */ .parent-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: 0; } .parent-fieldset legend { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 0 var(--space-2); } /* ---- Modal ---- */ .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; transition: opacity .16s ease-out; } .modal[hidden] { display: none; } .modal.is-open { opacity: 1; } html.modal-open { overflow: hidden; } .modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); } .modal-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 720px; max-height: calc(100vh - var(--space-6)); display: flex; flex-direction: column; transform: translateY(8px); transition: transform .16s ease-out; } .modal.is-open .modal-card { transform: none; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } .modal-head h2 { margin: 0; font-size: 19px; } .modal-body { padding: var(--space-5); overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); margin-top: var(--space-2); border-top: 1px solid var(--border); } /* ---- Gene panel (profile › genetics) ---- */ .gene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); } .gene-cell { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); } .gene-val { font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--text); margin-top: 4px; } /* ============================================================ Mobile + bottom-nav (matches the redesign's mobile mocks) ============================================================ */ /* Hidden by default on desktop */ .mobile-tabbar, .mobile-more-sheet { display: none; } @media (max-width: 860px) { /* Smaller padding + leave room for the bottom tab bar. */ body { padding-bottom: 72px; } /* --- Top nav: collapse to brand + avatar only. --- */ .app-nav { padding: 0 var(--space-3); gap: var(--space-3); } .app-nav-links { display: none; } .app-nav-right .page-tag { display: none; } .search-wrap { display: none; } .brand-meta { display: none; } .brand-name { font-size: 15px; } .user-chip span:last-child { display: none; } .user-chip { padding: 2px; border: 0; background: transparent; } /* --- Shell: rail collapses, full-bleed main. --- */ .app-shell { grid-template-columns: 1fr; } .app-rail { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); padding: var(--space-3) var(--space-4); } .app-rail h6 { display: none; } .app-rail .rail-nav { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; } .app-rail .rail-nav::-webkit-scrollbar { height: 0; } .app-rail .rail-nav li > a { white-space: nowrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); } .app-rail .rail-nav li > a.is-active { background: var(--text); color: var(--bg); border-color: var(--text); } .app-rail .rail-nav .count { display: none; } .app-rail .rail-nav .with-avatar .avatar { display: none; } .app-main { padding: var(--space-4); } /* --- Dashboard hero (mobile). Stacked, smaller serif. --- */ .dash-hero { flex-direction: column; align-items: stretch; gap: var(--space-3); } .dash-hero h1.dash-greeting { font-size: 26px; } .dash-hero-actions { width: 100%; flex-wrap: wrap; } .dash-hero-actions .btn { flex: 1; } /* KPI grid → 2×2 like the style guide */ .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-value { font-size: 30px; } .kpi { padding: var(--space-4); } /* --- Pet profile head (mobile per redesign): full-width photo banner at the top, content card lifts up over its bottom edge with rounded top corners, single-row horizontally-scrolling factbar. --- */ .profile-head { display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: left; padding: 0; border: 0; border-radius: 0; background: transparent; /* Bleed to the edges of .app-main */ margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); } .profile-head .avatar.huge { width: 100%; height: 260px; border-radius: 0; font-size: 80px; align-self: stretch; } .profile-head .avatar.huge img { width: 100%; height: 100%; object-fit: cover; } .profile-head > div:not(.actions) { margin-top: -28px; background: var(--bg); border-radius: 20px 20px 0 0; padding: var(--space-5) var(--space-4) var(--space-3); position: relative; z-index: 5; } .profile-head h1 { font-family: var(--font-display); font-size: 28px; margin: 4px 0 0; letter-spacing: -0.02em; } .profile-head .role-row { gap: 6px; margin-bottom: 6px; } .profile-head .reg-name { margin-top: 2px; font-size: 11.5px; } .profile-head .factbar { display: flex; gap: var(--space-5); padding: var(--space-3) 0; margin-top: var(--space-3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .profile-head .factbar::-webkit-scrollbar { height: 0; } .profile-head .factbar > div { flex: 0 0 auto; min-width: 64px; } .profile-head .factbar .val { font-size: 14px; } .profile-head .actions { flex-direction: row; padding: 0 var(--space-4) var(--space-3); background: var(--bg); position: relative; z-index: 6; } .profile-head .actions .btn { flex: 1; } /* Tabs become horizontally scrollable pills */ .tabs { overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; border-bottom: 0; gap: var(--space-2); } .tabs::-webkit-scrollbar { height: 0; } .tabs a { white-space: nowrap; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); } .tabs a.is-active { background: var(--text); color: var(--bg); border-color: var(--text); } /* Card spacing tightens, header wraps for action buttons */ .card { padding: var(--space-4); } .card-header { flex-wrap: wrap; gap: var(--space-2); } /* Tables become horizontally scrollable rather than crushed */ .table { display: block; overflow-x: auto; white-space: nowrap; } /* Heat & ovulation card — stack the head, slim the stats */ .ovulation-head { flex-direction: column; align-items: stretch; gap: var(--space-2); } .ovulation-head .btn { align-self: flex-start; } .ovulation-date { font-size: 22px; } .ovulation-stat { font-size: 18px; } /* Dog list rows collapse to avatar + name + meta */ .dog-list .row { grid-template-columns: 40px 1fr auto; padding: 10px var(--space-3); } .dog-list .row .col-hide { display: none; } .dog-grid { grid-template-columns: 1fr; } .dog-card .dog-card-foot { font-size: 12px; } /* Litter card grid → single column */ .litter-grid { grid-template-columns: 1fr; } .litter-pair.lg .avatar { width: 52px; height: 52px; font-size: 22px; } /* --- Modal: full-screen sheet on phones --- */ .modal { padding: 0; align-items: stretch; } .modal-card { max-width: 100%; max-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; transform: translateY(24px); } .modal-card .grid.cols-2 { grid-template-columns: 1fr; } /* --- Bottom tab bar --- */ .mobile-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-tabbar a, .mobile-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; background: transparent; border: 0; color: var(--text-muted); font-size: 11px; font-weight: 500; text-decoration: none; cursor: pointer; } .mobile-tabbar a.is-active, .mobile-tabbar button.is-active { color: var(--text); } .mobile-tabbar .tab-ico { font-size: 18px; line-height: 1; color: inherit; } .mobile-tabbar a.is-active .tab-ico, .mobile-tabbar button.is-active .tab-ico { color: var(--accent); } .mobile-more-sheet { display: flex; flex-direction: column; position: fixed; left: 12px; right: 12px; bottom: calc(64px + env(safe-area-inset-bottom, 0)); z-index: 45; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(8px) scale(.98); opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s; } .mobile-more-sheet.is-open { opacity: 1; transform: none; pointer-events: auto; } .mobile-more-sheet a { padding: 12px 16px; color: var(--text); border-bottom: 1px solid var(--border); } .mobile-more-sheet a:last-child { border-bottom: 0; } .mobile-more-sheet a.is-active { background: var(--surface-2); } } /* Profile head factbar → 2-col on smaller phones */ @media (max-width: 520px) { .profile-head .factbar { grid-template-columns: repeat(2, 1fr); } } /* Tighter pedigree on phones — let it horizontally scroll inside the card */ @media (max-width: 720px) { .pedigree-tree { grid-template-columns: repeat(5, minmax(150px, 1fr)); min-width: 760px; } } /* ============================================================ Waitlist (Stage 5) — kanban, applicant table, form builder ============================================================ */ /* ---- Public link helper ---- */ .public-link { color: var(--accent); font-family: var(--font-mono); font-size: 12.5px; } /* ---- Pipeline card / kanban ---- */ .pipeline-card .card-header { margin-bottom: var(--space-4); } .kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .kanban-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); min-height: 200px; transition: background .12s, border-color .12s; } .kanban-col.is-drop-target { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border-color: var(--accent); } .kanban-col-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-top: 3px solid var(--border); margin-top: -3px; padding-top: var(--space-2); } .kanban-col-head-info { border-top-color: color-mix(in srgb, var(--info) 80%, transparent); } .kanban-col-head-warning { border-top-color: color-mix(in srgb, var(--warning) 80%, transparent); } .kanban-col-head-success { border-top-color: color-mix(in srgb, var(--success) 80%, transparent); } .kanban-col-head-accent { border-top-color: color-mix(in srgb, var(--accent) 80%, transparent); } .kanban-col-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--text); } .kanban-col-body { display: flex; flex-direction: column; gap: 6px; min-height: 60px; } .kanban-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; cursor: grab; transition: transform .08s, box-shadow .12s; } .kanban-card:hover { text-decoration: none; box-shadow: var(--shadow-sm); transform: translateY(-1px); } .kanban-card.is-dragging { opacity: .4; cursor: grabbing; } .kanban-card-body { display: flex; flex-direction: column; min-width: 0; } .kanban-card-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kanban-card-sub { color: var(--text-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kanban-empty { color: var(--text-muted); font-size: 12px; padding: var(--space-4) var(--space-2); text-align: center; } /* ---- Applicant table ---- */ .applicant-table-card .card-actions { display: flex; gap: var(--space-2); align-items: center; } .applicant-table-card .applicant-search { width: 220px; padding: 6px 10px; font-size: 13px; } .table-scroll { overflow-x: auto; } .applicant-table { width: 100%; } .applicant-table th.w-narrow, .applicant-table td.w-narrow { width: 60px; } .applicant-table th { padding: 10px 14px; } .applicant-table td { vertical-align: middle; } .applicant-cell { display: flex; align-items: center; gap: var(--space-2); } .applicant-status-badge { min-width: 90px; justify-content: center; } .mono { font-family: var(--font-mono); } .bold { font-weight: 600; } /* ---- Waitlists summary list (bottom of waitlist.php) ---- */ .waitlist-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .waitlist-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); transition: background .12s, border-color .12s; } .waitlist-row:hover { background: var(--surface); border-color: var(--accent); } .waitlist-row-main { display: block; color: var(--text); text-decoration: none; } .waitlist-row-main:hover { text-decoration: none; color: var(--text); } /* ============================================================ Applicant detail (applicant.php) ============================================================ */ .applicant-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-4); } @media (max-width: 900px) { .applicant-grid { grid-template-columns: 1fr; } } dl.dl-2col { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0; } dl.dl-2col dt { color: var(--text-muted); font-size: 12.5px; } dl.dl-2col dd { margin: 0; font-size: 14px; } dl.dl-stacked { margin: 0; } dl.dl-stacked dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-3); font-weight: 600; } dl.dl-stacked dt:first-child { margin-top: 0; } dl.dl-stacked dd { margin: 4px 0 0; font-size: 14px; } .pipeline-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); position: relative; } .pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3) var(--space-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: center; transition: background .12s, border-color .12s, color .12s; } .pipeline-step:hover { background: var(--surface); border-color: var(--accent); } .pipeline-step-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--border); box-shadow: 0 0 0 3px var(--surface); transition: background .12s, box-shadow .12s; } .pipeline-step-label { font-size: 12px; font-weight: 600; color: var(--text-muted); } .pipeline-step.is-done { background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); } .pipeline-step.is-done .pipeline-step-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, var(--surface)); } .pipeline-step.is-done .pipeline-step-label { color: var(--success); } .pipeline-step.is-active { background: var(--accent); border-color: var(--accent); } .pipeline-step.is-active .pipeline-step-dot { background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); } .pipeline-step.is-active .pipeline-step-label { color: var(--accent-text); } .deposit-row { padding: 4px 0; flex-wrap: wrap; } .deposit-toggle { cursor: pointer; font-weight: 600; } .deposit-toggle input { width: 18px; height: 18px; accent-color: var(--accent); } .promote-card { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); } /* ============================================================ Form builder ============================================================ */ .builder-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-4); align-items: start; } @media (max-width: 1100px) { .builder-grid { grid-template-columns: 1fr; } } .builder-left { padding: 0; } .builder-meta { padding: var(--space-4) var(--space-5); } .builder-left hr { margin: 0; } .builder-sections { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .builder-actions { padding: var(--space-3) var(--space-4) var(--space-4); } .fb-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; } .fb-section.is-open { background: var(--surface); } .fb-section-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; user-select: none; } .fb-section-head:hover { background: var(--surface-2); } .fb-section-head .grip { color: var(--text-muted); font-family: var(--font-mono); font-size: 16px; line-height: 1; cursor: grab; } .fb-section-head .fb-title-input { background: transparent; border: 0; outline: 0; font: inherit; font-weight: 600; color: var(--text); flex: 1; min-width: 0; } .fb-section-head .fb-title-input:focus { background: var(--surface-2); border-radius: 4px; padding: 2px 6px; margin: -2px -6px; } .fb-section-head .fb-summary { color: var(--text-muted); font-size: 12.5px; } .fb-section-head .fb-section-toggle { width: 24px; height: 24px; display: grid; place-items: center; color: var(--text-muted); } .fb-section-head .fb-section-toggle::before { content: '▸'; transition: transform .12s; } .fb-section.is-open .fb-section-head .fb-section-toggle::before { transform: rotate(90deg); } .fb-section-head .fb-section-delete { color: var(--text-muted); padding: 2px 6px; border-radius: 4px; } .fb-section-head .fb-section-delete:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .fb-section-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--border); } .fb-section:not(.is-open) .fb-section-body { display: none; } .fb-section-desc { width: 100%; font: inherit; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 8px 10px; margin: var(--space-3) 0 var(--space-3); resize: vertical; min-height: 40px; font-size: 12.5px; } .fb-fields { display: flex; flex-direction: column; gap: 6px; } .fb-field { display: grid; grid-template-columns: 18px 1.4fr 1fr auto auto auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .fb-field .grip { color: var(--text-muted); cursor: grab; user-select: none; text-align: center; } .fb-field .fb-label-input, .fb-field .fb-kind-select { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--surface-2); color: var(--text); } .fb-field .fb-label-input:focus, .fb-field .fb-kind-select:focus { background: var(--surface); border-color: var(--accent); outline: 0; } .fb-field .fb-required { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-muted); cursor: pointer; } .fb-field .fb-required input { accent-color: var(--accent); } .fb-field .fb-field-delete { color: var(--text-muted); font-size: 14px; padding: 2px 6px; border-radius: 4px; } .fb-field .fb-field-delete:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } .fb-field.is-dragging { opacity: .35; } .fb-field.is-drop-above { box-shadow: 0 -2px 0 var(--accent); } .fb-field.is-drop-below { box-shadow: 0 2px 0 var(--accent); } .fb-add-field { align-self: flex-start; margin-top: var(--space-2); } /* Builder preview (right column) */ .builder-preview { background: var(--surface-2); } .builder-preview .framed-body { padding: var(--space-5); } .fb-preview-title { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; } .fb-preview-intro { color: var(--text-muted); font-size: 13.5px; margin-bottom: var(--space-4); } .fb-preview-section + .fb-preview-section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } .fb-preview-section h4 { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-3); } .fb-preview-section .field + .field { margin-top: var(--space-3); } .fb-preview-foot { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); } .fb-preview-foot .btn { width: 100%; justify-content: center; } /* ============================================================ Public apply page ============================================================ */ body.apply-public { background: var(--bg); min-height: 100vh; } .apply-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); } .apply-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .apply-card { padding: var(--space-6); } .apply-title { font-size: 28px; letter-spacing: -.02em; margin-bottom: var(--space-2); } .apply-intro { font-size: 14.5px; margin-bottom: var(--space-5); } .apply-section { border: 0; padding: 0; margin: 0 0 var(--space-6); } .apply-section + .apply-section { border-top: 1px solid var(--border); padding-top: var(--space-5); } .apply-section legend { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 0; margin-bottom: var(--space-3); } .apply-section .req { color: var(--danger); } .apply-radio-group { display: flex; gap: var(--space-2); flex-wrap: wrap; } .apply-radio { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; background: var(--surface-2); } .apply-radio:hover { background: var(--surface); border-color: var(--accent); } .apply-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; } .btn-lg { padding: 12px 22px; font-size: 15px; } .apply-thanks { margin-top: var(--space-4); } .apply-footer { text-align: center; margin-top: var(--space-5); } .apply-footer a { color: var(--text-muted); text-decoration: underline; } /* Mobile: the apply card fills more of the viewport */ @media (max-width: 720px) { .apply-wrap { padding: var(--space-4) var(--space-3) var(--space-6); } .apply-card { padding: var(--space-5) var(--space-4); } /* Kanban collapses to a horizontal swipe row */ .kanban { grid-template-columns: repeat(4, 85%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); } .kanban-col { scroll-snap-align: start; } .kanban-col-body { min-height: 120px; } /* Pipeline steps: 2x2 on phone */ .pipeline-steps { grid-template-columns: repeat(2, 1fr); } /* Builder collapses to single column already via .builder-grid media. */ .fb-field { grid-template-columns: 18px 1fr auto auto; } .fb-field .fb-kind-select { grid-column: 2 / span 1; } .fb-field .fb-required { grid-column: 1 / -1; justify-self: flex-start; } } /* ============================================================ Stage 7 — Clients · Contracts · Invoices · Payments ============================================================ */ /* Client list shares dog-grid / dog-list visuals, with a few tweaks. */ .client-grid .dog-card-avatar { padding-top: var(--space-3); } .client-list .row { grid-template-columns: 48px minmax(0, 1.6fr) auto auto auto; } .client-list .row .meta { font-size: 13px; } /* Two-column overview grid */ .client-grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-4); } @media (max-width: 900px) { .client-grid { grid-template-columns: 1fr; } } /* Inline KPI strip used on the financial summary card. */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .kpi-row .kpi { padding: var(--space-3); } .kpi-row .kpi-value.pos { color: var(--danger); } @media (max-width: 720px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } } /* Communication log */ .comms-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .comms-log li { border-left: 2px solid var(--border); padding: 4px 0 4px var(--space-3); } .comms-log li:hover { border-left-color: var(--accent); } .comms-meta { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 4px; } .comms-meta .kind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); } .comms-body { font-size: 14px; line-height: 1.45; } /* Generic record-row list (contracts + invoices on the client detail page). */ .record-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .record-row:last-child { border-bottom: 0; } .record-main { min-width: 0; } .record-title { display: flex; align-items: center; gap: var(--space-2); font-size: 14.5px; } .record-meta { margin-top: 4px; } .record-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } /* Invoice line-item rollup under a contract / invoice header. */ .invoice-items { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px dashed var(--border); padding-top: var(--space-2); } .invoice-items li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 13px; color: var(--text-muted); padding: 2px 0; } .invoice-items .line { flex: 1 1 auto; } /* Editor for line items in the New invoice modal */ .invoice-items-editor { display: flex; flex-direction: column; gap: var(--space-2); } .invoice-item-row { display: grid; grid-template-columns: 1fr 120px auto; gap: var(--space-2); align-items: center; } /* Compact dog-list variant used inside Overview card */ .dog-list.compact .row { grid-template-columns: 40px minmax(0, 1fr) auto auto; padding: var(--space-2) var(--space-3); } .dog-list.compact .row .name { font-size: 14px; } .dog-list.compact .row .meta { font-size: 12.5px; } /* Mobile: stack the record-row actions below the body so we don't truncate */ @media (max-width: 720px) { .record-row { grid-template-columns: 1fr; } .record-actions { justify-content: flex-start; } .client-list .row { grid-template-columns: 40px minmax(0, 1fr) auto; } .client-list .row > :nth-child(4), .client-list .row > :nth-child(5) { display: none; } .invoice-item-row { grid-template-columns: 1fr 100px auto; } } /* View-toggle pill row on clients.php toolbar */ .view-toggle .btn.is-active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); } /* ============================================================ Stage 8 — Settings page ============================================================ */ .theme-swatches { gap: var(--space-3); } .theme-swatch { width: 130px; height: 96px; border-radius: var(--radius-lg); border: 2px solid transparent; cursor: pointer; display: flex; align-items: flex-end; padding: var(--space-2) var(--space-3); font: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; } .theme-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .theme-swatch.is-active { border-color: var(--text); box-shadow: var(--shadow); } .theme-swatch-name { font-size: 13px; font-weight: 600; color: var(--surface); text-shadow: 0 1px 2px rgba(0,0,0,.18); } /* Mini palette previews by overriding background via data-preview-palette. */ .theme-swatch[data-preview-palette="sage"] { background: #607b6a; } .theme-swatch[data-preview-palette="indigo"] { background: #4f5bc4; } .theme-swatch[data-preview-palette="ember"] { background: #c25a3e; } .theme-swatch[data-preview-palette="slate"] { background: #4b5563; } .theme-swatch[data-preview-palette="plum"] { background: #7c4f78; } /* Plan picker on settings.php?tab=plans */ .plan-grid { gap: var(--space-3); } @media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } } .plan-card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; } .plan-card h4 { margin: 0 0 var(--space-3); font-size: 16px; } .plan-features { list-style: none; padding: 0; margin: 0 0 var(--space-3); } .plan-features li { padding: 4px 0; } .plan-features li::before { content: "✓"; color: var(--accent); margin-right: 8px; } .plan-card.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* Avatar image fits the round container on settings.php */ .avatar.huge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* ============================================================ User menu (top-right avatar dropdown) ============================================================ */ .user-menu { position: relative; } .user-menu > summary { list-style: none; cursor: pointer; user-select: none; } .user-menu > summary::-webkit-details-marker { display: none; } .user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid transparent; transition: background .12s, border-color .12s; } .user-chip:hover { background: var(--surface-2); border-color: var(--border); } .user-menu[open] .user-chip { background: var(--surface-2); border-color: var(--border); } .user-chip-name { font-weight: 500; font-size: 14px; } .user-chip-caret { color: var(--text-muted); font-size: 10px; margin-left: 2px; } .user-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg, var(--shadow)); padding: 6px; } .user-menu-head { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .user-menu-name { font-weight: 600; font-size: 14px; } .user-menu-email { word-break: break-all; } .user-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm, 6px); color: var(--text); text-decoration: none; font-size: 14px; } .user-menu-item:hover { background: var(--surface-2); color: var(--text); } .user-menu-item.is-danger { color: var(--danger, #c0392b); } .user-menu-item.is-danger:hover { background: rgba(192, 57, 43, .08); } .user-menu-ico { display: inline-block; width: 18px; text-align: center; color: var(--text-muted); font-size: 14px; } .user-menu-divider { height: 1px; background: var(--border); margin: 6px 0; } /* Hide chip name on small screens — keep avatar + caret only */ @media (max-width: 720px) { .user-chip-name { display: none; } } /* ============================================================ Calendar (month grid) ============================================================ */ .cal-card { overflow: hidden; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); } .cal-dow { background: var(--surface-2); text-align: center; padding: 8px 4px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .cal-cell { background: var(--surface); min-height: 108px; padding: 6px 8px 8px; display: flex; flex-direction: column; overflow: hidden; } .cal-cell.is-other { background: var(--surface-2); } .cal-cell.is-other .cal-num { color: var(--text-muted); opacity: .6; } .cal-cell.is-today { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .cal-cell.is-today .cal-num { color: var(--accent); font-weight: 700; } .cal-num { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; } .cal-events { display: flex; flex-direction: column; gap: 2px; } .cal-event { font-size: 11px; line-height: 1.25; padding: 2px 6px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border-left: 2px solid var(--accent); } .cal-event.record { background: color-mix(in srgb, var(--warning, #c98c2e) 14%, var(--surface)); color: var(--warning, #c98c2e); border-left-color: var(--warning, #c98c2e); } .cal-event.litter { background: color-mix(in srgb, var(--success, #4f7a5a) 14%, var(--surface)); color: var(--success, #4f7a5a); border-left-color: var(--success, #4f7a5a); } .cal-event a, .cal-event-btn { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; width: 100%; } .cal-event:hover { filter: brightness(1.05); } .cal-event-more { font-size: 10.5px; color: var(--text-muted); padding: 1px 6px; font-style: italic; } .cal-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; } .cal-key-calendar { background: var(--accent); } .cal-key-record { background: var(--warning, #c98c2e); } .cal-key-litter { background: var(--success, #4f7a5a); } @media (max-width: 860px) { .cal-cell { min-height: 76px; padding: 4px 4px 6px; } .cal-num { font-size: 11px; } .cal-event { font-size: 10px; padding: 1px 4px; } } /* ============================================================ Stage 9 — Website admin ============================================================ */ /* Activation gate + simple alert block reused on first-run cards. */ .website-gate .alert { background: color-mix(in srgb, var(--warning) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--border)); color: var(--text); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-3) 0 var(--space-4); font-size: 13.5px; } .website-gate .alert strong { color: var(--warning); } /* Inline link inside page-header subtitle / muted text. */ .dogs-toolbar .link { color: inherit; border-bottom: 1px dashed currentColor; } .dogs-toolbar .link:hover { color: var(--accent); } /* Tiny key/value list used in the page-editor sidebar card. */ .kv-list { display: flex; flex-direction: column; gap: 8px; } .kv-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); border-bottom: 1px dashed var(--border); padding-bottom: 6px; } .kv-list > div:last-child { border-bottom: 0; padding-bottom: 0; } /* Page-editor: 2-column shell (form on the left, live preview iframe on the right). */ .page-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-5); align-items: start; } .page-editor-side { min-width: 0; } .page-editor-main { min-width: 0; position: sticky; top: var(--space-4); } /* Browser-chrome frame around the preview iframe. */ .pe-preview { padding: 0; overflow: hidden; } .pe-preview-bar { display: flex; align-items: center; gap: 6px; padding: 10px var(--space-3); border-bottom: 1px solid var(--border); background: var(--surface-2); } .pe-dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; } .pe-addr { flex: 1 1 auto; min-width: 0; margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; } .pe-frame { display: block; width: 100%; height: 70vh; min-height: 480px; border: 0; background: var(--surface); } /* Pages list: keep the page title clickable + readable. */ .pages-list .record-title { text-decoration: none; color: var(--text); } .pages-list .record-title:hover { color: var(--accent); } /* Template picker grid (Theme tab). */ .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); } .template-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--surface); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .template-card:hover { border-color: var(--accent); transform: translateY(-1px); } .template-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); } .template-thumb { aspect-ratio: 16 / 10; background: var(--surface-2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); } .template-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .template-thumb-placeholder { color: var(--text-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .template-body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; } .template-name { font-size: 14.5px; } .template-body .badge { align-self: flex-start; } .template-body p { margin: 0; } .template-body .btn { align-self: flex-start; margin-top: 4px; } @media (max-width: 980px) { .page-editor-grid { grid-template-columns: 1fr; } .page-editor-main { position: static; } .pe-frame { height: 52vh; min-height: 380px; } } @media (max-width: 720px) { .pe-addr { display: none; } .pages-list .record-row .record-actions { width: 100%; } .template-grid { grid-template-columns: 1fr; } }