/* * Shared utility classes */ /* ── Square icon / avatar containers ─────────────────────────────────────── */ .icon-box-24 { width: 24px; height: 24px; } .icon-box-28 { width: 28px; height: 28px; } .icon-box-30 { width: 30px; height: 30px; } .icon-box-32 { width: 32px; height: 32px; } .icon-box-36 { width: 36px; height: 36px; } .icon-box-40 { width: 40px; height: 40px; } .icon-box-44 { width: 44px; height: 44px; } .icon-box-48 { width: 48px; } .icon-box-52 { width: 52px; } /* ── Max-width helpers (pixel values Bootstrap does not provide) ─────────── */ .mw-200 { max-width: 200px; } .mw-260 { max-width: 260px; } .mw-280 { max-width: 280px; } .mw-420 { max-width: 420px; } .mw-440 { max-width: 440px; } .mw-560 { max-width: 560px; } .mw-600 { max-width: 600px; } .mw-640 { max-width: 640px; } .mw-720 { max-width: 720px; } /* ── Fixed pixel widths for form controls and table columns ─────────────── */ .w-px-80 { width: 80px; } .w-px-110 { width: 110px; } .w-px-130 { width: 130px; } .w-px-140 { width: 140px; } .w-px-150 { width: 150px; } .w-px-160 { width: 160px; } .w-px-180 { width: 180px; } .w-px-200 { width: 200px; } .w-px-220 { width: 220px; } .w-px-280 { width: 280px; } /* ── Sub-small font sizes (Bootstrap .small = .875rem; these go smaller) ── */ .text-xs { font-size: .75rem !important; } .text-xxs { font-size: .70rem !important; } .text-2xs { font-size: .65rem !important; } /* ── White-space preservation (notes, pre-formatted text) ──────────────── */ .text-prewrap { white-space: pre-wrap; } /* ── Slim progress bar (password-strength indicator) ────────────────────── */ .progress-xs { height: 4px; } .pw-strength { width: 0; transition: width .2s ease; } /* ── Icon-only square action buttons (appointment list row actions) ─────── */ .btn-sq { width: 2.15rem; } /* ── Table column: sequential row number ───────────────────────────────── */ .col-num { width: 2.5rem; } /* ── Offcanvas width overrides ──────────────────────────────────────────── */ .offcanvas-260 { width: 260px; } .offcanvas-quick { --bs-offcanvas-width: min(540px, 100vw); } /* ── Error / empty-state hero icon ─────────────────────────────────────── */ .icon-hero { font-size: 5rem; line-height: 1; } /* ── Sticky mobile header needs a higher z-index than Bootstrap's navbar ── */ .z-200 { z-index: 200; } /* ── Bot-protection: off-screen ── */ .bp-trap { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ * MAIN DESIGN LAYER * * Frosted-glass aesthetic layered on top of Bootstrap 5.3. * CSS custom properties scoped to [data-bs-theme] keep the layer fully * synchronised with Bootstrap's own light/dark engine. * * Layer map * §1 Design tokens (light) * §2 Design tokens (dark) * §3 Canvas — gradient body background * §4 Sidebar (desktop + admin) * §5 Sticky navigation bars (public navbar + mobile app header) * §6 Cards * §7 Offcanvas panels * §8 Modals * §9 Dropdowns * §10 Form controls * §11 Buttons — glows and lifts * §12 Nav links — sidebar & mobile nav * §13 List groups * §14 Tables * §15 Alerts * §16 Badges * §17 Progress bars * §18 Public page sections and footer * §19 Scrollbar (webkit) * §20 Focus rings * §21 Reduced-motion / accessibility reset * ... * ═══════════════════════════════════════════════════════════════════════════ */ /* ── §1 Design tokens — light mode ─────────────────────────────────────── */ :root, [data-bs-theme="light"] { /* Gradient canvas painted on */ --ta-canvas: linear-gradient( 135deg, #eef2ff 0%, /* soft indigo */ #f5f0ff 42%, /* soft violet */ #ecfdf5 100% /* soft mint */ ); /* Blur recipe applied to every glass surface */ --ta-glass-blur: blur(18px) saturate(190%); /* Surface backgrounds */ --ta-glass-bg: rgba(255, 255, 255, 0.62); /* sidebar, navbar */ --ta-card-bg: rgba(255, 255, 255, 0.72); /* .card */ --ta-panel-bg: rgba(255, 255, 255, 0.84); /* offcanvas, modals */ /* Borders */ --ta-glass-border: rgba(120, 90, 255, 0.13); /* Shadows */ --ta-shadow-card: 0 2px 14px rgba(100, 80, 220, 0.09), 0 1px 3px rgba(0,0,0,0.05); --ta-shadow-card-hover: 0 6px 28px rgba(100, 80, 220, 0.18), 0 2px 8px rgba(0,0,0,0.07); --ta-shadow-sidebar: 3px 0 28px rgba(100, 80, 220, 0.12); --ta-shadow-navbar: 0 2px 20px rgba(100, 80, 220, 0.10); --ta-shadow-float: 0 20px 60px rgba(100, 80, 220, 0.18), 0 4px 16px rgba(0,0,0,0.07); /* Form inputs */ --ta-input-bg: rgba(255, 255, 255, 0.72); --ta-input-border: rgba(120, 90, 255, 0.20); --ta-input-bg-focus: rgba(255, 255, 255, 0.98); --ta-input-glow: rgba(99, 102, 241, 0.17); /* Nav active pill */ --ta-nav-active-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.24); } /* ── §2 Design tokens — dark mode ──────────────────────────────────────── */ [data-bs-theme="dark"] { --ta-canvas: linear-gradient( 135deg, #0d1117 0%, #111827 55%, #0f1b2d 100% ); --ta-glass-blur: blur(20px) saturate(160%); --ta-glass-bg: rgba(255, 255, 255, 0.055); --ta-card-bg: rgba(255, 255, 255, 0.065); --ta-panel-bg: rgba(18, 24, 38, 0.88); --ta-glass-border: rgba(255, 255, 255, 0.10); --ta-shadow-card: 0 2px 14px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.24); --ta-shadow-card-hover: 0 6px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.32); --ta-shadow-sidebar: 4px 0 28px rgba(0,0,0,0.30); --ta-shadow-navbar: 0 2px 20px rgba(0,0,0,0.28); --ta-shadow-float: 0 24px 64px rgba(0,0,0,0.62), 0 4px 16px rgba(0,0,0,0.35); --ta-input-bg: rgba(255, 255, 255, 0.07); --ta-input-border: rgba(255, 255, 255, 0.12); --ta-input-bg-focus: rgba(255, 255, 255, 0.11); --ta-input-glow: rgba(99, 102, 241, 0.24); --ta-nav-active-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.32); } /* ── §3 Canvas ──────────────────────────────────────────────────────────── */ body { background: var(--ta-canvas) !important; background-attachment: fixed !important; min-height: 100vh; } /* ── §4 Sidebar ─────────────────────────────────────────────────────────── */ .sidebar { background: var(--ta-glass-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-right-color: var(--ta-glass-border) !important; box-shadow: var(--ta-shadow-sidebar); } /* ── §5 Sticky navigation bars ─────────────────────────────────────────── */ /* Public marketing navbar */ nav.navbar.sticky-top, /* App mobile sticky header */ header.sticky-top { background: var(--ta-glass-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-bottom-color: var(--ta-glass-border) !important; box-shadow: var(--ta-shadow-navbar); } /* ── §6 Cards ───────────────────────────────────────────────────────────── */ .card { --bs-card-border-radius: 14px; /* propagates to .card-header etc. */ background: var(--ta-card-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-color: var(--ta-glass-border) !important; box-shadow: var(--ta-shadow-card) !important; transition: box-shadow .22s ease; } .card:hover { box-shadow: var(--ta-shadow-card-hover) !important; } .card-header, .card-footer { border-color: var(--ta-glass-border) !important; } /* Only make headers/footers transparent when no explicit Bootstrap bg-* class is present. An explicit bg-primary (or any bg-*) must keep its own colour — otherwise the card header text becomes invisible in light mode. */ .card-header:not([class*="bg-"]), .card-footer:not([class*="bg-"]) { background: transparent !important; } /* ── §7 Offcanvas panels ────────────────────────────────────────────────── */ .offcanvas { background: var(--ta-panel-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-color: var(--ta-glass-border) !important; } .offcanvas-header { border-bottom-color: var(--ta-glass-border) !important; } /* ── Tables inside cards: strip last-row bottom border (mirrors list-group-flush) */ .card .table > tbody > tr:last-child > * { border-bottom-width: 0; } /* ── §8 Modals ──────────────────────────────────────────────────────────── */ .modal-content { --bs-modal-border-radius: 16px; background: var(--ta-panel-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-color: var(--ta-glass-border) !important; box-shadow: var(--ta-shadow-float); } .modal-header, .modal-footer { border-color: var(--ta-glass-border) !important; } /* ── §9 Dropdowns ───────────────────────────────────────────────────────── */ .dropdown-menu { --bs-dropdown-border-radius: 12px; background: var(--ta-panel-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-color: var(--ta-glass-border) !important; box-shadow: var(--ta-shadow-float); } .dropdown-divider { border-top-color: var(--ta-glass-border) !important; } /* ── §10 Form controls ───────────────────────────────────────────────────── */ .form-control, .form-select { background-color: var(--ta-input-bg) !important; border-color: var(--ta-input-border) !important; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .form-control:focus, .form-select:focus { background-color: var(--ta-input-bg-focus) !important; border-color: rgba(var(--bs-primary-rgb), 0.50) !important; box-shadow: 0 0 0 .2rem var(--ta-input-glow) !important; } /* Plaintext inputs keep transparent background */ .form-control-plaintext { background-color: transparent !important; border-color: transparent !important; } /* ── §11 Buttons — lifts ─────────────────────────────────────────────────── */ .btn { transition: transform .14s ease; } .btn:active { transform: translateY(1px) !important; } .btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover { transform: translateY(-1px); } /* ── §12 Nav links — sidebar & mobile nav ────────────────────────────────── */ .sidebar .nav-link, .mobile-nav .nav-link { transition: color .18s ease, background .18s ease, transform .14s ease; } .sidebar .nav-link:hover, .mobile-nav .nav-link:hover { transform: translateX(2px); } /* ── §13 List groups ─────────────────────────────────────────────────────── */ /* Items inside glass cards should be transparent so the card bg shows through */ .card > .list-group .list-group-item, .card > .card-body .list-group-item, .list-group-flush .list-group-item { background-color: transparent !important; border-color: var(--ta-glass-border) !important; } /* ── §14 Tables ──────────────────────────────────────────────────────────── */ .table { --bs-table-bg: transparent; --bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.03); --bs-table-hover-bg: rgba(var(--bs-primary-rgb), 0.05); --bs-table-border-color: var(--ta-glass-border); } .table thead th { border-bottom-color: var(--ta-glass-border) !important; } /* Light header row — subtle tint in light mode only; let Bootstrap own dark mode */ [data-bs-theme="light"] .table-light { --bs-table-bg: rgba(var(--bs-primary-rgb), 0.04); } /* ── §15 Alerts ──────────────────────────────────────────────────────────── */ .alert { border-radius: 10px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ── §16 Badges ──────────────────────────────────────────────────────────── */ .badge.text-bg-primary { box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.38); } .badge.text-bg-success { box-shadow: 0 2px 6px rgba(var(--bs-success-rgb), 0.38); } .badge.text-bg-danger { box-shadow: 0 2px 6px rgba(var(--bs-danger-rgb), 0.38); } .badge.text-bg-warning { box-shadow: 0 2px 6px rgba(var(--bs-warning-rgb), 0.30); } /* ── §17 Progress bars ───────────────────────────────────────────────────── */ .progress { background-color: rgba(var(--bs-primary-rgb), 0.10) !important; border-radius: 100px; overflow: hidden; } .progress-bar { border-radius: 100px; box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.42); } /* ── §18 Public page sections & footer ───────────────────────────────────── */ /* Let the canvas bleed through marketing sections */ section.bg-body, section.bg-body-tertiary { background: transparent !important; } /* Give the CTA section a richer backdrop since it uses a solid bg-primary */ section.bg-primary { -webkit-backdrop-filter: none; backdrop-filter: none; } /* Public site footer: frosted glass strip */ footer.bg-body-tertiary { background: var(--ta-glass-bg) !important; -webkit-backdrop-filter: var(--ta-glass-blur); backdrop-filter: var(--ta-glass-blur); border-top-color: var(--ta-glass-border) !important; } /* ── §19 Scrollbar (webkit — Chrome, Edge, Safari) ───────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--bs-primary-rgb), 0.24); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--bs-primary-rgb), 0.46); } /* ── §20 Focus rings ─────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid rgba(var(--bs-primary-rgb), 0.55); outline-offset: 2px; border-radius: 4px; } /* ── §21 Reduced-motion / accessibility reset ────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .card, .btn, .btn-primary, .btn-success, .btn-danger, .btn-warning, .form-control, .form-select, .sidebar .nav-link, .mobile-nav .nav-link { transition: none !important; transform: none !important; } .sidebar, header.sticky-top, nav.navbar.sticky-top, .card, .offcanvas, .modal-content, .dropdown-menu, footer.bg-body-tertiary, .alert { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .hero-float-card { animation: none !important; opacity: 1 !important; } .appt-hint-card { animation: none !important; } } /* ── §22 Layout — sidebar widths, positioning, and nav links ────────────── */ /* Nav-link pill styles shared by every sidebar and the mobile offcanvas */ .sidebar .nav-link, .mobile-nav .nav-link { color: var(--bs-secondary-color); border-radius: .375rem; } .sidebar .nav-link:hover, .sidebar .nav-link.active, .mobile-nav .nav-link:hover, .mobile-nav .nav-link.active { color: var(--bs-primary); background: var(--bs-primary-bg-subtle); } .sidebar .nav-link .fa-fw, .mobile-nav .nav-link .fa-fw { width: 1.25em; } /* Tenant-app sidebar: 240 px, fixed on md+ */ .sidebar-app { width: 240px; min-width: 240px; } @media (min-width: 768px) { .sidebar-app { position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; } .sidebar-app ~ main { margin-left: 240px; } } /* Main content — prevent flex children from expanding wider than the viewport. */ .app-main, .app-main-content { min-width: 0; } /* ── Sidebar storage quota widget ────────────────────────────────────────── */ .sidebar-storage { font-size: .72rem; } .sidebar-storage-bar { height: 5px; border-radius: 3px; background: var(--bs-secondary-bg); } /* Admin sidebar: 220 px, fixed on md+, hidden on mobile (offcanvas replaces it) */ .sidebar-admin { width: 220px; min-width: 220px; } @media (min-width: 768px) { .sidebar-admin { position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 100; } .sidebar-admin ~ main { margin-left: 220px; } } /* ── §23 Public marketing site ───────────────────────────────────────────── */ /* Brand gradient tokens — strategic depth accents, theme-aware */ :root, [data-bs-theme="light"] { --ta-grad-brand: linear-gradient(135deg, #0d6efd 0%, #6366f1 50%, #8b5cf6 100%); --ta-grad-brand-soft: linear-gradient(135deg, rgba(13,110,253,.10) 0%, rgba(139,92,246,.10) 100%); --ta-hero-glow: radial-gradient(closest-side, rgba(99,102,241,.32), transparent 78%); --ta-cta-grad: linear-gradient(135deg, #0d6efd 0%, #6366f1 55%, #8b5cf6 100%); } [data-bs-theme="dark"] { --ta-grad-brand: linear-gradient(135deg, #3b82f6 0%, #818cf8 50%, #a78bfa 100%); --ta-grad-brand-soft: linear-gradient(135deg, rgba(59,130,246,.16) 0%, rgba(167,139,250,.16) 100%); --ta-hero-glow: radial-gradient(closest-side, rgba(129,140,248,.30), transparent 78%); --ta-cta-grad: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 55%, #7c3aed 100%); } /* Utility: allow flex children to truncate */ .min-w-0 { min-width: 0; } /* Gradient text accent (hero headline, stat values) */ .text-gradient { background: var(--ta-grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Section eyebrow label */ .section-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); } /* Hero */ .hero-section { position: relative; padding: 5.5rem 0 3rem; overflow: hidden; } .hero-section > .container { position: relative; z-index: 1; } .hero-glow { position: absolute; top: -16%; right: -3%; width: 62%; height: 130%; background: var(--ta-hero-glow); filter: blur(22px); pointer-events: none; z-index: 0; } @media (max-width: 767.98px) { .hero-glow { display: none; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border-radius: 50rem; font-size: .82rem; font-weight: 600; color: var(--bs-primary); background: var(--ta-grad-brand-soft); border: 1px solid var(--ta-glass-border); } .hero-title { letter-spacing: -.02em; } .hero-trust li { white-space: nowrap; } /* Hero preview mockup + floating toast */ .hero-preview { position: relative; } @keyframes hero-float-in { 0% { opacity: 0; transform: translateY(16px) scale(.9); } 60% { opacity: 1; transform: translateY(-4px) scale(1.03); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes hero-float-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .hero-float-card { position: absolute; bottom: -1.25rem; left: -1.5rem; z-index: 3; border-radius: 14px; opacity: 0; animation: hero-float-in .7s cubic-bezier(.34, 1.56, .64, 1) forwards, hero-float-pulse 1.6s ease-in-out .7s 2; } @keyframes slideUpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .slide-up-fade { animation: slideUpFade 0.7s ease-out forwards; } /* Gradient icon tiles (features + verticals) */ .feature-tile { width: 3.25rem; height: 3.25rem; border-radius: .9rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), .26); } .feature-tile.icon-box-40 { width: 40px; height: 40px; border-radius: .7rem; } .tile-grad-1 { background: linear-gradient(135deg, #0d6efd, #4f46e5); } .tile-grad-2 { background: linear-gradient(135deg, #10b981, #059669); } .tile-grad-3 { background: linear-gradient(135deg, #8b5cf6, #6366f1); } .tile-grad-4 { background: linear-gradient(135deg, #0ea5e9, #2563eb); } .tile-grad-5 { background: linear-gradient(135deg, #f59e0b, #f97316); } .tile-grad-6 { background: linear-gradient(135deg, #ec4899, #d946ef); } /* Value strip */ .stat-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; } /* Feature cards — lift on hover */ .feature-card { transition: transform .18s ease, box-shadow .22s ease; } .feature-card:hover { transform: translateY(-4px); } /* Vertical showcase cards — gradient top accent */ .vertical-card { position: relative; overflow: hidden; transition: transform .18s ease; } .vertical-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ta-grad-brand); } .vertical-card:hover { transform: translateY(-4px); } .vertical-list li span { line-height: 1.45; } /* Security band — soft gradient glass panel */ .security-band { background: var(--ta-grad-brand-soft) !important; border: 1px solid var(--ta-glass-border) !important; } /* Bottom CTA — rich gradient band with light/shadow overlay for depth */ .cta-band { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--ta-cta-grad); box-shadow: var(--ta-shadow-float); } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 80% at 14% 8%, rgba(255,255,255,.26), transparent 60%), radial-gradient(52% 90% at 90% 95%, rgba(0,0,0,.20), transparent 60%); pointer-events: none; } .cta-band-inner { position: relative; z-index: 1; } /* Pricing cards: lift on hover (shadow comes from the glass card layer) */ .pricing-card { transition: transform .18s ease, box-shadow .18s ease; } .pricing-card:hover { transform: translateY(-4px); } /* ── §24 Installer ───────────────────────────────────────────────────────── */ .installer-wrap { max-width: 660px; margin: 2.5rem auto 4rem; } .step-bar { display: flex; gap: 0; counter-reset: step; } .step-bar .s { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: .78rem; color: var(--bs-secondary-color); position: relative; } .step-bar .s::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--bs-secondary-bg); border: 2px solid var(--bs-border-color); font-weight: 700; margin-bottom: .25rem; } .step-bar .s.active::before { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } .step-bar .s.done::before { background: var(--bs-success); border-color: var(--bs-success); color: #fff; } /* ── §25 Appointment calendar ────────────────────────────────────────────── */ .cal-shell { overflow-x: auto; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 700px; border-top: 1px solid var(--bs-border-color); border-left: 1px solid var(--bs-border-color); } /* Day-of-week header row */ .cal-dow { padding: 7px 4px; text-align: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); } .cal-dow.is-weekend { color: var(--bs-primary); } /* Day cells */ .cal-day { min-height: 130px; padding: 5px 5px 6px; background: var(--bs-body-bg); border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); transition: background .12s; position: relative; } .cal-day:hover { background: var(--bs-tertiary-bg); } .cal-day.is-weekend { background: color-mix(in srgb, var(--bs-secondary-bg) 60%, var(--bs-body-bg) 40%); } .cal-day.is-today { background: rgba(var(--bs-primary-rgb), .06) !important; } .cal-day.is-today.is-weekend { background: rgba(var(--bs-primary-rgb), .09) !important; } .cal-day.is-other-month { background: var(--bs-secondary-bg); opacity: .5; pointer-events: none; } /* Day number + add button header */ .cal-day-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; min-height: 28px; } .cal-day-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; font-weight: 500; color: var(--bs-body-color); line-height: 1; flex-shrink: 0; } .cal-day.is-today .cal-day-num { background: var(--bs-primary); color: #fff !important; font-weight: 700; } /* Add-appointment button (appears on cell hover) */ .cal-add-btn { opacity: 0; transition: opacity .15s, background .12s, color .12s; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: .7rem; color: var(--bs-secondary-color); text-decoration: none; flex-shrink: 0; } .cal-day:hover .cal-add-btn { opacity: 1; } .cal-add-btn:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } button.cal-add-btn { border: none; padding: 0; cursor: pointer; } /* Event pills */ .cal-event { display: flex; align-items: baseline; gap: 3px; padding: 2px 5px 2px 4px; border-radius: 4px; font-size: .71rem; line-height: 1.45; text-decoration: none !important; overflow: hidden; white-space: nowrap; border-left: 3px solid transparent; transition: filter .1s, transform .1s; margin-bottom: 2px; cursor: pointer; } .cal-event:hover { filter: brightness(.88); transform: translateX(2px); } .cal-event .ev-time { font-weight: 700; flex-shrink: 0; font-size: .68rem; } .cal-event .ev-client { overflow: hidden; text-overflow: ellipsis; flex: 1; } .cal-event .ev-mine-dot { flex-shrink: 0; font-size: .52rem; opacity: .85; margin-left: 1px; } /* Status colours — light */ .ev-scheduled { background: rgba(13,110,253,.13); color: #0a58ca; border-left-color: #0d6efd; } .ev-completed { background: rgba(108,117,125,.13); color: #495057; border-left-color: #6c757d; } .ev-cancelled { background: rgba(220,53,69,.10); color: #842029; border-left-color: #dc3545; text-decoration: line-through !important; opacity: .8; } .ev-no_show { background: rgba(253,126,20,.13); color: #92420a; border-left-color: #fd7e14; } .ev-pending_confirmation { background: rgba(13,202,240,.13); color: #087990; border-left-color: #0dcaf0; } /* Status colours — dark */ [data-bs-theme=dark] .ev-scheduled { background: rgba(13,110,253,.22); color: #6ea8fe; } [data-bs-theme=dark] .ev-completed { background: rgba(108,117,125,.22); color: #adb5bd; } [data-bs-theme=dark] .ev-cancelled { background: rgba(220,53,69,.18); color: #ea868f; } [data-bs-theme=dark] .ev-no_show { background: rgba(253,126,20,.22); color: #feb272; } [data-bs-theme=dark] .ev-pending_confirmation { background: rgba(13,202,240,.22); color: #6edff6; } /* "+N more" / "show less" buttons */ .cal-more-btn, .cal-less-btn { display: block; width: 100%; text-align: left; background: none; border: none; padding: 1px 4px; font-size: .7rem; color: var(--bs-secondary-color); cursor: pointer; border-radius: 3px; transition: background .12s, color .12s; margin-top: 1px; } .cal-more-btn:hover, .cal-less-btn:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } /* Status filter toggle buttons */ .sf-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: .78rem; font-weight: 500; border: 1.5px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); cursor: pointer; transition: all .15s; user-select: none; opacity: .55; } .sf-btn.sf-on { opacity: 1; } .sf-btn.sf-on.sf-scheduled { background: rgba(13,110,253,.10); border-color: #0d6efd; color: #0d6efd; } .sf-btn.sf-on.sf-completed { background: rgba(108,117,125,.10); border-color: #6c757d; color: #6c757d; } .sf-btn.sf-on.sf-cancelled { background: rgba(220,53,69,.08); border-color: #dc3545; color: #dc3545; } .sf-btn.sf-on.sf-no_show { background: rgba(253,126,20,.10); border-color: #fd7e14; color: #fd7e14; } .sf-btn.sf-on.sf-pending_confirmation { background: rgba(13,202,240,.10); border-color: #0dcaf0; color: #087990; } [data-bs-theme=dark] .sf-btn.sf-on.sf-scheduled { background: rgba(13,110,253,.20); color: #6ea8fe; border-color: #6ea8fe; } [data-bs-theme=dark] .sf-btn.sf-on.sf-completed { background: rgba(108,117,125,.20); color: #adb5bd; border-color: #adb5bd; } [data-bs-theme=dark] .sf-btn.sf-on.sf-cancelled { background: rgba(220,53,69,.15); color: #ea868f; border-color: #ea868f; } [data-bs-theme=dark] .sf-btn.sf-on.sf-no_show { background: rgba(253,126,20,.20); color: #feb272; border-color: #feb272; } [data-bs-theme=dark] .sf-btn.sf-on.sf-pending_confirmation { background: rgba(13,202,240,.20); color: #6edff6; border-color: #6edff6; } .sf-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot-scheduled { background: #0d6efd; } .dot-completed { background: #6c757d; } .dot-cancelled { background: #dc3545; } .dot-no_show { background: #fd7e14; } .dot-pending_confirmation { background: #0dcaf0; } /* Stat summary chips */ .stat-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; padding: 2px 8px; border-radius: 20px; background: var(--bs-secondary-bg); transition: opacity .15s; } .stat-chip.stat-dim { opacity: .35; } /* Month title + navigation */ .cal-nav { min-width: 260px; } .cal-month-title { font-size: 1.2rem; font-weight: 700; min-width: 160px; text-align: center; letter-spacing: -.01em; } /* Keyboard shortcut hint */ .kbd-hint { font-size: .68rem; color: var(--bs-secondary-color); } /* Staff filter dropdown (>7 staff) */ .cal-staff-dropdown { min-width: 220px; } .cal-staff-dropdown-scroll { max-height: 240px; overflow-y: auto; } /* Day number clickable — cursor + subtle hover ring */ .cal-day-num.dv-open { cursor: pointer; transition: background .12s, color .12s; } .cal-day:not(.is-today) .cal-day-num.dv-open:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } @media (max-width: 575.98px) { .cal-day { min-height: 90px; } .cal-month-title { min-width: 120px; font-size: 1rem; } } /* ── §26 Day view modal ──────────────────────────────────────────────────── */ .dv-row { display: flex; align-items: flex-start; min-height: 44px; padding: 5px 0; border-top: 1px solid var(--bs-border-color); transition: background .1s; } .dv-row.dv-has-appt { background: rgba(var(--bs-primary-rgb), .025); } .dv-hour-lbl { width: 56px; flex-shrink: 0; padding: 5px 8px 0 16px; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); line-height: 1.4; } .dv-hour-body { flex: 1; min-width: 0; padding: 2px 12px 4px 0; display: flex; flex-direction: column; gap: 3px; } /* Appointment card inside the day view */ .dv-event { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; border-left: 3px solid transparent; font-size: .82rem; text-decoration: none !important; line-height: 1.4; overflow: hidden; transition: filter .12s, transform .1s; } .dv-event:hover { filter: brightness(.88); transform: translateX(2px); } .dv-ev-time { font-weight: 700; font-size: .72rem; flex-shrink: 0; min-width: 95px; font-variant-numeric: tabular-nums; } .dv-ev-client { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv-ev-staff { font-size: .7rem; opacity: .75; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; } .dv-event .ev-mine-dot { flex-shrink: 0; font-size: .52rem; opacity: .85; } /* Free-slot quick-add button — appears on row hover */ .dv-add-slot { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 10px; font-size: .78rem; color: var(--bs-secondary-color); background: transparent; border: 1px dashed var(--bs-border-color); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s, background .12s, color .12s, border-color .12s, border-style .12s; } .dv-row.dv-free:hover .dv-add-slot { opacity: 1; } .dv-add-slot:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); border-color: var(--bs-primary); border-style: solid; } /* Row layout for an hour that already has an appointment */ .dv-hour-row { display: flex; align-items: flex-start; gap: 6px; width: 100%; } .dv-appts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } /* Compact quick-add trigger shown beside an hour that already has an appointment. */ .dv-add-slot-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; color: var(--bs-secondary-color); background: transparent; border: 1px dashed var(--bs-border-color); border-radius: 6px; cursor: pointer; opacity: .45; transition: opacity .15s, background .12s, color .12s, border-color .12s, border-style .12s; } .dv-row.dv-has-appt:hover .dv-add-slot-icon, .dv-add-slot-icon:focus-visible { opacity: 1; } .dv-add-slot-icon:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); border-color: var(--bs-primary); border-style: solid; } @media (max-width: 575.98px) { .dv-ev-time { min-width: 78px; } .dv-ev-staff { display: none; } } /* ── §27 Icon picker ─────────────────────────────────────────────────────── */ #iconGrid { display: flex; flex-wrap: wrap; gap: .375rem; max-height: 420px; overflow-y: auto; } .icon-tile { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bs-border-color); border-radius: .375rem; background: var(--bs-body-bg); cursor: pointer; transition: border-color .12s, background .12s; font-size: 1.1rem; flex-shrink: 0; } .icon-tile:hover { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .06); } .icon-tile--active { border-color: var(--bs-primary) !important; background: rgba(var(--bs-primary-rgb), .14) !important; box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35); } .icon-preview-box { width: 56px; height: 56px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } /* ── §28 Notification cards ─────────────────────────────────────────────── */ .notif-icon-bubble { width: 40px; height: 40px; flex-shrink: 0; } /* Unread indicator dot — primary-coloured circle with a soft halo */ .notif-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18); } /* ── Mobile nav hamburger unread dot ────────────────────────────────────── */ .nav-unread-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--bs-danger); border: 2px solid var(--bs-body-bg); pointer-events: none; } /* ── §29 Team Chat ─────────────────────────────────────────────── */ /* ── Page layout ─────────────────────────────────────────────────────────── */ .chat-page { display: flex; flex-direction: column; height: calc(100dvh - 100px); min-height: 400px; } /* ── Pinned bar ──────────────────────────────────────────────────────────── */ .chat-pinned-area { border: 1px solid var(--bs-warning-border-subtle); border-radius: .5rem; background: var(--bs-warning-bg-subtle); margin-bottom: .5rem; flex-shrink: 0; overflow: hidden; } .chat-pinned-header { display: flex; align-items: center; gap: .5rem; padding: .35rem .75rem; font-size: .78rem; font-weight: 600; color: var(--bs-warning-text-emphasis); cursor: default; } .chat-pinned-list { padding: 0 .5rem .4rem; } .chat-pinned-item { display: flex; align-items: center; gap: .5rem; font-size: .78rem; padding: .2rem .25rem; border-radius: .25rem; line-height: 1.3; cursor: pointer; } .chat-pinned-item:hover { background: rgba(var(--bs-warning-rgb), .15); } .chat-pinned-sender { font-weight: 600; flex-shrink: 0; } .chat-pinned-body { color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Message highlight — triggered by JS after scroll-to */ @keyframes chat-msg-flash { 0% { background-color: rgba(var(--bs-warning-rgb), .35); } 100% { background-color: transparent; } } .chat-msg--highlight { animation: chat-msg-flash 1.4s ease-out forwards; border-radius: .35rem; } /* ── Messages area ───────────────────────────────────────────────────────── */ .chat-messages-wrap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* Unread-jump floating pill */ .chat-unread-jump { position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%); z-index: 10; white-space: nowrap; padding: .3rem .9rem; border-radius: 2rem; font-size: .8rem; font-weight: 600; border: none; cursor: pointer; background: var(--bs-primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); opacity: 1; transition: opacity .2s ease, transform .2s ease; pointer-events: auto; } .chat-unread-jump.d-none { opacity: 0; pointer-events: none; } .chat-messages { flex: 1 1 0; overflow-y: auto; padding: .5rem 0; scroll-behavior: smooth; overscroll-behavior: contain; } /* ── Date separator ──────────────────────────────────────────────────────── */ .chat-date-sep { display: flex; align-items: center; gap: .75rem; margin: .75rem 0 .35rem; color: var(--bs-secondary-color); font-size: .72rem; font-weight: 500; } .chat-date-sep::before, .chat-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--bs-border-color); } /* ── Single message ──────────────────────────────────────────────────────── */ .chat-msg { display: flex; gap: .6rem; padding: .15rem .5rem; border-radius: .4rem; transition: background .1s; position: relative; } .chat-msg:hover { background: var(--bs-tertiary-bg); } .chat-msg:hover .chat-msg-actions { opacity: 1; pointer-events: auto; } .chat-msg--grouped { padding-top: .05rem; } /* Own messages: subtle right-side tint */ .chat-msg--own .chat-msg-body-wrap { background: rgba(var(--bs-primary-rgb), .06); border-radius: .4rem; padding: .25rem .5rem; } /* Avatar */ .chat-msg-avatar { width: 32px; } .chat-msg-avatar img { display: block; } .chat-msg-avatar-placeholder { width: 32px; flex-shrink: 0; } /* Meta (name + time) */ .chat-msg-meta { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .15rem; } .chat-msg-sender { font-weight: 600; font-size: .82rem; color: var(--bs-body-color); text-decoration: none; } .chat-msg-sender:hover { text-decoration: underline; } .chat-msg-time { font-size: .7rem; color: var(--bs-secondary-color); flex-shrink: 0; cursor: help; } .chat-msg-edited-tag { font-size: .7rem; font-style: italic; color: var(--bs-secondary-color); opacity: .75; flex-shrink: 0; cursor: help; } /* Body */ .chat-msg-body-wrap { min-width: 0; } .chat-msg-text { font-size: .875rem; line-height: 1.5; word-break: break-word; overflow-wrap: break-word; } /* Deleted message tombstone — keeps the message's place in the timeline (avatar/sender/time) instead of leaving no trace it was ever posted. */ .chat-msg-deleted-text { font-style: italic; color: var(--bs-secondary-color); opacity: .8; } /* Reply quote */ .chat-reply-ref { display: flex; gap: .4rem; align-items: baseline; border-left: 3px solid var(--bs-primary); padding-left: .5rem; margin-bottom: .2rem; font-size: .78rem; color: var(--bs-secondary-color); border-radius: 0 .2rem .2rem 0; background: var(--bs-secondary-bg); padding: .2rem .5rem; max-width: 100%; overflow: hidden; } .chat-reply-ref-sender { font-weight: 600; flex-shrink: 0; color: var(--bs-body-color); } .chat-reply-ref-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pinned badge inside message */ .chat-pinned-badge { font-size: .7rem; color: var(--bs-warning-text-emphasis); margin-top: .2rem; } /* Action buttons (hidden until hover) */ .chat-msg-actions { position: absolute; top: .25rem; right: .5rem; display: flex; gap: .2rem; opacity: 0; pointer-events: none; transition: opacity .1s; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .3rem; padding: .15rem .3rem; box-shadow: 0 1px 3px rgba(0,0,0,.1); } .chat-action-btn { background: none; border: none; color: var(--bs-secondary-color); cursor: pointer; padding: .1rem .25rem; border-radius: .2rem; line-height: 1; font-size: .8rem; transition: color .1s, background .1s; } .chat-action-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); } /* Inline message editing */ .chat-msg--editing .chat-msg-actions { display: none; } .chat-edit-wrap { margin-top: .1rem; } .chat-edit-textarea { font-size: .875rem; resize: vertical; } /* @mention highlight */ .chat-mention { color: var(--bs-primary); font-weight: 600; background: rgba(var(--bs-primary-rgb), .08); border-radius: .2rem; padding: 0 .2rem; } /* @all broadcast mention — amber to stand out from personal @mentions */ .chat-mention--all { color: var(--bs-warning-text-emphasis); background: rgba(var(--bs-warning-rgb), .15); } /* Clickable @mention that links to a staff profile */ a.chat-mention--link { text-decoration: none; } a.chat-mention--link:hover { text-decoration: underline; } /* #client mention — teal so it reads as a distinct mention type from @staff */ a.chat-client-mention { color: var(--bs-success); font-weight: 600; background: rgba(var(--bs-success-rgb), .08); border-radius: .2rem; padding: 0 .2rem; text-decoration: none; } a.chat-client-mention:hover { text-decoration: underline; } /* ── Compose area ────────────────────────────────────────────────────────── */ .chat-compose { flex-shrink: 0; border-top: 1px solid var(--bs-border-color); padding-top: .5rem; position: relative; } .chat-reply-bar { display: flex; align-items: center; gap: .5rem; background: var(--bs-primary-bg-subtle); border-left: 3px solid var(--bs-primary); border-radius: .25rem; padding: .3rem .6rem; margin-bottom: .35rem; font-size: .78rem; color: var(--bs-secondary-color); } .chat-reply-bar-inner { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; } .chat-reply-bar-text { color: var(--bs-body-color); } .chat-form-row { display: flex; gap: .5rem; align-items: flex-end; } .chat-form-input-wrap { flex: 1 1 0; min-width: 0; } .chat-input { display: block; /* removes Chrome's inline-block baseline gap */ width: 100%; resize: none; border-radius: .5rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); padding: .5rem .75rem; font-size: .875rem; line-height: 1.5; min-height: 38px; max-height: 160px; overflow-y: auto; transition: border-color .15s, box-shadow .15s; } .chat-input:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); } .chat-form-btns { display: flex; gap: .3rem; align-items: flex-end; flex-shrink: 0; } .chat-toolbar-btn { background: none; border: 1px solid var(--bs-border-color); border-radius: .4rem; color: var(--bs-secondary-color); cursor: pointer; padding: .35rem .5rem; font-size: 1rem; line-height: 1; transition: color .12s, background .12s; height: 38px; } .chat-toolbar-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); } .chat-send-btn { height: 38px; } .chat-compose-hint { font-size: .7rem; margin-top: .25rem; padding-left: .1rem; } .chat-retention-notice { font-size: .8rem; color: var(--bs-tertiary-color); } /* ── Mention dropdown ────────────────────────────────────────────────────── */ .chat-mention-dropdown { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; box-shadow: 0 -4px 16px rgba(0,0,0,.12); z-index: 100; max-height: 200px; overflow-y: auto; } .chat-mention-list { padding: .3rem 0; margin: 0; } .chat-mention-item { padding: .4rem .75rem; cursor: pointer; font-size: .85rem; transition: background .1s; } .chat-mention-item:hover, .chat-mention-item.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); } .chat-mention-item--all { color: var(--bs-warning-text-emphasis); font-weight: 600; } .chat-mention-item--all:hover, .chat-mention-item--all.active { background: rgba(var(--bs-warning-rgb), .15); color: var(--bs-warning-text-emphasis); } /* Client age beside the name, so two children called the same thing can be told apart. Greyed via .text-body-secondary in the markup, plus the size reduction here. Two mechanisms rather than one because colour alone should never be the only thing separating two pieces of information. The token matters. Measured against the 4.5:1 floor for text this size, over both the plain row and the lighter --bs-primary-bg-subtle the row takes when .active: text-body-secondary light 6.78 / 5.81 dark 7.29 / 8.13 passes text-body-tertiary light 3.12 / 2.90 dark 4.07 / 4.25 fails all four opacity .65 light 4.88 / 2.23 fails when active Tertiary is the more natural-looking choice and is the one to avoid: the age exists to be read carefully, since it is what tells two identically-named children apart. */ .chat-mention-age { font-size: .82em; } /* ── Emoji panel ─────────────────────────────────────────────────────────── */ .chat-emoji-panel { position: absolute; bottom: calc(100% + .5rem); right: 0; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: .5rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: .2rem; width: 240px; z-index: 101; } .chat-emoji-item { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: .2rem; border-radius: .25rem; line-height: 1; text-align: center; transition: background .1s; } .chat-emoji-item:hover { background: var(--bs-secondary-bg); } /* ── Media embeds ────────────────────────────────────────────────────────── */ .embedded-media { display: block; margin: .4rem 0; max-width: 100%; } .embedded-image { max-width: 340px; max-height: 280px; object-fit: contain; border-radius: .4rem; border: 1px solid var(--bs-border-color); } .embedded-video { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 480px; border-radius: .4rem; overflow: hidden; background: #000; } .embedded-video iframe { width: 100%; height: 100%; border: none; display: block; } .embedded-spotify { max-width: 480px; border-radius: .75rem; overflow: hidden; } .embedded-spotify iframe { width: 100%; height: 80px; border: none; display: block; } /* Chat link */ .chat-link { color: var(--bs-link-color); word-break: break-all; } .chat-link:hover { color: var(--bs-link-hover-color); } /* ── Load more button ────────────────────────────────────────────────────── */ .chat-top-spinner { flex-shrink: 0; text-align: center; padding: .5rem 0; color: var(--bs-secondary); } /* ── Empty state ─────────────────────────────────────────────────────────── */ .chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 575.98px) { .chat-page { height: calc(100dvh - 120px); } .chat-msg-actions { position: static; opacity: 1; pointer-events: auto; background: none; border: none; box-shadow: none; padding: 0; } .embedded-image { max-width: 100%; } .embedded-video { max-width: 100%; } } /* ── §30 Chat polls ──────────────────────────────────────────────────────── */ /* Poll widget — rendered inside a chat bubble */ .chat-poll { max-width: 400px; width: 100%; padding: .75rem .875rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-tertiary-bg); } .chat-poll-question { font-weight: 600; font-size: .9rem; margin-bottom: .6rem; line-height: 1.35; } .chat-poll-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } /* Each option is a button (clickable before voting) or a bar (after voting) */ .chat-poll-option { display: block; width: 100%; background: none; border: 1px solid var(--bs-border-color); border-radius: .4rem; padding: 0; text-align: left; cursor: pointer; overflow: hidden; position: relative; transition: border-color .15s; } .chat-poll-option:hover:not(:disabled) { border-color: var(--bs-primary); } .chat-poll-option:disabled { cursor: default; } .chat-poll-option--voted { border-color: var(--bs-primary); } /* Progress bar fill — width driven by --pct CSS custom property set by JS */ .chat-poll-option-bar { position: absolute; inset: 0; background: var(--bs-primary-bg-subtle); transform-origin: left; transform: scaleX(calc(var(--pct, 0) / 100)); transition: transform .4s ease; pointer-events: none; } .chat-poll-option--voted .chat-poll-option-bar { background: color-mix(in srgb, var(--bs-primary) 20%, transparent); } .chat-poll-option-label { position: relative; display: flex; align-items: center; justify-content: space-between; padding: .3rem .5rem; font-size: .82rem; gap: .4rem; z-index: 1; } .chat-poll-option-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-poll-option-pct { flex-shrink: 0; font-size: .75rem; color: var(--bs-secondary-color); min-width: 2.5rem; text-align: right; } .chat-poll-option--voted .chat-poll-option-pct { color: var(--bs-primary); font-weight: 600; } .chat-poll-option-check { flex-shrink: 0; font-size: .7rem; color: var(--bs-primary); } .chat-poll-meta { margin-top: .5rem; margin-bottom: 0; font-size: .75rem; color: var(--bs-secondary-color); display: flex; align-items: center; gap: .5rem; } .chat-poll-change-vote { background: none; border: none; padding: 0; font-size: .75rem; color: var(--bs-link-color); cursor: pointer; text-decoration: underline; } .chat-poll-change-vote:hover { color: var(--bs-link-hover-color); } /* Poll composer — floats above the compose bar */ .chat-poll-composer { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); padding: .75rem; margin-bottom: .5rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); } .chat-poll-composer-header { display: flex; align-items: center; font-weight: 600; font-size: .875rem; margin-bottom: .6rem; } .chat-poll-composer-close { color: var(--bs-secondary-color); text-decoration: none; } .chat-poll-composer-close:hover { color: var(--bs-body-color); } .chat-poll-option-rows { display: flex; flex-direction: column; gap: .35rem; } .chat-poll-option-row { display: flex; align-items: center; gap: .35rem; } .chat-poll-option-row .form-control { flex: 1; min-width: 0; } .chat-poll-option-remove { flex-shrink: 0; color: var(--bs-danger); text-decoration: none; } .chat-poll-add-option { color: var(--bs-primary); text-decoration: none; font-size: .82rem; } .chat-poll-add-option:hover { text-decoration: underline; } .chat-poll-composer-footer { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; } /* ── Chat search results ─────────────────────────────────────────────────── */ .chat-search-results { max-height: 260px; overflow-y: auto; margin-top: .4rem; } .chat-search-empty { font-size: .82rem; color: var(--bs-secondary-color); padding: .35rem .1rem; } .chat-search-result { padding: .45rem .5rem; border-radius: .35rem; cursor: pointer; transition: background .1s; } .chat-search-result + .chat-search-result { border-top: 1px solid var(--bs-border-color); } .chat-search-result:hover { background: var(--bs-secondary-bg); } .chat-search-result-meta { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .1rem; } .chat-search-result-sender { font-size: .82rem; font-weight: 600; color: var(--bs-body-color); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; min-width: 0; } .chat-search-result-time { font-size: .72rem; color: var(--bs-secondary-color); flex-shrink: 0; white-space: nowrap; } .chat-search-result-body { font-size: .8rem; color: var(--bs-secondary-color); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } .chat-search-result-body mark { background: rgba(var(--bs-warning-rgb), .35); color: var(--bs-body-color); border-radius: .2rem; padding: 0 .1rem; } /* ── §31 Staff Notes ─────────────────────────────────────────────────── */ /* Masonry grid */ .notes-grid { column-count: 1; column-gap: 1rem; } @media (min-width: 576px) { .notes-grid { column-count: 2; } } @media (min-width: 992px) { .notes-grid { column-count: 3; } } @media (min-width: 1400px) { .notes-grid { column-count: 4; } } /* Section labels (Pinned / Other) */ .notes-section-label { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .5rem; } /* Note card */ .note-card { break-inside: avoid; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem; margin-bottom: 1rem; position: relative; transition: box-shadow .15s ease, transform .15s ease, opacity .25s ease; background-color: var(--bs-body-bg); } .note-card:hover { box-shadow: var(--ta-shadow-card-hover); } .note-card.note-removing { opacity: 0; transform: scale(.96); } /* Card title */ .note-title { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; word-break: break-word; } /* Card body text */ .note-body { font-size: .82rem; color: var(--bs-secondary-color); word-break: break-word; } /* Collapsed state — applied by notes.js only when the text actually overflows. */ .note-body.is-collapsed { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; line-clamp: 12; overflow: hidden; } /* Show more / show less. Hidden until notes.js confirms the note really is taller than the clamp, so a note that fits never carries a dead control. */ .note-body-toggle { font-size: .78rem; text-decoration: none; padding: 0; margin-top: .25rem; } .note-body-toggle:hover { text-decoration: underline; } /* Card head row: toolbar (left) + date (right) */ .note-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .25rem; margin-bottom: .35rem; min-height: 1.4rem; } /* Right-hand meta group: reminder badge + date stamp, on one line, aligned right */ .note-card-meta { display: flex; flex-direction: row; align-items: baseline; gap: .3rem; flex-shrink: 0; } /* Date stamp — always visible, top-right */ .note-date { font-size: .65rem; color: var(--bs-secondary-color); white-space: nowrap; padding-top: .2rem; opacity: .7; } /* Memento reminder badge — shown when a note/checklist has due_at set */ .note-reminder-badge { font-size: .65rem; white-space: nowrap; color: var(--bs-warning-text-emphasis, #ffc107); opacity: .9; } /* Separator between the reminder badge and the date stamp, when both show */ .note-meta-sep { font-size: .65rem; color: var(--bs-secondary-color); opacity: .5; } /* Toolbar: always visible */ .note-toolbar { display: flex; align-items: center; gap: .2rem; flex-shrink: 0; } .note-tool { background: none; border: none; padding: .2rem .3rem; border-radius: .3rem; color: var(--bs-secondary-color); font-size: .8rem; cursor: pointer; transition: background .12s, color .12s; } .note-tool:hover { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } .note-tool.is-pinned { color: var(--bs-primary); } /* Color swatches */ .note-color-menu { min-width: 0; flex-wrap: wrap; gap: .25rem; width: 145px; } .note-color-menu.show { display: flex !important; } .note-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s; } .note-color-swatch:hover { transform: scale(1.2); } .note-color-swatch.selected { border-color: var(--bs-primary); } .note-swatch-default { background: var(--bs-body-bg); border-color: var(--bs-border-color); } .note-swatch-red { background: #f28b82; } .note-swatch-orange { background: #fbbc04; } .note-swatch-yellow { background: #fff475; } .note-swatch-green { background: #ccff90; } .note-swatch-teal { background: #a8dadc; } .note-swatch-blue { background: #aecbfa; } .note-swatch-purple { background: #d7aefb; } .note-swatch-pink { background: #fdcfe8; } /* Note color backgrounds */ [data-bs-theme="light"] .note-red { background: #f28b82; border-color: #e57c72; } [data-bs-theme="light"] .note-orange { background: #fbbc04; border-color: #e5ac03; } [data-bs-theme="light"] .note-yellow { background: #fff475; border-color: #ede465; } [data-bs-theme="light"] .note-green { background: #ccff90; border-color: #bbee80; } [data-bs-theme="light"] .note-teal { background: #a8dadc; border-color: #98c9cc; } [data-bs-theme="light"] .note-blue { background: #aecbfa; border-color: #9ebbe9; } [data-bs-theme="light"] .note-purple { background: #d7aefb; border-color: #c79eea; } [data-bs-theme="light"] .note-pink { background: #fdcfe8; border-color: #ecbfd7; } /* Dark mode variants (slightly muted) */ [data-bs-theme="dark"] .note-red { background: #77172e; border-color: #882236; } [data-bs-theme="dark"] .note-orange { background: #692b17; border-color: #7a3a26; } [data-bs-theme="dark"] .note-yellow { background: #7c4a03; border-color: #8d5b14; } [data-bs-theme="dark"] .note-green { background: #264d3b; border-color: #375e4c; } [data-bs-theme="dark"] .note-teal { background: #0d3b44; border-color: #1e4c55; } [data-bs-theme="dark"] .note-blue { background: #1e3a5f; border-color: #2f4b70; } [data-bs-theme="dark"] .note-purple { background: #42275e; border-color: #53386f; } [data-bs-theme="dark"] .note-pink { background: #6e1f4b; border-color: #7f305c; } /* Dark-mode swatch preview */ [data-bs-theme="dark"] .note-swatch-red { background: #77172e; } [data-bs-theme="dark"] .note-swatch-orange { background: #692b17; } [data-bs-theme="dark"] .note-swatch-yellow { background: #7c4a03; } [data-bs-theme="dark"] .note-swatch-green { background: #264d3b; } [data-bs-theme="dark"] .note-swatch-teal { background: #0d3b44; } [data-bs-theme="dark"] .note-swatch-blue { background: #1e3a5f; } [data-bs-theme="dark"] .note-swatch-purple { background: #42275e; } [data-bs-theme="dark"] .note-swatch-pink { background: #6e1f4b; } /* Checklist inside a card */ .note-checklist { margin-bottom: 0; } .note-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; padding: .15rem 0; } .note-item.done .note-item-label { text-decoration: line-through; opacity: .5; } .note-item.done .note-item-label a { text-decoration: none; } .note-item-check { background: none; border: none; padding: 0; color: var(--bs-secondary-color); cursor: pointer; font-size: .9rem; flex-shrink: 0; } .note-item-check:hover { color: var(--bs-primary); } .note-item.done .note-item-check { color: var(--bs-success); } .note-item-label { word-break: break-word; flex: 1; } .note-item-drag { cursor: grab; color: var(--bs-secondary-color); opacity: .35; font-size: .75rem; flex-shrink: 0; padding: 0 .1rem; transition: opacity .15s; } .note-item:hover .note-item-drag { opacity: .75; } .note-item-drag:active { cursor: grabbing; } .note-item.drag-over { border-top: 2px solid var(--bs-primary); margin-top: -2px; } /* Live search */ @media (min-width: 768px) { .notes-search-input { width: 310px !important; } } .notes-section.d-none { display: none !important; } /* Mini progress bar under checklist header */ .note-progress-wrap { height: 4px; background: var(--bs-border-color); border-radius: 2px; margin-bottom: .5rem; overflow: hidden; } .note-progress-bar { height: 100%; background: var(--bs-success); border-radius: 2px; transition: width .3s ease; } /* Items in create/edit modals */ .create-item, .edit-item { font-size: .85rem; padding: .2rem 0; } /* ── §32 Drive — file storage ────────────────────────────────────── */ /* File cards — uniform height, centred icon */ .drive-file-card { cursor: pointer; transition: box-shadow .18s ease, transform .15s ease; user-select: none; } .drive-file-card:hover { box-shadow: var(--ta-shadow-card-hover) !important; transform: translateY(-2px); } .drive-private-badge { position: absolute; top: .15rem; left: .45rem; color: var(--bs-secondary-color); opacity: .7; cursor: help; } /* ── Drive favourite star ─────────────────────────────────────────────────── */ .drive-fav-btn { position: absolute; top: .1rem; right: .1rem; z-index: 2; padding: .25rem .3rem; line-height: 1; border: 0; background: none; color: var(--bs-secondary-color); opacity: .55; cursor: pointer; transition: opacity .15s ease, color .15s ease, transform .15s ease; } .drive-fav-btn:hover, .drive-fav-btn:focus-visible { opacity: 1; color: var(--bs-warning); } /* Starred: full opacity and amber in both colour schemes. */ .drive-fav-btn.is-favorite { opacity: 1; color: var(--bs-warning); } /* The star briefly scales up when it becomes active, so a click that only changes an icon's colour still reads as having done something. */ .drive-fav-btn.is-favorite > i { animation: drive-fav-pop .2s ease; } @keyframes drive-fav-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } /* Respect a reduced-motion preference — the colour change alone carries the state, so dropping the animation loses nothing. */ @media (prefers-reduced-motion: reduce) { .drive-fav-btn.is-favorite > i { animation: none; } } /* In-flight: the click has been sent but not yet confirmed by the server. */ .drive-fav-btn.is-pending { opacity: .4; cursor: progress; } /* List rows lay their children out in a flex row, so the star is positioned in flow there rather than pinned to a corner. */ .drive-fav-btn--inline { position: static; flex-shrink: 0; padding: .25rem; } .drive-list-name { cursor: pointer; } .drive-list-name:hover { text-decoration: underline; } .drive-file-icon { font-size: 2.8rem; line-height: 1; } .drive-file-name { font-size: .82rem; font-weight: 600; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Modal preview / sidebar layout */ .drive-modal-body { min-height: 400px; } .drive-preview-area { min-height: 300px; display: flex; align-items: center; justify-content: center; background: var(--bs-tertiary-bg); overflow: hidden; } .drive-preview-area img { max-width: 100%; max-height: 720px; object-fit: contain; border-radius: .25rem; } .drive-preview-area iframe { width: 100%; height: 720px; border: none; display: block; } .drive-text-preview { width: 100%; height: 720px; margin: 0; padding: .75rem 1rem; overflow: auto; font-size: .8125rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; background: var(--bs-body-bg); color: var(--bs-body-color); border: none; border-radius: 0; } .drive-placeholder-icon { font-size: 5rem; opacity: .55; } .drive-sidebar { min-width: 220px; max-width: 280px; width: 260px; flex-shrink: 0; overflow-y: auto; } @media (max-width: 767.98px) { .drive-sidebar { width: 100%; max-width: 100%; border-left: none !important; border-top: 1px solid var(--ta-glass-border); } .drive-preview-area iframe { height: 460px; } } /* Search input: full-width on mobile, fixed on md+ */ @media (min-width: 768px) { .drive-search-input { width: 280px !important; } } /* Modal filename — click-to-copy affordance */ #driveModalName { cursor: pointer; transition: color .15s ease; position: relative; } #driveModalName:hover { color: var(--bs-primary); } #driveModalName.drive-name-copied { color: var(--bs-success) !important; } #driveModalName.drive-name-copied::after { content: '✓ Copied!'; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: .7rem; font-weight: 600; color: #fff; background: var(--bs-success); padding: .15rem .45rem; border-radius: .3rem; white-space: nowrap; pointer-events: none; } /* ── §33 Available slots panel ────────────────────────────────────────────── */ .slots-panel { width: 100%; max-width: 240px; } .slots-panel .card-title { font-size: .85rem; } .slots-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; } .slot-btn { text-align: left; font-variant-numeric: tabular-nums; } /* ── §34 Appointment setup hints (floating, bottom-right) ─────────────────── */ .appt-hints { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 320px; pointer-events: none; } .appt-hint-card { pointer-events: auto; border-left: 3px solid var(--bs-warning); animation: appt-hint-in .35s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes appt-hint-in { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* -- Cookie consent banner ------------------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; padding: .875rem 1.25rem; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -2px 10px rgba(0, 0, 0, .08); } /* -- Client portal: birthdate verification --------------------------------- */ .portal-verify-wrap { position: relative; min-height: 22rem; } .portal-verify-backdrop { filter: blur(6px); opacity: .5; pointer-events: none; user-select: none; } .portal-verify-card { position: absolute; inset: 0; margin: auto; max-width: 22rem; height: fit-content; z-index: 1; }