/* Design direction (brief: internal hospital reception/admin tool, Arabic RTL, must run smoothly on older office PCs in Chrome/Edge - not a marketing page): - Palette v2: richer teal-emerald (#0E6B63) for structure/navigation with a soft gradient for depth, warm amber-gold (#E3A23B) for primary actions and attention states, a warm-tinted off-white background (#F6F5F0). Refreshed for more visual warmth/polish than the flatter v1 palette, while staying in the same healthcare-appropriate teal family rather than generic SaaS blue. - Type: "Cairo" (Google Fonts) - a widely-used, highly legible modern Arabic typeface with full Latin+Arabic-numeral coverage (needed since times like "17:00" sit inline with Arabic text throughout this app). Loaded with font-display: swap and a system-Arabic fallback stack so the UI never blocks on the font and still renders correctly if the Google Fonts request is blocked on a restrictive hospital network. - Layout: dark gradient sidebar / light content, sharp-cornered data tables (information-dense, functional) vs. gently-rounded interactive controls (buttons, dialogs, cards) with soft shadows for a friendlier, more polished feel than a flat/clinical treatment. - Liquid-glass surfaces (requested explicitly): sidebar, dialogs, and card/panel containers are translucent + backdrop-blur over a fixed, softly-blurred gradient backdrop (`.bg-decor`). Buttons, badges, and table rows stay opaque/solid on purpose - glass is for a handful of large static containers, not small frequently-scanned controls where it would cost contrast for no benefit. */ :root { --color-ink: #0E6B63; --color-ink-dark: #0A4A44; --color-ink-light: #14897F; --color-gold: #E3A23B; --color-gold-light: #EDBB66; --color-bg: #F6F5F0; --color-surface: #FFFFFF; --color-border: #E4E1D6; --color-text: #1E2624; --color-text-muted: #6B756F; --color-success: #2F9E44; --color-warning: #E3A23B; --color-danger: #C0503A; --font-sans: "Cairo", "Segoe UI", Tahoma, "Noto Kufi Arabic", Arial, sans-serif; --radius-sm: 6px; --radius-md: 12px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --shadow-card: 0 1px 2px rgba(14, 107, 99, 0.06), 0 4px 16px rgba(14, 107, 99, 0.06); --shadow-pop: 0 10px 40px rgba(10, 74, 68, 0.22); /* Liquid-glass tokens: translucent surfaces + backdrop blur, used for the sidebar, dialogs, and card-like panels so the soft color blobs in .bg-decor show through. Kept to a handful of large, mostly-static panels (not buttons/badges/table rows) so the GPU cost stays cheap even on older office machines - this is compositing a few big layers, not re-blurring something on every frame. */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-border: rgba(255, 255, 255, 0.55); --glass-blur: blur(18px) saturate(160%); --glass-dark-bg: rgba(10, 58, 54, 0.55); --glass-dark-border: rgba(255, 255, 255, 0.14); } * { box-sizing: border-box; } /* Any element the app toggles via the `hidden` attribute (login-screen, app-shell, and one-off UI bits) must actually disappear. Without this, a later rule that sets `display` on the same element (e.g. .login-screen { display:flex }, .app-shell { display:grid }) has equal CSS specificity to the browser's built-in `[hidden]{display:none}` rule and, being declared after it, wins - so `el.hidden = true` stops working the moment the element also has its own `display` rule. Concretely: this was making the login screen stay on top of the app shell after a successful login (the dashboard was rendering, just stacked underneath, hence "nothing happens, need to scroll"). !important here is intentional and safe: it only restores the native meaning of `hidden`, which nothing should ever need to override. */ [hidden] { display: none !important; } html, body { margin: 0; height: 100%; font-family: var(--font-sans); color: var(--color-text); font-size: 15px; } button, input, select, textarea { font-family: inherit; font-size: inherit; } h1, h2, h3, h4 { margin: 0 0 var(--space-3); font-weight: 600; } p { margin: 0 0 var(--space-3); line-height: 1.6; } /* ---------- Liquid-glass backdrop ---------- */ /* Fixed, blurred color blobs behind everything so translucent panels (sidebar, dialogs, cards) have something soft and varied to blur against - without this, backdrop-filter on a flat background just looks like a slightly-lighter flat background. Being position:fixed, this ALWAYS creates its own stacking context, which means plain (non-positioned, non-filtered) siblings would paint *behind* it regardless of DOM order - see the isolation:isolate on .login-screen and .app-shell below, which is what actually keeps every real sibling drawn on top of it. pointer-events:none keeps it out of the interaction path. */ .bg-decor { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: var(--color-bg); } .bg-decor::before, .bg-decor::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; } .bg-decor::before { width: 46vw; height: 46vw; top: -14vw; inset-inline-end: -10vw; background: radial-gradient(circle, var(--color-ink-light), transparent 70%); } .bg-decor::after { width: 40vw; height: 40vw; bottom: -16vw; inset-inline-start: -8vw; background: radial-gradient(circle, var(--color-gold-light), transparent 70%); } /* Reusable glass surface. Falls back to a solid-ish surface automatically in browsers without backdrop-filter support (the @supports block below), so nothing depends on the effect actually rendering to stay readable. */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .glass-dark { background: var(--glass-dark-bg); border: 1px solid var(--glass-dark-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: #FCFBF7; } .glass-dark { background: var(--color-ink); } } /* ---------- Login ---------- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-ink-dark), var(--color-ink) 60%, var(--color-ink-light)); /* Own stacking context so EVERY descendant paints above .bg-decor, not just the ones that happen to use backdrop-filter. See the note on .app-shell below for the full story - same issue, same fix, here too. */ isolation: isolate; } .login-form { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.6); padding: var(--space-6); border-radius: var(--radius-md); width: min(360px, 90vw); box-shadow: var(--shadow-pop); } .login-form h1 { color: var(--color-ink); font-size: 1.4rem; } .login-form label { display: block; margin-bottom: var(--space-3); font-size: 0.9rem; color: var(--color-text-muted); } /* ---------- App shell ---------- */ .app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; /* .bg-decor (position:fixed) always creates its own stacking context, so per normal CSS painting order it paints above any *plain* sibling content, DOM order notwithstanding - only descendants that themselves get a stacking context (backdrop-filter: the sidebar, dialogs, .data-table's glass background) escape that and end up on top. A plain element with no such property - like .view-header's

and "+" button - has no escape hatch: it was genuinely in the DOM, genuinely correct, and genuinely invisible, painted over by .bg-decor. (This is what produced the "no add button anywhere" report - every list page uses the same plain .view-header pattern.) isolation:isolate gives .app-shell its own stacking context so *everything* inside it - glass or not - correctly paints above .bg-decor. This is the fix the comment on .bg-decor assumed already existed ("no stacking-context trickery needed") but never actually added. */ isolation: isolate; } .sidebar { background: linear-gradient(180deg, rgba(10,74,68,0.72), rgba(14,107,99,0.62) 55%, rgba(20,137,127,0.55)); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-inline-end: 1px solid var(--glass-dark-border); color: #E7F2F0; padding: var(--space-4) 0; } .sidebar-header { padding: 0 var(--space-4) var(--space-4); border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: var(--space-3); } .sidebar-title { font-weight: 700; font-size: 1.05rem; } .sidebar-user { font-size: 0.8rem; color: #9FB2AF; margin-top: var(--space-1); } .sidebar-nav { display: flex; flex-direction: column; } .sidebar-link { display: flex; align-items: center; gap: var(--space-2); background: none; border: none; color: inherit; text-align: start; padding: var(--space-3) var(--space-4); cursor: pointer; border-inline-start: 3px solid transparent; } .sidebar-link:hover { background: rgba(255,255,255,0.06); } .sidebar-link.active { background: rgba(255,255,255,0.1); border-inline-start-color: var(--color-gold-light); font-weight: 600; } .sidebar-icon { font-size: 1rem; } .view-container { padding: var(--space-5); overflow-y: auto; } .view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .sync-banner { grid-column: 1 / -1; background: rgba(227, 162, 59, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; padding: var(--space-2) var(--space-4); font-size: 0.9rem; text-align: center; } .logout-btn { position: fixed; top: var(--space-3); inset-inline-start: var(--space-3); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; } /* ---------- Buttons / inputs ---------- */ .btn-primary, .btn-secondary, .btn-link { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); cursor: pointer; border: 1px solid transparent; font-weight: 600; } .btn-primary { background: var(--color-ink); color: #fff; box-shadow: var(--shadow-card); } .btn-primary:hover { background: var(--color-ink-light); } .btn-primary:disabled { background: #AEBBB7; box-shadow: none; cursor: not-allowed; } .btn-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } .btn-secondary:hover { border-color: var(--color-ink); } .btn-link { background: none; border: none; color: var(--color-ink-light); padding: var(--space-1) var(--space-2); font-weight: 600; } .btn-link:hover { text-decoration: underline; } .input { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); } .input:focus, .btn-primary:focus, .btn-secondary:focus, .sidebar-link:focus { outline: 2px solid var(--color-gold-light); outline-offset: 1px; } .toolbar { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; } .toolbar .input { max-width: 260px; } /* ---------- Tables ---------- */ .data-table { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); /* overflow-x:auto (not "hidden") is the fix - a table wider than its narrow-screen container needs to SCROLL, not get its trailing columns (row-actions, usually) silently clipped off-screen. overflow-y stays visible so a