/* ═══════════════════════════════════════════════════════════ 9255 W Alameda — Cool Slate Design System ═══════════════════════════════════════════════════════════ */ /* ── Google Fonts ─────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Geist+Mono:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); /* ── Cool Slate Tokens (light) ──────────────────────────── */ :root { /* ── Surfaces ── */ --page: #F4F6F9; --surface: #FBFCFD; --surface-raised: #FFFFFF; --surface-inset: #EDF0F4; --surface-selected: #EBF1FE; /* ── Text (4-level hierarchy) ── */ --ink-primary: #16191F; --ink-secondary: #4A5062; --ink-tertiary: #7C8498; --ink-muted: #A4ABB9; /* ── Borders (rgba) ── */ --border-standard: rgba(22, 25, 31, .07); --border-strong: rgba(22, 25, 31, .12); --border-subtle: rgba(22, 25, 31, .04); --border-focus: rgba(67, 120, 235, .35); /* ── Accent ── */ --accent: #4378EB; --accent-soft: #4378EB0C; --accent-hover: #3466D4; --accent-text: #3466D4; /* ── Semantic ── */ --urgent: #D6384B; --urgent-soft: #D6384B0A; --success: #1A9A5C; --success-soft: #1A9A5C0A; --warning: #C48820; --warning-soft: #C488200A; /* ── Spacing (4px base) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ── Radius ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; /* ── Typography ── */ --font: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'Geist Mono', 'SF Mono', monospace; /* User-tunable size scale. 1.00 = previous baseline. We default to 1.25 (xlarge) because Large still felt cramped per user feedback. The /settings → Display panel writes to localStorage and the bootstrap in applies via [data-font-scale] on . */ --font-scale: 1.25; --font-base: calc(14px * var(--font-scale)); --font-sm: calc(13px * var(--font-scale)); --font-xs: calc(11px * var(--font-scale)); --font-lg: calc(16px * var(--font-scale)); --font-xl: calc(20px * var(--font-scale)); --font-2xl: calc(24px * var(--font-scale)); } html[data-font-scale="compact"] { --font-scale: 0.95; } html[data-font-scale="comfortable"] { --font-scale: 1.00; } html[data-font-scale="large"] { --font-scale: 1.12; } html[data-font-scale="xlarge"] { --font-scale: 1.25; } html[data-font-family="inter"] { --font: 'Inter', system-ui, sans-serif; } html[data-font-family="system"] { --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } html[data-font-family="geist"] { --font: 'Geist', system-ui, sans-serif; } :root { /* dummy block to keep the CSS valid after the html overrides above */ /* ── MD3 backward-compat aliases ── */ --md-primary: var(--accent); --md-on-primary: #FFFFFF; --md-primary-container: var(--surface-selected); --md-on-primary-container: var(--accent-text); --md-secondary: var(--ink-secondary); --md-on-secondary: #FFFFFF; --md-secondary-container: var(--surface-inset); --md-on-secondary-container: var(--ink-primary); --md-tertiary: #6A4FA0; --md-tertiary-container: #ECDCFF; --md-error: var(--urgent); --md-error-container: var(--urgent-soft); --md-background: var(--page); --md-surface: var(--surface-raised); --md-surface-variant: var(--surface-inset); --md-surface-container: var(--surface); --md-surface-container-high: var(--surface-inset); --md-surface-container-highest: var(--surface-inset); --md-on-surface: var(--ink-primary); --md-on-surface-variant: var(--ink-secondary); --md-outline: var(--ink-tertiary); --md-outline-variant: var(--border-standard); /* Shadows / elevation — borders-only strategy, minimal shadows */ --md-elevation-1: none; --md-elevation-2: 0 1px 4px rgba(0,0,0,.04); --md-elevation-3: 0 1px 4px rgba(0,0,0,.04); --md-elevation-4: 0 2px 8px rgba(0,0,0,.06); /* Short aliases (used by leases.css, kanban.css, admin.js etc) */ --bg: var(--page); /* Note: --surface is defined above as #FBFCFD (Cool Slate near-white) */ --border: var(--border-standard); --text: var(--ink-primary); --text2: var(--ink-secondary); --text3: var(--ink-tertiary); --radius: var(--r-lg); --shadow: var(--md-elevation-1); --shadow-up: var(--md-elevation-3); --ease: cubic-bezier(.2, 0, 0, 1); /* Nav aliases */ --c-bg: var(--surface-raised); --c-bg-secondary: var(--surface); --c-bg-tertiary: var(--surface-selected); --c-border: var(--border-standard); --c-text: var(--ink-primary); --c-text-secondary: var(--ink-secondary); --c-accent: var(--accent); /* Event colors */ --c-renewal: #4378EB; --c-expiration: #D6384B; --c-tax: #C48820; --c-cam: #6A4FA0; --c-other: #1A9A5C; --c-today: var(--accent); } /* ── Dark mode ────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { /* Surfaces — navy/slate backgrounds */ --page: #0E1117; --surface: #161A22; --surface-raised: #1C2129; --surface-inset: #252A34; --surface-selected: #1A2744; /* Text — lighter for dark backgrounds */ --ink-primary: #E2E4EB; --ink-secondary: #A0A6B5; --ink-tertiary: #6B7385; --ink-muted: #4D5568; /* Borders */ --border-standard: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .14); --border-subtle: rgba(255, 255, 255, .04); --border-focus: rgba(67, 120, 235, .40); /* Accent — brighter for dark mode */ --accent: #6B9BF7; --accent-soft: #6B9BF70F; --accent-hover: #5A8AE8; --accent-text: #8BB2FF; /* Semantic — softer for dark mode */ --urgent: #F47080; --urgent-soft: #F470800F; --success: #4DD89A; --success-soft: #4DD89A0F; --warning: #E8A83A; --warning-soft: #E8A83A0F; /* MD3 compat overrides */ --md-tertiary: #D5BCFF; --md-tertiary-container: #523888; --md-elevation-2: 0 2px 8px rgba(0,0,0,.3); --md-elevation-3: 0 4px 12px rgba(0,0,0,.3); --md-elevation-4: 0 6px 16px rgba(0,0,0,.4); /* Event colors — lighter for dark */ --c-renewal: #6B9BF7; --c-expiration: #F47080; --c-tax: #E8A83A; --c-cam: #D5BCFF; --c-other: #4DD89A; --c-today: var(--accent); } } /* ── Reset ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--page); color: var(--ink-primary); -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: var(--font-base); font-weight: 400; letter-spacing: 0; } /* Common form/control sizing inherits the scale */ input, select, textarea, button { font-size: inherit; font-family: inherit; } /* ── Material Symbols helper ──────────────────────────── */ .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; user-select: none; } .material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } /* ── Navigation Bar (48px, Cool Slate) ───────────────── */ .nav-bar { position: sticky; top: 0; z-index: 200; background: var(--surface-raised); border-bottom: 1px solid var(--border-standard); box-shadow: none; padding: 0 var(--sp-6); display: flex; align-items: center; gap: 0; height: 48px; overflow-x: auto; scrollbar-width: none; } .nav-bar::-webkit-scrollbar { display: none; } .nav-brand { display: flex; align-items: center; gap: var(--sp-2); margin-right: var(--sp-4); text-decoration: none; color: var(--accent); flex-shrink: 0; } .nav-brand-icon { width: 28px; height: 28px; background: var(--accent); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: #FFFFFF; } .nav-brand-icon .material-symbols-rounded { font-size: 16px; } .nav-brand-name { font-size: 14px; font-weight: 800; letter-spacing: -.5px; color: var(--accent); } .nav-divider { width: 1px; height: 20px; background: var(--border-standard); margin: 0 var(--sp-2); flex-shrink: 0; } .nav-bar a:not(.nav-brand) { position: relative; display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); font-size: 13px; font-weight: 500; color: var(--ink-muted); text-decoration: none; white-space: nowrap; border-radius: 100px; transition: all 0.15s var(--ease); letter-spacing: 0; } .nav-bar a:not(.nav-brand):hover { color: var(--ink-primary); background: var(--surface-inset); } .nav-bar a:not(.nav-brand).active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .nav-bar a svg { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; } /* ── Shell ────────────────────────────────────────────── */ .shell { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) 80px; } /* ── Home page 2-column grid ──────────────────────────── */ /* Left: priority panels (alerts/late/auto-post) — capped, internally scrolls so REPS form on the right stays put. Right: tools (REPS, quick links, OneDrive, dropzone) — sticky on wider screens. Collapses to single column under 1024px. */ .home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-6); } .home-left { display: flex; flex-direction: column; gap: var(--sp-4); /* Cap so the form on the right isn't pushed off-screen on tall lists */ max-height: calc(100vh - 140px); overflow-y: auto; padding-right: var(--sp-2); } .home-left > section { margin-bottom: 0 !important; } .home-right { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: var(--sp-3); } .home-right > section { margin-bottom: 0 !important; } @media (max-width: 1024px) { .home-grid { grid-template-columns: 1fr; } .home-left { max-height: none; overflow: visible; padding-right: 0; } .home-right { position: static; } } /* ── Page Header ──────────────────────────────────────── */ .page-header { margin-bottom: var(--sp-6); } .page-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--ink-primary); margin-bottom: var(--sp-1); } .page-subtitle { font-size: 14px; color: var(--ink-secondary); } /* ── Section title ────────────────────────────────────── */ .section-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-3); } /* ── Cards ────────────────────────────────────────────── */ .md-card { background: var(--surface-raised); border-radius: var(--r-md); border: 1px solid var(--border-standard); overflow: hidden; transition: box-shadow .2s var(--ease); } .md-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,.04); } .md-card-elevated { border-color: var(--border-strong); } .md-card-tonal { background: var(--surface); border-color: transparent; } /* ── Service Cards ────────────────────────────────────── */ .services { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-8); } .card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3) var(--sp-4); background: var(--surface-raised); border: 1px solid var(--border-standard); border-radius: var(--r-md); text-decoration: none; color: var(--ink-primary); transition: box-shadow .2s var(--ease), transform .2s var(--ease), background .15s var(--ease); cursor: pointer; } .card:hover { box-shadow: 0 1px 4px rgba(0,0,0,.04); transform: translateY(-1px); background: var(--surface); } .card:active { transform: translateY(0); box-shadow: none; } .card-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--surface-selected); color: var(--accent-text); flex-shrink: 0; } .card-icon svg { width: 22px; height: 22px; } .card-icon .material-symbols-rounded { font-size: 22px; } /* Colored icon containers per service */ .card-icon.green { background: #E6F5EC; color: #1A9A5C; } .card-icon.orange { background: #FFF0D6; color: #C48820; } .card-icon.purple { background: #F0E6FF; color: #6A4FA0; } .card-icon.red { background: #FDE8EA; color: #D6384B; } .card-icon.teal { background: #E0F5F3; color: #006B64; } .card-icon.blue { background: var(--surface-selected); color: var(--accent-text); } @media (prefers-color-scheme: dark) { .card-icon.green { background: #132E1E; color: #4DD89A; } .card-icon.orange { background: #332200; color: #E8A83A; } .card-icon.purple { background: #2D1F48; color: #D5BCFF; } .card-icon.red { background: #3D1218; color: #F47080; } .card-icon.teal { background: #002F2C; color: #4DD8D0; } } .card-body { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .card-name { font-size: 13px; font-weight: 600; letter-spacing: 0; } .card-desc { font-size: 11px; color: var(--ink-tertiary); } /* ── OneDrive Section ─────────────────────────────────── */ .onedrive-section { margin-bottom: var(--sp-8); } .onedrive-banner { background: linear-gradient(135deg, #0078D4 0%, #00BCF2 100%); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); display: flex; align-items: center; gap: 16px; text-decoration: none; color: #fff; transition: filter .2s var(--ease), transform .2s var(--ease); box-shadow: 0 4px 16px rgba(0,120,212,.25); } .onedrive-banner:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,120,212,.35); } .onedrive-banner:active { transform: translateY(0); } .onedrive-logo { width: 40px; height: 40px; flex-shrink: 0; } .onedrive-info { flex: 1; min-width: 0; } .onedrive-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; letter-spacing: .01em; } .onedrive-subtitle { font-size: 12px; opacity: .85; } .onedrive-arrow { font-size: 20px; opacity: .8; flex-shrink: 0; } .onedrive-setup { background: var(--surface); border: 1px dashed var(--border-standard); border-radius: var(--r-lg); padding: 20px 24px; display: flex; align-items: center; gap: 16px; color: var(--md-on-surface-variant); } .onedrive-setup-icon { width: 40px; height: 40px; background: var(--md-surface-container-high); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--md-outline); font-size: 22px; } .onedrive-setup-text { flex: 1; } .onedrive-setup-title { font-size: 14px; font-weight: 500; color: var(--md-on-surface); margin-bottom: 2px; } .onedrive-setup-hint { font-size: 12px; } .onedrive-setup-btn { appearance: none; border: 1px solid var(--md-outline); background: var(--md-surface); color: var(--md-primary); font-family: var(--font); font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all .15s var(--ease); white-space: nowrap; flex-shrink: 0; } .onedrive-setup-btn:hover { background: var(--md-primary-container); border-color: var(--md-primary); } /* ── Dropzone ─────────────────────────────────────────── */ .dropzone-section { margin-bottom: var(--sp-8); } .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-6); border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-raised); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); text-align: center; } .dropzone:hover, .dropzone.dragover { border-color: var(--md-primary); background: var(--md-primary-container); } .dropzone-icon { width: 40px; height: 40px; color: var(--md-outline); } .dropzone:hover .dropzone-icon, .dropzone.dragover .dropzone-icon { color: var(--md-primary); } .dropzone-text { font-size: 15px; font-weight: 500; color: var(--md-on-surface); } .dropzone-sub { font-size: 12px; color: var(--md-on-surface-variant); } /* ── Dropzone Grid (two zones side by side) ───────────── */ .dropzone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } @media (max-width: 760px) { .dropzone-grid { grid-template-columns: 1fr; } } .dropzone-ai { border-color: var(--accent); border-style: dashed; } .dropzone-ai:hover, .dropzone-ai.dragover { border-color: var(--accent-hover); background: var(--surface-selected); } .ai-ingest-status { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface-selected); border-radius: var(--r-md); border: 1px solid var(--accent); } .ai-ingest-progress { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--accent-text); } @keyframes spin { to { transform: rotate(360deg); } } .spinning { animation: spin 1s linear infinite; } /* Drop modal */ .drop-modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.52); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 24px; } .drop-modal.open { display: flex; } .drop-modal-content { background: var(--surface-raised); border-radius: var(--r-lg); width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 48px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.04); } .drop-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; } .drop-modal-header h3 { font-size: 20px; font-weight: 400; color: var(--md-on-surface); } .drop-modal-close { appearance: none; border: none; background: none; width: 40px; height: 40px; border-radius: 100px; font-size: 18px; color: var(--md-on-surface-variant); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease); } .drop-modal-close:hover { background: var(--md-surface-container); } .drop-modal-body { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 16px; } .drop-field { display: flex; flex-direction: column; gap: 6px; } .drop-field label { font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); letter-spacing: .04em; text-transform: uppercase; } .drop-field select, .drop-field input, #newPropertyFields input, #newUnitFields input, #newDocTypeField input { font-family: var(--font); font-size: 14px; padding: 12px 16px; border: 1px solid var(--md-outline); border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface); outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .drop-field select:focus, .drop-field input:focus, #newPropertyFields input:focus, #newUnitFields input:focus, #newDocTypeField input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent); } #newPropertyFields, #newUnitFields, #newDocTypeField { flex-direction: column; gap: 8px; } #newPropertyFields input, #newUnitFields input, #newDocTypeField input { margin: 0; } .drop-files { display: flex; flex-direction: column; gap: 4px; } .drop-file-item { font-size: 13px; color: var(--md-on-surface-variant); padding: 4px 0; display: flex; align-items: center; gap: 8px; } .color-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .drop-submit { font-family: var(--font); font-size: 14px; font-weight: 500; padding: 12px 24px; border: none; border-radius: 100px; background: var(--md-primary); color: var(--md-on-primary); cursor: pointer; transition: all .15s var(--ease); letter-spacing: .01em; } .drop-submit:hover { background: var(--accent-hover); box-shadow: 0 1px 4px rgba(0,0,0,.04); } .drop-submit:disabled { opacity: .38; cursor: not-allowed; } .drop-submit-row { display: flex; gap: 10px; } .drop-submit-row .drop-submit { flex: 1; } .drop-submit-secondary { background: var(--md-surface-container) !important; color: var(--md-on-surface) !important; border: 1px solid var(--md-outline-variant) !important; } .drop-submit-secondary:hover { background: var(--md-surface-container-high) !important; box-shadow: var(--md-elevation-1) !important; filter: none !important; } /* ── File Grid (Chonky) ───────────────────────────────── */ .filegrid-section { margin-bottom: var(--sp-8); } .filegrid-section #fileGrid { border: 1px solid var(--border-standard); border-radius: var(--r-lg); overflow: hidden; background: var(--md-surface); } #fileGrid [class*="gridFileEntry"], #fileGrid [class*="gridFileEntry"] * { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; } #fileGrid [class*="gridFileEntryName"][class*="Container"], #fileGrid [class*="gridFileEntryNameContainer"] { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: var(--md-on-surface) !important; text-align: center !important; line-height: 1.3 !important; display: flex !important; justify-content: center !important; align-items: flex-start !important; width: 100% !important; padding-top: 4px !important; } #fileGrid [class*="gridFileEntryName"]:not([class*="Container"]) { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; } #fileGrid [class*="fileListWrapper"] { padding: 8px !important; } /* ── Month Calendar (Lease Events) ────────────────────── */ .month-calendar { margin-bottom: var(--sp-8); background: var(--surface-raised); border-radius: var(--r-lg); padding: var(--sp-5); border: 1px solid var(--border-standard); } .month-cal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .month-cal-nav { display: flex; align-items: center; gap: 8px; } .month-cal-title { font-size: 17px; font-weight: 500; min-width: 160px; text-align: center; color: var(--md-on-surface); } .month-cal-today-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-primary); font-family: var(--font); font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 100px; cursor: pointer; transition: all .15s var(--ease); } .month-cal-today-btn:hover { background: var(--md-primary-container); } .month-cal-legend { display: flex; gap: 10px; flex-wrap: wrap; } /* Grid layout */ .month-cal-grid { user-select: none; } .month-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; } .month-cal-dow-row { margin-bottom: 4px; } .month-cal-dow { text-align: center; font-size: 11px; font-weight: 500; color: var(--md-on-surface-variant); padding: 6px 0; text-transform: uppercase; letter-spacing: .04em; } /* Day cells */ .month-cal-cell { min-height: 80px; padding: 4px 6px; background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: 8px; position: relative; transition: background .12s var(--ease); overflow: hidden; } .month-cal-cell.outside { opacity: .35; } .month-cal-cell.has-events { cursor: pointer; } .month-cal-cell.has-events:hover { background: var(--md-surface-container); border-color: var(--md-primary); } .month-cal-cell.today { border-color: var(--md-primary); background: var(--md-primary-container); } .month-cal-day { display: inline-block; font-size: 12px; font-weight: 400; color: var(--md-on-surface-variant); line-height: 1; margin-bottom: 4px; } .month-cal-day.today-num { background: var(--md-primary); color: var(--md-on-primary); width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; font-weight: 500; } /* Event dots / pills */ .month-cal-dots { display: flex; flex-direction: column; gap: 2px; } .month-cal-pill { display: block; font-size: 10px; font-weight: 500; color: #fff; padding: 1px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; } .month-cal-more { font-size: 10px; font-weight: 500; color: var(--md-on-surface-variant); padding: 1px 5px; line-height: 16px; } /* Detail panel */ .month-cal-detail { margin-top: 16px; background: var(--md-surface-container); border-radius: 12px; padding: 16px; border: 1px solid var(--md-outline-variant); } .month-cal-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--md-on-surface); } .month-cal-detail-close { appearance: none; border: none; background: none; font-size: 20px; color: var(--md-on-surface-variant); cursor: pointer; padding: 0 4px; line-height: 1; } .month-cal-detail-close:hover { color: var(--md-on-surface); } .month-cal-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .month-cal-detail-item { display: flex; align-items: flex-start; gap: 10px; } .month-cal-detail-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; margin-top: 3px; } .month-cal-detail-info { display: flex; flex-direction: column; gap: 2px; } .month-cal-detail-title { font-size: 13px; font-weight: 500; color: var(--md-on-surface); } .month-cal-detail-meta { font-size: 11px; color: var(--md-on-surface-variant); } /* Responsive: stack pills horizontally on small screens */ @media (max-width: 768px) { .month-cal-cell { min-height: 48px; padding: 3px 4px; } .month-cal-pill { font-size: 0; width: 8px; height: 8px; padding: 0; border-radius: 50%; display: inline-block; } .month-cal-dots { flex-direction: row; gap: 3px; flex-wrap: wrap; } .month-cal-more { font-size: 9px; } } /* ── Year Planner ─────────────────────────────────────── */ .planner { margin-bottom: 32px; } .planner-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .planner-nav { display: flex; align-items: center; gap: 6px; } .planner-legend { display: flex; gap: 10px; flex-wrap: wrap; } .planner-year { font-size: 15px; font-weight: 500; min-width: 44px; text-align: center; } .nav-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: var(--md-surface); border-radius: 100px; width: 32px; height: 32px; font-size: 16px; color: var(--md-on-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease), box-shadow .15s var(--ease); } .nav-btn:hover { background: var(--md-surface-container); box-shadow: var(--md-elevation-1); } /* Legend */ .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--md-on-surface-variant); font-weight: 500; } .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .dot-renewal { background: var(--c-renewal); } .dot-expiration { background: var(--c-expiration); } .dot-tax { background: var(--c-tax); } .dot-cam { background: var(--c-cam); } .dot-other { background: var(--c-other); } /* Add event button */ .add-event-btn { appearance: none; border: none; background: var(--md-primary); color: var(--md-on-primary); padding: 8px 16px; font-family: var(--font); font-size: 13px; font-weight: 500; border-radius: 100px; cursor: pointer; transition: all .15s var(--ease); letter-spacing: .01em; } .add-event-btn:hover { background: var(--accent-hover); box-shadow: 0 1px 4px rgba(0,0,0,.04); } /* View switcher */ .view-switcher { display: flex; gap: 2px; margin-left: auto; background: var(--md-surface-container); border-radius: 100px; padding: 3px; } .view-btn { appearance: none; border: none; background: transparent; padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); cursor: pointer; border-radius: 100px; transition: all .15s var(--ease); font-family: var(--font); } .view-btn:hover { color: var(--md-on-surface); } .view-btn.active { background: var(--md-surface); color: var(--md-primary); box-shadow: var(--md-elevation-1); font-weight: 600; } /* Grid: 12 month columns */ .planner-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; } .month-col { display: flex; flex-direction: column; gap: 1px; } .month-label { font-size: 10px; font-weight: 600; color: var(--md-on-surface-variant); text-align: center; padding-bottom: 5px; letter-spacing: .06em; text-transform: uppercase; } .day-cell { width: 100%; height: 15px; border-radius: 3px; background: var(--md-surface-container); cursor: default; position: relative; transition: transform .1s var(--ease); font-size: 7px; color: var(--md-on-surface-variant); padding: 1px 2px; line-height: 1; } .day-cell:hover { transform: scale(2.2); z-index: 10; } .day-cell.today { outline: 2px solid var(--c-today); outline-offset: -1px; } .day-cell.has-event { cursor: pointer; color: rgba(255,255,255,0.95); } .day-cell.empty { background: transparent; } .day-cell.evt-renewal { background: var(--c-renewal); } .day-cell.evt-expiration { background: var(--c-expiration); } .day-cell.evt-tax { background: var(--c-tax); } .day-cell.evt-cam { background: var(--c-cam); } .day-cell.evt-other { background: var(--c-other); } /* ── Classic View ─────────────────────────────────────── */ .view-classic { display: flex; flex-direction: column; border: 1px solid var(--border-standard); border-radius: var(--r-lg); overflow: hidden; background: var(--md-surface); } .classic-header { display: grid; grid-template-columns: 90px repeat(31, 1fr); background: var(--md-surface-container); border-bottom: 1px solid var(--md-outline-variant); } .classic-day-num { font-size: 10px; font-weight: 500; color: var(--md-on-surface-variant); text-align: center; padding: 8px 0; border-left: 1px solid var(--md-outline-variant); } .classic-day-num.today-col { background: var(--md-primary); color: var(--md-on-primary); } .classic-month-container { display: grid; grid-template-columns: 90px 1fr; border-bottom: 1px solid var(--md-outline-variant); } .classic-month-container:last-child { border-bottom: none; } .classic-month-cell { display: flex; align-items: flex-start; justify-content: flex-end; padding: 8px 12px; background: var(--md-surface-container); border-right: 1px solid var(--md-outline-variant); } .classic-month-name { font-size: 12px; font-weight: 500; color: var(--md-on-surface); } .classic-days-container { position: relative; min-height: 28px; } .classic-days-grid { display: grid; grid-template-columns: repeat(31, 1fr); height: 100%; position: absolute; inset: 0; } .classic-day-cell { border-left: 1px solid var(--md-outline-variant); min-height: 100%; } .classic-day-cell.empty { background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--md-outline-variant) 3px, var(--md-outline-variant) 4px); opacity: .2; } .classic-day-cell.today { background: color-mix(in srgb, var(--md-primary) 12%, transparent); } .classic-events-layer { position: absolute; inset: 0; pointer-events: none; } .classic-event-bar { position: absolute; height: 18px; padding: 2px 8px; font-size: 10px; font-weight: 500; color: #fff; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; pointer-events: auto; line-height: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .classic-event-bar:hover { filter: brightness(1.1); z-index: 10; } .classic-event-bar.evt-renewal { background: var(--c-renewal); } .classic-event-bar.evt-expiration { background: var(--c-expiration); } .classic-event-bar.evt-tax { background: var(--c-tax); } .classic-event-bar.evt-cam { background: var(--c-cam); } .classic-event-bar.evt-other { background: var(--c-other); } .classic-event-bar.continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } .classic-event-bar.continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ── Column View ──────────────────────────────────────── */ .view-column { display: flex; flex-direction: column; gap: 1px; } .column-header { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--md-outline-variant); margin-bottom: 4px; } .column-day-name { font-size: 10px; font-weight: 600; color: var(--md-on-surface-variant); text-align: center; text-transform: uppercase; letter-spacing: .06em; } .column-row { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 2px; } .column-week-label { font-size: 10px; color: var(--md-outline); padding: 4px 6px 4px 0; text-align: right; } .column-day { min-height: 48px; padding: 5px; background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: 6px; display: flex; flex-direction: column; gap: 2px; } .column-day.outside { background: transparent; border-color: transparent; } .column-day.today { border-color: var(--md-primary); border-width: 2px; } .column-date { font-size: 10px; font-weight: 500; color: var(--md-on-surface-variant); } .column-event { font-size: 9px; padding: 2px 4px; border-radius: 4px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .column-event.evt-renewal { background: var(--c-renewal); } .column-event.evt-expiration { background: var(--c-expiration); } .column-event.evt-tax { background: var(--c-tax); } .column-event.evt-cam { background: var(--c-cam); } .column-event.evt-other { background: var(--c-other); } /* ── Event Modal ──────────────────────────────────────── */ .event-modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.52); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 24px; } .event-modal.open { display: flex; } .event-modal-content { background: var(--surface-raised); border-radius: var(--r-lg); width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 48px rgba(0,0,0,.24); } .event-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; } .event-modal-header h3 { font-size: 20px; font-weight: 400; color: var(--md-on-surface); } .event-modal-close { appearance: none; border: none; background: none; width: 40px; height: 40px; border-radius: 100px; font-size: 18px; color: var(--md-on-surface-variant); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s var(--ease); } .event-modal-close:hover { background: var(--md-surface-container); } .event-modal-body { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 16px; } .event-field { display: flex; flex-direction: column; gap: 6px; } .event-field label { font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); letter-spacing: .04em; text-transform: uppercase; } .event-field input, .event-field select { font-family: var(--font); font-size: 14px; padding: 12px 16px; border: 1px solid var(--md-outline); border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface); outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .event-field input:focus, .event-field select:focus { border-color: var(--md-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 20%, transparent); } .event-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .new-category-row { display: flex; gap: 8px; } .new-category-row input[type="text"] { flex: 1; } .new-category-row input[type="color"] { width: 48px; height: 44px; padding: 4px; border: 1px solid var(--md-outline); border-radius: 8px; cursor: pointer; background: var(--md-surface); } .new-category-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .new-category-row input[type="color"]::-webkit-color-swatch { border-radius: 4px; border: none; } #newCategoryFields input[type="text"] { font-family: var(--font); font-size: 14px; padding: 12px 16px; border: 1px solid var(--md-outline); border-radius: 8px; background: var(--md-surface); color: var(--md-on-surface); outline: none; margin-bottom: 8px; width: 100%; } #newCategoryFields input[type="text"]:focus { border-color: var(--md-primary); } .event-type-hint { font-size: 12px; color: var(--md-outline); background: var(--md-surface-container); padding: 10px 14px; border-radius: 10px; } .event-type-hint .hint-label { font-weight: 600; color: var(--md-on-surface-variant); } .event-type-hint em { font-style: normal; color: var(--md-on-surface-variant); } .event-submit { font-family: var(--font); font-size: 14px; font-weight: 500; padding: 12px 24px; border: none; border-radius: 100px; background: var(--md-primary); color: var(--md-on-primary); cursor: pointer; transition: all .15s var(--ease); letter-spacing: .01em; } .event-submit:hover { background: var(--accent-hover); box-shadow: 0 1px 4px rgba(0,0,0,.04); } .event-submit:disabled { opacity: .38; cursor: not-allowed; } /* ── Upcoming Events ──────────────────────────────────── */ .upcoming { margin-bottom: 32px; } .upcoming-list { list-style: none; } .upcoming-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: 14px; } .upcoming-item:last-child { border-bottom: none; } .upcoming-date { font-weight: 500; color: var(--md-on-surface-variant); white-space: nowrap; min-width: 56px; font-size: 12px; font-variant-numeric: tabular-nums; } .upcoming-dot { width: 6px; height: 6px; border-radius: 2px; flex-shrink: 0; transform: translateY(1px); } .upcoming-text { color: var(--md-on-surface); } .upcoming-empty { font-size: 13px; color: var(--md-outline); padding: 10px 0; } /* ── Tooltip ──────────────────────────────────────────── */ .tooltip { position: fixed; pointer-events: none; background: var(--md-surface-container-highest); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--md-on-surface); box-shadow: var(--md-elevation-3); opacity: 0; transition: opacity .12s var(--ease); z-index: 1000; max-width: 260px; line-height: 1.4; } .tooltip.visible { opacity: 1; } /* ── Review Queue ─────────────────────────────────────── */ .review-section { background: var(--surface-raised); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); border: 2px solid var(--urgent-soft); } .review-badge { display: inline-block; background: var(--urgent); color: white; font-size: 11px; font-weight: 700; border-radius: 100px; padding: 2px 8px; margin-left: 8px; vertical-align: middle; } .review-refresh-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: none; font-family: var(--font); font-size: 13px; color: var(--md-primary); padding: 6px 14px; border-radius: 100px; cursor: pointer; } .review-list { display: flex; flex-direction: column; gap: 16px; } .review-card { border: 1px solid var(--md-outline-variant); border-radius: 12px; overflow: hidden; } .review-card-done { opacity: 0.5; pointer-events: none; } .review-imported-msg { padding: 16px; text-align: center; font-size: 14px; color: var(--success); } .review-card-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--md-outline-variant); } .review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .review-classification { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 500; } .review-cls-coi { background: var(--success-soft); color: var(--success); } .review-cls-payment { background: var(--surface-selected); color: var(--accent); } .review-cls-lease { background: var(--urgent-soft); color: var(--urgent); } .review-cls-other, .review-cls-bank_statement, .review-cls-tax, .review-cls-application { background: var(--surface-inset); color: var(--ink-tertiary); } .review-confidence { font-size: 12px; font-weight: 500; } .conf-high { color: var(--success); } .conf-mid { color: var(--warning); } .conf-low { color: var(--urgent); } .review-from, .review-date { font-size: 12px; color: var(--md-outline); } .review-subject { font-size: 14px; font-weight: 500; } .review-action-hint { font-size: 13px; color: var(--md-on-surface-variant); margin-top: 4px; } .review-card-body { padding: 14px 16px; } .review-tenant-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .review-tenant-row label { font-size: 12px; font-weight: 500; color: var(--md-outline); min-width: 90px; } .review-tenant-input { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-family: var(--font); font-size: 14px; background: var(--md-surface); color: var(--md-on-surface); outline: none; } .review-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; } .review-field label { display: block; font-size: 11px; font-weight: 500; color: var(--md-outline); margin-bottom: 4px; text-transform: capitalize; } .review-field-input { width: 100%; padding: 7px 10px; border: 1px solid var(--md-outline-variant); border-radius: 6px; font-family: var(--font); font-size: 13px; background: var(--md-surface); color: var(--md-on-surface); outline: none; box-sizing: border-box; } .review-field-input:focus { border-color: var(--md-primary); } .review-attachments { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--md-outline); } .review-att-chip { background: var(--md-surface-variant); border-radius: 6px; padding: 3px 8px; font-size: 12px; } .review-card-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--md-outline-variant); background: var(--md-surface-variant); } .review-reject-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: none; font-family: var(--font); font-size: 13px; color: var(--md-outline); padding: 8px 16px; border-radius: 100px; cursor: pointer; } .review-approve-btn { appearance: none; border: none; background: var(--success); color: white; font-family: var(--font); font-size: 13px; font-weight: 500; padding: 8px 20px; border-radius: 100px; cursor: pointer; } .review-approve-btn:disabled { opacity: 0.5; cursor: default; } /* ── Document Review Split Panel ─────────────────────────────────────── */ .review-split { display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--border-standard); border-radius: var(--r-lg); overflow: hidden; min-height: 500px; background: var(--surface-raised); } .review-list-panel { border-right: 1px solid var(--border-standard); overflow-y: auto; max-height: 700px; background: var(--surface); } .review-list-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background .12s var(--ease); border-left: 3px solid transparent; } .review-list-item:hover { background: var(--surface-raised); } .review-list-item.active { background: var(--surface-selected); } .review-list-item.conf-high { border-left-color: var(--success); } .review-list-item.conf-mid { border-left-color: var(--warning); } .review-list-item.conf-low { border-left-color: var(--urgent); } .review-list-icon { font-size: 18px; color: var(--ink-tertiary); flex-shrink: 0; margin-top: 2px; } .review-list-info { flex: 1; min-width: 0; } .review-list-title { font-size: 13px; font-weight: 500; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-list-meta { font-size: 11px; color: var(--ink-tertiary); display: flex; gap: var(--sp-2); align-items: center; margin-top: 2px; } .review-list-conf { font-weight: 600; font-size: 11px; } .review-list-source { font-size: 10px; padding: 1px 6px; border-radius: 100px; background: var(--surface-inset); color: var(--ink-tertiary); font-weight: 500; } .review-detail-panel { padding: var(--sp-5) var(--sp-6); overflow-y: auto; max-height: 700px; } .review-detail-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-muted); font-size: 14px; } .review-detail-title-input { width: 100%; font-size: 16px; font-weight: 600; font-family: var(--font); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-standard); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink-primary); outline: none; margin-bottom: var(--sp-3); box-sizing: border-box; } .review-detail-title-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--border-focus); } .review-doc-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); min-height: 300px; } .review-preview-pane { border: 1px solid var(--border-standard); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; } .review-preview-header { padding: var(--sp-2) var(--sp-3); background: var(--surface-inset); font-size: 11px; font-weight: 600; color: var(--ink-tertiary); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--border-standard); } .review-preview-body { flex: 1; padding: var(--sp-3); overflow-y: auto; max-height: 350px; background: var(--surface-raised); } .review-preview-body iframe { width: 100%; height: 300px; border: none; } .review-preview-body img { max-width: 100%; height: auto; } .review-ocr-text { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; white-space: pre-wrap; color: var(--ink-secondary); } .review-ocr-rendered { font-family: var(--font); font-size: 13px; line-height: 1.6; color: var(--ink-primary); } .review-ocr-rendered h1, .review-ocr-rendered h2, .review-ocr-rendered h3, .review-ocr-rendered h4, .review-ocr-rendered h5, .review-ocr-rendered h6 { font-weight: 600; color: var(--ink-primary); margin: 12px 0 6px; } .review-ocr-rendered h1 { font-size: 18px; } .review-ocr-rendered h2 { font-size: 16px; } .review-ocr-rendered h3 { font-size: 14px; } .review-ocr-rendered strong { font-weight: 600; } .review-ocr-rendered em { font-style: italic; } .review-ocr-rendered ul { margin: 6px 0; padding-left: 20px; } .review-ocr-rendered li { margin-bottom: 2px; } .review-ocr-rendered hr { border: none; border-top: 1px solid var(--border-standard); margin: 12px 0; } .review-ocr-rendered p { margin-bottom: 8px; } .review-ocr-rendered ol, .review-ocr-rendered ul { margin: 6px 0; padding-left: 24px; } .review-ocr-rendered ol { list-style: decimal; } .review-ocr-rendered u { text-decoration: underline; } .ocr-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; } .ocr-table th, .ocr-table td { padding: 5px 8px; border: 1px solid var(--border-standard); text-align: left; } .ocr-table th { background: var(--surface-inset); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-tertiary); } .ocr-table tr:hover td { background: var(--surface-selected); } .ocr-image-badge { display: inline-block; padding: 2px 8px; background: var(--surface-inset); border: 1px solid var(--border-standard); border-radius: 100px; font-size: 11px; color: var(--ink-tertiary); margin: 2px 0; } .review-ocr-partial-banner { background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: 12px; color: var(--warning); display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); } .review-ocr-partial-btn { appearance: none; border: 1px solid var(--warning); background: none; color: var(--warning); font-family: var(--font); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 100px; cursor: pointer; } .review-conf-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .review-conf-dot.high { background: var(--success); } .review-conf-dot.mid { background: var(--warning); } .review-conf-dot.low { background: var(--urgent); } .review-extracted-card { background: var(--surface-inset); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-4); } .review-extracted-summary { font-size: 14px; color: var(--ink-secondary); line-height: 1.5; margin: 0 0 var(--sp-3) 0; } .review-chip-group { margin-bottom: var(--sp-3); } .review-chip-group:last-child { margin-bottom: 0; } .review-chip-label { font-size: 11px; font-weight: 600; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 4px; margin-bottom: var(--sp-1); } .review-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); } .review-chip { display: inline-block; padding: 3px 10px; background: var(--surface-raised); border: 1px solid var(--border-standard); border-radius: 100px; font-size: 12px; color: var(--ink-primary); } .review-alert-banner { background: var(--urgent-soft); border: 1px solid var(--urgent); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: 12px; color: var(--urgent); margin-bottom: var(--sp-4); } .review-alert-banner ul { margin: 4px 0 0 16px; padding: 0; } .review-detail-actions { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6); border-top: 1px solid var(--border-standard); justify-content: flex-end; background: var(--surface-raised); position: sticky; bottom: 0; z-index: 10; } /* Dismiss button on list items */ .review-list-dismiss { appearance: none; border: none; background: none; color: var(--ink-muted); font-size: 14px; cursor: pointer; padding: 2px; line-height: 1; border-radius: 4px; opacity: 0; transition: opacity .15s var(--ease); flex-shrink: 0; margin-left: auto; } .review-list-item:hover .review-list-dismiss { opacity: 1; } .review-list-dismiss:hover { color: var(--urgent); background: var(--urgent-soft); } .review-detail-row { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); align-items: center; flex-wrap: wrap; } .review-detail-row label { font-size: 12px; font-weight: 500; color: var(--ink-tertiary); min-width: 80px; } .review-detail-row select, .review-detail-row input { flex: 1; min-width: 150px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-standard); border-radius: var(--r-sm); font-family: var(--font); font-size: 13px; background: var(--surface-raised); color: var(--ink-primary); } @media (max-width: 760px) { .review-split { grid-template-columns: 1fr; } .review-list-panel { border-right: none; border-bottom: 1px solid var(--border-standard); max-height: 250px; } .review-doc-preview { grid-template-columns: 1fr; } } /* ── Automation Status Panel ──────────────────────────── */ .automations-section { background: var(--surface-raised); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .automations-updated { font-size: 12px; color: var(--md-outline); } .automation-list { display: flex; flex-direction: column; gap: 8px; } .automation-loading, .automation-empty { font-size: 14px; color: var(--md-outline); padding: 12px 0; } .automation-error { color: var(--urgent); } .automation-card { border: 1px solid var(--md-outline-variant); border-radius: 12px; overflow: hidden; } .automation-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; } .automation-card-header:hover { background: var(--md-surface-variant); } .automation-dot, .history-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dot-success { background: var(--success); } .dot-error { background: var(--urgent); } .dot-skipped, .dot-never { background: var(--ink-muted); } .automation-name { font-size: 14px; font-weight: 500; flex: 1; } .automation-last { font-size: 12px; color: var(--md-outline); } .automation-trigger-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: none; color: var(--md-primary); font-size: 12px; padding: 4px 10px; border-radius: 100px; cursor: pointer; transition: background .15s; } .automation-trigger-btn:hover { background: var(--md-primary-container); } .automation-trigger-btn:disabled { opacity: 0.5; cursor: default; } .automation-chevron { font-size: 18px; color: var(--md-outline); width: 16px; text-align: center; } .automation-summary { font-size: 13px; color: var(--md-on-surface-variant); padding: 0 16px 12px; } .automation-history { border-top: 1px solid var(--md-outline-variant); padding: 8px 0; } .history-row { display: flex; align-items: center; gap: 10px; padding: 6px 16px; font-size: 12px; } .history-row:hover { background: var(--md-surface-variant); } .history-time { color: var(--md-outline); white-space: nowrap; } .history-summary { flex: 1; color: var(--md-on-surface-variant); } .history-duration { color: var(--md-outline); white-space: nowrap; } /* ── Admin Tables ─────────────────────────────────────── */ .admin-section { background: var(--surface-raised); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); } .admin-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--md-outline-variant); } .admin-tab { appearance: none; border: none; background: none; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--md-outline); padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .admin-tab:hover { color: var(--md-on-surface); } .admin-tab.active { color: var(--md-primary); border-bottom-color: var(--md-primary); } .admin-toolbar { margin-bottom: 12px; display: flex; gap: 8px; justify-content: flex-end; } .admin-add-btn { appearance: none; border: 1px solid var(--md-outline-variant, var(--border)); background: var(--md-surface, var(--surface)); color: var(--md-primary, var(--accent, #4378EB)); font-family: var(--font); font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background .15s, border-color .15s; display: inline-flex; align-items: center; gap: 4px; } .admin-add-btn:hover { background: var(--surface-inset, #f7f7fa); border-color: var(--md-primary, var(--accent, #4378EB)); } .admin-add-btn.sm { font-size: 11.5px; padding: 4px 10px; } .admin-edit-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: none; font-family: var(--font); font-size: 12px; color: var(--md-primary); padding: 4px 10px; border-radius: 6px; cursor: pointer; } .admin-edit-btn:hover { background: var(--md-primary-container); } .admin-preview-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: none; font-family: var(--font); font-size: 12px; color: var(--md-tertiary); padding: 4px 10px; border-radius: 6px; cursor: pointer; } .admin-preview-btn:hover { background: var(--md-tertiary-container); } .admin-sign-btn { appearance: none; border: 1px solid var(--md-primary); background: var(--md-primary); font-family: var(--font); font-size: 12px; color: var(--md-on-primary); padding: 4px 10px; border-radius: 6px; cursor: pointer; } .admin-sign-btn:hover { opacity: 0.85; } .admin-sign-btn:disabled { opacity: 0.5; cursor: wait; } .lease-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .signing-status { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 12px; white-space: nowrap; } .signing-status.signed { background: var(--success-soft); color: var(--success); } .signing-status.pending { background: var(--warning-soft); color: var(--warning); } .admin-table { width: 100%; border-collapse: collapse; font-size: 13px; } .admin-table th { text-align: left; padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--md-outline); border-bottom: 1px solid var(--md-outline-variant); } .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--md-outline-variant); color: var(--md-on-surface); } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: var(--md-surface-variant); } .admin-empty, .admin-loading { font-size: 14px; color: var(--md-outline); padding: 16px 0; } .admin-error { font-size: 14px; color: var(--urgent); padding: 12px 0; } .admin-empty-row { color: var(--md-outline); font-style: italic; text-align: center; } .building-group { margin-bottom: 24px; } .building-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 0; flex-wrap: wrap; } .building-type { font-size: 12px; color: var(--md-outline); } .building-address { font-size: 13px; color: var(--md-on-surface-variant); flex: 1; } .unit-status, .lease-status { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 500; } .status-vacant { background: var(--urgent-soft); color: var(--urgent); } .status-occupied { background: var(--success-soft); color: var(--success); } .status-maintenance { background: var(--warning-soft); color: var(--warning); } .status-active { background: var(--success-soft); color: var(--success); } .status-draft { background: var(--accent-soft); color: var(--accent); } .status-sent { background: var(--warning-soft); color: var(--warning); } .status-expired, .status-terminated { background: var(--surface-inset); color: var(--ink-tertiary); } /* ── Admin modal ──────────────────────────────────────── */ .admin-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.52); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; } .admin-modal-content { background: var(--surface-raised); border-radius: var(--r-lg); width: 100%; max-width: 480px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 48px rgba(0,0,0,.24); } .admin-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--md-outline-variant); } .admin-modal-header h3 { font-size: 18px; font-weight: 400; margin: 0; } .admin-modal-close { appearance: none; border: none; background: none; font-size: 22px; color: var(--md-outline); cursor: pointer; line-height: 1; } .admin-modal-body { overflow-y: auto; padding: 20px 24px; } .modal-field { margin-bottom: 16px; } .modal-field label { display: block; font-size: 12px; font-weight: 500; color: var(--md-outline); margin-bottom: 6px; } .modal-field input, .modal-field select { width: 100%; padding: 10px 14px; border: 1px solid var(--md-outline-variant); border-radius: 8px; font-family: var(--font); font-size: 14px; background: var(--md-surface); color: var(--md-on-surface); outline: none; box-sizing: border-box; transition: border-color .15s; } .modal-field input:focus, .modal-field select:focus { border-color: var(--md-primary); } .admin-modal-error { background: var(--urgent-soft); color: var(--urgent); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; } .admin-modal-footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; } .admin-cancel-btn { appearance: none; border: 1px solid var(--md-outline-variant); background: none; color: var(--md-primary); font-family: var(--font); font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 100px; cursor: pointer; } .admin-save-btn { appearance: none; border: none; background: var(--md-primary); color: var(--md-on-primary); font-family: var(--font); font-size: 14px; font-weight: 500; padding: 10px 24px; border-radius: 100px; cursor: pointer; } .admin-save-btn:disabled { opacity: 0.5; cursor: default; } /* ── Document Library Grid ────────────────────────────── */ .doc-grid-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); } .doc-grid-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; } .doc-grid-filters select, .doc-grid-filters input { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-standard); border-radius: var(--r-sm); font-family: var(--font); font-size: 12px; background: var(--surface-raised); color: var(--ink-primary); } .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); } .doc-card { border: 1px solid var(--border-standard); border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: var(--surface-raised); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .doc-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .doc-card-thumb { height: 140px; background: var(--surface-inset); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .doc-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .doc-card-thumb .doc-icon { font-size: 48px; color: var(--ink-muted); } .doc-card-media-badge { position: absolute; top: 6px; right: 6px; padding: 2px 6px; background: rgba(0,0,0,.6); color: #fff; border-radius: 100px; font-size: 10px; font-weight: 500; } .doc-card-body { padding: var(--sp-3); } .doc-card-title { font-size: 12px; font-weight: 500; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .doc-card-meta { font-size: 11px; color: var(--ink-tertiary); display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; } .doc-card-tag { display: inline-block; padding: 1px 6px; background: var(--surface-inset); border-radius: 100px; font-size: 10px; color: var(--ink-secondary); } .doc-card-type { display: inline-block; padding: 1px 6px; background: var(--accent-soft, rgba(67,120,235,.1)); border-radius: 100px; font-size: 10px; color: var(--accent); font-weight: 500; } /* Drop zone for document libraries */ .doc-grid-dropzone { border: 2px dashed var(--border-standard); border-radius: var(--r-md); padding: var(--sp-4); text-align: center; cursor: pointer; color: var(--ink-tertiary); font-size: 13px; transition: border-color .15s, background .15s; margin-bottom: var(--sp-4); } .doc-grid-dropzone:hover, .doc-grid-dropzone.dragover { border-color: var(--accent); background: var(--surface-selected); } /* ── Document Preview Popover ─────────────────────────── */ .doc-preview-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: fadeIn .15s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .doc-preview-modal { background: var(--surface-raised); border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(0,0,0,.2); max-width: 800px; width: 90vw; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; animation: slideUp .2s ease; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .doc-preview-modal.expanded { max-width: 1100px; display: grid; grid-template-columns: 1fr 380px; } .doc-preview-modal.expanded .doc-preview-sidebar { display: flex; } .doc-preview-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-standard); } .doc-preview-title { font-size: 15px; font-weight: 600; color: var(--ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .doc-preview-close { appearance: none; border: none; background: none; font-size: 20px; color: var(--ink-tertiary); cursor: pointer; padding: 4px 8px; border-radius: var(--r-sm); } .doc-preview-close:hover { background: var(--surface-inset); } .doc-preview-content { flex: 1; overflow: auto; display: flex; flex-direction: column; } .doc-preview-content iframe { width: 100%; flex: 1; min-height: 400px; border: none; } .doc-preview-content img { max-width: 100%; height: auto; margin: auto; display: block; } .doc-preview-content video { width: 100%; max-height: 500px; } .doc-preview-footer { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-standard); flex-wrap: wrap; } .doc-preview-btn { padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 500; font-family: var(--font); cursor: pointer; border: 1px solid var(--border-standard); background: var(--surface-raised); color: var(--ink-primary); transition: background .1s; } .doc-preview-btn:hover { background: var(--surface-inset); } .doc-preview-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .doc-preview-btn.primary:hover { background: var(--accent-hover); } /* Sidebar for expanded/detail mode */ .doc-preview-sidebar { display: none; flex-direction: column; overflow-y: auto; border-left: 1px solid var(--border-standard); padding: var(--sp-4); } .doc-preview-sidebar h4 { font-size: 11px; font-weight: 600; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-2); } .doc-preview-sidebar .doc-meta-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; } .doc-preview-sidebar .doc-meta-label { color: var(--ink-tertiary); } .doc-preview-sidebar .doc-meta-value { color: var(--ink-primary); font-weight: 500; } .doc-preview-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-3); } .doc-preview-tag-add { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); } .doc-preview-tag-add select, .doc-preview-tag-add input { padding: var(--sp-1) var(--sp-2); font-size: 12px; font-family: var(--font); border: 1px solid var(--border-standard); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink-primary); } .doc-preview-ocr { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--surface-inset); border-radius: var(--r-md); max-height: 200px; overflow-y: auto; } /* ── Responsive ───────────────────────────────────────── */ @media (max-width: 760px) { .doc-preview-modal.expanded { grid-template-columns: 1fr; } .doc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .shell { padding: 16px 16px 80px; } .services { grid-template-columns: repeat(3, 1fr); gap: 8px; } .card { padding: 14px 8px 12px; } .card-icon { width: 36px; height: 36px; } .card-icon svg { width: 18px; height: 18px; } .nav-brand-name { display: none; } .onedrive-banner, .onedrive-setup { flex-wrap: wrap; } } @media (max-width: 480px) { .services { grid-template-columns: repeat(2, 1fr); } } /* ── Notes / Activity Log ─────────────────────────────── */ .notes-section { background: var(--surface-raised); border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-6); border: 1px solid var(--border-standard); } .notes-capture { margin-bottom: var(--sp-4); } .notes-capture textarea { width: 100%; padding: var(--sp-3); border: 1px solid var(--border-standard); border-radius: var(--r-md); font-family: var(--font); font-size: 14px; background: var(--surface-raised); color: var(--ink-primary); resize: vertical; min-height: 60px; outline: none; box-sizing: border-box; } .notes-capture textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--border-focus); } .notes-capture-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-2); flex-wrap: wrap; gap: var(--sp-2); } .notes-capture-left, .notes-capture-right { display: flex; gap: var(--sp-2); align-items: center; } .notes-capture-left select { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border-standard); border-radius: var(--r-sm); font-family: var(--font); font-size: 12px; background: var(--surface-raised); color: var(--ink-primary); } .notes-ai-btn { appearance: none; border: 1px solid var(--accent); background: var(--accent-soft, rgba(67,120,235,.08)); color: var(--accent); font-family: var(--font); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 100px; cursor: pointer; display: flex; align-items: center; gap: 4px; } .notes-ai-btn:hover { background: var(--surface-selected); } .notes-save-btn { appearance: none; border: none; background: var(--accent); color: #fff; font-family: var(--font); font-size: 12px; font-weight: 500; padding: 6px 16px; border-radius: 100px; cursor: pointer; } .notes-save-btn:hover { background: var(--accent-hover); } .notes-feed { display: flex; flex-direction: column; gap: var(--sp-2); } .note-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); } .note-item:last-child { border-bottom: none; } .note-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-inset); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-tertiary); } .note-body { flex: 1; min-width: 0; } .note-content { font-size: 13px; color: var(--ink-primary); line-height: 1.5; margin-bottom: 4px; } .note-meta { font-size: 11px; color: var(--ink-tertiary); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .note-tag { padding: 1px 6px; background: var(--surface-inset); border-radius: 100px; font-size: 10px; color: var(--ink-secondary); } .note-type-icon { font-size: 16px; } /* ── REPS time log widget (home page) ──────────────────── */ .reps-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md, 12px); padding: 14px 16px; } .reps-widget-inner { display: flex; flex-direction: column; gap: 12px; } .reps-widget-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .reps-widget-stat { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; background: var(--surface-inset, #f7f7fa); border-radius: 8px; transition: background .15s; } .reps-widget-stat:hover { background: var(--surface-hover, #eef0f4); } .reps-widget-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-tertiary); font-weight: 600; } .reps-widget-stat-value { font-size: 18px; font-weight: 700; color: var(--ink-primary); margin-top: 2px; } /* Always 2 rows because the home grid right-column never gets wide enough for a 5-field single-row layout. Top row: date/hours/type. Bottom: desc spans, Log button on the right. */ .reps-widget-form { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 1fr) minmax(110px, 1.1fr); grid-template-areas: "date hours type" "desc desc log"; gap: 8px; align-items: stretch; } .reps-widget-form #repsDate { grid-area: date; min-width: 0; } .reps-widget-form #repsHours { grid-area: hours; min-width: 0; } .reps-widget-form #repsType { grid-area: type; min-width: 0; } .reps-widget-form #repsDescription { grid-area: desc; min-width: 0; } .reps-widget-form #repsLogBtn { grid-area: log; } .reps-widget-form input, .reps-widget-form select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--surface); color: var(--ink-primary); min-width: 0; } .reps-widget-form input:focus, .reps-widget-form select:focus { outline: none; border-color: var(--accent, #4378EB); box-shadow: 0 0 0 3px rgba(67,120,235,0.12); } .reps-widget-form button { padding: 8px 14px; background: var(--accent, #4378EB); color: #fff; border: none; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s; } .reps-widget-form button:hover { background: var(--accent-hover, #3263d3); } .reps-widget-form button:disabled { background: var(--ink-4); cursor: not-allowed; } .reps-widget-status { font-size: 12px; color: var(--ink-tertiary); min-height: 14px; } .reps-widget-status.success { color: var(--good); } .reps-widget-status.error { color: var(--bad); } /* ── Free Cash Flow → Debt Paydown chip (home page) ─────── */ .cash-sweep-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md, 12px); padding: 14px 16px; } .cash-sweep-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cash-sweep-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-tertiary); } .cash-sweep-link { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none; } .cash-sweep-link:hover { text-decoration: underline; } .cash-sweep-hero { display: flex; flex-direction: column; align-items: flex-start; margin: 10px 0 12px; } .cash-sweep-hero-value { font-size: 30px; font-weight: 800; color: var(--ink-primary); line-height: 1.1; } .cash-sweep-hero-value.positive { color: var(--success); } .cash-sweep-hero-value.negative { color: var(--urgent); } .cash-sweep-hero-label { font-size: 12px; color: var(--ink-tertiary); margin-top: 2px; } .cash-sweep-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cash-sweep-stat { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 12px; background: var(--surface-inset, #f7f7fa); border-radius: 8px; } .cash-sweep-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-tertiary); font-weight: 600; } .cash-sweep-stat-value { font-size: 15px; font-weight: 700; color: var(--ink-primary); margin-top: 2px; } .cash-sweep-note { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--ink-tertiary); } @media (max-width: 900px) { .reps-widget-form { grid-template-columns: 1fr 1fr; } .reps-widget-form input[type="text"], .reps-widget-form button { grid-column: 1 / -1; } .reps-widget-stats { grid-template-columns: repeat(2, 1fr); } } /* ── Inbox Alerts panel (home page) ─────────────────── */ .alerts-panel { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: var(--r-md, 12px); padding: 12px 16px 8px; margin-bottom: 20px; } .alerts-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .alerts-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-primary); } .alerts-badge { background: var(--warn); color: #fff; border-radius: 100px; padding: 1px 9px; font-size: 12px; font-weight: 700; min-width: 20px; text-align: center; } .alerts-meta { font-size: 11px; color: var(--ink-tertiary); font-weight: 500; } .alerts-ack-all { font-size: 12px; background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--ink-secondary); } .alerts-ack-all:hover { background: var(--surface-inset, #f7f7fa); } .alerts-list { list-style: none; margin: 0; padding: 0; } .alert-item { border-top: 1px solid var(--border-subtle, #eee); padding: 10px 0; } .alert-item:first-child { border-top: none; } .alert-row { display: flex; gap: 10px; align-items: flex-start; } .alert-severity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex-shrink: 0; margin-top: 6px; } .alert-urgent .alert-severity-dot { background: var(--bad); } .alert-action .alert-severity-dot { background: var(--warn); } .alert-body { flex: 1; min-width: 0; } .alert-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--ink-tertiary); margin-bottom: 2px; } .alert-category { text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; background: var(--surface-inset, #f7f7fa); padding: 1px 6px; border-radius: 100px; } .alert-urgent .alert-category { background: var(--bad-soft); color: var(--bad); } .alert-action .alert-category { background: var(--warn-soft); color: var(--warn); } .alert-tenant { font-weight: 600; color: var(--ink-secondary); } .alert-time { margin-left: auto; } .alert-subject { font-size: 14px; font-weight: 600; color: var(--ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-reason { font-size: 12px; color: var(--ink-secondary); margin-top: 2px; line-height: 1.4; } .alert-from { font-size: 11px; color: var(--ink-tertiary); margin-top: 3px; } .alert-ack { flex-shrink: 0; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; color: var(--ink-secondary); align-self: flex-start; } .alert-ack:hover { background: var(--surface-inset, #f7f7fa); } .alert-ack:disabled { opacity: 0.6; cursor: wait; } /* ── Inbox triage UX additions ──────────────────────────── */ .alerts-toolbar { display: flex; align-items: center; gap: 4px; } .alerts-tab { font-size: 12px; padding: 4px 10px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--ink-tertiary); cursor: pointer; font-weight: 500; } .alerts-tab:hover { color: var(--ink-primary); background: var(--surface-inset, #f7f7fa); } .alerts-tab.active { color: var(--ink-primary); background: var(--surface-inset, #f7f7fa); border-color: var(--border); } .alerts-tab[data-count]::after { content: attr(data-count); margin-left: 6px; font-size: 10px; opacity: 0.6; } .alerts-tab[data-count="0"]::after { display: none; } .alerts-bulk { font-size: 12px; padding: 4px 10px; border-radius: 6px; background: var(--accent, #4378EB); color: #fff; border: none; cursor: pointer; margin-left: 8px; } .alerts-bulk:disabled { background: var(--ink-4); cursor: not-allowed; } .alerts-help { margin-left: 4px; font-size: 11px; } .alerts-help summary { cursor: pointer; padding: 2px 7px; border-radius: 100px; background: var(--surface-inset, #f7f7fa); color: var(--ink-tertiary); list-style: none; } .alerts-help summary::-webkit-details-marker { display: none; } .alerts-help-pop { position: absolute; right: 16px; margin-top: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 11px; color: var(--ink-secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.06); z-index: 10; } .alerts-help kbd { background: var(--surface-inset, #f7f7fa); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); font-family: ui-monospace, monospace; font-size: 10px; } .alerts-empty { padding: 24px; text-align: center; color: var(--ink-tertiary); font-size: 13px; } .alert-check { margin-top: 4px; cursor: pointer; } .alert-item.cursor { background: rgba(67,120,235,0.05); } .alert-item.selected { background: rgba(67,120,235,0.12); } .alert-item.cursor.selected { background: rgba(67,120,235,0.18); } .alert-actions { display: flex; gap: 4px; align-self: flex-start; } .alert-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; } .alert-btn:hover { background: var(--surface-inset, #f7f7fa); border-color: var(--accent, #4378EB); } .alert-ack { display: none !important; } /* legacy single-action button hidden */ /* View-all link in alerts toolbar */ .alerts-viewall { font-size: 12px; color: var(--accent, #4378EB); text-decoration: none; padding: 4px 8px; margin-left: 4px; } .alerts-viewall:hover { text-decoration: underline; } /* Non-alert items show a calmer dot (when home panel renders all inbox items) */ .alert-normal .alert-severity-dot { background: #94a3b8; } .alert-normal .alert-category { background: var(--surface-inset, #f7f7fa); color: var(--ink-secondary); } .alerts-selectall { font-size: 11px; padding: 4px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; color: var(--ink-secondary); font-family: inherit; } .alerts-selectall:hover { background: var(--surface-inset, #f7f7fa); color: var(--ink-primary); }