/* ============================================================ Practice EHR — shared styles for reusable chrome components (top header, nav bar, sidebar, footer) and common page bits. Pages should also load Tailwind + Inter + Material Icons in their ; this file only carries what Tailwind can't. ============================================================ */ html, body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; } /* Material Icons sizing helper */ .mi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; 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'; -webkit-font-smoothing: antialiased; } .mi-12 { font-size: 12px; } .mi-14 { font-size: 14px; } .mi-16 { font-size: 16px; } .mi-18 { font-size: 18px; } .mi-20 { font-size: 20px; } .mi-22 { font-size: 22px; } .mi-24 { font-size: 24px; } /* hide native select arrow (used together with a chevron icon overlay) */ select.styled { appearance: none; -webkit-appearance: none; background-image: none; } /* thin scrollbars on horizontally scrolling tables */ .scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 8px; } /* sidebar icon coloring — inlined SVGs use fill="currentColor" */ aside ul li > a, aside ul li > button { color: #6b7280; } aside ul li > .sb-active { color: #2563eb; } /* table sort dual-arrow indicator */ .sort-arrows { display: inline-flex; flex-direction: column; line-height: 0; color: #9ca3af; } .sort-arrows svg { width: 10px; height: 6px; display: block; } /* ====================================================================== Kanban — column-driven status accent system ====================================================================== */ /* Each column declares its semantic accent color; cards inherit it. */ [data-kanban-column][data-status="scheduled"], [data-kanban-column][data-status="not-billed"], [data-kanban-column][data-status="drafting"], [data-kanban-column][data-status="pending"], [data-kanban-column][data-status="ready-triage"], [data-kanban-column][data-status="checked-in"], [data-kanban-column][data-status="open"] { --col-accent: #eab308; } [data-kanban-column][data-status="confirmed"], [data-kanban-column][data-status="in-progress"], [data-kanban-column][data-status="in-visit"], [data-kanban-column][data-status="under-review"], [data-kanban-column][data-status="pending-doctor"] { --col-accent: #2563eb; } [data-kanban-column][data-status="ready"], [data-kanban-column][data-status="ready-signoff"], [data-kanban-column][data-status="reviewed"], [data-kanban-column][data-status="awaiting"], [data-kanban-column][data-status="due"] { --col-accent: #8b5cf6; } [data-kanban-column][data-status="completed"], [data-kanban-column][data-status="resolved"], [data-kanban-column][data-status="signed-off"], [data-kanban-column][data-status="submitted"], [data-kanban-column][data-status="billed"], [data-kanban-column][data-status="notified"] { --col-accent: #22c55e; } [data-kanban-column][data-status="no-show"] { --col-accent: #ef4444; } /* Card — refined surface, soft accent tint, hover lift, drag anim */ [data-kanban-card] { position: relative; border-radius: 12px !important; border: 1px solid #eef0f3 !important; padding: 14px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--col-accent, #ffffff) 4%, white), white 70%) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; font-variant-numeric: tabular-nums; cursor: grab; } [data-kanban-card]:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(15, 23, 42, .12), 0 4px 8px -2px rgba(15, 23, 42, .05); } [data-kanban-card]:active { cursor: grabbing; } [data-kanban-card].opacity-40 { transform: rotate(-1.5deg) scale(.98); box-shadow: 0 20px 32px -8px rgba(15, 23, 42, .18); } /* Stagger reveal on initial paint — delays cap at 6 cards */ @keyframes card-reveal { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } [data-kanban-cards] > [data-kanban-card] { animation: card-reveal .45s cubic-bezier(.2,.8,.2,1) both; } [data-kanban-cards] > [data-kanban-card]:nth-child(1) { animation-delay: 0ms; } [data-kanban-cards] > [data-kanban-card]:nth-child(2) { animation-delay: 60ms; } [data-kanban-cards] > [data-kanban-card]:nth-child(3) { animation-delay: 120ms; } [data-kanban-cards] > [data-kanban-card]:nth-child(4) { animation-delay: 180ms; } [data-kanban-cards] > [data-kanban-card]:nth-child(5) { animation-delay: 240ms; } [data-kanban-cards] > [data-kanban-card]:nth-child(n+6) { animation-delay: 300ms; } /* Drop-target zones */ [data-kanban-column] [data-kanban-cards] { min-height: 140px; border-radius: 12px; transition: background-color .15s ease, outline-color .15s ease; outline: 2px dashed transparent; outline-offset: -2px; } .kanban-drop-active [data-kanban-cards] { background: color-mix(in srgb, var(--col-accent, #2563eb) 6%, transparent); outline-color: color-mix(in srgb, var(--col-accent, #2563eb) 40%, transparent); } /* Column header → status pill */ [data-kanban-column] > h3 { display: inline-flex !important; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px !important; margin-bottom: 14px !important; font-size: 13px !important; letter-spacing: -0.005em; color: #111827 !important; background: color-mix(in srgb, var(--col-accent, #e5e7eb) 9%, white); border: 1px solid color-mix(in srgb, var(--col-accent, #e5e7eb) 28%, transparent); border-radius: 999px; font-variant-numeric: tabular-nums; } /* Override the inline dot's bg-[#…] color with the column accent + halo. Excludes the count span so it stays plain. */ [data-kanban-column] > h3 > span:not([data-kanban-count]) { background-color: var(--col-accent, currentColor) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--col-accent, currentColor) 20%, transparent); } /* Drop position indicator — slim line between cards while dragging */ [data-kanban-placeholder] { height: 4px; border-radius: 999px; background: var(--col-accent, #2563eb); box-shadow: 0 0 0 4px color-mix(in srgb, var(--col-accent, #2563eb) 18%, transparent); pointer-events: none; animation: placeholder-pulse 1.2s ease-in-out infinite; } @keyframes placeholder-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } } /* ====================================================================== Kanban — column sizing across viewports Desktop: columns flex to fill the available width (use viewport like grid view) Tablet : fixed-width columns scroll horizontally Mobile : near-full-width columns swipe one at a time ====================================================================== */ [data-kanban-column] { flex: 1 1 260px !important; width: auto !important; max-width: none !important; } /* Bump spacing between columns + cards for the softer, roomier feel */ .flex:has(> [data-kanban-column]) { gap: 20px !important; } [data-kanban-cards] > [data-kanban-card] + [data-kanban-card] { margin-top: 14px !important; } @media (max-width: 1024px) { [data-kanban-column] { flex: 0 0 auto !important; width: 248px !important; } } /* Wider main padding on big screens — more deliberate breathing room */ @media (min-width: 1280px) { main { padding-left: 2rem !important; padding-right: 2rem !important; } } /* ====================================================================== Responsive shell — main content adapts on small screens ====================================================================== */ @media (max-width: 640px) { main { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 1.25rem !important; } /* Page H1 scales down on mobile */ main > h1 { font-size: 18px !important; } /* Filter rows (in card pages): force wrap + full-width children */ main > .flex.items-center.justify-between { gap: 12px !important; } main [data-component="filter-bar"] + * { width: 100%; } /* Search inputs in card-view headers: stretch to fill */ main .relative.w-\[245px\] { width: 100% !important; } /* Stack right-side action groups full-width below filters */ main .flex.items-center.gap-3 > .flex-1 { width: 100%; } /* Filter-bar dropdowns shrink on mobile */ [data-component="filter-bar"] + *, main > div > [data-component="filter-bar"] { width: 100% !important; } /* Card section min-heights collapse on mobile */ main section[style*="min-height"] { min-height: auto !important; } /* Kanban columns swipe full-width on phones */ [data-kanban-column] { flex: 0 0 auto !important; width: 84vw !important; max-width: 320px !important; } /* Hide page advertising indicator (FMED-D2 etc.) on mobile */ body > div.relative > div.absolute.right-4.top-\[58px\] { display: none; } } /* Hide custom scrollbars (used by horizontal nav) */ .scrollbar-hidden::-webkit-scrollbar { display: none; } .scrollbar-hidden { scrollbar-width: none; } /* ====================================================================== Reduced motion — respect user preference ====================================================================== */ @media (prefers-reduced-motion: reduce) { [data-kanban-card], [data-kanban-cards] > [data-kanban-card] { animation: none !important; transition: none !important; } } /* hover tooltip used on icon buttons */ .has-tip { position: relative; } .has-tip:hover .tip { opacity: 1; visibility: visible; transform: translate(-50%, -4px); } .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 0); opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; background: #fff; color: #000; font-size: 12px; line-height: 20px; padding: 8px 13px; border-radius: 11px; white-space: nowrap; box-shadow: 0 11px 11px rgba(27, 33, 44, .18), 0 1px 2px rgba(0, 0, 0, .06); z-index: 50; } .tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; filter: drop-shadow(0 6px 4px rgba(27, 33, 44, .12)); }