/* ═══════════════════════════════════════════════════════════════════════════ Monitoring Active Patient — Premium Animation Layer Drop this file AFTER activePatientMonitoring.css in your . Zero business-logic changes. Pure UI polish. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── §0 ANIMATION TOKENS & CUSTOM PROPERTIES ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon { --apm-dur-fast: 160ms; --apm-dur-base: 280ms; --apm-dur-slow: 480ms; --apm-dur-crawl: 900ms; --apm-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy spring */ --apm-smooth: cubic-bezier(0.23, 1, 0.32, 1); /* smooth out */ --apm-sharp: cubic-bezier(0.4, 0, 0.2, 1); /* material */ --apm-enter: cubic-bezier(0, 0, 0.2, 1); --apm-exit: cubic-bezier(0.4, 0, 1, 1); --apm-glow-purple: 0 0 0 3px rgba(124, 58, 237, 0.18), 0 4px 24px rgba(124, 58, 237, 0.22); --apm-glow-teal: 0 0 0 3px rgba(14, 116, 144, 0.18), 0 4px 24px rgba(14, 116, 144, 0.22); --apm-glow-green: 0 0 0 3px rgba(22, 163, 74, 0.18), 0 4px 24px rgba(22, 163, 74, 0.22); --apm-glow-red: 0 0 0 3px rgba(220, 38, 38, 0.18), 0 4px 24px rgba(220, 38, 38, 0.22); --apm-glow-amber: 0 0 0 3px rgba(202, 138, 4, 0.18), 0 4px 24px rgba(202, 138, 4, 0.22); } /* ───────────────────────────────────────────────────────────────────────── §1 PAGE-LOAD STAGGER SYSTEM All major sections slide up + fade in sequentially. ───────────────────────────────────────────────────────────────────────── */ /* Keyframes */ @keyframes apmSlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes apmSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes apmFadeScale { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes apmFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes apmSlideRight { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } /* Hero: slides down from top */ #page-actpatmon .actpatmon-hero { animation: apmSlideDown var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 0ms; } /* KPI strip */ #page-actpatmon .actpatmon-kpi-grid { animation: apmSlideUp var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 90ms; } /* Widget strip */ #page-actpatmon .actpatmon-widgets { animation: apmSlideUp var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 160ms; } /* Body (tabs + toolbar + table) */ #page-actpatmon .actpatmon-body { animation: apmSlideUp var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 230ms; } /* Individual KPI cards stagger */ #page-actpatmon .actpatmon-kpi:nth-child(1) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 120ms; } #page-actpatmon .actpatmon-kpi:nth-child(2) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 155ms; } #page-actpatmon .actpatmon-kpi:nth-child(3) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 190ms; } #page-actpatmon .actpatmon-kpi:nth-child(4) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 225ms; } #page-actpatmon .actpatmon-kpi:nth-child(5) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 260ms; } #page-actpatmon .actpatmon-kpi:nth-child(6) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 295ms; } #page-actpatmon .actpatmon-kpi:nth-child(7) { animation: apmFadeScale var(--apm-dur-base) var(--apm-spring) both; animation-delay: 330ms; } /* Widget items stagger */ #page-actpatmon .actpatmon-widget:nth-child(1) { animation: apmSlideRight var(--apm-dur-base) var(--apm-smooth) both; animation-delay: 200ms; } #page-actpatmon .actpatmon-widget:nth-child(2) { animation: apmSlideRight var(--apm-dur-base) var(--apm-smooth) both; animation-delay: 230ms; } #page-actpatmon .actpatmon-widget:nth-child(3) { animation: apmSlideRight var(--apm-dur-base) var(--apm-smooth) both; animation-delay: 260ms; } #page-actpatmon .actpatmon-widget:nth-child(4) { animation: apmSlideRight var(--apm-dur-base) var(--apm-smooth) both; animation-delay: 290ms; } #page-actpatmon .actpatmon-widget:nth-child(5) { animation: apmSlideRight var(--apm-dur-base) var(--apm-smooth) both; animation-delay: 320ms; } #page-actpatmon .actpatmon-widget:nth-child(6) { animation: apmSlideRight var(--apm-dur-base) var(--apm-smooth) both; animation-delay: 350ms; } /* ───────────────────────────────────────────────────────────────────────── §2 HERO — ANIMATED GRADIENT BLOBS ───────────────────────────────────────────────────────────────────────── */ @keyframes apmBlobDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(18px, -12px) scale(1.07); } 66% { transform: translate(-10px, 14px) scale(0.95); } } @keyframes apmBlobDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-20px, 8px) scale(1.08); } 70% { transform: translate(14px, -10px) scale(0.94); } } @keyframes apmGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } #page-actpatmon .actpatmon-hero { position: relative; overflow: hidden; isolation: isolate; background-size: 200% 200%; animation: apmSlideDown var(--apm-dur-slow) var(--apm-smooth) both, apmGradientShift 12s ease infinite; animation-delay: 0ms, 0ms; } /* Blob 1 — top-right aurora */ #page-actpatmon .actpatmon-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 55% 75% at 95% -5%, rgba(167, 139, 250, 0.45) 0%, transparent 55%), radial-gradient(ellipse 40% 55% at 5% 110%, rgba(45, 212, 191, 0.18) 0%, transparent 50%); animation: apmBlobDrift1 18s ease-in-out infinite; will-change: transform; } /* Blob 2 — center shimmer */ #page-actpatmon .actpatmon-hero::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; left: 45%; top: -80px; background: radial-gradient(circle, rgba(99, 102, 241, 0.20) 0%, transparent 70%); filter: blur(32px); pointer-events: none; z-index: 0; animation: apmBlobDrift2 22s ease-in-out infinite; will-change: transform; } /* Keep hero children above blobs */ #page-actpatmon .actpatmon-hero-inner, #page-actpatmon .actpatmon-hero > *:not(.actpatmon-hero-inner) { position: relative; z-index: 1; } /* Hero text entrance */ #page-actpatmon .actpatmon-hero-eyebrow { animation: apmSlideRight var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 60ms; } #page-actpatmon .actpatmon-hero-title { animation: apmSlideUp var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 100ms; } #page-actpatmon .actpatmon-hero-sub { animation: apmSlideUp var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 140ms; } #page-actpatmon .actpatmon-hero-date { animation: apmFadeIn var(--apm-dur-slow) var(--apm-smooth) both; animation-delay: 200ms; } /* ───────────────────────────────────────────────────────────────────────── §3 KPI CARDS — ENHANCED HOVER + COUNT-UP INDICATOR ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-kpi { transition: transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth), background var(--apm-dur-fast) var(--apm-sharp); cursor: default; will-change: transform, box-shadow; } /* Accent-coloured glow per card colour on hover */ #page-actpatmon .actpatmon-kpi:hover { transform: translateY(-5px) scale(1.025); } #page-actpatmon .actpatmon-kpi--purple:hover { box-shadow: 0 8px 28px rgba(124, 58, 237, 0.22), 0 2px 6px rgba(26,11,61,0.06); } #page-actpatmon .actpatmon-kpi--green:hover { box-shadow: 0 8px 28px rgba(22, 163, 74, 0.22), 0 2px 6px rgba(26,11,61,0.06); } #page-actpatmon .actpatmon-kpi--amber:hover { box-shadow: 0 8px 28px rgba(202, 138, 4, 0.22), 0 2px 6px rgba(26,11,61,0.06); } #page-actpatmon .actpatmon-kpi--red:hover { box-shadow: 0 8px 28px rgba(220, 38, 38, 0.22), 0 2px 6px rgba(26,11,61,0.06); } #page-actpatmon .actpatmon-kpi--teal:hover { box-shadow: 0 8px 28px rgba(14, 116, 144, 0.22), 0 2px 6px rgba(26,11,61,0.06); } #page-actpatmon .actpatmon-kpi--cyan:hover { box-shadow: 0 8px 28px rgba(8, 145, 178, 0.22), 0 2px 6px rgba(26,11,61,0.06); } #page-actpatmon .actpatmon-kpi--slate:hover { box-shadow: 0 8px 28px rgba(100, 116, 139, 0.22),0 2px 6px rgba(26,11,61,0.06); } /* Top accent bar animated width on load */ #page-actpatmon .actpatmon-kpi::before { transform-origin: left; animation: apmBarGrow 0.6s var(--apm-smooth) both; animation-delay: inherit; /* inherits stagger from §1 */ } @keyframes apmBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Value number shimmers while counting-up */ #page-actpatmon .actpatmon-kpi-v { display: inline-block; transition: color var(--apm-dur-fast); } #page-actpatmon .actpatmon-kpi:hover .actpatmon-kpi-v { filter: brightness(1.15) saturate(1.2); transition: filter var(--apm-dur-fast); } /* Widget hover */ #page-actpatmon .actpatmon-widget { transition: background var(--apm-dur-fast) var(--apm-sharp), transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); will-change: transform; } #page-actpatmon .actpatmon-widget:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(26, 11, 61, 0.08); background: #faf9fc; } /* ───────────────────────────────────────────────────────────────────────── §4 TAB NAVIGATION — SLIDING ACTIVE INDICATOR ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-tabs { position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #page-actpatmon .actpatmon-tab { position: relative; transition: color var(--apm-dur-fast) var(--apm-sharp), background var(--apm-dur-base) var(--apm-smooth), transform var(--apm-dur-fast) var(--apm-spring); z-index: 1; } #page-actpatmon .actpatmon-tab:hover:not(.active) { transform: translateY(-1px); } #page-actpatmon .actpatmon-tab:active { transform: scale(0.96); } /* Active tab pulse ring on first activation */ @keyframes apmTabPop { 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); } 60% { box-shadow: 0 0 0 7px rgba(124, 58, 237, 0); } 100% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28); } } #page-actpatmon .actpatmon-tab.active { transition: color var(--apm-dur-fast) var(--apm-sharp), background var(--apm-dur-base) var(--apm-smooth), box-shadow var(--apm-dur-base) var(--apm-smooth); animation: apmTabPop 0.45s var(--apm-smooth) forwards; } /* Panel transition override — smoother than default */ #page-actpatmon .actpatmon-panel.active { animation: apmPanelEnter 0.32s var(--apm-smooth) both; } @keyframes apmPanelEnter { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ───────────────────────────────────────────────────────────────────────── §5 FILTER CHIPS (PILLS) — ACTIVE / HOVER MICRO-INTERACTION ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-pill { transition: background var(--apm-dur-base) var(--apm-smooth), color var(--apm-dur-fast) var(--apm-sharp), border-color var(--apm-dur-fast) var(--apm-sharp), transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); will-change: transform; } #page-actpatmon .actpatmon-pill:hover:not(.active) { transform: translateY(-2px) scale(1.03); } #page-actpatmon .actpatmon-pill:active { transform: scale(0.95); transition-duration: 80ms; } #page-actpatmon .actpatmon-pill.active { background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(109, 40, 217, 0.10)); border-color: rgba(124, 58, 237, 0.35); color: var(--apm-purple); box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(124, 58, 237, 0.12); transform: scale(1.04); font-weight: 800; transition: background var(--apm-dur-base) var(--apm-smooth), transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); } @keyframes apmPillActivate { 0% { transform: scale(0.92); } 60% { transform: scale(1.07); } 100% { transform: scale(1.04); } } #page-actpatmon .actpatmon-pill.active { animation: apmPillActivate 0.3s var(--apm-spring) forwards; } /* ───────────────────────────────────────────────────────────────────────── §6 SEARCH BOX — FOCUS GLOW + ICON ANIMATION ───────────────────────────────────────────────────────────────────────── */ /* Wrap search input in a positioned container (CSS only — works on existing markup) */ #page-actpatmon .actpatmon-toolbar { transition: box-shadow var(--apm-dur-base) var(--apm-smooth), border-color var(--apm-dur-fast) var(--apm-sharp); } #page-actpatmon .actpatmon-search-inp, #page-actpatmon .actpatmon-toolbar input[type="text"], #page-actpatmon .actpatmon-toolbar input[type="number"], #page-actpatmon .actpatmon-toolbar select { transition: border-color var(--apm-dur-fast) var(--apm-sharp), box-shadow var(--apm-dur-base) var(--apm-smooth), transform var(--apm-dur-fast) var(--apm-spring); will-change: box-shadow; } #page-actpatmon .actpatmon-search-inp:focus, #page-actpatmon .actpatmon-toolbar input[type="text"]:focus, #page-actpatmon .actpatmon-toolbar input[type="number"]:focus, #page-actpatmon .actpatmon-toolbar select:focus { outline: none; border-color: rgba(124, 58, 237, 0.5); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 2px 12px rgba(124, 58, 237, 0.10); transform: translateY(-1px); } #page-actpatmon .actpatmon-search-inp:hover, #page-actpatmon .actpatmon-toolbar input:hover, #page-actpatmon .actpatmon-toolbar select:hover { border-color: rgba(124, 58, 237, 0.25); box-shadow: 0 1px 4px rgba(26, 11, 61, 0.06); } /* Scanning border animation on focus */ @keyframes apmFocusBorderScan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ───────────────────────────────────────────────────────────────────────── §7 PATIENT TABLE — ROW ENTRANCES + HOVER LIFT ───────────────────────────────────────────────────────────────────────── */ /* Row entrance animations — JS will add data-row-index attribute. Falls back gracefully using nth-child for pure CSS stagger. */ @keyframes apmRowEnter { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } #page-actpatmon .actpatmon-table tbody tr { animation: apmRowEnter var(--apm-dur-base) var(--apm-smooth) both; will-change: opacity, transform; } /* Stagger rows 1-20 */ #page-actpatmon .actpatmon-table tbody tr:nth-child(1) { animation-delay: 50ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(2) { animation-delay: 80ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(3) { animation-delay: 110ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(4) { animation-delay: 140ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(5) { animation-delay: 170ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(6) { animation-delay: 200ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(7) { animation-delay: 230ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(8) { animation-delay: 260ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(9) { animation-delay: 290ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(10) { animation-delay: 320ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(n+11) { animation-delay: 340ms; } /* Row hover — subtle lift without layout shift */ #page-actpatmon .actpatmon-row-click { transition: background var(--apm-dur-fast) var(--apm-sharp); } #page-actpatmon .actpatmon-row-click td { transition: background var(--apm-dur-fast) var(--apm-sharp), box-shadow var(--apm-dur-fast) var(--apm-smooth), transform var(--apm-dur-fast) var(--apm-spring); } #page-actpatmon .actpatmon-row-click:hover td { background: rgba(124, 58, 237, 0.05) !important; box-shadow: inset 0 0 0 0 transparent; } /* First and last td get rounded feel on hover without breaking table layout */ #page-actpatmon .actpatmon-row-click:hover td:first-child { box-shadow: inset 3px 0 0 rgba(124, 58, 237, 0.35); } /* Row selected flash */ #page-actpatmon .actpatmon-row-selected td { transition: background var(--apm-dur-base) var(--apm-smooth), box-shadow var(--apm-dur-base) var(--apm-smooth); } /* Class for JS to trigger when filter refresh happens */ #page-actpatmon .actpatmon-table-wrap.apm-refreshing { animation: apmTableFadeOut var(--apm-dur-fast) var(--apm-exit) both; } #page-actpatmon .actpatmon-table-wrap.apm-refreshed { animation: apmTableFadeIn 0.35s var(--apm-enter) both; } @keyframes apmTableFadeOut { from { opacity: 1; } to { opacity: 0.35; } } @keyframes apmTableFadeIn { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────────────────────────────────── §8 STATUS BADGES — SUBTLE PULSE ANIMATION ───────────────────────────────────────────────────────────────────────── */ @keyframes apmPulseHadir { 0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } 50% { box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15); } } @keyframes apmPulseTidak { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); } } @keyframes apmPulseBelum { 0%, 100% { box-shadow: 0 0 0 0 rgba(202, 138, 4, 0); } 50% { box-shadow: 0 0 0 4px rgba(202, 138, 4, 0.12); } } #page-actpatmon .actpatmon-status.hadir { animation: apmPulseHadir 3.5s ease-in-out infinite; } #page-actpatmon .actpatmon-status.tidak { animation: apmPulseTidak 2.8s ease-in-out infinite; } #page-actpatmon .actpatmon-status.belum { animation: apmPulseBelum 3.2s ease-in-out infinite; } /* Review badges */ #page-actpatmon .actpatmon-review.overdue { animation: apmPulseTidak 2.4s ease-in-out infinite; } #page-actpatmon .actpatmon-review.due { animation: apmPulseBelum 3.0s ease-in-out infinite; } /* Status badge entrance */ #page-actpatmon .actpatmon-status, #page-actpatmon .actpatmon-review, #page-actpatmon .actpatmon-cat-chip { transition: transform var(--apm-dur-fast) var(--apm-spring); } #page-actpatmon .actpatmon-status:hover, #page-actpatmon .actpatmon-review:hover { transform: scale(1.06); } /* ───────────────────────────────────────────────────────────────────────── §9 NOTIFICATION BELL — PULSE + BADGE BOUNCE ───────────────────────────────────────────────────────────────────────── */ /* Target any bell-related element in the hero area */ @keyframes apmBellRing { 0%, 50%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(12deg); } 20%, 40% { transform: rotate(-10deg); } } @keyframes apmBellPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0); } } @keyframes apmBadgePop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } } /* These selectors target common patterns — adjust class names if yours differ */ #page-actpatmon [class*="notif"] button, #page-actpatmon [class*="bell"], #page-actpatmon button[title*="notif" i], #page-actpatmon button[aria-label*="notif" i] { transition: transform var(--apm-dur-fast) var(--apm-spring); position: relative; overflow: visible; } #page-actpatmon [class*="notif"] button:hover, #page-actpatmon [class*="bell"]:hover { animation: apmBellRing 0.6s var(--apm-smooth); } /* Notification badge */ #page-actpatmon [class*="notif-badge"], #page-actpatmon [class*="badge"] { animation: apmBadgePop 0.4s var(--apm-spring) both; } /* ───────────────────────────────────────────────────────────────────────── §10 EMPTY STATE — ANIMATED ILLUSTRATION ───────────────────────────────────────────────────────────────────────── */ @keyframes apmEmptyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes apmEmptyEnter { from { opacity: 0; transform: scale(0.85) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } #page-actpatmon .actpatmon-empty { animation: apmEmptyEnter 0.5s var(--apm-spring) both; } #page-actpatmon .actpatmon-form-empty { animation: apmEmptyEnter 0.5s var(--apm-spring) both; } #page-actpatmon .actpatmon-form-empty-icon { display: inline-block; animation: apmEmptyFloat 3s ease-in-out infinite; } /* Empty text */ #page-actpatmon .actpatmon-empty::before, #page-actpatmon .actpatmon-form-empty p { opacity: 0.85; } /* ───────────────────────────────────────────────────────────────────────── §11 SKELETON LOADERS — SHIMMER EFFECT Add class "apm-skeleton" to any loading container via JS. ───────────────────────────────────────────────────────────────────────── */ @keyframes apmShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } /* Skeleton base — JS adds .apm-skeleton while loading */ .apm-skeleton { background: linear-gradient( 90deg, rgba(26, 11, 61, 0.06) 0%, rgba(124, 58, 237, 0.12) 40%, rgba(26, 11, 61, 0.06) 80% ); background-size: 800px 100%; animation: apmShimmer 1.4s ease-in-out infinite; border-radius: 6px; color: transparent !important; pointer-events: none; user-select: none; } .apm-skeleton * { visibility: hidden; } /* Skeleton KPI card */ .apm-skeleton-kpi { height: 78px; border-radius: 10px; background: linear-gradient( 90deg, rgba(26, 11, 61, 0.05) 0%, rgba(124, 58, 237, 0.10) 40%, rgba(26, 11, 61, 0.05) 80% ); background-size: 800px 100%; animation: apmShimmer 1.4s ease-in-out infinite; } /* Skeleton table row */ .apm-skeleton-row { height: 46px; border-radius: 6px; margin-bottom: 4px; background: linear-gradient( 90deg, rgba(26, 11, 61, 0.04) 0%, rgba(124, 58, 237, 0.08) 40%, rgba(26, 11, 61, 0.04) 80% ); background-size: 800px 100%; animation: apmShimmer 1.6s ease-in-out infinite; } .apm-skeleton-row:nth-child(2n) { animation-delay: 0.1s; } .apm-skeleton-row:nth-child(3n) { animation-delay: 0.2s; } .apm-skeleton-row:nth-child(4n) { animation-delay: 0.3s; } /* Skeleton text line */ .apm-skeleton-text { height: 12px; border-radius: 4px; background: linear-gradient( 90deg, rgba(26, 11, 61, 0.06) 0%, rgba(124, 58, 237, 0.12) 40%, rgba(26, 11, 61, 0.06) 80% ); background-size: 800px 100%; animation: apmShimmer 1.5s ease-in-out infinite; } /* ───────────────────────────────────────────────────────────────────────── §12 BUTTON MICRO-INTERACTIONS ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-mini-btn { transition: background var(--apm-dur-fast) var(--apm-sharp), border-color var(--apm-dur-fast) var(--apm-sharp), transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); will-change: transform; } #page-actpatmon .actpatmon-mini-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.18); } #page-actpatmon .actpatmon-mini-btn:active { transform: scale(0.96); transition-duration: 80ms; } #page-actpatmon .actpatmon-save-btn { transition: opacity var(--apm-dur-fast) var(--apm-sharp), transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth), filter var(--apm-dur-fast) var(--apm-sharp); will-change: transform; } #page-actpatmon .actpatmon-save-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); filter: brightness(1.06) saturate(1.1); } #page-actpatmon .actpatmon-save-btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 80ms; } #page-actpatmon .actpatmon-save-btn--pharm:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(124, 58, 237, 0.40); } #page-actpatmon .actpatmon-save-btn--counsel:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(14, 116, 144, 0.40); } #page-actpatmon .actpatmon-outline-btn { transition: background var(--apm-dur-fast) var(--apm-sharp), border-color var(--apm-dur-fast) var(--apm-sharp), transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); will-change: transform; } #page-actpatmon .actpatmon-outline-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18); } #page-actpatmon .actpatmon-outline-btn:active { transform: scale(0.97); transition-duration: 80ms; } /* ───────────────────────────────────────────────────────────────────────── §13 CLINICAL FORM PANEL — SLIDE-IN + SCROLL FEEL ───────────────────────────────────────────────────────────────────────── */ @keyframes apmFormSlide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } .actpatmon-clinical-ov, .actpatmon-att-ov { --apm-smooth: cubic-bezier(0.23, 1, 0.32, 1); } .actpatmon-clinical-ov.open .actpatmon-clinical-modal, .actpatmon-att-ov.open .actpatmon-clinical-modal { animation: apmModalPop 0.28s var(--apm-smooth) both; } @keyframes apmModalPop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Form card entrance */ #page-actpatmon .actpatmon-form-card { transition: box-shadow var(--apm-dur-base) var(--apm-smooth), transform var(--apm-dur-fast) var(--apm-spring); } #page-actpatmon .actpatmon-form-card:hover { box-shadow: 0 4px 16px rgba(26, 11, 61, 0.08); transform: translateY(-1px); } /* Input focus */ #page-actpatmon .actpatmon-inp { transition: border-color var(--apm-dur-fast) var(--apm-sharp), box-shadow var(--apm-dur-base) var(--apm-smooth), transform var(--apm-dur-fast) var(--apm-spring); } #page-actpatmon .actpatmon-inp:focus { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12), 0 2px 8px rgba(124, 58, 237, 0.08); } /* ───────────────────────────────────────────────────────────────────────── §14 REPORT CARDS — HOVER LIFT ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-report-card { transition: transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); will-change: transform; } #page-actpatmon .actpatmon-report-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(26, 11, 61, 0.10); } /* ───────────────────────────────────────────────────────────────────────── §15 PROFILE DETAIL — SECTION ENTRANCE ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-profile-detail { animation: apmFadeScale 0.4s var(--apm-smooth) both; animation-delay: 80ms; } #page-actpatmon .actpatmon-stat-card { transition: transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); } #page-actpatmon .actpatmon-stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(26, 11, 61, 0.08); } /* Review date items */ #page-actpatmon .actpatmon-review-date-item { transition: transform var(--apm-dur-fast) var(--apm-spring), background var(--apm-dur-fast) var(--apm-sharp); } #page-actpatmon .actpatmon-review-date-item:hover { transform: translateY(-2px); background: #f3f2f8; } /* ───────────────────────────────────────────────────────────────────────── §16 FLAG CHIPS ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .actpatmon-flag { transition: transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-fast) var(--apm-smooth); } #page-actpatmon .actpatmon-flag:hover { transform: scale(1.08); box-shadow: 0 2px 6px rgba(26, 11, 61, 0.10); } /* ───────────────────────────────────────────────────────────────────────── §17 RISK SCORE CIRCLE — HEARTBEAT ───────────────────────────────────────────────────────────────────────── */ @keyframes apmHeartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } 70% { transform: scale(1); } } #page-actpatmon .actpatmon-risk-score { animation: apmHeartbeat 2.2s ease-in-out infinite; transition: box-shadow var(--apm-dur-base) var(--apm-smooth); } #page-actpatmon .actpatmon-risk-score:hover { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.15); animation-play-state: paused; } /* ───────────────────────────────────────────────────────────────────────── §18 DATA REFRESH TRANSITION (JS-driven classes) Add/remove .apm-list-out / .apm-list-in on the tbody via JS ───────────────────────────────────────────────────────────────────────── */ #page-actpatmon .apm-list-out { animation: apmListOut 0.18s var(--apm-exit) both; } #page-actpatmon .apm-list-in { animation: apmListIn 0.32s var(--apm-enter) both; } @keyframes apmListOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } } @keyframes apmListIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────────────────────────────────── §19 MOBILE — ANIMATED CARD MODE FOR PATIENT LIST On screens ≤768 px, table rows transform into animated cards. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Tabs become horizontal scrollable chips */ #page-actpatmon .actpatmon-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 4px; width: 100%; max-width: 100%; } #page-actpatmon .actpatmon-tabs::-webkit-scrollbar { display: none; } #page-actpatmon .actpatmon-tab { flex-shrink: 0; scroll-snap-align: start; min-width: fit-content; } /* Patient table → card stack */ #page-actpatmon .actpatmon-table-wrap { overflow: visible; background: transparent; border: none; box-shadow: none; } #page-actpatmon .actpatmon-table, #page-actpatmon .actpatmon-table thead, #page-actpatmon .actpatmon-table tbody, #page-actpatmon .actpatmon-table th, #page-actpatmon .actpatmon-table td, #page-actpatmon .actpatmon-table tr { display: block; } #page-actpatmon .actpatmon-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } #page-actpatmon .actpatmon-table tbody tr { background: var(--apm-surface); border: var(--apm-border); border-radius: 12px; margin-bottom: 10px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(26, 11, 61, 0.06); animation: apmCardEnter var(--apm-dur-base) var(--apm-spring) both; transition: transform var(--apm-dur-fast) var(--apm-spring), box-shadow var(--apm-dur-base) var(--apm-smooth); } @keyframes apmCardEnter { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } #page-actpatmon .actpatmon-table tbody tr:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26, 11, 61, 0.10); } #page-actpatmon .actpatmon-table td { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border: none; font-size: 13px; color: var(--apm-ink-soft); background: transparent !important; } #page-actpatmon .actpatmon-table td::before { content: attr(data-label); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--apm-muted); min-width: 90px; padding-top: 2px; flex-shrink: 0; } /* Even-row tint */ #page-actpatmon .actpatmon-table tbody tr:nth-child(even) { background: rgba(245, 244, 248, 0.6); } /* Card stagger on mobile */ #page-actpatmon .actpatmon-table tbody tr:nth-child(1) { animation-delay: 40ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(2) { animation-delay: 80ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(3) { animation-delay: 120ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(4) { animation-delay: 160ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(5) { animation-delay: 200ms; } #page-actpatmon .actpatmon-table tbody tr:nth-child(n+6) { animation-delay: 240ms; } /* Filter pills — scroll row */ #page-actpatmon .actpatmon-filter-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } #page-actpatmon .actpatmon-filter-pills::-webkit-scrollbar { display: none; } #page-actpatmon .actpatmon-pill { flex-shrink: 0; } /* KPI grid stays 2-col but rows animate in pairs */ #page-actpatmon .actpatmon-kpi-grid { grid-template-columns: repeat(2, 1fr); } /* Hero blobs reduced on mobile for perf */ #page-actpatmon .actpatmon-hero::after { width: 160px; height: 160px; filter: blur(20px); } } /* ───────────────────────────────────────────────────────────────────────── §20 TABLET BREAKPOINT ───────────────────────────────────────────────────────────────────────── */ @media (min-width: 769px) and (max-width: 1200px) { #page-actpatmon .actpatmon-tabs { flex-wrap: wrap; } #page-actpatmon .actpatmon-kpi-grid { grid-template-columns: repeat(4, 1fr); } } /* ───────────────────────────────────────────────────────────────────────── §21 PERFORMANCE — REDUCED MOTION SUPPORT Respects OS "reduce motion" preference. Keeps layout but disables purely decorative animations. Functional transitions kept minimal. ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Kill decorative infinite loops */ #page-actpatmon .actpatmon-hero, #page-actpatmon .actpatmon-hero::before, #page-actpatmon .actpatmon-hero::after, #page-actpatmon .actpatmon-risk-score, #page-actpatmon .actpatmon-status.hadir, #page-actpatmon .actpatmon-status.tidak, #page-actpatmon .actpatmon-status.belum, #page-actpatmon .actpatmon-review.overdue, #page-actpatmon .actpatmon-review.due, #page-actpatmon .actpatmon-form-empty-icon, .apm-skeleton, .apm-skeleton-kpi, .apm-skeleton-row, .apm-skeleton-text { animation: none !important; } /* Page-load entrances — instant */ #page-actpatmon .actpatmon-hero, #page-actpatmon .actpatmon-kpi-grid, #page-actpatmon .actpatmon-widgets, #page-actpatmon .actpatmon-body, #page-actpatmon .actpatmon-kpi, #page-actpatmon .actpatmon-widget, #page-actpatmon .actpatmon-table tbody tr, #page-actpatmon .actpatmon-hero-eyebrow, #page-actpatmon .actpatmon-hero-title, #page-actpatmon .actpatmon-hero-sub, #page-actpatmon .actpatmon-hero-date, #page-actpatmon .actpatmon-clinical-forms, #page-actpatmon .actpatmon-profile-detail, #page-actpatmon .actpatmon-empty, #page-actpatmon .actpatmon-form-empty, #page-actpatmon .actpatmon-panel.active { animation: none !important; opacity: 1 !important; transform: none !important; } /* Keep functional (state-change) transitions but ultra-fast */ #page-actpatmon .actpatmon-tab, #page-actpatmon .actpatmon-pill, #page-actpatmon .actpatmon-kpi, #page-actpatmon .actpatmon-widget, #page-actpatmon .actpatmon-mini-btn, #page-actpatmon .actpatmon-save-btn, #page-actpatmon .actpatmon-outline-btn, #page-actpatmon .actpatmon-row-click td, #page-actpatmon .actpatmon-report-card, #page-actpatmon .actpatmon-stat-card { transition-duration: 80ms !important; transition-delay: 0ms !important; } } /* ───────────────────────────────────────────────────────────────────────── §22 JAVASCRIPT COMPANION — HELPER CLASSES Drop this ───────────────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────────────── END OF ANIMATION LAYER ═══════════════════════════════════════════════════════════════════════════ */