/* * RHU CSS Patch — fixes missing Tailwind v4 @theme custom tokens. * Upload this file to public_html/assets/patch.css * and add to index.html */ /* ── CSS variables ─────────────────────────────────────────────────────── */ :root { --color-brand-blue-deep: #0a3580; --color-brand-blue: #00C800; --color-brand-teal: #33E033; --color-brand-green: #00C800; --color-brand-green-light: #33E033; --color-surface: #ffffff; --color-surface-card: #ffffff; --color-surface-sunken: #f0fce8; --color-ink: #1a2330; --color-ink-muted: #5b6878; --color-ink-faint: #9aa6b2; --color-status-pending: #c98a1e; --color-status-ongoing: #1565C0; --color-status-completed:#4a9d2e; --color-status-cancelled:#c0392b; --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --radius-card: 1rem; } /* ── Base ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--color-surface); color: var(--color-ink); min-height: 100vh; font-size: 16px; line-height: 1.5; } /* ── Missing Tailwind colour utilities ─────────────────────────────────── */ .bg-surface { background-color: var(--color-surface) !important; } .bg-surface-sunken { background-color: var(--color-surface-sunken) !important; } .bg-surface-card { background-color: var(--color-surface-card) !important; } .bg-white { background-color: #ffffff !important; } .text-ink { color: var(--color-ink) !important; } .text-ink-muted { color: var(--color-ink-muted) !important; } .text-ink-faint { color: var(--color-ink-faint) !important; } .text-brand-blue { color: var(--color-brand-blue) !important; } .text-brand-teal { color: var(--color-brand-teal) !important; } .text-brand-green { color: var(--color-brand-green) !important; } .text-status-pending { color: var(--color-status-pending) !important; } .text-status-ongoing { color: var(--color-status-ongoing) !important; } .text-status-completed { color: var(--color-status-completed) !important; } .text-status-cancelled { color: var(--color-status-cancelled) !important; } .text-white { color: #ffffff !important; } .text-gray-300 { color: #d1d5db !important; } .text-gray-400 { color: #9ca3af !important; } .text-gray-500 { color: #6b7280 !important; } .text-gray-600 { color: #4b5563 !important; } .text-cyan-400\/80 { color: rgba(34,211,238,.8) !important; } .text-red-400 { color: #f87171 !important; } .border-ink\/10 { border-color: rgba(26,35,48,.1) !important; } .border-brand-teal\/40 { border-color: rgba(30,136,229,.4) !important; } .border-brand-teal\/50 { border-color: rgba(30,136,229,.5) !important; } .border-white\/10 { border-color: rgba(255,255,255,.1) !important; } .border-red-500\/20 { border-color: rgba(239,68,68,.2) !important; } .bg-brand-blue\/10 { background-color: rgba(0,200,0,.1) !important; } .bg-brand-green\/10 { background-color: rgba(0,200,0,.1) !important; } .bg-status-pending\/10 { background-color: rgba(201,138,30,.1) !important; } .bg-status-cancelled\/10 { background-color: rgba(192,57,43,.1) !important; } .bg-red-500\/10 { background-color: rgba(239,68,68,.1) !important; } .bg-white\/5 { background-color: rgba(255,255,255,.05) !important; } /* ── Border radius ─────────────────────────────────────────────────────── */ .rounded-card { border-radius: var(--radius-card) !important; } .rounded-xl { border-radius: .75rem !important; } .rounded-2xl { border-radius: 1rem !important; } .rounded-3xl { border-radius: 1.5rem !important; } .rounded-full { border-radius: 9999px !important; } .rounded-lg { border-radius: .5rem !important; } /* ── Font ──────────────────────────────────────────────────────────────── */ .font-data { font-family: var(--font-mono); letter-spacing: .01em; } .font-sans { font-family: var(--font-sans) !important; } /* ── Backdrop blur (login card) ────────────────────────────────────────── */ .backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* ── Layout ───────────────────────────────────────────────────────────── */ .flex { display: flex !important; } .flex-col { flex-direction: column !important; } .flex-1 { flex: 1 1 0% !important; } .items-center { align-items: center !important; } .items-start { align-items: flex-start !important; } .justify-center { justify-content: center !important; } .justify-between{ justify-content: space-between !important; } .min-h-screen { min-height: 100vh !important; } .h-screen { height: 100vh !important; } .h-16 { height: 4rem !important; } .w-full { width: 100% !important; } .w-64 { width: 16rem !important; } .w-20 { height: 5rem; width: 5rem; } .h-20 { height: 5rem !important; } .w-5 { width: 1.25rem !important; } .h-5 { height: 1.25rem !important; } .max-w-md { max-width: 28rem !important; } .max-w-\[1400px\] { max-width: 1400px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; } .sticky { position: sticky !important; } .top-0 { top: 0 !important; } .shrink-0 { flex-shrink: 0 !important; } .overflow-hidden { overflow: hidden !important; } .overflow-y-auto { overflow-y: auto !important; } .relative { position: relative !important; } .absolute { position: absolute !important; } .inset-0 { inset: 0 !important; } .z-10 { z-index: 10 !important; } .z-20 { z-index: 20 !important; } .z-30 { z-index: 30 !important; } .min-w-0 { min-width: 0 !important; } .whitespace-nowrap { white-space: nowrap !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pointer-events-none { pointer-events: none !important; } /* ── Spacing ─────────────────────────────────────────────────────────── */ .p-2 { padding: .5rem !important; } .p-4 { padding: 1rem !important; } .p-5 { padding: 1.25rem !important; } .p-6 { padding: 1.5rem !important; } .p-8 { padding: 2rem !important; } .px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-3 { padding-left: .75rem !important; padding-right: .75rem !important; } .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .py-2\.5 { padding-top: .625rem !important; padding-bottom: .625rem !important; } .py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-10{ padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .pl-4 { padding-left: 1rem !important; } .pr-10{ padding-right: 2.5rem !important; } .pr-12{ padding-right: 3rem !important; } .pt-1 { padding-top: .25rem !important; } .pb-1 { padding-bottom: .25rem !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: .75rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .mb-8 { margin-bottom: 2rem !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-6 { margin-top: 1.5rem !important; } .gap-2{ gap: .5rem !important; } .gap-3{ gap: .75rem !important; } .gap-4{ gap: 1rem !important; } .space-y-1 > * + * { margin-top: .25rem !important; } .space-y-5 > * + * { margin-top: 1.25rem !important; } .space-y-6 > * + * { margin-top: 1.5rem !important; } /* ── Typography ──────────────────────────────────────────────────────── */ .text-xs { font-size: .75rem !important; line-height: 1rem !important; } .text-sm { font-size: .875rem !important; line-height: 1.25rem !important; } .text-base { font-size: 1rem !important; line-height: 1.5rem !important; } .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; } .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; } .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } .text-7xl { font-size: 4.5rem !important; line-height: 1 !important; } .font-medium { font-weight: 500 !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } .text-center { text-align: center !important; } .uppercase { text-transform: uppercase !important; } .capitalize { text-transform: capitalize !important; } .tracking-wide { letter-spacing: .025em !important; } .tracking-wider { letter-spacing: .05em !important; } .tracking-\[0\.3em\] { letter-spacing: .3em !important; } /* ── Grid ────────────────────────────────────────────────────────────── */ .grid { display: grid !important; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } @media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; } } /* ── Border ──────────────────────────────────────────────────────────── */ .border { border-width: 1px !important; border-style: solid !important; } .border-b { border-bottom-width: 1px !important; border-bottom-style: solid !important; } .border-t { border-top-width: 1px !important; border-top-style: solid !important; } .border-r { border-right-width: 1px !important; border-right-style: solid !important; } .border-l { border-left-width: 1px !important; border-left-style: solid !important; } .border-2 { border-width: 2px !important; border-style: solid !important; } .border-transparent { border-color: transparent !important; } /* ── Shadow ──────────────────────────────────────────────────────────── */ .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05) !important; } .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25) !important; } /* ── Transform ───────────────────────────────────────────────────────── */ .transform { transform: var(--tw-transform, none); } .-translate-y-1\/2 { transform: translateY(-50%) !important; } .translate-y-0 { transform: translateY(0) !important; } .translate-y-10 { transform: translateY(2.5rem) !important; } .scale-100 { transform: scale(1) !important; } .hover\:scale-\[1\.02\]:hover { transform: scale(1.02) !important; } /* ── Transition ──────────────────────────────────────────────────────── */ .transition { transition-property: color,background-color,border-color,box-shadow,transform; transition-duration: .15s; transition-timing-function: cubic-bezier(.4,0,.2,1); } .transition-all { transition: all .15s cubic-bezier(.4,0,.2,1) !important; } .transition-colors { transition-property: color,background-color,border-color; transition-duration: .15s; transition-timing-function: cubic-bezier(.4,0,.2,1); } .duration-300 { transition-duration: .3s !important; } .duration-1000 { transition-duration: 1s !important; } /* ── Opacity ─────────────────────────────────────────────────────────── */ .opacity-0 { opacity: 0 !important; } .opacity-60 { opacity: .6 !important; } .opacity-100 { opacity: 1 !important; } .disabled\:opacity-50:disabled { opacity: .5 !important; } /* ── Cursor ──────────────────────────────────────────────────────────── */ .cursor-not-allowed { cursor: not-allowed !important; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed !important; } /* ── Focus ring ──────────────────────────────────────────────────────── */ .focus\:outline-none:focus { outline: none !important; } .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(30,136,229,.2) !important; } .focus\:bg-white:focus { background-color: #fff !important; } /* ── Hover states ────────────────────────────────────────────────────── */ .hover\:bg-surface-sunken:hover { background-color: var(--color-surface-sunken) !important; } .hover\:bg-status-cancelled\/10:hover { background-color: rgba(192,57,43,.1) !important; } .hover\:text-ink:hover { color: var(--color-ink) !important; } .hover\:text-brand-blue:hover { color: var(--color-brand-blue) !important; } .hover\:text-gray-300:hover { color: #d1d5db !important; } .hover\:text-status-cancelled:hover { color: var(--color-status-cancelled) !important; } .hover\:border-brand-teal\/40:hover { border-color: rgba(30,136,229,.4) !important; } .hover\:shadow-sm:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05) !important; } .hover\:from-cyan-600:hover { --tw-gradient-from: #00A000 !important; } .hover\:to-blue-700:hover { --tw-gradient-to: #0a3580 !important; } /* ── Gradient (Sign In button) ───────────────────────────────────────── */ .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from, #00C800), var(--tw-gradient-to, #1565C0)) !important; } .from-cyan-500 { --tw-gradient-from: #00C800; } .to-blue-600 { --tw-gradient-to: #1565C0; } /* ── Spinner ─────────────────────────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite !important; } .rounded-full.border-2 { border-radius: 9999px; } .border-t-white { border-top-color: #fff !important; } .border-white\/30 { border-color: rgba(255,255,255,.3) !important; } /* ── Object fit ──────────────────────────────────────────────────────── */ .object-contain { object-fit: contain !important; } /* ── Login card: ensure labels are INSIDE card ───────────────────────── */ .door-container { perspective: 1200px; width: 100%; height: 100vh; position: relative; } .door-left, .door-right { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(180deg,#0d2a06 0%,#071a03 100%); transition: transform 1.8s cubic-bezier(.77,0,.18,1); z-index: 20; display: flex; align-items: center; justify-content: center; } .door-left { left: 0; transform-origin: left center; border-right: 2px solid rgba(30,136,229,.12); } .door-right { right: 0; transform-origin: right center; border-left: 2px solid rgba(30,136,229,.12); } .door-left.open { transform: rotateY(-110deg); } .door-right.open { transform: rotateY(110deg); } .door-handle { position: absolute; width: 12px; height: 40px; background: radial-gradient(circle at 30% 30%,#f0e6d0,#b8a88a); border-radius: 6px; box-shadow: 0 0 20px rgba(200,180,150,.3); } .door-left .door-handle { right: 30px; top: 50%; transform: translateY(-50%); } .door-right .door-handle { left: 30px; top: 50%; transform: translateY(-50%); } .door-glow { position: absolute; width: 100%; height: 100%; pointer-events: none; } .door-left .door-glow { background: radial-gradient(ellipse at right center,rgba(30,136,229,.08) 0%,transparent 70%); } .door-right .door-glow { background: radial-gradient(ellipse at left center,rgba(30,136,229,.08) 0%,transparent 70%); } .animated-bg { background: linear-gradient(-45deg,#071a03,#0d2a06,#0a2004,#0a3580); background-size: 400% 400%; animation: gradientBG 15s ease infinite; min-height: 100vh; overflow: hidden; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes float { 0%,100% { transform: translateY(0) scale(1); opacity: .2; } 50% { transform: translateY(-30px) scale(1.5); opacity: .8; } } .animate-float { animation: float infinite ease-in-out; } @keyframes pulse-soft { 0%,100%{opacity:1}50%{opacity:.6} } .animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; } /* ── Pulse line (sidebar) ────────────────────────────────────────────── */ .pulse-line { width: 100%; height: 24px; } .pulse-line path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: pulse-draw 2.4s ease-in-out infinite; } @keyframes pulse-draw { 0% { stroke-dashoffset: 220; } 45% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } } /* ── Sidebar ─────────────────────────────────────────────────────────── */ aside.w-64 { width: 16rem; background: #fff; border-right: 1px solid rgba(26,35,48,.1); display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; } /* ── Navbar ──────────────────────────────────────────────────────────── */ header.h-16 { height: 4rem; background: #fff; border-bottom: 1px solid rgba(26,35,48,.1); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; gap: 1rem; position: sticky; top: 0; z-index: 10; } /* ── Main content area: more breathing room ──────────────────────────── */ main.flex-1 { padding: 2rem 1.5rem; } /* ── Stat cards: larger numbers ──────────────────────────────────────── */ .text-3xl.font-bold.font-data { font-size: 2.25rem !important; } /* ── Active nav link ─────────────────────────────────────────────────── */ .bg-brand-blue\/10.text-brand-blue { background-color: rgba(21,101,192,.1); color: var(--color-brand-blue); } @media (prefers-reduced-motion: reduce) { .animate-float,.animate-pulse-soft,.pulse-line path,.door-left,.door-right, .animate-spin { animation: none !important; transition: none !important; } } /* ── PATCH v2: fix remaining small elements ─────────────────────────── */ /* Stat cards — bigger numbers, more padding */ .bg-white.rounded-card.border.p-5, div[class*="rounded-card"][class*="border"][class*="p-5"] { padding: 1.75rem 2rem !important; min-height: 110px; } /* Stat number — much larger */ .text-3xl.font-bold.font-data, p.text-3xl { font-size: 3rem !important; line-height: 1 !important; margin-top: .5rem !important; } /* Stat label */ p.text-sm.text-ink-muted { font-size: .8rem !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-weight: 600 !important; } /* Quick action cards */ a[class*="rounded-card"] { padding: 1.25rem 1.5rem !important; font-size: 1rem !important; } a[class*="rounded-card"] span.text-xl { font-size: 1.5rem !important; } a[class*="rounded-card"] span.text-sm { font-size: .95rem !important; } /* Dashboard heading */ h2.text-2xl.font-bold { font-size: 1.85rem !important; } h3.text-sm.font-semibold.text-ink-muted { font-size: .75rem !important; margin-bottom: 1rem !important; } /* Grid gaps — more breathing room */ .grid.grid-cols-2.gap-4, div[class*="grid-cols-4"] { gap: 1.25rem !important; } .grid.grid-cols-2.gap-3, div[class*="grid-cols-3"] { gap: 1rem !important; } /* Section spacing */ .space-y-6 > * + * { margin-top: 2rem !important; } /* Sidebar brand text — prevent wrapping */ aside .p-5 { padding: 1.25rem !important; } aside .p-5 h1, aside .p-5 p { white-space: normal !important; } /* Page title in navbar */ header h1.text-lg { font-size: 1.2rem !important; font-weight: 700 !important; } /* Report period tabs */ button.text-sm, span[class*="text-sm"][class*="font-medium"] { font-size: .9rem !important; } /* Document breakdown section */ div[class*="rounded-card"] h3, div[class*="rounded-card"] p.text-sm { font-size: .9rem !important; } /* Export buttons */ button[class*="border"] { padding: .5rem 1.25rem !important; font-size: .875rem !important; } /* Main content max width and padding */ main { padding: 2rem !important; } /* ── PATCH v3: Patient Portal (login tabs, /portal page) ──────────────── */ .block { display: block !important; } .font-mono { font-family: var(--font-mono) !important; } .leading-tight { line-height: 1.25 !important; } .whitespace-pre-wrap { white-space: pre-wrap !important; } /* Sizing */ .h-8 { height: 2rem !important; } .h-9 { height: 2.25rem !important; } .h-32 { height: 8rem !important; } .w-8 { width: 2rem !important; } .w-9 { width: 2.25rem !important; } .w-32 { width: 8rem !important; } .max-w-2xl { max-width: 42rem !important; } /* Spacing */ .p-1 { padding: .25rem !important; } .pt-2 { padding-top: .5rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mt-4 { margin-top: 1rem !important; } .gap-6 { gap: 1.5rem !important; } .gap-2\.5 { gap: .625rem !important; } .py-1\.5 { padding-top: .375rem !important; padding-bottom: .375rem !important; } .py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; } /* Positioning */ .right-3 { right: .75rem !important; } .top-1\/2 { top: 50% !important; } /* Grid */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)) !important; } /* Colour: borders */ .border-brand-blue\/30 { border-color: rgba(21,101,192,.3) !important; } .border-status-cancelled\/20 { border-color: rgba(192,57,43,.2) !important; } .border-t-brand-blue { border-top-color: var(--color-brand-blue) !important; } /* Placeholder colour */ .placeholder-gray-500::placeholder { color: #6b7280 !important; } /* Disabled / focus states */ .disabled\:opacity-50:disabled { opacity: .5 !important; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed !important; } .disabled\:hover\:scale-100:disabled:hover { transform: scale(1) !important; } .focus\:outline-none:focus { outline: none !important; } .focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(30,136,229,.2) !important; } .focus\:ring-cyan-400\/20:focus { box-shadow: 0 0 0 2px rgba(30,136,229,.2) !important; } .focus\:border-cyan-400\/50:focus { border-color: rgba(34,211,238,.5) !important; } /* Hover states */ .hover\:bg-status-cancelled\/10:hover { background-color: rgba(192,57,43,.1) !important; } .hover\:from-cyan-600:hover { --tw-gradient-from: #00A000 !important; } .hover\:to-blue-700:hover { --tw-gradient-to: #0a3580 !important; } .hover\:scale-\[1\.02\]:hover { transform: scale(1.02) !important; } .hover\:text-gray-300:hover { color: #d1d5db !important; } .hover\:text-status-cancelled:hover { color: var(--color-status-cancelled) !important; } /* Responsive (sm: 640px) */ @media (min-width: 640px) { .sm\:flex-row { flex-direction: row !important; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .sm\:text-left { text-align: left !important; } } /* ── PATCH v3b: additional coverage (PatientProfile portal-setup UI) ──── */ .bg-brand-blue { background-color: var(--color-brand-blue) !important; } .border-ink\/5 { border-color: rgba(15,23,42,.05) !important; } .border-ink\/15 { border-color: rgba(15,23,42,.15) !important; } .flex-wrap { flex-wrap: wrap !important; } .justify-end { justify-content: flex-end !important; } .select-all { user-select: all !important; } .space-y-4 > * + * { margin-top: 1rem !important; } .gap-1 { gap: .25rem !important; } .gap-5 { gap: 1.25rem !important; } .gap-x-4 { column-gap: 1rem !important; } .gap-y-1 { row-gap: .25rem !important; } .h-28 { height: 7rem !important; } .w-28 { width: 7rem !important; } .mb-1\.5 { margin-bottom: .375rem !important; } .mt-0\.5 { margin-top: .125rem !important; } .mt-3 { margin-top: .75rem !important; } .p-10 { padding: 2.5rem !important; } .last\:border-0:last-child { border-width: 0 !important; } .hover\:underline:hover { text-decoration: underline !important; } .hover\:bg-ink\/10:hover { background-color: rgba(15,23,42,.1) !important; } .hover\:bg-surface-sunken:hover { background-color: var(--color-surface-sunken) !important; } .hover\:bg-brand-blue\/20:hover { background-color: rgba(21,101,192,.2) !important; } .hover\:bg-brand-blue-deep:hover { background-color: var(--color-brand-blue-deep) !important; } .focus\:ring-brand-blue\/20:focus { box-shadow: 0 0 0 2px rgba(21,101,192,.2) !important; } .focus\:border-brand-blue\/40:focus { border-color: rgba(21,101,192,.4) !important; } /* ══════════════════════════════════════════════════════════════════════════ BALIWAG CITY THEME — consolidated, no conflicts Navbar & Sidebar: shining blue gradient Page background: lime green Accents: #00C800 vivid green | #1565C0 royal blue ══════════════════════════════════════════════════════════════════════════ */ /* ── Navbar ─────────────────────────────────────────────────────────────── */ header.h-16 { background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 30%, #1565C0 70%, #0D47A1 100%) !important; border-bottom: 3px solid #00C800 !important; box-shadow: 0 2px 16px rgba(13,71,161,.4) !important; } header.h-16 h1, header.h-16 h1.text-lg { color: #ffffff !important; } header.h-16 input { background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.25) !important; color: #ffffff !important; } header.h-16 input::placeholder { color: rgba(255,255,255,.6) !important; } header.h-16 input:focus { background: rgba(255,255,255,.22) !important; border-color: rgba(0,200,0,.6) !important; } header.h-16 button { color: rgba(255,255,255,.85) !important; } header.h-16 button:hover { color: #00C800 !important; background: rgba(255,255,255,.1) !important; } /* ── Sidebar ─────────────────────────────────────────────────────────────── */ aside.w-64 { background: linear-gradient(180deg, #1E88E5 0%, #1565C0 40%, #0D47A1 80%, #0a3580 100%) !important; border-right: none !important; box-shadow: 2px 0 12px rgba(13,71,161,.3) !important; } aside.w-64 > * { background: transparent !important; } /* Sidebar brand/logo area */ aside.w-64 > div:first-child { border-bottom-color: rgba(0,200,0,.25) !important; } aside.w-64 p, aside.w-64 h1 { color: rgba(255,255,255,.9) !important; } /* Sidebar nav links */ aside.w-64 nav a { color: rgba(255,255,255,.8) !important; font-weight: 500 !important; } aside.w-64 nav a:hover { background-color: rgba(255,255,255,.12) !important; color: #ffffff !important; } /* Active nav link */ aside.w-64 nav a.bg-brand-blue\/10, aside.w-64 nav a[class*="bg-brand-blue"], aside.w-64 nav a[class*="text-brand-blue"], .bg-brand-blue\/10.text-brand-blue { background: rgba(0,200,0,.22) !important; color: #ccff99 !important; border-left: 3px solid #00C800 !important; font-weight: 600 !important; } /* Sidebar bottom user area */ aside.w-64 > div:last-child { border-top-color: rgba(0,200,0,.2) !important; background: rgba(0,0,0,.18) !important; } aside.w-64 > div:last-child p { color: rgba(255,255,255,.9) !important; } /* Sign out button */ aside.w-64 button { color: rgba(255,255,255,.65) !important; background: transparent !important; } aside.w-64 button:hover { color: #ffaaaa !important; background: rgba(192,57,43,.18) !important; } /* Pulse line */ .pulse-line path { stroke: #00C800 !important; } /* ── Page background ─────────────────────────────────────────────────────── */ body, .bg-surface, main.flex-1, main { background-color: #ffffff !important; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .bg-white.rounded-card, div[class*="rounded-card"][class*="bg-white"] { border-top: 3px solid #00C800 !important; background: #ffffff !important; } /* ── Stat numbers ────────────────────────────────────────────────────────── */ p.text-3xl, .text-3xl.font-bold.font-data { color: #00C800 !important; } /* ── Active period tab pill ──────────────────────────────────────────────── */ button.bg-brand-blue, button[class*="bg-brand-blue"]:not([class*="\/10"]) { background: linear-gradient(135deg, #33E033 0%, #00C800 100%) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0,200,0,.35) !important; } /* ── Links and text accents ──────────────────────────────────────────────── */ .text-brand-blue, .text-brand-teal { color: #00C800 !important; } .text-brand-green { color: #00C800 !important; } /* text-brand-blue inside any green button must be white */ button[class*="bg-brand-blue"].text-brand-blue, button[class*="bg-brand-blue\/10"].text-brand-blue, button[class*="bg-brand-blue\/10"][class*="text-brand-blue"] { color: #ffffff !important; } /* ── Solid filled buttons (e.g. + Register Patient, + New Request) ───────── */ button.bg-brand-blue, button[class*="bg-brand-blue"]:not([class*="bg-brand-blue\/10"]):not([class*="bg-brand-blue\/20"]) { background: linear-gradient(135deg, #33E033 0%, #00C800 100%) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0,200,0,.35) !important; border-color: #00C800 !important; } /* ── Ghost/tinted buttons (e.g. Scan QR Code, Export CSV) ───────────────── */ button.bg-brand-blue\/10, button[class*="bg-brand-blue\/10"], button[class*="bg-brand-blue\/20"], .bg-brand-blue\/10:is(button), .bg-brand-blue\/20:is(button) { background: linear-gradient(135deg, #33E033 0%, #00C800 100%) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0,200,0,.35) !important; border-color: #00C800 !important; } button[class*="bg-brand-blue\/10"]:hover, button[class*="bg-brand-blue\/20"]:hover { background: linear-gradient(135deg, #00C800 0%, #009000 100%) !important; color: #ffffff !important; } /* Override Tailwind utility directly on buttons */ button.bg-brand-blue\/10 { background: linear-gradient(135deg, #33E033 0%, #00C800 100%) !important; } button.bg-brand-blue\/20 { background: linear-gradient(135deg, #33E033 0%, #00C800 100%) !important; } /* ── Outlined action buttons (e.g. Scan QR Code via border-brand-teal) ──── */ button[class*="border-brand-teal"], button[class*="border-brand-blue"] { background: linear-gradient(135deg, #33E033 0%, #00C800 100%) !important; color: #ffffff !important; border-color: #00C800 !important; box-shadow: 0 2px 8px rgba(0,200,0,.35) !important; } /* ── Mobile: hamburger & logout on blue navbar ───────────────────────────── */ .sidebar-toggle { color: #ffffff !important; } .sidebar-toggle:hover { background: rgba(255,255,255,.15) !important; } .sidebar-logout-btn { border-color: rgba(255,255,255,.3) !important; color: #ffffff !important; background: rgba(255,255,255,.1) !important; } .sidebar-logout-btn:hover { background: rgba(192,57,43,.25) !important; border-color: rgba(192,57,43,.5) !important; color: #ffaaaa !important; } /* ── Mobile responsive overrides (keep sidebar gradient on mobile too) ───── */ @media (max-width: 1023px) { aside.w-64 { background: linear-gradient(180deg, #1E88E5 0%, #1565C0 40%, #0D47A1 80%, #0a3580 100%) !important; } } /* ── Mobile sidebar toggle ───────────────────────────────────────────────── */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,53,128,.5); backdrop-filter: blur(2px); z-index: 39; } .sidebar-backdrop.open { display: block; } .sidebar-toggle { display: none !important; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; border: none; background: transparent; color: #ffffff; border-radius: 0.5rem; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .sidebar-toggle svg { width: 1.25rem !important; height: 1.25rem !important; max-width: none !important; } .sidebar-logout-btn { display: none !important; align-items: center; gap: 0.3rem; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #ffffff; border-radius: 0.5rem; padding: 0.375rem 0.625rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; flex-shrink: 0; white-space: nowrap; } .sidebar-logout-btn svg { width: 1rem !important; height: 1rem !important; max-width: none !important; flex-shrink: 0; } @media (max-width: 1023px) { .sidebar-toggle { display: flex !important; } .sidebar-logout-btn { display: flex !important; } .sidebar-toggle, .sidebar-toggle * { max-width: none !important; } .sidebar-logout-btn, .sidebar-logout-btn * { max-width: none !important; } aside.w-64 { position: fixed !important; left: 0; top: 0; height: 100dvh !important; height: 100vh !important; z-index: 40 !important; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s ease; } body.sidebar-open aside.w-64, aside.w-64.sidebar-open { transform: translateX(0) !important; box-shadow: 4px 0 32px rgba(0,0,0,.25) !important; } .flex.h-screen, div.flex.h-screen { flex-direction: column !important; } main.flex-1 { padding: 1.25rem 1rem !important; width: 100% !important; overflow-x: hidden !important; } header.h-16 { padding: 0 1rem !important; gap: 0.5rem !important; } .grid.grid-cols-2, div[class*="grid-cols-4"], div[class*="grid-cols-3"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 0.75rem !important; } } @media (max-width: 639px) { .grid.grid-cols-2, div[class*="grid-cols-4"], div[class*="grid-cols-3"] { grid-template-columns: repeat(1, minmax(0,1fr)) !important; } main.flex-1, main { padding: 0.875rem !important; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .space-y-6 > * + * { margin-top: 1.25rem !important; } .p-10 { padding: 1.5rem !important; } .p-8 { padding: 1.25rem !important; } } @media (max-width: 1023px) { *, *::before, *::after { max-width: 100%; } img, video, canvas { max-width: 100%; height: auto; } aside.w-64, aside.w-64 * { max-width: none; } } /* ===== Splash screen door logos & titles ===== */ .splash-door-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; animation: pulse-soft 2s ease-in-out infinite; } .splash-logo { width: 56px; height: 56px; padding: 6px; flex-shrink: 0; } .splash-caption { font-size: 7px; letter-spacing: 0.1em; color: rgba(0, 210, 239, 0.8); line-height: 1.2; } .splash-title { font-size: 12px; letter-spacing: 0.04em; line-height: 1.2; } .splash-title-alt { font-size: 12px; letter-spacing: 0.04em; color: #67e8f9; line-height: 1.2; } @media (min-width: 640px) { .splash-logo { width: 88px; height: 88px; padding: 10px; } .splash-caption { font-size: 11px; letter-spacing: 0.15em; } .splash-title { font-size: 18px; letter-spacing: 0.05em; } .splash-title-alt { font-size: 18px; letter-spacing: 0.08em; } } @media (min-width: 768px) { .splash-logo { width: 144px; height: 144px; padding: 12px; } .splash-caption { font-size: 13px; letter-spacing: 0.2em; } .splash-title { font-size: 28px; letter-spacing: 0.06em; } .splash-title-alt { font-size: 26px; letter-spacing: 0.1em; } } .splash-tap-hint-wrap { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 20; pointer-events: none; padding-bottom: 40px; } .splash-tap-hint { color: rgba(103, 232, 249, 0.6); font-size: 10px; animation: pulse-soft 2s ease-in-out infinite; } @media (min-width: 768px) { .splash-tap-hint-wrap { padding-bottom: 56px; } }