/* ============================================================
RESCUE MANAGER — Design System
Tufte-inspired. High data-ink ratio. Zero chartjunk.
============================================================ */
/* --- Tokens ---
Palette is warm paper with forest-green primary and terracotta accent.
Semantic success/warning/danger kept distinct from primary so state
colors still read as state and not as "primary-lite". --text-muted is
darkened to meet WCAG AA against --bg in both modes (was 3.7:1). */
:root {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
--bg: #f6f2ea;
--surface: #fbf8f1;
--surface-hover: #efeadf;
--surface-active: #e4ddcd;
--border: #d6cfbd;
--border-light: #e7e1d0;
--text: #1c1810;
--text-secondary: #4a4336;
--text-muted: #6e6554;
--text-inverse: #fbf8f1;
--primary: #2f6a48;
--primary-hover: #255638;
--primary-light: #e4eee7;
--primary-border: #9bc0aa;
--primary-text: #1e4a30;
--secondary: #b04e2c;
--secondary-hover: #8f3d20;
--secondary-light: #f4e5dc;
--secondary-border: #dfb19b;
--secondary-text: #7a341b;
--success: #0f6b49;
--success-light: #e2ede6;
--success-border: #9ec9b3;
--warning: #9b6d15;
--warning-light: #f6ebd4;
--warning-border: #e6c58a;
--danger: #a83232;
--danger-light: #f4dede;
--danger-border: #d8a8a8;
--info: #2a6178;
--info-light: #e0ebf1;
--info-border: #9ec5d3;
--muted: #6e6554;
--muted-light: #efeadf;
--bg-secondary: #ede7d8;
--bg-primary: #f6f2ea;
--text-primary: #1c1810;
--radius: 8px;
--sidebar-bg: #1c1914;
--sidebar-text: #8a826f;
--sidebar-text-hover: #c6bfad;
--sidebar-text-active: #f4efe2;
--sidebar-hover: #272217;
--sidebar-active-bg: rgba(47, 106, 72, 0.18);
--sidebar-active-border: #4d9a6e;
--sidebar-section: #8a826f;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--shadow-sm: 0 1px 2px rgba(28, 24, 16, 0.05);
--shadow-md: 0 1px 3px rgba(28, 24, 16, 0.08);
--shadow-lg: 0 6px 16px rgba(28, 24, 16, 0.08);
--sidebar-width: 240px;
--topbar-height: 56px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Dark Mode ---
Same warm palette dropped onto a deep-espresso base so the brand holds.
Primary brightens to a sage so it's still distinct from muted text on
dark; muted text lifts to #9a9280 for AA against --bg. */
[data-theme="dark"] {
color-scheme: dark;
--bg: #14110c;
--surface: #1c1914;
--surface-hover: #25211a;
--surface-active: #2d2821;
--border: #3a3428;
--border-light: #2a2620;
--text: #ece4cf;
--text-secondary: #bdb398;
--text-muted: #9a9280;
--text-inverse: #14110c;
--primary: #6fb58a;
--primary-hover: #87c69e;
--primary-light: #1d2a22;
--primary-border: #2f5a42;
--primary-text: #a6d8b8;
--secondary: #d17a5a;
--secondary-hover: #df8b6c;
--secondary-light: #2a1f18;
--secondary-border: #5a382a;
--secondary-text: #e4a589;
--success: #62b391;
--success-light: #172b23;
--success-border: #2e5a44;
--warning: #d2a64b;
--warning-light: #2b2215;
--warning-border: #5a4724;
--danger: #d67272;
--danger-light: #2e1919;
--danger-border: #5e2f2f;
--info: #6fa9be;
--info-light: #162630;
--info-border: #2e4c5c;
--muted: #9a9280;
--muted-light: #1e1a14;
--bg-secondary: #1a1611;
--bg-primary: #14110c;
--text-primary: #ece4cf;
--sidebar-bg: #0c0a07;
--sidebar-text: #8a826f;
--sidebar-text-hover: #bdb398;
--sidebar-text-active: #ece4cf;
--sidebar-hover: #171410;
--sidebar-active-bg: rgba(111, 181, 138, 0.16);
--sidebar-active-border: #6fb58a;
--sidebar-section: #8a826f;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
--shadow-md: 0 1px 3px rgba(0,0,0,0.45);
--shadow-lg: 0 6px 16px rgba(0,0,0,0.45);
}
/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
color: var(--text);
background: var(--bg);
line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
/* --- Typography (Tufte: let the data speak) --- */
h1 { font-size: 1.714rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: 1.286rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
h3 { font-size: 1.071rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1rem; font-weight: 600; }
.text-sm { font-size: 0.857rem; }
.text-xs { font-size: 0.786rem; }
.text-mono { font-family: var(--font-mono); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
/* --- Layout --- */
.app-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: var(--sidebar-width);
background: var(--sidebar-bg);
color: var(--sidebar-text);
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 100;
display: flex;
flex-direction: column;
overflow-y: auto;
transition: transform 0.2s var(--ease);
}
.sidebar-header {
padding: 24px 20px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 700;
color: var(--sidebar-text-active);
letter-spacing: -0.02em;
text-decoration: none;
transition: opacity 0.15s;
}
a.sidebar-brand:hover { opacity: 0.8; }
.sidebar-logo {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 6px;
flex-shrink: 0;
}
.sidebar-brand-text {
min-width: 0;
line-height: 1.3;
}
.sidebar-section {
padding: 16px 16px 6px;
font-size: 0.714rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sidebar-section);
}
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.nav-item {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 16px;
margin: 2px 10px;
border-radius: var(--radius-md);
color: var(--sidebar-text);
font-size: 0.929rem;
font-weight: 400;
cursor: pointer;
transition: all 0.15s var(--ease);
text-decoration: none;
border-left: 2px solid transparent;
}
.nav-item:hover {
background: var(--sidebar-hover);
color: var(--sidebar-text-hover);
text-decoration: none;
}
.nav-item.active {
background: var(--sidebar-active-bg);
color: var(--sidebar-text-active);
border-left-color: var(--sidebar-active-border);
font-weight: 500;
}
.nav-item .lucide { width: 18px; height: 18px; opacity: 0.65; flex-shrink: 0; }
.nav-item:hover .lucide { opacity: 0.85; }
.nav-item.active .lucide { opacity: 1; }
.nav-badge {
margin-left: auto;
background: var(--danger);
color: white;
font-size: 0.714rem;
font-weight: 600;
padding: 1px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
/* Collapsible sidebar groups */
.sidebar-group + .sidebar-group {
margin-top: 4px;
padding-top: 4px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.sidebar-toggle {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
padding: 14px 16px 6px;
}
.sidebar-toggle:hover {
color: var(--sidebar-text-hover);
}
.sidebar-toggle .toggle-icon {
width: 14px;
height: 14px;
opacity: 0.4;
transition: transform 0.2s var(--ease);
flex-shrink: 0;
}
.sidebar-group.collapsed .toggle-icon {
transform: rotate(-90deg);
}
.sidebar-group.collapsed .sidebar-links {
display: none;
}
.sidebar-group.collapsed .sidebar-toggle {
padding-bottom: 10px;
}
/* Topbar user menu */
.topbar-user-menu { position: relative; }
.topbar-user-btn {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
border-radius: var(--radius-md);
transition: background 0.15s;
}
.topbar-user-btn:hover { background: var(--hover); }
.topbar-user-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.857rem;
font-weight: 600;
flex-shrink: 0;
}
.topbar-user-chevron {
width: 14px;
height: 14px;
color: var(--text-secondary);
transition: transform 0.2s;
}
.topbar-user-menu.open .topbar-user-chevron { transform: rotate(180deg); }
.topbar-user-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 100;
padding: 4px 0;
}
.topbar-user-menu.open .topbar-user-dropdown { display: block; }
.topbar-user-header { padding: 10px 14px 6px; }
.topbar-user-name {
font-size: 0.857rem;
font-weight: 600;
color: var(--text-primary);
}
.topbar-user-role {
font-size: 0.714rem;
color: var(--text-secondary);
text-transform: capitalize;
}
.topbar-user-divider {
height: 1px;
background: var(--border);
margin: 4px 0;
}
.topbar-user-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
font-size: 0.857rem;
color: var(--text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.topbar-user-item:hover {
background: var(--hover);
color: var(--text-primary);
}
.topbar-user-item svg, .topbar-user-item i {
width: 16px;
height: 16px;
}
/* Main content area */
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
min-height: 100vh;
}
.topbar {
height: var(--topbar-height);
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
position: sticky;
top: 0;
z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.sidebar-menu-toggle { display: none; }
.sidebar-backdrop { display: none; }
.page-title { font-size: 1.071rem; font-weight: 600; }
.page-subtitle { font-size: 0.857rem; color: var(--text-secondary); }
.content-area {
padding: 24px;
max-width: 1400px;
}
/* --- Cards (Minimal chrome, Tufte-approved) --- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-size: 0.929rem;
font-weight: 600;
}
.card-body { padding: 20px; }
.card-body.compact { padding: 12px 20px; }
/* --- Buttons (Outline style, always) --- */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-family: var(--font-sans);
font-size: 0.857rem;
font-weight: 500;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: transparent;
color: var(--text);
cursor: pointer;
transition: all 0.15s var(--ease);
white-space: nowrap;
line-height: 1.4;
}
.btn:hover {
border-color: var(--text-secondary);
background: var(--surface-hover);
text-decoration: none;
}
.btn .lucide { width: 15px; height: 15px; }
.btn-primary {
border-color: var(--primary);
color: var(--primary);
}
.btn-primary:hover {
background: var(--primary);
color: var(--text-inverse);
}
.btn-success {
border-color: var(--success);
color: var(--success);
}
.btn-success:hover {
background: var(--success);
color: var(--text-inverse);
}
.btn-warning {
border-color: var(--warning);
color: var(--warning);
}
.btn-warning:hover {
background: var(--warning);
color: var(--text-inverse);
}
.btn-danger {
border-color: var(--danger);
color: var(--danger);
}
.btn-danger:hover {
background: var(--danger);
color: var(--text-inverse);
}
.btn-sm {
padding: 4px 10px;
font-size: 0.786rem;
}
.btn-lg {
padding: 10px 20px;
font-size: 1rem;
}
.btn-icon {
padding: 6px;
border: none;
background: transparent;
color: var(--text-secondary);
border-radius: var(--radius-md);
cursor: pointer;
}
.btn-icon:hover {
background: var(--surface-hover);
color: var(--text);
}
.btn-group {
display: flex;
gap: 0;
}
.btn-group .btn {
border-radius: 0;
}
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.btn-group .btn + .btn { margin-left: -1.5px; }
.btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.btn:active:not(:disabled) {
transform: scale(0.97);
}
.btn:disabled, .btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.btn-secondary {
border-color: var(--text-muted);
color: var(--text-secondary);
}
.btn-secondary:hover {
border-color: var(--text-secondary);
background: var(--surface-active);
color: var(--text);
}
.btn-ghost {
border-color: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover {
background: var(--surface-hover);
color: var(--text);
}
/* --- Select Group (Highlight color replaces radio/check) --- */
.select-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.select-option {
padding: 8px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 0.857rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s var(--ease);
user-select: none;
}
.select-option:hover {
border-color: var(--primary-border);
color: var(--text);
}
.select-option.active {
border-color: var(--primary);
background: var(--primary-light);
color: var(--primary-text);
}
/* Multi-select version */
.select-option[data-multi].active {
border-color: var(--primary);
background: var(--primary-light);
color: var(--primary-text);
}
/* --- Forms --- */
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 0.857rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 4px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 8px 12px;
font-family: var(--font-sans);
font-size: 0.929rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
transition: border-color 0.15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-help { font-size: 0.786rem; color: var(--text-muted); margin-top: 2px; }
.form-counter { font-size: 0.786rem; color: var(--text-muted); margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.form-counter-warn { color: var(--warning); }
.form-counter-full { color: var(--danger); font-weight: 500; }
.form-error { font-size: 0.786rem; color: var(--danger); margin-top: 2px; }
/* F14 status pills for file inputs + async operations.
Opt-in per form by adding .status-pill-target to the input's parent
and letting App.UploadStatus.init render a .status-pill sibling. Four
states: pending (neutral), uploading (info, pulse), complete (success),
error (danger). */
.status-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
font-size: 0.75rem; font-weight: 500;
background: var(--surface-hover); color: var(--text-muted);
vertical-align: middle;
}
.status-pill-uploading { background: var(--info-light); color: var(--info); }
.status-pill-uploading::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; animation: status-pill-pulse 1s infinite;
}
.status-pill-complete { background: var(--success-light); color: var(--success); }
.status-pill-error { background: var(--danger-light); color: var(--danger); }
@keyframes status-pill-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.form-inline-error {
display: block; margin-top: 4px;
font-size: 0.786rem; color: var(--danger);
padding: 4px 8px; border-radius: var(--radius-sm);
background: var(--danger-light);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
/* --- Tables (Tufte: data dense, readable) --- */
.table-container {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
thead th {
padding: 8px 12px;
font-size: 0.786rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
text-align: left;
border-bottom: 2px solid var(--border);
white-space: nowrap;
}
tbody td {
padding: 10px 12px;
font-size: 0.929rem;
border-bottom: 1px solid var(--border-light);
vertical-align: middle;
}
tbody tr:hover {
background: var(--surface-hover);
}
tbody tr:last-child td {
border-bottom: none;
}
/* Inline data bars (Tufte sparkline concept) */
.data-bar {
display: inline-block;
height: 4px;
background: var(--primary);
border-radius: 2px;
opacity: 0.6;
vertical-align: middle;
}
/* --- Status Badges --- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: 0.786rem;
font-weight: 500;
border-radius: 10px;
white-space: nowrap;
}
.badge-primary { background: var(--primary-light); color: var(--primary-text); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-info { background: var(--info-light); color: var(--info); }
.badge-muted { background: var(--muted-light); color: var(--muted); }
/* --- Stat Cards (Tufte: big numbers, no decoration) --- */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px 20px;
}
.stat-label {
font-size: 0.786rem;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.stat-value {
font-size: 1.714rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
}
.stat-detail {
font-size: 0.786rem;
color: var(--text-secondary);
margin-top: 4px;
}
/* --- Pipeline (horizontal status visualization) --- */
.pipeline {
display: flex;
gap: 2px;
margin-bottom: 24px;
}
.pipeline-stage {
flex: 1;
text-align: center;
padding: 10px 8px;
background: var(--surface);
border: 1px solid var(--border);
font-size: 0.786rem;
cursor: pointer;
transition: all 0.15s;
}
.pipeline-stage:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.pipeline-stage:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.pipeline-stage:hover { background: var(--surface-hover); }
.pipeline-stage.active {
background: var(--primary-light);
border-color: var(--primary-border);
color: var(--primary-text);
font-weight: 600;
}
.pipeline-count {
display: block;
font-size: 1.286rem;
font-weight: 700;
line-height: 1.2;
}
.pipeline-label {
display: block;
color: var(--text-muted);
font-size: 0.714rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* --- Modal --- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s var(--ease);
}
.modal-overlay.open {
opacity: 1;
pointer-events: auto;
}
.modal {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
width: 90%;
max-width: 560px;
max-height: 85vh;
overflow-y: auto;
transform: translateY(8px) scale(0.98);
transition: transform 0.2s var(--ease);
}
.modal-overlay.open .modal {
transform: translateY(0) scale(1);
}
.modal-header {
padding: 20px 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title { font-size: 1.071rem; font-weight: 600; }
.modal-close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius-md);
cursor: pointer;
}
.modal-close:hover { background: var(--surface-hover); color: var(--text); }
.modal-body { padding: 16px 24px; }
.modal-footer {
padding: 16px 24px 20px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* --- Toast Notifications --- */
.toast-container {
position: fixed;
top: 16px;
right: 16px;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
min-width: min(320px, calc(100vw - 32px));
max-width: min(420px, calc(100vw - 32px));
pointer-events: auto;
animation: toast-in 0.25s var(--ease);
cursor: pointer;
}
.toast.removing {
animation: toast-out 0.2s var(--ease) forwards;
}
@keyframes toast-in {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
to { opacity: 0; transform: translateX(20px); }
}
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-icon .lucide { width: 18px; height: 18px; }
.toast-success .toast-icon { color: var(--success); }
.toast-danger .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-info .toast-icon { color: var(--info); }
.toast-content { flex: 1; }
.toast-title { font-size: 0.857rem; font-weight: 600; }
.toast-message { font-size: 0.786rem; color: var(--text-secondary); margin-top: 2px; }
/* --- Notification Dropdown --- */
.notification-bell {
position: relative;
}
.notification-count {
position: absolute;
top: -4px;
right: -4px;
background: var(--danger);
color: white;
font-size: 0.643rem;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.notification-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: min(360px, calc(100vw - 32px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 200;
display: none;
max-height: 400px;
overflow-y: auto;
}
.notification-dropdown.open { display: block; }
.notification-dropdown-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border-light);
display: flex;
justify-content: space-between;
align-items: center;
}
.notification-item {
display: flex;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--border-light);
cursor: pointer;
transition: background 0.1s;
}
.notification-item:hover { background: var(--surface-hover); }
.notification-item.unread { background: var(--primary-light); }
.notification-item:last-child { border-bottom: none; }
.notification-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-hover);
flex-shrink: 0;
}
.notification-icon .lucide { width: 16px; height: 16px; color: var(--text-secondary); }
.notification-text { flex: 1; }
.notification-text-title { font-size: 0.857rem; font-weight: 500; }
.notification-text-time { font-size: 0.714rem; color: var(--text-muted); }
/* --- Editable Fields (Inline edit) --- */
.editable {
cursor: pointer;
padding: 2px 18px 2px 4px;
margin: -2px -4px;
border-radius: var(--radius-sm);
transition: background 0.1s;
border-bottom: 1px dashed var(--border);
position: relative;
}
.editable::after {
content: '';
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
.editable:hover {
background: var(--primary-light);
border-bottom-color: var(--primary-border);
}
.editable:hover::after {
opacity: 0.55;
}
/* Textarea-backed editable fields (bio, special needs, internal notes,
origin, sponsors) store plain text with \n paragraph breaks. Default
HTML collapses those to a single space, making saved bios render as
one run-on paragraph even though the edit modal shows them correctly.
pre-line preserves newlines in the rendered view while still wrapping
long lines naturally. Applies whether or not the element is currently
editable — matches the public /dogs/ page behaviour. */
[data-type="textarea"] {
white-space: pre-line;
}
/* --- Photo Grid ---
7e-16 (2026-04-20 pm): the photo grid communicates role via an
outline on each card instead of a Primary pill + kebab menu button.
Three explicit groups: Approved (solid primary), Pending (dashed
warning), Gallery extras (dotted muted). Whole card is clickable;
hover surfaces a small label overlay ("Click to view / edit" etc.)
so the interaction is self-documenting on desktop, and tap-anywhere
works on touch without needing a tiny target. The AI-state ring
lives on .photo-card-inner so the group outline sits outside it.
*/
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.photo-group + .photo-group {
margin-top: 16px;
}
.photo-group-label {
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.photo-group-count {
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.photo-card {
position: relative;
border-radius: var(--radius-md);
border: 2px solid var(--border);
aspect-ratio: 1;
cursor: default;
transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.photo-card[data-action] {
cursor: pointer;
}
.photo-card[data-action]:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.photo-card[data-action]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
/* Inner wrapper carries the image + AI ring. overflow:hidden here (not
on the outer card) keeps the group-outline border crisp and lets the
AI ring render as a pseudo-element inside the image area. */
.photo-card-inner {
position: absolute;
inset: 0;
border-radius: calc(var(--radius-md) - 2px);
overflow: hidden;
}
.photo-card-inner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Group outline variants. Colors chosen to match the role badges used
elsewhere (primary for approved, warning for pending, muted for
extras). Primary photo gets a heavier shadow so it still stands out
within the Approved group without the old pill. */
.photo-card-approved {
border-color: var(--primary);
}
.photo-card-primary {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 28%, transparent);
}
.photo-card-pending {
border-style: dashed;
border-color: var(--warning);
}
.photo-card-gallery {
border-style: dotted;
border-width: 2px;
border-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
opacity: 0.92;
}
.photo-card-gallery:hover {
opacity: 1;
}
/* Hover label: small rounded pill at the bottom of the card. Fades in
on hover/focus. Hidden on touch devices where hovering isn't a
useful signal; the tap target is still the whole card. */
.photo-hover-label {
position: absolute;
left: 50%;
bottom: 8px;
transform: translateX(-50%) translateY(4px);
background: rgba(0, 0, 0, 0.72);
color: white;
font-size: 0.75rem;
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: 0.01em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
z-index: 4;
}
.photo-card[data-action]:hover .photo-hover-label,
.photo-card[data-action]:focus-visible .photo-hover-label {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (hover: none) {
.photo-hover-label { display: none; }
}
/* Action rows in the photo-options modal body. Each row is a full-width
tappable target so touch users don't have to hit small buttons. */
.photo-options-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.photo-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
cursor: pointer;
width: 100%;
font-size: 14px;
font-weight: 500;
text-align: left;
transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
font-family: inherit;
}
.photo-option:hover {
background: var(--surface-hover);
border-color: var(--primary-border);
}
.photo-option i {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-secondary);
}
.photo-option-success { color: var(--success); }
.photo-option-success i { color: var(--success); }
.photo-option-danger { color: var(--danger); }
.photo-option-danger i { color: var(--danger); }
.photo-option-danger:hover {
background: color-mix(in srgb, var(--danger) 8%, transparent);
border-color: var(--danger);
}
.photo-option-success:hover {
background: color-mix(in srgb, var(--success) 10%, transparent);
border-color: var(--success);
}
/* View-only actions (Open full size / Download / Start social post) read
as a secondary group under the primary state-changing actions above.
The first one in a run gets a top divider + extra top margin so the
separation is visible without adding a real
. */
.photo-option-view {
color: var(--text-secondary);
background: transparent;
border-color: var(--border-light, var(--border));
}
.photo-option-view i { color: var(--text-secondary); }
.photo-option-view:hover {
background: var(--surface-hover);
color: var(--text);
border-color: var(--primary-border);
}
/* First view-row that follows any non-view action row gets extra top
spacing + a faint divider line drawn above it, so the secondary
group reads clearly without an extra
element. */
.photo-option:not(.photo-option-view) + .photo-option-view {
margin-top: 14px;
position: relative;
}
.photo-option:not(.photo-option-view) + .photo-option-view::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -8px;
height: 1px;
background: var(--border);
}
.photo-options-preview {
width: 100%;
max-height: 260px;
object-fit: contain;
border-radius: var(--radius-md);
margin-bottom: 14px;
background: var(--surface-hover);
display: block;
cursor: zoom-in;
transition: opacity 0.15s var(--ease);
}
.photo-options-preview:hover { opacity: 0.92; }
/* --- Dog Cards (Grid view) --- */
.dog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.dog-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: box-shadow 0.15s, transform 0.15s;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.dog-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
text-decoration: none;
}
.dog-card-image {
height: 200px;
background: var(--surface-hover);
overflow: hidden;
}
.dog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
}
.dog-card-body { padding: 12px 16px; }
.dog-card-name {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}
.dog-card-meta {
font-size: 0.786rem;
color: var(--text-secondary);
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dog-card-meta span {
display: inline-flex;
align-items: center;
gap: 3px;
}
/* --- Detail Layout --- */
.detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.detail-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.detail-section {
margin-bottom: 24px;
}
.detail-section-title {
font-size: 0.857rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-light);
}
.field-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.field-item {}
.field-label {
font-size: 0.786rem;
color: var(--text-muted);
margin-bottom: 2px;
}
.field-value {
font-size: 0.929rem;
}
/* --- Pagination --- */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 24px;
flex-wrap: wrap;
}
.pagination a,
.pagination span {
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.857rem;
color: var(--text-secondary);
text-decoration: none;
}
.pagination a:hover {
background: var(--surface-hover);
text-decoration: none;
}
.pagination .active {
background: var(--primary-light);
border-color: var(--primary-border);
color: var(--primary-text);
font-weight: 500;
}
/* --- Empty States --- */
.empty-state {
text-align: center;
padding: 48px 24px;
color: var(--text-muted);
}
.empty-state .lucide {
width: 48px;
height: 48px;
margin-bottom: 12px;
opacity: 0.4;
}
.empty-state-title {
font-size: 1rem;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 4px;
}
/* --- Filters Bar --- */
.filters-bar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
/* --- Filter Pills (toggle-style, pill-shaped filters) --- */
.filter-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.filter-label {
font-size: 0.929rem;
font-weight: 600;
color: var(--text-secondary);
margin-right: 4px;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
font-size: 0.857rem;
font-weight: 500;
padding: 6px 14px;
border-radius: 20px;
cursor: pointer;
transition: all 0.15s var(--ease);
background: var(--surface);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.filter-pill:hover {
border-color: var(--primary-border);
color: var(--text);
text-decoration: none;
background: var(--surface-hover);
}
.filter-pill.active {
background: var(--primary);
color: var(--text-inverse);
border-color: var(--primary);
}
.filter-pill.active .filter-pill-count {
background: rgba(255,255,255,0.2);
color: var(--text-inverse);
}
.filter-pill.active-success {
background: var(--success);
color: var(--text-inverse);
border-color: var(--success);
}
.filter-pill.active-success .filter-pill-count {
background: rgba(255,255,255,0.2);
color: var(--text-inverse);
}
.filter-pill-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 0.714rem;
font-weight: 600;
border-radius: 10px;
background: var(--surface-active);
color: var(--text-secondary);
line-height: 1;
}
.filter-divider {
width: 1px;
height: 20px;
background: var(--border);
margin: 0 4px;
}
/* --- Filter Rows (compound field/operator/value filters) --- */
.filter-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 6px;
flex-wrap: wrap;
}
.filter-row .form-input,
.filter-row .form-select {
width: auto;
font-size: 0.929rem;
padding: 6px 10px;
}
.filter-row .filter-value {
flex: 1;
min-width: 100px;
}
.search-input {
position: relative;
flex: 1;
min-width: 200px;
max-width: 320px;
}
.search-input input {
width: 100%;
padding: 8px 12px 8px 36px;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.857rem;
background: var(--surface);
}
.search-input input:focus {
outline: none;
border-color: var(--primary);
}
.search-input .lucide {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-muted);
}
/* --- Progress / Fill Rate --- */
.fill-bar {
height: 6px;
background: var(--border-light);
border-radius: 3px;
overflow: hidden;
}
.fill-bar-inner {
height: 100%;
background: var(--primary);
border-radius: 3px;
transition: width 0.3s var(--ease);
}
/* --- Responsive --- */
@media (max-width: 1024px) {
.detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
/* Clip stray overflow from wide descendant elements (tables, long
titles, pipeline stages, etc.) so the viewport never horizontally
scrolls. Inner scrollable containers — .card-body.compact, .pipeline
— keep their own overflow-x: auto. */
html, body { overflow-x: hidden; max-width: 100vw; }
/* Sidebar off-canvas */
.sidebar { transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
.sidebar-menu-toggle { display: flex !important; }
.main-content { margin-left: 0; }
/* Layout spacing */
.content-area { padding: 16px; padding: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) 16px; }
.topbar { padding: 0 16px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
/* Grids stack */
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.dog-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.responsive-grid-2 { grid-template-columns: 1fr; gap: 16px; }
.responsive-grid-3 { grid-template-columns: 1fr; gap: 12px; }
.field-grid { grid-template-columns: 1fr !important; }
.medical-summary { grid-template-columns: repeat(2, 1fr); }
.demo-roles { grid-template-columns: 1fr; }
/* Detail pages */
.detail-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.detail-header .flex.gap-2 { flex-wrap: wrap; }
/* Pipeline: horizontal scroll on mobile */
.pipeline { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pipeline-stage { min-width: 80px; flex-shrink: 0; }
/* Tables: horizontal scroll */
.card-body.compact { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-body.compact table { min-width: 480px; }
/* Search input fluid */
.search-input { min-width: 0; max-width: none; flex: 1; }
/* Topbar safe-area */
.topbar-left { min-width: 0; }
.topbar-right { flex-shrink: 0; }
/* Modals full-width on mobile */
.modal-wide { max-width: calc(100vw - 32px); }
.modal-content { max-width: calc(100vw - 32px); margin: 16px; }
}
@media (max-width: 480px) {
.content-area { padding: 12px; }
.stat-grid { grid-template-columns: 1fr; gap: 12px; }
.dog-grid { grid-template-columns: 1fr; }
.photo-grid { grid-template-columns: repeat(2, 1fr); }
.medical-summary { grid-template-columns: 1fr; }
.topbar { gap: 8px; }
.topbar-right { gap: 4px; }
.page-title { font-size: 1rem; }
/* Chat on small screens */
.chat-messages { padding: 12px 16px; max-height: 320px; }
.chat-input-row { padding: 10px 16px 12px; }
.chat-msg { max-width: 92%; }
}
/* --- Login Page --- */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
}
.login-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: var(--shadow-lg);
}
.login-title {
font-size: 1.286rem;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
}
.login-subtitle {
text-align: center;
color: var(--text-secondary);
font-size: 0.857rem;
margin-bottom: 32px;
}
.google-signin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 40px;
padding: 0 12px;
background: #fff;
color: #1f1f1f;
font-family: 'Google Sans', 'Roboto', 'Inter', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
border: 1px solid #747775;
border-radius: 20px;
cursor: pointer;
text-decoration: none;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
-webkit-font-smoothing: antialiased;
}
.google-signin-btn:hover {
background: #f2f2f2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
}
.google-signin-btn:active {
background: #e8e8e8;
box-shadow: none;
}
.google-signin-btn:focus-visible {
outline: 2px solid #4285f4;
outline-offset: 2px;
}
[data-theme="dark"] .google-signin-btn {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .google-signin-btn:hover {
background: var(--surface-hover);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.2);
}
[data-theme="dark"] .google-signin-btn:active {
background: var(--surface-active);
}
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0;
color: var(--text-muted);
font-size: 0.786rem;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.demo-roles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* --- Public Pages --- */
.public-layout {
min-height: 100vh;
background: var(--bg);
}
.public-header {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.public-content {
max-width: 1200px;
margin: 0 auto;
padding: 24px;
}
/* --- Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none; }
.responsive-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.responsive-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* --- AI Chat --- */
.modal-wide { max-width: 640px; }
.chat-mode-tabs {
display: flex;
gap: 4px;
padding: 12px 24px 0;
border-bottom: 1px solid var(--border-light);
}
.chat-mode-tab {
padding: 8px 16px;
font-family: var(--font-sans);
font-size: 0.857rem;
font-weight: 500;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: all 0.15s;
}
.chat-mode-tab:hover:not(:disabled) { color: var(--text); }
.chat-mode-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.chat-mode-tab:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.chat-messages {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 400px;
overflow-y: auto;
padding: 16px 24px;
scroll-behavior: smooth;
}
.chat-msg {
max-width: 85%;
padding: 10px 14px;
border-radius: var(--radius-lg);
font-size: 0.929rem;
line-height: 1.5;
word-wrap: break-word;
}
.chat-msg p { margin: 0 0 8px; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg code {
font-family: var(--font-mono);
font-size: 0.857em;
background: rgba(0,0,0,0.06);
padding: 1px 4px;
border-radius: 3px;
}
.chat-msg pre {
background: rgba(0,0,0,0.04);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 10px 12px;
overflow-x: auto;
margin: 8px 0;
font-family: var(--font-mono);
font-size: 0.857em;
line-height: 1.5;
white-space: pre-wrap;
}
.chat-msg-ai {
align-self: flex-start;
background: var(--surface-hover);
color: var(--text);
}
.chat-msg-user {
align-self: flex-end;
background: var(--primary);
color: var(--text-inverse);
}
.chat-msg-user code { background: rgba(255,255,255,0.15); }
.chat-input-row {
display: flex;
gap: 8px;
padding: 12px 24px 16px;
border-top: 1px solid var(--border-light);
}
.chat-input-row input {
flex: 1;
padding: 8px 12px;
font-family: var(--font-sans);
font-size: 0.929rem;
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text);
}
.chat-input-row input:focus {
outline: none;
border-color: var(--primary);
}
.chat-footer {
padding: 0 24px 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.chat-typing {
align-self: flex-start;
color: var(--text-muted);
font-size: 0.857rem;
font-style: italic;
padding: 4px 0;
}
/* --- Name Pick Buttons --- */
.name-pick-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.name-pick-btn {
padding: 6px 16px;
border: 1.5px solid var(--primary);
border-radius: var(--radius);
background: transparent;
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s;
}
.name-pick-btn:hover {
background: var(--primary);
color: var(--text-inverse);
}
.name-pick-btn.active {
background: var(--primary);
color: var(--text-inverse);
box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 37, 99, 235), 0.3);
}
/* --- Product Tour (Driver.js overrides) --- */
.kona-tour-popover.driver-popover {
font-family: var(--font-sans);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
max-width: min(380px, calc(100vw - 24px));
}
.kona-tour-popover .driver-popover-title {
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
}
.kona-tour-popover .driver-popover-description {
font-family: var(--font-sans);
font-size: 0.857rem;
color: var(--text-secondary);
line-height: 1.6;
}
.kona-tour-popover .driver-popover-navigation-btns {
gap: 8px;
}
.kona-tour-popover .driver-popover-prev-btn,
.kona-tour-popover .driver-popover-next-btn {
font-family: var(--font-sans);
font-size: 0.857rem;
font-weight: 500;
padding: 6px 14px;
border-radius: var(--radius-md);
border: 1.5px solid var(--border);
background: transparent;
color: var(--text);
cursor: pointer;
transition: all 0.15s var(--ease);
text-shadow: none;
}
.kona-tour-popover .driver-popover-prev-btn:hover,
.kona-tour-popover .driver-popover-next-btn:hover {
border-color: var(--text-secondary);
background: var(--surface-hover);
}
.kona-tour-popover .driver-popover-next-btn {
border-color: var(--primary);
color: var(--primary);
}
.kona-tour-popover .driver-popover-next-btn:hover {
background: var(--primary);
color: var(--text-inverse);
}
.kona-tour-popover .driver-popover-prev-btn:disabled {
opacity: 0.35;
cursor: default;
}
.kona-tour-popover .driver-popover-close-btn {
color: var(--text-muted);
}
.kona-tour-popover .driver-popover-close-btn:hover {
color: var(--text);
}
[data-theme="dark"] .kona-tour-popover.driver-popover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .kona-tour-popover .driver-popover-prev-btn,
[data-theme="dark"] .kona-tour-popover .driver-popover-next-btn {
text-shadow: none;
}
[data-theme="dark"] .kona-tour-popover .driver-popover-next-btn {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
[data-theme="dark"] .kona-tour-popover .driver-popover-next-btn:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
[data-theme="dark"] .kona-tour-popover .driver-popover-prev-btn {
background: var(--surface-hover);
border-color: var(--border);
}
[data-theme="dark"] .kona-tour-popover .driver-popover-prev-btn:hover {
background: var(--surface-active);
}
.kona-tour-popover .driver-popover-arrow-side-left.driver-popover-arrow,
.kona-tour-popover .driver-popover-arrow-side-right.driver-popover-arrow,
.kona-tour-popover .driver-popover-arrow-side-top.driver-popover-arrow,
.kona-tour-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
border-color: var(--border);
}
.kona-tour-progress {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--border-light);
font-size: 0.714rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.03em;
}
/* Tour nav flash — pulses the destination sidebar item before page transition */
@keyframes kona-nav-pulse {
0% { background: transparent; box-shadow: 0 0 0 0 transparent; }
30% { background: var(--sidebar-active-bg); box-shadow: 0 0 0 3px rgba(59, 109, 230, 0.4); }
60% { background: var(--sidebar-active-bg); box-shadow: 0 0 0 6px rgba(59, 109, 230, 0.15); }
100% { background: var(--sidebar-active-bg); box-shadow: 0 0 0 2px rgba(59, 109, 230, 0.3); }
}
.kona-tour-nav-flash {
animation: kona-nav-pulse 0.5s var(--ease) forwards;
color: var(--sidebar-text-active) !important;
border-left-color: var(--sidebar-active-border) !important;
z-index: 101;
position: relative;
}
/* --- Drag & Drop Upload Zone --- */
.drop-zone-overlay {
display: none;
position: absolute;
inset: 0;
background: rgba(59, 109, 230, 0.08);
border: 2px dashed var(--primary);
border-radius: var(--radius);
z-index: 50;
align-items: center;
justify-content: center;
pointer-events: none;
}
.drop-zone-overlay.active {
display: flex;
pointer-events: auto;
}
.drop-zone-overlay.uploading {
display: flex;
pointer-events: none;
background: rgba(59, 109, 230, 0.12);
}
.drop-zone-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: var(--primary);
background: var(--surface);
padding: 12px 24px;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.drop-zone-label i {
width: 20px;
height: 20px;
}
/* --- Audit Trail --- */
.audit-entry {
display: flex;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
font-size: 13px;
}
.audit-entry:last-child { border-bottom: none; }
.audit-icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.audit-icon i { width: 14px; height: 14px; color: var(--text-muted); }
.audit-meta { color: var(--text-muted); font-size: 12px; }
/* --- Comments --- */
.comment-item {
padding: 12px 0;
border-bottom: 1px solid var(--border-light);
}
.comment-item:last-child { border-bottom: none; }
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.comment-author { font-weight: 600; font-size: 13px; }
.comment-time { font-size: 12px; color: var(--text-muted); }
.comment-text { font-size: 14px; line-height: 1.5; }
/* --- Attachments --- */
.attachment-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius);
margin-bottom: 6px;
}
.attachment-item:last-child { margin-bottom: 0; }
.attachment-icon {
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.attachment-icon i { width: 16px; height: 16px; color: var(--text-muted); }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name {
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment-meta { font-size: 11px; color: var(--text-muted); }
/* --- Medical Summary & Timeline --- */
.medical-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.medical-summary-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 12px;
text-align: center;
}
.medical-summary-card-danger {
border-color: var(--danger-border);
background: var(--danger-light);
}
.medical-summary-value {
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
}
.medical-summary-label {
font-size: 0.786rem;
color: var(--text-muted);
margin-top: 2px;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* --- 7e-17: Medical upcoming band (pinned above the grouped sections)
Shows any record with next_due sorted ascending. Overdue entries wear a
red left stripe; due within 30 days wear amber; later entries muted. --- */
.medical-upcoming-band {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 10px 12px;
margin: 16px 0 12px 0;
}
.medical-upcoming-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
margin-bottom: 8px;
}
.medical-upcoming-list {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
}
@media (min-width: 768px) {
.medical-upcoming-list { grid-template-columns: 1fr 1fr; }
}
.medical-upcoming-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 10px;
align-items: baseline;
padding: 6px 10px;
border-radius: var(--radius-sm);
border-left: 3px solid var(--border);
background: var(--bg);
font-size: 13px;
line-height: 1.4;
}
.medical-upcoming-item-overdue {
border-left-color: var(--danger);
background: var(--danger-light);
}
.medical-upcoming-item-soon {
border-left-color: var(--warning);
background: var(--warning-light);
}
.medical-upcoming-type {
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
}
.medical-upcoming-desc {
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.medical-upcoming-due {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.medical-upcoming-item-overdue .medical-upcoming-due {
color: var(--danger);
font-weight: 600;
}
/* --- 7e-17: Medical groups (typed sections, native ) --- */
.medical-groups {
display: flex;
flex-direction: column;
gap: 6px;
}
.medical-group {
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
background: var(--surface);
overflow: hidden;
}
.medical-group-header {
display: grid;
grid-template-columns: 14px 1fr auto auto auto auto;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
list-style: none;
user-select: none;
}
.medical-group-header::-webkit-details-marker { display: none; }
.medical-group-header::marker { content: ''; }
.medical-group-header:hover {
background: var(--hover-bg, rgba(0,0,0,0.02));
}
.medical-group-chevron {
transition: transform 0.15s ease;
color: var(--text-muted);
}
.medical-group[open] .medical-group-chevron {
transform: rotate(90deg);
}
.medical-group-label {
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
}
.medical-group-count {
display: inline-block;
font-size: 11px;
color: var(--text-muted);
background: var(--border-light);
padding: 1px 8px;
border-radius: 999px;
min-width: 22px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.medical-overdue-pin {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: #fff;
background: var(--danger);
padding: 1px 7px;
border-radius: 999px;
min-width: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.medical-group-latest {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.medical-group-subtotal {
font-size: 12px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.medical-group-body {
padding: 2px 0 4px 0;
border-top: 1px solid var(--border-light);
}
/* --- 7e-17: Visit group (same-day + same-vet rollup inside a group) --- */
.medical-visit { padding: 2px 0; }
.medical-visit-multi .medical-visit-items {
margin-left: 24px;
border-left: 2px solid var(--border-light);
padding-left: 10px;
margin-right: 12px;
}
.medical-visit-header {
display: flex;
gap: 10px;
align-items: baseline;
padding: 6px 12px 2px 28px;
font-size: 12px;
line-height: 1.4;
}
.medical-visit-date {
color: var(--text-secondary);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.medical-visit-vet { color: var(--text-muted); }
/* --- 7e-17: Medical item rows --- */
.medical-item {
position: relative;
padding: 6px 12px 6px 28px;
font-size: 13px;
line-height: 1.5;
}
.medical-visit-multi .medical-item {
padding: 4px 8px 4px 4px;
}
.medical-item + .medical-item {
border-top: 1px solid var(--border-subtle, var(--border-light));
}
.medical-visit-multi .medical-item + .medical-item { border-top: none; }
.medical-item-main {
display: flex;
gap: 8px;
align-items: baseline;
flex-wrap: wrap;
padding-right: 56px;
}
.medical-item-desc {
font-weight: 500;
color: var(--text-primary);
}
.medical-item-date {
font-size: 12px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
.medical-item-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.4;
}
.medical-item-meta > * { white-space: nowrap; }
.medical-item-cost {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
margin-left: auto;
}
.medical-item-next-due { color: var(--text-secondary); }
.medical-item-overdue-text {
color: var(--danger);
font-weight: 600;
}
.medical-item-notes {
margin-top: 3px;
font-size: 12px;
color: var(--text-secondary);
line-height: 1.45;
}
.medical-item-actions {
position: absolute;
top: 4px;
right: 8px;
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.12s ease;
pointer-events: none;
}
.medical-item:hover .medical-item-actions,
.medical-item:focus-within .medical-item-actions {
opacity: 1;
pointer-events: auto;
}
@media (hover: none) {
.medical-item-actions { opacity: 0.65; pointer-events: auto; }
}
.medical-item-overdue::before {
content: '';
position: absolute;
left: 18px;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 1px;
background: var(--danger);
}
.medical-visit-multi .medical-item-overdue::before {
left: -12px;
top: 4px;
bottom: 4px;
}
/* Mobile: drop the "latest" column and subtotal to its own row so the
header doesn't wrap the label awkwardly on narrow screens. */
@media (max-width: 600px) {
.medical-group-header {
grid-template-columns: 14px 1fr auto auto;
column-gap: 6px;
}
.medical-group-latest { display: none; }
.medical-group-subtotal { display: none; }
.medical-upcoming-item {
grid-template-columns: auto minmax(0, 1fr);
}
.medical-upcoming-due { grid-column: 1 / -1; }
}
/* --- Photo AI state: ring on the inner wrapper ---
7e-16: moved from .photo-card::after to .photo-card-inner::after so
the group outline (border on .photo-card) sits OUTSIDE the AI ring
and the two signals never collide. State communicates via a ring
around the photo:
.ai-done solid success-green ring (AI finished the description)
.ai-loading pulsing primary-colored ring (pending or processing)
.ai-failed solid danger-red ring (retry via the attachments panel)
*/
.photo-card-inner.ai-done::after,
.photo-card-inner.ai-failed::after,
.photo-card-inner.ai-loading::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 3;
}
.photo-card-inner.ai-done::after {
border: 2px solid var(--success);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent);
}
.photo-card-inner.ai-failed::after {
border: 2px solid var(--danger);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent);
}
.photo-card-inner.ai-loading::after {
border: 2px solid var(--primary);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
animation: photo-ai-pulse 1.8s ease-in-out infinite;
}
@keyframes photo-ai-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.photo-card-inner.ai-loading::after { animation: none; }
}
/* --- Document Analysis Banner & Modal --- */
.doc-analysis-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--primary-light);
border: 1px solid var(--primary-border);
border-radius: var(--radius-md);
margin-bottom: 12px;
font-size: 13px;
}
.doc-analysis-banner i { color: var(--primary); flex-shrink: 0; }
.doc-analysis-banner .btn { margin-left: auto; flex-shrink: 0; }
.analysis-section-title {
font-weight: 600;
font-size: 13px;
margin: 16px 0 8px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border-light);
}
.analysis-record-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
margin-bottom: 6px;
font-size: 13px;
}
.analysis-record-card label { display: flex; align-items: flex-start; gap: 8px; flex: 1; cursor: pointer; }
.analysis-field-update {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
margin-bottom: 6px;
font-size: 13px;
}
.analysis-field-update label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.analysis-field-arrow { color: var(--text-muted); font-size: 16px; margin: 0 4px; }
.analysis-alert {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
background: var(--warning-light);
border: 1px solid var(--warning-border);
border-radius: var(--radius-md);
margin-bottom: 6px;
font-size: 13px;
}
.analysis-alert i { color: var(--warning); flex-shrink: 0; margin-top: 1px; }
/* --- Settings Modal (tabbed sidebar) --- */
.modal-settings {
max-width: 900px;
width: 95%;
height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-settings .modal-header {
flex-shrink: 0;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.modal-settings-body {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.settings-tabs {
width: 160px;
flex-shrink: 0;
border-right: 1px solid var(--border);
padding: 12px 0;
overflow-y: auto;
background: var(--bg);
}
.settings-tab {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 16px;
font-family: var(--font-sans);
font-size: 0.857rem;
font-weight: 500;
color: var(--text-secondary);
border: none;
background: transparent;
cursor: pointer;
text-align: left;
transition: all 0.15s;
border-left: 2px solid transparent;
}
.settings-tab:hover { color: var(--text); background: var(--surface-hover); }
.settings-tab.active {
color: var(--primary);
background: var(--primary-light);
border-left-color: var(--primary);
}
.settings-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-panel-area {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
min-width: 0;
}
.settings-panel { display: none; }
.settings-panel.active { display: block; }
.settings-panel .card { border: 1px solid var(--border-light); box-shadow: none; }
.settings-panel .card + .card { margin-top: 16px; }
.settings-panel .card-header { padding: 12px 16px; }
.settings-panel .card-body { padding: 16px; }
@media (max-width: 768px) {
.modal-settings { max-width: calc(100vw - 16px); width: 100%; max-height: 95vh; }
.modal-settings-body { flex-direction: column; }
.settings-tabs {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--border);
display: flex;
overflow-x: auto;
padding: 0;
flex-shrink: 0;
}
.settings-tab {
border-left: none;
border-bottom: 2px solid transparent;
white-space: nowrap;
padding: 10px 14px;
}
.settings-tab.active { border-left-color: transparent; border-bottom-color: var(--primary); }
.settings-panel-area { padding: 16px; }
}
/* --- Segmented Control --- */
.segmented-control {
display: inline-flex;
background: var(--bg-secondary);
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.segmented-control input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.segmented-control label {
padding: 6px 16px;
border-radius: 6px;
font-size: 0.857rem;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s;
user-select: none;
white-space: nowrap;
}
.segmented-control label:hover {
color: var(--text);
}
.segmented-control input[type="radio"]:checked + label {
background: var(--primary);
color: var(--text-inverse);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
/* --- Custom Select --- */
.custom-select {
position: relative;
}
.custom-select-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 0.857rem;
color: var(--text);
cursor: pointer;
transition: border-color 0.15s;
text-align: left;
}
.custom-select-btn:hover {
border-color: var(--primary);
}
.custom-select.open .custom-select-btn {
border-color: var(--primary);
}
.custom-select-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow-lg);
max-height: 240px;
overflow-y: auto;
z-index: 100;
}
.custom-select.open .custom-select-dropdown {
display: block;
}
.custom-select-option {
padding: 8px 12px;
font-size: 0.857rem;
color: var(--text);
cursor: pointer;
transition: background 0.1s;
display: flex;
align-items: center;
justify-content: space-between;
}
.custom-select-option:hover {
background: var(--surface-hover);
}
.custom-select-option.selected {
color: var(--primary);
font-weight: 500;
}
.custom-select-option.selected::after {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background: var(--primary);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
flex-shrink: 0;
}
/* --- Notification Table --- */
.notif-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.notif-table thead th {
font-size: 0.714rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
padding: 8px 12px;
text-align: center;
}
.notif-table thead th:first-child {
text-align: left;
}
.notif-table tbody tr {
transition: background 0.1s;
}
.notif-table tbody tr:nth-child(even) {
background: var(--bg-secondary);
}
.notif-table tbody tr:hover {
background: var(--surface-hover);
}
.notif-table .notif-category {
padding: 10px 12px;
font-size: 0.857rem;
font-weight: 500;
color: var(--text);
}
.notif-table .notif-check {
padding: 10px 12px;
text-align: center;
}
.notif-table .notif-check input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
}
/* --- kona credit --- */
.feedback-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--primary);
color: var(--text-inverse);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
z-index: 100;
transition: transform 0.15s, box-shadow 0.15s;
}
.feedback-fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.feedback-fab svg { width: 22px; height: 22px; }
.kona-credit {
position: fixed;
bottom: 6px;
right: 10px;
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
color: var(--border);
letter-spacing: 0.5px;
pointer-events: none;
z-index: 1;
opacity: 0.5;
}
/* Intake pipeline - candidate search cards */
.candidate-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.candidate-card-img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: var(--radius) var(--radius) 0 0;
}
.candidate-card-noimg {
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
color: var(--text-muted);
}
.candidate-card-noimg svg { width: 48px; height: 48px; }
/* --- Support Chat Panel --- */
.support-chat-panel {
position: fixed;
bottom: 84px;
right: 24px;
width: 380px;
max-height: 520px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
z-index: 101;
display: flex;
flex-direction: column;
overflow: hidden;
}
.support-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--bg-secondary);
}
.support-chat-close {
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
padding: 4px;
display: flex;
align-items: center;
}
.support-chat-close:hover { color: var(--text-primary); }
.support-chat-close svg { width: 18px; height: 18px; }
.support-chat-actions {
display: flex;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.support-chat-actions .btn { font-size: 12px; padding: 4px 10px; }
.support-chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 160px;
max-height: 320px;
}
.support-chat-bubble {
padding: 8px 12px;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
max-width: 85%;
word-wrap: break-word;
}
.support-chat-bubble-user {
background: var(--primary);
color: var(--text-inverse);
align-self: flex-end;
border-bottom-right-radius: 4px;
white-space: pre-wrap;
}
.support-chat-bubble-assistant {
background: var(--bg-secondary);
color: var(--text-primary);
align-self: flex-start;
border-bottom-left-radius: 4px;
}
.support-chat-bubble-assistant strong { font-weight: 600; }
.support-chat-bubble-assistant code {
background: var(--bg-tertiary, rgba(0,0,0,.06));
padding: 1px 4px;
border-radius: 3px;
font-size: 12px;
}
.support-chat-bubble-assistant ol,
.support-chat-bubble-assistant ul {
margin: 4px 0;
padding-left: 1.2rem;
}
.support-chat-bubble-assistant li { margin: 2px 0; }
.support-chat-bubble-assistant a {
color: var(--primary);
text-decoration: underline;
}
.support-chat-bubble-assistant br { display: block; content: ''; margin: 4px 0; }
.support-chat-footer {
padding: 6px 12px;
border-top: 1px solid var(--border);
display: flex;
justify-content: center;
}
.support-chat-input {
display: flex;
gap: 6px;
padding: 8px 12px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.support-chat-input .form-input {
flex: 1;
font-size: 13px;
padding: 8px 12px;
}
.support-chat-input .btn { flex-shrink: 0; }
@media (max-width: 480px) {
.support-chat-panel {
width: calc(100vw - 16px);
right: 8px;
bottom: 76px;
max-height: 70vh;
}
}
/* ── Search Trigger ─────────────────────────────────────── */
.search-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-secondary);
color: var(--text-muted);
font-size: 13px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
white-space: nowrap;
}
.search-trigger:hover {
border-color: var(--primary);
background: var(--bg-primary);
}
.search-trigger-kbd {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 11px;
font-family: inherit;
padding: 1px 5px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--bg-primary);
color: var(--text-muted);
line-height: 1.4;
}
@media (max-width: 768px) {
.search-trigger-text, .search-trigger-kbd { display: none; }
.search-trigger { padding: 6px 8px; }
}
/* ── Command Palette ────────────────────────────────────── */
.command-palette-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0,0,0,0.5);
display: none;
align-items: flex-start;
justify-content: center;
padding-top: min(20vh, 160px);
}
.command-palette-overlay.open { display: flex; }
.command-palette {
width: min(560px, calc(100vw - 32px));
background: var(--bg-primary);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
overflow: hidden;
}
.command-palette-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.command-palette-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 15px;
color: var(--text-primary);
font-family: inherit;
}
.command-palette-input::placeholder { color: var(--text-muted); }
.command-palette-esc {
font-size: 11px;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-muted);
background: var(--bg-secondary);
flex-shrink: 0;
}
.command-palette-results {
max-height: min(400px, 50vh);
overflow-y: auto;
padding: 6px;
}
.command-palette-group {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
padding: 8px 10px 4px;
}
.command-palette-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
color: var(--text-primary);
text-decoration: none;
cursor: pointer;
transition: background 0.1s;
}
.command-palette-item:hover, .command-palette-item.selected {
background: var(--bg-secondary);
}
.command-palette-item-title { font-size: 14px; }
.command-palette-item-sub { font-size: 12px; color: var(--text-muted); }
.command-palette-empty {
padding: 24px;
text-align: center;
color: var(--text-muted);
font-size: 14px;
}
/* Auth forms */
.auth-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-field {
display: flex;
flex-direction: column;
}
.auth-input {
width: 100%;
height: 40px;
padding: 0 14px;
/* Stronger border so the input is clearly visible next to the
Sign In button. The --border token in light mode was too pale
against --bg and made the fields look narrower/half-width. */
border: 1px solid var(--border-strong, #cbd5e1);
border-radius: var(--radius-md);
background: var(--bg);
color: var(--text);
font-size: 0.929rem;
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.auth-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-light, rgba(59,130,246,0.15));
}
.auth-input::placeholder {
color: var(--text-muted);
}
.auth-link {
font-size: 0.786rem;
color: var(--primary);
text-decoration: none;
}
.auth-link:hover {
text-decoration: underline;
}
/* OAuth buttons row */
.oauth-buttons {
display: flex;
gap: 10px;
}
.oauth-buttons > a {
flex: 1;
}
/* Facebook button — mirrors Google button structure */
.facebook-signin-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 40px;
padding: 0 12px;
background: #fff;
color: #1f1f1f;
font-family: 'Google Sans', 'Roboto', 'Inter', Arial, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
border: 1px solid #747775;
border-radius: 20px;
cursor: pointer;
text-decoration: none;
transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
-webkit-font-smoothing: antialiased;
}
.facebook-signin-btn:hover {
background: #f2f2f2;
box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
}
.facebook-signin-btn:active {
background: #e8e8e8;
box-shadow: none;
}
.facebook-signin-btn:focus-visible {
outline: 2px solid #1877F2;
outline-offset: 2px;
}
[data-theme="dark"] .facebook-signin-btn {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
[data-theme="dark"] .facebook-signin-btn:hover {
background: var(--surface-hover);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.2);
}
[data-theme="dark"] .facebook-signin-btn:active {
background: var(--surface-active);
}
/* Turnstile widget spacing */
.cf-turnstile {
margin: 4px 0;
}
/* Phase B (v0.7.0): re-assert mobile collapse for responsive-grid-2.
The default .responsive-grid-2 rule further up the file was defined
AFTER the @media (max-width: 768px) block, so source-order was
overriding the mobile override and the grid stayed 2-column at any
viewport. The practical symptom was the featured-dog photo on the
public home page rendering at ~half width on mobile (test_mobile.py
::test_hero_logo_constrained caught it). Re-stating the override
after the default fixes the ordering without reshuffling the file. */
@media (max-width: 768px) {
.responsive-grid-2 { grid-template-columns: 1fr; gap: 16px; }
.responsive-grid-3 { grid-template-columns: 1fr; gap: 12px; }
}
/* Autocomplete primitive (7e-8). Consumed via app/static/js/autocomplete.js.
The dropdown is appended to the input's parent, which must be positioned;
the JS force-sets position:relative on static parents. */
.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
margin-top: 4px;
max-height: 320px;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
.autocomplete-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border-light);
}
.autocomplete-item:last-child { border-bottom: 0; }
.autocomplete-item.is-active,
.autocomplete-item:hover {
background: var(--surface-hover);
}
.autocomplete-item-label {
color: var(--text);
font-weight: 500;
}
.autocomplete-item-sublabel {
color: var(--text-muted);
font-size: 0.85em;
margin-top: 2px;
}
.autocomplete-empty {
padding: 12px;
color: var(--text-muted);
text-align: center;
font-size: 0.9em;
}
/* Radius chip row on hub /available (7e-10 extras). */
.radius-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.radius-chip {
padding: 4px 12px;
font-size: 0.85em;
background: var(--surface);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 999px;
cursor: pointer;
transition: background-color 120ms ease;
}
.radius-chip:hover { background: var(--surface-hover); }
.radius-chip.is-active {
background: var(--primary, var(--text));
color: var(--text-inverse);
border-color: transparent;
}