:root{--v-primary:#2563eb;--v-primary-dark:#1d4ed8;--v-secondary:#14b8a6;--v-accent:#06b6d4;--v-purple:#8b5cf6;--v-orange:#f97316;--v-gradient:linear-gradient(135deg,#2563eb 0%,#06b6d4 50%,#10b981 100%); --v-bg:#f1f5f9;--v-card:#ffffff;--v-text:#0f172a;--v-muted:#64748b;--v-border:#e2e8f0;--v-sidebar:#0f172a;--v-sidebar-text:#cbd5e1;--v-sidebar-active:#2563eb;--v-hover:#f8fafc;--radius:14px;--sidebar-w:268px} [data-bs-theme="dark"]{--v-bg:#0b1220;--v-card:#111a2e;--v-text:#e2e8f0;--v-muted:#94a3b8;--v-border:#1e293b;--v-sidebar:#070d1a;--v-hover:#162038} *{font-family:'Cairo','Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} body{background:var(--v-bg);color:var(--v-text);font-size:.92rem} a{text-decoration:none} .app{display:flex;min-height:100vh} .sidebar{width:var(--sidebar-w);background:var(--v-sidebar);color:var(--v-sidebar-text);position:fixed;top:0;bottom:0;inset-inline-start:0;overflow-y:auto;z-index:1040;transition:transform .25s;scrollbar-width:thin} .sidebar .brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.2rem;color:#fff;font-weight:800;font-size:1.35rem;border-bottom:1px solid rgba(255,255,255,.06)} .sidebar .brand i{background:var(--v-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.5rem} .sidebar .brand small{display:block;font-size:.65rem;font-weight:400;color:#94a3b8;letter-spacing:.5px} .sidebar .group{padding:.9rem 1.2rem .3rem;font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:#64748b;font-weight:700} .sidebar .side-search{position:relative;margin:.85rem 1rem .5rem} .sidebar .side-search i{position:absolute;inset-inline-start:.9rem;top:50%;transform:translateY(-50%);color:#64748b;font-size:.82rem;pointer-events:none;transition:color .2s} .sidebar .side-search input{width:100%;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#e2e8f0;font-size:.85rem;padding-inline:2.4rem .9rem;outline:none;transition:background .2s,border-color .2s,box-shadow .2s} .sidebar .side-search input::placeholder{color:#64748b} .sidebar .side-search input:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)} .sidebar .side-search input:focus{background:rgba(255,255,255,.1);border-color:var(--v-sidebar-active);box-shadow:0 0 0 3px rgba(37,99,235,.25)} .sidebar .side-search:focus-within i{color:#60a5fa} .sidebar .side-search input::-webkit-search-cancel-button{-webkit-appearance:none;height:14px;width:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4.3 4.3a1 1 0 0 1 1.4 0L8 6.6l2.3-2.3a1 1 0 1 1 1.4 1.4L9.4 8l2.3 2.3a1 1 0 0 1-1.4 1.4L8 9.4l-2.3 2.3a1 1 0 0 1-1.4-1.4L6.6 8 4.3 5.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");cursor:pointer;opacity:.7} .sidebar .side-search input::-webkit-search-cancel-button:hover{opacity:1} .sidebar a.item{display:flex;align-items:center;gap:.7rem;padding:.52rem 1.2rem;color:var(--v-sidebar-text);border-inline-start:3px solid transparent;font-size:.88rem} .sidebar a.item i{width:20px;text-align:center;color:#64748b;font-size:.95rem} .sidebar a.item:hover{background:rgba(255,255,255,.05);color:#fff} .sidebar a.item.active{background:rgba(37,99,235,.18);color:#fff;border-inline-start-color:var(--v-sidebar-active)} .sidebar a.item.active i{color:#60a5fa} .sidebar .badge{margin-inline-start:auto;font-size:.65rem} .main{flex:1;margin-inline-start:var(--sidebar-w);min-width:0;display:flex;flex-direction:column} .topbar{background:var(--v-card);border-bottom:1px solid var(--v-border);padding:.55rem 1.3rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:1030} .topbar .search{flex:1;max-width:480px;position:relative} .topbar .search input{border-radius:30px;padding-inline-start:2.4rem;background:var(--v-bg);border-color:var(--v-border)} .topbar .search i{position:absolute;inset-inline-start:.9rem;top:50%;transform:translateY(-50%);color:var(--v-muted)} .topbar .icon-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--v-muted);background:transparent;border:0;position:relative} .topbar .icon-btn:hover{background:var(--v-bg);color:var(--v-primary)} .topbar .icon-btn .dot{position:absolute;top:6px;inset-inline-end:6px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid var(--v-card)} .avatar{width:36px;height:36px;border-radius:50%;background:var(--v-gradient);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700} .content{padding:1.4rem 1.5rem;flex:1} .page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;margin-bottom:1.2rem} .page-header h1{font-size:1.35rem;font-weight:800;margin:0} .page-header h1 i{color:var(--v-primary);margin-inline-end:.4rem} .breadcrumb{margin:0;font-size:.78rem} .card{border:1px solid var(--v-border);border-radius:var(--radius);background:var(--v-card);box-shadow:0 1px 3px rgba(15,23,42,.04)} .card-header{background:transparent;border-bottom:1px solid var(--v-border);font-weight:700;padding:.8rem 1.1rem} .stat{border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--v-card);border:1px solid var(--v-border);display:flex;align-items:center;gap:1rem;height:100%;transition:transform .15s} .stat:hover{transform:translateY(-2px)} .stat .ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;flex-shrink:0} .stat .v{font-size:1.5rem;font-weight:800;line-height:1.1} .stat .l{font-size:.78rem;color:var(--v-muted)} .bg-g1{background:linear-gradient(135deg,#2563eb,#06b6d4)}.bg-g2{background:linear-gradient(135deg,#14b8a6,#10b981)}.bg-g3{background:linear-gradient(135deg,#8b5cf6,#ec4899)}.bg-g4{background:linear-gradient(135deg,#f97316,#ef4444)}.bg-g5{background:linear-gradient(135deg,#0ea5e9,#6366f1)}.bg-g6{background:linear-gradient(135deg,#64748b,#334155)} .table{font-size:.86rem;margin-bottom:0} .table thead th{background:var(--v-bg);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.3px;color:var(--v-muted);border-bottom:1px solid var(--v-border);white-space:nowrap} .table td{vertical-align:middle;border-color:var(--v-border)} .table-hover tbody tr:hover{background:var(--v-hover)} .badge-status{font-weight:600;padding:.35em .65em;border-radius:20px;font-size:.72rem} .text-bg-pink{background:#ec4899!important;color:#fff} .btn{border-radius:10px;font-weight:600} .btn-primary{background:var(--v-primary);border-color:var(--v-primary)} .btn-primary:hover{background:var(--v-primary-dark);border-color:var(--v-primary-dark)} .btn-gradient{background:var(--v-gradient);color:#fff;border:0} .btn-gradient:hover{color:#fff;filter:brightness(1.08)} .form-control,.form-select{border-radius:10px;border-color:var(--v-border);background:var(--v-card);color:var(--v-text)} .form-control:focus,.form-select:focus{border-color:var(--v-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .form-label{font-weight:600;font-size:.82rem;color:var(--v-muted);margin-bottom:.3rem} .nav-tabs .nav-link{font-weight:600;color:var(--v-muted);border:0;border-bottom:2px solid transparent} .nav-tabs .nav-link.active{color:var(--v-primary);background:transparent;border-bottom-color:var(--v-primary)} .patient-banner{background:var(--v-card);border:1px solid var(--v-border);border-radius:var(--radius);padding:1rem 1.2rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.2rem;border-inline-start:5px solid var(--v-primary)} .patient-banner .avatar{width:56px;height:56px;font-size:1.4rem} .patient-banner .meta{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.82rem;color:var(--v-muted)} .patient-banner .meta b{color:var(--v-text)} .allergy-alert{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;padding:.3rem .7rem;font-size:.78rem;font-weight:700} [data-bs-theme="dark"] .allergy-alert{background:#3b0a0a;border-color:#7f1d1d;color:#fca5a5} .bed{border-radius:12px;padding:.7rem;text-align:center;border:2px solid transparent;cursor:pointer;transition:all .15s;min-height:92px;display:flex;flex-direction:column;justify-content:center;position:relative} .bed:hover{transform:scale(1.04)} .bed i{font-size:1.4rem} .bed .code{font-weight:800;font-size:.85rem} .bed .pt{font-size:.7rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bed.available{background:#dcfce7;color:#166534}.bed.occupied{background:#fee2e2;color:#991b1b}.bed.cleaning{background:#fef9c3;color:#854d0e}.bed.reserved{background:#dbeafe;color:#1e40af}.bed.maintenance,.bed.blocked{background:#e2e8f0;color:#334155} [data-bs-theme="dark"] .bed.available{background:#14532d;color:#bbf7d0}[data-bs-theme="dark"] .bed.occupied{background:#7f1d1d;color:#fecaca}[data-bs-theme="dark"] .bed.cleaning{background:#713f12;color:#fef08a}[data-bs-theme="dark"] .bed.reserved{background:#1e3a8a;color:#bfdbfe} .esi-1{background:#dc2626;color:#fff}.esi-2{background:#f97316;color:#fff}.esi-3{background:#eab308;color:#000}.esi-4{background:#22c55e;color:#fff}.esi-5{background:#3b82f6;color:#fff} .esi{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;font-weight:800} .kpi-card{border-radius:var(--radius);padding:1rem;background:var(--v-card);border:1px solid var(--v-border);height:100%} .kpi-card .name{font-size:.8rem;color:var(--v-muted);font-weight:600} .kpi-card .val{font-size:1.6rem;font-weight:800} .kpi-card .tgt{font-size:.72rem;color:var(--v-muted)} .rag{width:10px;height:10px;border-radius:50%;display:inline-block;margin-inline-end:.3rem} .rag-g{background:#22c55e}.rag-a{background:#f59e0b}.rag-r{background:#ef4444} .timeline{position:relative;padding-inline-start:1.4rem} .timeline:before{content:'';position:absolute;inset-inline-start:.35rem;top:0;bottom:0;width:2px;background:var(--v-border)} .timeline .tl{position:relative;margin-bottom:1rem} .timeline .tl:before{content:'';position:absolute;inset-inline-start:-1.2rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--v-primary)} .queue-display{background:#0f172a;color:#fff;min-height:100vh;padding:2rem} .queue-display .now{font-size:7rem;font-weight:900;color:#22d3ee;line-height:1} .dropdown-menu{border-radius:12px;border-color:var(--v-border);background:var(--v-card);box-shadow:0 10px 30px rgba(15,23,42,.12)} .dropdown-item{color:var(--v-text)}.dropdown-item:hover{background:var(--v-hover)} .notif-item{padding:.6rem .9rem;border-bottom:1px solid var(--v-border);font-size:.82rem} .notif-item.unread{background:rgba(37,99,235,.06)} .toast-container{z-index:2000} /* centred card shell — still used by the installer and the offline page */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--v-gradient);padding:1rem} .login-card{width:100%;max-width:430px;border-radius:22px;background:var(--v-card);padding:2.3rem;box-shadow:0 25px 60px rgba(0,0,0,.25)} .login-card .logo{font-size:2.2rem;font-weight:900;background:var(--v-gradient);-webkit-background-clip:text;background-clip:text;color:transparent} /* ── sign-in: form on one half, a slider on the other ───────────────────── The slider carries figures pulled from the live database, so the panel says something true about this installation rather than generic marketing copy. */ .auth-body{margin:0;font-family:Cairo,system-ui,sans-serif;background:var(--v-card)} .auth-split{display:grid;grid-template-columns:1fr 1fr;min-height:100vh} /* form half */ .auth-form{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;background:var(--v-card)} .auth-form-inner{width:100%;max-width:400px} .auth-brand{display:flex;align-items:center;gap:.65rem;margin-bottom:2rem} .auth-brand .mark{width:44px;height:44px;border-radius:13px;background:var(--v-gradient);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex:0 0 44px} .auth-brand .nm{display:block;font-size:1.3rem;font-weight:900;line-height:1.1;color:var(--v-text)} .auth-brand .sb{display:block;font-size:.7rem;color:var(--v-muted)} /* VITARA V mark + brand tiles */ .vmark{display:block} .vbrand-tile{width:30px;height:30px;border-radius:9px;background:var(--v-gradient);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;box-shadow:0 4px 10px -4px rgba(37,99,235,.5)} .vbrand-tile .vmark{width:100%;height:100%} .auth-brand .mark .vmark{width:100%;height:100%} .auth-title{font-size:1.7rem;font-weight:900;margin:0 0 .25rem;color:var(--v-text)} .auth-sub{color:var(--v-muted);font-size:.86rem;margin-bottom:1.6rem} .auth-foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem; margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--v-border);font-size:.8rem} .auth-foot a{color:var(--v-primary);text-decoration:none} .auth-foot a:hover{text-decoration:underline} .auth-note{margin:.9rem 0 0;font-size:.68rem;color:var(--v-muted);text-align:center} /* slider half */ /* Depth comes from radial gradients painted into the panel background rather than blurred child elements: a blurred layer behind an isolated stacking context composites as a hard-edged rectangle in some engines. */ .auth-slider{position:relative;overflow:hidden;color:#fff; display:flex;flex-direction:column;justify-content:center;padding:3rem; background: radial-gradient(60% 55% at 85% 8%, rgba(96,165,250,.55), transparent 70%), radial-gradient(55% 50% at 10% 95%, rgba(34,211,238,.45), transparent 70%), var(--v-gradient)} .auth-slider .slides{position:relative;min-height:290px} .auth-slider .slide{position:absolute;inset:0;opacity:0;transform:translateY(14px); transition:opacity .5s ease,transform .5s ease;pointer-events:none} .auth-slider .slide.is-active{opacity:1;transform:none;pointer-events:auto} /* no backdrop-filter here: inside a slide held at opacity:0 it promotes a compositing layer that paints as a hard rectangle in some engines */ .auth-slider .slide .ic{width:58px;height:58px;border-radius:17px;background:rgba(255,255,255,.18); display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.3rem} .auth-slider .slide h2{font-size:1.55rem;font-weight:900;line-height:1.35;margin:0 0 .8rem;max-width:26ch} .auth-slider .slide p{font-size:.92rem;line-height:1.85;opacity:.9;margin:0;max-width:44ch} /* named .fig, not .stat: .stat is the dashboard's white KPI card and would drag its background and padding in here */ .auth-slider .slide .fig{margin-top:1.6rem;display:flex;align-items:baseline;gap:.5rem} .auth-slider .slide .fig b{font-size:2.4rem;font-weight:900;line-height:1} .auth-slider .slide .fig span{font-size:.82rem;opacity:.8} .auth-slider .dots{display:flex;gap:.4rem;margin-top:2.4rem} .auth-slider .dot{width:26px;height:4px;border-radius:2px;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.3);transition:background .25s,width .25s} .auth-slider .dot.is-active{background:#fff;width:42px} @media (max-width:900px){ /* the slider becomes a banner above the form rather than disappearing: it still frames what the system is, but never competes for the fold */ .auth-split{grid-template-columns:1fr} .auth-slider{order:-1;padding:2rem 1.5rem;min-height:auto} .auth-slider .slides{min-height:250px} .auth-slider .slide h2{font-size:1.2rem} .auth-slider .slide p{font-size:.84rem;line-height:1.7} .auth-slider .slide .ic{width:46px;height:46px;font-size:1.15rem;margin-bottom:.9rem} .auth-slider .slide .fig b{font-size:1.8rem} .auth-slider .dots{margin-top:1.4rem} .auth-form{padding:2rem 1.25rem 2.5rem} } @media (max-width:420px){ /* body copy goes; headline and figure stay. Height measured against the tallest slide so the dots can never ride over the figure. */ .auth-slider .slide p{display:none} .auth-slider .slides{min-height:190px} .auth-slider .slide h2{font-size:1.12rem;margin-bottom:.6rem} .auth-slider .slide .fig{margin-top:1rem} .auth-slider .slide .ic{width:42px;height:42px;font-size:1.05rem;margin-bottom:.75rem} } @media (prefers-reduced-motion:reduce){ .auth-slider .slide{transition:opacity .01ms} } .offline-bar{display:none;background:#f59e0b;color:#000;text-align:center;font-weight:700;padding:.3rem;font-size:.8rem} body.offline .offline-bar{display:block} .demo-bar{background:linear-gradient(90deg,#f97316,#ef4444);color:#fff;text-align:center;font-size:.75rem;padding:.2rem;font-weight:600} .sidebar-toggle{display:inline-flex} .main{transition:margin .25s} @media (min-width:992px){ body.sb-hidden .sidebar{transform:translateX(100%)} [dir=ltr] body.sb-hidden .sidebar{transform:translateX(-100%)} body.sb-hidden .main{margin-inline-start:0} } @media (max-width:991px){.sidebar{transform:translateX(100%)}[dir=ltr] .sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.main{margin-inline-start:0}.topbar .search{max-width:none}} @media print{.sidebar,.topbar,.no-print,.demo-bar,.btn{display:none!important}.main{margin:0}.content{padding:0}.card{border:0;box-shadow:none}body{background:#fff;color:#000}} .print-header{display:none}@media print{.print-header{display:block;border-bottom:2px solid #2563eb;margin-bottom:1rem;padding-bottom:.5rem}} .chart-box{position:relative;height:280px} .mini-table td,.mini-table th{padding:.35rem .5rem;font-size:.8rem} .section-title{font-weight:800;font-size:1rem;margin:1.2rem 0 .6rem;display:flex;align-items:center;gap:.5rem} .section-title i{color:var(--v-primary)} .list-group-item{background:var(--v-card);border-color:var(--v-border);color:var(--v-text)} .progress{background:var(--v-bg)} .flag-HH,.flag-LL{color:#dc2626;font-weight:800}.flag-H,.flag-L{color:#f59e0b;font-weight:700}.flag-N{color:#16a34a} .icon-sm{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem} .install-step{display:flex;gap:.6rem;align-items:center;font-weight:600;color:var(--v-muted)} .install-step .n{width:28px;height:28px;border-radius:50%;background:var(--v-bg);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem} .install-step.active{color:var(--v-primary)}.install-step.active .n{background:var(--v-primary);color:#fff} .install-step.done .n{background:#22c55e;color:#fff} .mobile-nav{position:fixed;bottom:0;left:0;right:0;background:var(--v-card);border-top:1px solid var(--v-border);display:flex;justify-content:space-around;padding:.4rem 0;z-index:1050} .mobile-nav a{display:flex;flex-direction:column;align-items:center;font-size:.65rem;color:var(--v-muted);gap:.15rem} .mobile-nav a.active{color:var(--v-primary)} .mobile-nav a i{font-size:1.15rem} /* impersonation banner — deliberately loud: you must never forget you are someone else */ .impersonate-bar{background:#7c3aed;color:#fff;text-align:center;padding:.35rem .75rem;font-size:.82rem; font-weight:600;position:sticky;top:0;z-index:1080;box-shadow:0 2px 8px rgba(124,58,237,.35)} .impersonate-bar .btn{font-weight:700} /* ── floating "all screens" launcher ────────────────────────────────────── The sidebar holds shortcuts; this reaches all 133 screens without one. Anchored to the inline-start edge so it clears the bottom nav on the PWAs. */ .vfab{position:fixed;inset-block-end:22px;inset-inline-end:22px;width:56px;height:56px;border-radius:50%; border:none;background:linear-gradient(135deg,var(--v-primary),#1e40af);color:#fff;font-size:1.25rem; box-shadow:0 8px 24px rgba(37,99,235,.42);z-index:1055;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:transform .18s,box-shadow .18s} .vfab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 30px rgba(37,99,235,.55)} .vfab[aria-expanded="true"]{transform:rotate(45deg)} body.vfab-open{overflow:hidden} .vfab-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);z-index:1056} .vfab-panel{position:fixed;inset-block-end:92px;inset-inline-end:22px;width:min(660px,calc(100vw - 44px)); max-height:min(74vh,660px);background:var(--v-card);border:1px solid var(--v-border);border-radius:18px; box-shadow:0 24px 60px rgba(15,23,42,.35);z-index:1057;display:flex;flex-direction:column;overflow:hidden} .vfab-head{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--v-border)} .vfab-crumb{flex:1;font-weight:800;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vfab-back,.vfab-close{border:none;background:transparent;color:var(--v-muted);width:32px;height:32px; border-radius:8px;cursor:pointer} .vfab-back:hover,.vfab-close:hover{background:var(--v-bg);color:var(--v-text)} .vfab-search{position:relative;padding:.6rem .9rem;border-bottom:1px solid var(--v-border)} .vfab-search input{width:100%;border:1px solid var(--v-border);background:var(--v-bg);color:var(--v-text); border-radius:10px;padding:.5rem 2.2rem;font-size:.9rem;font-family:inherit} .vfab-search input:focus{outline:2px solid var(--v-primary);outline-offset:-1px} .vfab-search > i{position:absolute;inset-block-start:1.15rem;inset-inline-start:1.5rem;color:var(--v-muted);font-size:.85rem} .vfab-search kbd{position:absolute;inset-block-start:1.05rem;inset-inline-end:1.5rem;font-size:.7rem; background:var(--v-bg);border:1px solid var(--v-border);border-radius:5px;padding:.05rem .35rem;color:var(--v-muted)} .vfab-body{flex:1;overflow:auto;padding:.75rem} .vfab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.5rem} .vfab-tile{display:flex;align-items:center;gap:.55rem;padding:.6rem;border-radius:12px;text-decoration:none; border:1px solid var(--v-border);background:var(--v-bg);color:var(--v-text);text-align:start; font-family:inherit;font-size:.82rem;cursor:pointer;position:relative;width:100%;min-height:52px} .vfab-tile:hover,.vfab-tile.sel{border-color:var(--v-primary);background:var(--v-card); box-shadow:0 3px 12px rgba(37,99,235,.16);color:var(--v-text)} .vfab-tile .ic{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:flex;align-items:center; justify-content:center;background:var(--v-primary);color:#fff;font-size:.85rem} .vfab-tile .lb{flex:1;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;word-break:break-word} .vfab-tile .arw{color:var(--v-muted);font-size:.7rem} .vfab-badge{background:var(--v-border);color:var(--v-muted);border-radius:999px;font-size:.65rem; padding:.05rem .38rem;font-weight:700} .vfab-list{display:flex;flex-direction:column;gap:.2rem} .vfab-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:10px; text-decoration:none;color:var(--v-text)} .vfab-row:hover,.vfab-row.sel{background:var(--v-bg);color:var(--v-text)} .vfab-row .ic{width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:flex;align-items:center; justify-content:center;background:var(--v-bg);color:var(--v-primary);font-size:.8rem} .vfab-row.sel .ic{background:var(--v-primary);color:#fff} .vfab-row .tx{display:flex;flex-direction:column;min-width:0} .vfab-row .lb{font-size:.85rem;font-weight:600} .vfab-row .tr{font-size:.68rem;color:var(--v-muted)} .vfab-self{display:block;margin-top:.6rem;padding:.5rem .7rem;border-radius:10px;font-size:.82rem; font-weight:700;text-decoration:none;color:var(--v-primary);background:var(--v-bg); border:1px dashed var(--v-border)} .vfab-self:hover{border-style:solid;color:var(--v-primary)} .vfab-empty{text-align:center;color:var(--v-muted);padding:2.4rem 1rem;font-size:.85rem} .vfab-empty i{font-size:1.6rem;opacity:.35;display:block;margin-bottom:.5rem} .vfab-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem; padding:.45rem .9rem;border-top:1px solid var(--v-border);font-size:.7rem;color:var(--v-muted)} @media (max-width:600px){ .vfab{inset-block-end:80px;inset-inline-end:16px;width:50px;height:50px} .vfab-panel{inset-inline:12px;inset-block-end:12px;width:auto;max-height:82vh} .vfab-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .vfab-foot span:last-child{display:none} } /* ── report output ──────────────────────────────────────────────────────── Shared by every generated report so print and screen agree. */ .rpt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap; border-bottom:2px solid var(--v-primary);padding-bottom:.85rem;margin-bottom:1.1rem} .rpt-head .rpt-org .nm{font-weight:900;font-size:1.05rem;color:var(--v-primary)} .rpt-head .rpt-org .sb{font-size:.75rem;color:var(--v-muted)} .rpt-head .rpt-title{text-align:center;flex:1;min-width:200px} .rpt-head .rpt-title h2{font-size:1.15rem;font-weight:800;margin:0} .rpt-head .rpt-title p{font-size:.75rem;color:var(--v-muted);margin:.2rem 0 0} .rpt-head .rpt-meta{font-size:.7rem;color:var(--v-muted);text-align:end} .rpt-table th{font-size:.78rem;white-space:nowrap} .rpt-table td{font-size:.8rem} /* the spanning row: grouped cells are tinted, ungrouped ones stay blank so the eye reads the group as covering only its own columns */ .rpt-group-row th{background:var(--v-bg);border-bottom:2px solid var(--v-border);font-weight:800} .rpt-group-row th.rpt-nogroup{background:transparent;border-bottom-color:transparent} .rpt-total-row td{border-top:2px solid var(--v-primary);background:var(--v-bg)} @media print{ .rpt-break{break-after:page} .rpt-head{border-bottom-color:#000} .card{border:none!important;box-shadow:none!important} .card-header{background:transparent!important;border-bottom:1px solid #999!important;font-weight:800} } /* pinned show/hide handle on the sidebar's edge — follows the sidebar as it slides */ .sb-edge-toggle{display:none} @media (min-width:992px){ .sb-edge-toggle{display:flex;position:fixed;top:70px;inset-inline-start:calc(var(--sidebar-w) - 14px);z-index:1045; width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;padding:0; background:var(--v-card);color:var(--v-muted);border:1px solid var(--v-border); box-shadow:0 2px 8px rgba(15,23,42,.18);cursor:pointer;transition:inset-inline-start .25s} .sb-edge-toggle:hover{color:var(--v-sidebar-active);border-color:var(--v-sidebar-active)} body.sb-hidden .sb-edge-toggle{inset-inline-start:10px} .sb-edge-toggle i{font-size:.75rem;transition:transform .25s} [dir=rtl] .sb-edge-toggle i{transform:rotate(180deg)} body.sb-hidden .sb-edge-toggle i{transform:rotate(180deg)} [dir=rtl] body.sb-hidden .sb-edge-toggle i{transform:rotate(0deg)} } /* ── premium clinical patient cards (ICU / wards / ER / clinics) ───────────── */ .vcard{position:relative;background:var(--v-card);border:1px solid var(--v-border);border-radius:16px; overflow:hidden;transition:transform .14s,box-shadow .14s;height:100%} .vcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.10)} .vcard::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:var(--vc-accent,#94a3b8)} .vcard.sev-crit{--vc-accent:#dc2626}.vcard.sev-high{--vc-accent:#f97316}.vcard.sev-mod{--vc-accent:#eab308}.vcard.sev-ok{--vc-accent:#22c55e} .vcard-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-bottom:1px solid var(--v-border)} .vcard-ava{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:1.05rem;color:#fff;background:var(--v-gradient)} .vcard-ava.f{background:linear-gradient(135deg,#ec4899,#be185d)} .vcard-id{flex-grow:1;min-width:0} .vcard-name{font-weight:700;font-size:.9rem;line-height:1.2;display:block;color:var(--v-text);text-decoration:none} .vcard-name:hover{color:var(--v-primary)} .vcard-meta{font-size:.68rem;color:var(--v-muted);display:flex;gap:.4rem;flex-wrap:wrap;margin-top:2px} .vcard-bed{font-size:.66rem;font-weight:700;background:var(--v-hover);border:1px solid var(--v-border);border-radius:7px;padding:.1rem .4rem;color:var(--v-muted)} .vcard-score{text-align:center;flex-shrink:0;min-width:52px} .vcard-score .n{font-size:1.35rem;font-weight:800;line-height:1} .vcard-score .l{font-size:.56rem;text-transform:uppercase;letter-spacing:.5px;color:var(--v-muted)} .vcard-body{padding:.6rem .8rem} .vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:.4rem} .vital{text-align:center;background:var(--v-hover);border-radius:10px;padding:.35rem .2rem;border:1px solid transparent} .vital.warn{background:#fef3c7;border-color:#fde68a}.vital.crit{background:#fee2e2;border-color:#fecaca} [data-bs-theme="dark"] .vital.warn{background:#78350f33;border-color:#92400e}[data-bs-theme="dark"] .vital.crit{background:#7f1d1d55;border-color:#991b1b} .vital i{font-size:.7rem;color:var(--v-muted);display:block} .vital .vv{font-weight:700;font-size:.82rem;line-height:1.1} .vital .vl{font-size:.54rem;color:var(--v-muted)} .vcard-flags{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem} .vflag{display:inline-flex;align-items:center;gap:.25rem;font-size:.66rem;font-weight:600;padding:.15rem .5rem;border-radius:20px} .vflag.red{background:#fee2e2;color:#b91c1c}.vflag.amber{background:#fef3c7;color:#92400e}.vflag.blue{background:#dbeafe;color:#1e40af} [data-bs-theme="dark"] .vflag.red{background:#7f1d1d;color:#fca5a5}[data-bs-theme="dark"] .vflag.amber{background:#78350f;color:#fcd34d}[data-bs-theme="dark"] .vflag.blue{background:#1e3a8a;color:#bfdbfe} .vcard-foot{display:flex;justify-content:space-between;align-items:center;padding:.45rem .8rem;border-top:1px solid var(--v-border);font-size:.7rem;color:var(--v-muted)} /* ── tighter rhythm & responsive polish ───────────────────────────────────── */ @media (max-width:576px){ .content{padding:.85rem .7rem} .page-header{margin-bottom:.85rem} .page-header h1{font-size:1.12rem} .card-body{padding:.85rem} .stat{padding:.8rem .9rem;gap:.7rem} .stat .ic{width:42px;height:42px;font-size:1.1rem} .stat .v{font-size:1.25rem} .vitals{grid-template-columns:repeat(auto-fit,minmax(50px,1fr));gap:.3rem} .row.g-3{--bs-gutter-y:.6rem;--bs-gutter-x:.6rem} } /* denser stat rows on any size — less dead space */ .stat{padding:.9rem 1rem} /* card grids breathe less */ .vcard-flags:empty{display:none} /* keyboard/scroll niceties for boards */ .board-scroll{max-height:calc(100vh - 240px);overflow:auto;scrollbar-width:thin} /* make long tables scroll inside their own box rather than the page */ .table-responsive{scrollbar-width:thin} /* ── bed-map polish ───────────────────────────────────────────────────────── */ .bed{border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.05);transition:transform .12s,box-shadow .12s} .bed:hover{box-shadow:0 8px 18px rgba(15,23,42,.14)} .bed .code{letter-spacing:.3px} .bed.occupied{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#991b1b} [data-bs-theme="dark"] .bed.occupied{background:linear-gradient(135deg,#7f1d1d,#651414);color:#fecaca} .bed.available{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#166534} [data-bs-theme="dark"] .bed.available{background:linear-gradient(135deg,#14532d,#0f3f22);color:#bbf7d0} /* ═══════════════════════ Theme polish · depth · motion · pulse (v16) ═══════════════════════ */ :root{--v-ease:cubic-bezier(.2,.8,.2,1); --v-shadow-sm:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(15,23,42,.05),0 8px 20px -12px rgba(15,23,42,.16); --v-shadow-md:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(15,23,42,.06),0 18px 40px -16px rgba(37,99,235,.24)} [data-bs-theme="dark"]{ --v-shadow-sm:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.65); --v-shadow-md:inset 0 1px 0 rgba(255,255,255,.07),0 2px 6px rgba(0,0,0,.5),0 20px 46px -16px rgba(37,99,235,.38)} /* cards & KPI tiles — layered 3D depth + gentle lift */ .content .card,.pt-wrap .card{box-shadow:var(--v-shadow-sm);transition:transform .22s var(--v-ease),box-shadow .22s var(--v-ease)} .content .card:hover,.pt-wrap .card:hover{transform:translateY(-2px);box-shadow:var(--v-shadow-md)} .content .stat{box-shadow:var(--v-shadow-sm);transition:transform .22s var(--v-ease),box-shadow .22s var(--v-ease)} .content .stat:hover{transform:translateY(-3px);box-shadow:var(--v-shadow-md)} .content .vcard{box-shadow:var(--v-shadow-sm)} .content .vcard:hover{box-shadow:var(--v-shadow-md)} .modal-content{border:1px solid var(--v-border);box-shadow:0 30px 70px -20px rgba(15,23,42,.45)} .stat .ic{box-shadow:0 6px 14px -6px rgba(15,23,42,.35);animation:vIcGlow 3s ease-in-out infinite} @keyframes vIcGlow{0%,100%{box-shadow:0 6px 14px -6px rgba(15,23,42,.35)}50%{box-shadow:0 10px 22px -6px rgba(15,23,42,.5)}} /* entrance — content rises in; fill "backwards" so hover transforms keep working afterwards */ @keyframes vRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .content .card,.content .stat,.content .vcard,.pt-wrap .card,.pt-wrap .tile{animation:vRise .5s var(--v-ease) backwards} .content .row>[class*="col"]:nth-child(2) .card,.content .row>[class*="col"]:nth-child(2) .stat,.pt-wrap .row>[class*="col"]:nth-child(2) .tile{animation-delay:.06s} .content .row>[class*="col"]:nth-child(3) .card,.content .row>[class*="col"]:nth-child(3) .stat,.pt-wrap .row>[class*="col"]:nth-child(3) .tile{animation-delay:.12s} .content .row>[class*="col"]:nth-child(4) .card,.content .row>[class*="col"]:nth-child(4) .stat,.pt-wrap .row>[class*="col"]:nth-child(4) .tile{animation-delay:.18s} .content .row>[class*="col"]:nth-child(n+5) .card,.content .row>[class*="col"]:nth-child(n+5) .stat,.pt-wrap .row>[class*="col"]:nth-child(n+5) .tile{animation-delay:.24s} /* inputs — soft inset depth + breathing focus ring */ .form-control,.form-select{transition:border-color .18s,box-shadow .25s var(--v-ease),background .18s;box-shadow:inset 0 1px 2px rgba(15,23,42,.04)} .form-control:hover:not(:focus),.form-select:hover:not(:focus){border-color:#c7d2e6} [data-bs-theme="dark"] .form-control:hover:not(:focus),[data-bs-theme="dark"] .form-select:hover:not(:focus){border-color:#3b4f78} @keyframes vFocus{0%,100%{box-shadow:0 0 0 3px rgba(37,99,235,.14),inset 0 1px 2px rgba(15,23,42,.04)}50%{box-shadow:0 0 0 5px rgba(37,99,235,.24),inset 0 1px 2px rgba(15,23,42,.04)}} .form-control:focus,.form-select:focus{animation:vFocus 1.8s ease-in-out infinite} .form-check-input:checked{box-shadow:0 2px 6px -2px rgba(37,99,235,.6)} .input-group-text{transition:background .18s,color .18s} .input-group:focus-within .input-group-text{color:var(--v-primary)} /* buttons — depth, press, lift */ .btn{transition:transform .15s var(--v-ease),box-shadow .2s var(--v-ease),filter .2s,background-color .15s,border-color .15s,color .15s} .btn:active{transform:translateY(1px) scale(.99)} .btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info{box-shadow:0 6px 16px -8px rgba(15,23,42,.35)} .btn-primary{box-shadow:0 6px 16px -6px rgba(37,99,235,.5)} .btn-gradient{box-shadow:0 8px 20px -8px rgba(37,99,235,.55)} .btn-primary:hover,.btn-gradient:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(37,99,235,.6)} .btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-light:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(15,23,42,.3)} /* pulse — the brand breathes */ @keyframes vGlow{0%,100%{box-shadow:0 4px 10px -4px rgba(37,99,235,.5)}50%{box-shadow:0 6px 22px -4px rgba(6,182,212,.8)}} .vbrand-tile{animation:vGlow 3.2s ease-in-out infinite} .table-hover>tbody>tr{transition:background-color .15s} /* accessibility & print — motion off, depth off on paper */ @media (prefers-reduced-motion:reduce){ .content .card,.content .stat,.content .vcard,.pt-wrap .card,.pt-wrap .tile,.vbrand-tile,.stat .ic,.form-control:focus,.form-select:focus{animation:none!important} .content .card:hover,.content .stat:hover,.pt-wrap .card:hover,.btn:hover,.btn:active{transform:none}} @media print{.content .card,.content .stat,.content .vcard,.pt-wrap .card{animation:none!important;transform:none!important;box-shadow:none!important}} /* ═══════════════ Theme polish II · everything + patient portal (v17) ═══════════════ */ a{transition:color .15s} /* sidebar — items slide, icons pop, active item glows */ .sidebar a.item{transition:background .18s,color .18s,padding .2s var(--v-ease),border-color .18s} .sidebar a.item:hover{padding-inline-start:1.45rem} .sidebar a.item i{transition:color .18s,transform .2s var(--v-ease)} .sidebar a.item:hover i{transform:scale(1.12)} @keyframes vNavGlow{0%,100%{box-shadow:inset 0 0 0 0 rgba(37,99,235,0)}50%{box-shadow:inset 0 0 26px -6px rgba(37,99,235,.55)}} .sidebar a.item.active{animation:vNavGlow 3s ease-in-out infinite} /* topbar — depth, icon lift, live notification dot, breathing avatar */ .topbar{box-shadow:0 4px 18px -12px rgba(15,23,42,.25)} .topbar .icon-btn{transition:background .18s,color .18s,transform .18s var(--v-ease)} .topbar .icon-btn:hover{transform:translateY(-1px) scale(1.06)} @keyframes vDot{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}} .topbar .icon-btn .dot{animation:vDot 1.6s ease-in-out infinite} .topbar .avatar{box-shadow:0 4px 10px -4px rgba(37,99,235,.5);animation:vGlow 3.2s ease-in-out infinite;transition:transform .18s var(--v-ease)} .topbar .avatar:hover{transform:scale(1.06)} /* page header icon breathes */ @keyframes vBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} .page-header h1 i{display:inline-block;animation:vBreathe 3.4s ease-in-out infinite} /* tables — row accent on hover (RTL-aware) */ .table-hover>tbody>tr{transition:background-color .15s,box-shadow .15s} .table-hover>tbody>tr:hover>td:first-child{box-shadow:inset 3px 0 0 var(--v-primary)} [dir="rtl"] .table-hover>tbody>tr:hover>td:first-child{box-shadow:inset -3px 0 0 var(--v-primary)} /* badges — lift on hover, critical ones pulse */ .badge{transition:transform .15s var(--v-ease),box-shadow .15s} .badge:hover{transform:translateY(-1px)} .badge-status{box-shadow:0 2px 6px -3px rgba(15,23,42,.35)} @keyframes vCrit{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.35)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}} .badge.text-bg-danger,.badge.bg-danger{animation:vCrit 2s ease-in-out infinite} /* tabs & pills */ .nav-tabs .nav-link{transition:color .15s,background .15s,border-color .2s;border-radius:8px 8px 0 0} .nav-tabs .nav-link:hover{color:var(--v-primary);background:var(--v-hover)} .nav-pills .nav-link{transition:background .15s,color .15s,box-shadow .15s} .nav-pills .nav-link.active{box-shadow:0 6px 14px -6px rgba(37,99,235,.55)} /* dropdowns — opacity only (Popper owns transform) */ @keyframes vFadeIn{from{opacity:0}to{opacity:1}} .dropdown-menu.show{animation:vFadeIn .18s var(--v-ease)} .dropdown-item{transition:background .15s,color .15s,padding .15s var(--v-ease);border-radius:8px} .dropdown-item:hover{padding-inline-start:1.35rem} /* alerts, list groups, patient banner, beds */ .content .alert,.pt-wrap .alert{box-shadow:var(--v-shadow-sm);animation:vRise .4s var(--v-ease) backwards} .list-group-item{transition:background .15s,color .15s,padding .15s var(--v-ease)} .list-group-item-action:hover{padding-inline-start:1.35rem;background:var(--v-hover)} .patient-banner{box-shadow:var(--v-shadow-sm);animation:vRise .5s var(--v-ease) backwards} .bed{box-shadow:var(--v-shadow-sm)} .bed:hover{transform:translateY(-3px);box-shadow:var(--v-shadow-md)} /* modals, toasts, offcanvas, FAB */ @keyframes vPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}} .modal.show .modal-content{animation:vPop .25s var(--v-ease)} @keyframes vToast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .toast.show{animation:vToast .3s var(--v-ease)} .offcanvas{box-shadow:0 0 60px -20px rgba(15,23,42,.5)} @keyframes vFab{0%,100%{box-shadow:0 8px 24px rgba(37,99,235,.42)}50%{box-shadow:0 8px 24px rgba(37,99,235,.42),0 0 0 10px rgba(37,99,235,.12)}} .vfab{animation:vFab 2.4s ease-in-out infinite} .vfab-panel{animation:vPop .22s var(--v-ease)} /* checks, switches, progress, pagination */ .form-check-input{transition:background-color .15s,border-color .15s,box-shadow .15s,transform .12s} .form-check-input:active{transform:scale(.92)} .form-switch .form-check-input:checked{box-shadow:0 2px 8px -2px rgba(37,99,235,.6)} .progress-bar{transition:width .6s var(--v-ease)} .page-link{transition:background .15s,color .15s,transform .15s var(--v-ease)} .page-link:hover{transform:translateY(-1px)} /* ── patient portal ── */ .pt-head{animation:vFadeIn .5s var(--v-ease) backwards} @keyframes vFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,10px)}} @keyframes vFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}} .pt-head::after{animation:vFloat 7s ease-in-out infinite} .pt-head::before{animation:vFloat2 9s ease-in-out infinite} @keyframes vAva{0%,100%{box-shadow:0 0 0 0 rgba(88,135,198,.35)}50%{box-shadow:0 0 0 8px rgba(88,135,198,0)}} .pt-avatar{animation:vAva 2.6s ease-in-out infinite} @keyframes vNavUp{from{transform:translateY(100%)}to{transform:none}} .pt-nav{box-shadow:0 -8px 28px -14px rgba(15,23,42,.25);animation:vNavUp .45s var(--v-ease) backwards} .pt-nav a{transition:color .15s,transform .12s var(--v-ease)} .pt-nav a:active{transform:scale(.92)} .pt-nav a i{transition:background .18s,color .18s,transform .18s var(--v-ease)} .pt-nav a:hover i{transform:translateY(-1px)} @keyframes vPtGlow{0%,100%{box-shadow:0 0 0 0 rgba(88,135,198,0)}50%{box-shadow:0 0 14px -2px rgba(88,135,198,.55)}} .pt-nav a.active i{animation:vPtGlow 2.6s ease-in-out infinite} .pt-wrap .tile{box-shadow:var(--v-shadow-sm);transition:transform .2s var(--v-ease),box-shadow .2s var(--v-ease)} .pt-wrap .tile:hover{transform:translateY(-3px);box-shadow:var(--v-shadow-md)} .pt-wrap .tile .ic{transition:transform .2s var(--v-ease)} .pt-wrap .tile:hover .ic{transform:scale(1.08)} @keyframes vFocusPt{0%,100%{box-shadow:0 0 0 3px rgba(88,135,198,.16),inset 0 1px 2px rgba(15,23,42,.04)}50%{box-shadow:0 0 0 5px rgba(88,135,198,.26),inset 0 1px 2px rgba(15,23,42,.04)}} .pt-wrap .form-control:focus,.pt-wrap .form-select:focus{border-color:var(--pt);animation:vFocusPt 1.8s ease-in-out infinite} .btn-pt{box-shadow:0 6px 16px -6px rgba(88,135,198,.55)} .btn-pt:hover{transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(88,135,198,.6)} .pt-wrap .badge{box-shadow:0 2px 6px -3px rgba(15,23,42,.3)} /* accessibility & print for polish II */ @media (prefers-reduced-motion:reduce){ .sidebar a.item.active,.topbar .icon-btn .dot,.topbar .avatar,.page-header h1 i,.badge.text-bg-danger,.badge.bg-danger,.dropdown-menu.show,.modal.show .modal-content,.toast.show,.vfab,.vfab-panel,.content .alert,.pt-wrap .alert,.patient-banner,.pt-head,.pt-head::after,.pt-head::before,.pt-avatar,.pt-nav,.pt-nav a.active i,.pt-wrap .form-control:focus,.pt-wrap .form-select:focus{animation:none!important} .bed:hover,.pt-wrap .tile:hover,.btn-pt:hover,.topbar .icon-btn:hover,.badge:hover,.page-link:hover,.sidebar a.item:hover i{transform:none}} @media print{.patient-banner,.bed,.content .alert,.pt-head,.pt-nav,.badge{animation:none!important;box-shadow:none!important;transform:none!important}} /* a floating action button must never sit on top of a modal's own buttons */ body.modal-open .vfab,body.modal-open .vfab-backdrop,body.modal-open .vfab-panel{display:none!important} /* ═══════════════════════ v20 · «هدوء سريري» Clinical Calm design layer ═══════════════════════ One visual system for every screen: calmer surfaces, one action colour, softer depth, larger touch targets, less motion. Tokens first — components read them. */ :root{--v-bg:#f6f8fb;--v-border:#e6eaf0;--v-card:#ffffff;--v-hover:#f8fafc;--v-sidebar:#0b1730;--v-sidebar-text:#c7d2e4;--radius:16px;--radius-sm:12px;--v-ink:#0b1730; --v-shadow-sm:0 1px 2px rgba(15,23,42,.03),0 8px 24px -20px rgba(15,23,42,.25); --v-shadow-md:0 2px 6px rgba(15,23,42,.05),0 18px 40px -18px rgba(15,23,42,.28)} [data-bs-theme="dark"]{--v-bg:#0b1220;--v-card:#111a2e;--v-border:#1f2a44;--v-hover:#162038;--v-sidebar:#070d1a;--v-sidebar-text:#b6c2d9} body{font-size:.9rem} /* motion: calm — the v16/v17 pulses are retired, transitions stay */ .stat .ic,.sidebar a.item.active,.page-header h1 i,.badge.text-bg-danger,.badge.bg-danger,.topbar .avatar,.vbrand-tile,.vfab,.topbar .icon-btn .dot,.form-control:focus,.form-select:focus{animation:none!important} .content .card,.content .stat,.content .vcard,.content .alert,.patient-banner{animation-duration:.35s} /* sidebar */ .sidebar{padding:0 10px 12px} .sidebar .brand{padding:16px 8px 12px;border-bottom:0;font-size:1.2rem} .sidebar .brand small{color:#7e8fae} .sidebar .group{padding:14px 10px 6px;letter-spacing:.6px;font-size:.66rem;color:#7286a6;display:flex;align-items:center;gap:8px} .sidebar .group::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--grp,#60a5fa);flex:none} .sidebar .group.side-group[data-grp="dashboard"]{--grp:#60a5fa}.sidebar .group[data-grp="clinical"]{--grp:#ef4444}.sidebar .group[data-grp="care_flow"]{--grp:#f472b6}.sidebar .group[data-grp="diagnostics"]{--grp:#a78bfa}.sidebar .group[data-grp="pharmacy"]{--grp:#34d399}.sidebar .group[data-grp="finance"]{--grp:#10b981}.sidebar .group[data-grp="supply"]{--grp:#fbbf24}.sidebar .group[data-grp="hr"]{--grp:#22d3ee}.sidebar .group[data-grp="quality"]{--grp:#fb923c}.sidebar .group[data-grp="admin"]{--grp:#94a3b8}.sidebar .group[data-grp="support"]{--grp:#c084fc}.sidebar .group[data-grp="apps"]{--grp:#38bdf8}.sidebar .group[data-grp="hospital_mgmt"]{--grp:#f59e0b}.sidebar .group[data-grp="portal"]{--grp:#38bdf8}.sidebar .group[data-grp="fav"]{--grp:#60a5fa} .sidebar a.item{padding:8px 10px;border-radius:11px;border-inline-start:0;font-size:.84rem;font-weight:600;margin:1px 0} .sidebar a.item:hover{padding-inline-start:12px;background:rgba(255,255,255,.06)} .sidebar a.item.active{background:linear-gradient(90deg,rgba(37,99,235,.35),rgba(37,99,235,.12));box-shadow:inset 3px 0 0 #60a5fa} [dir=rtl] .sidebar a.item.active{box-shadow:inset -3px 0 0 #60a5fa} .sidebar .side-search{margin:6px 0 4px;padding:0} .sidebar .side-search input{height:40px;border-radius:12px} .sidebar .side-search kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);font-size:.62rem;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:1px 6px;color:#8fa1bd;background:transparent} .sb-user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;background:rgba(255,255,255,.05);margin-top:14px;color:#c7d2e4;text-decoration:none} .sb-user:hover{background:rgba(255,255,255,.09);color:#fff} .sb-user .nm{color:#fff;font-weight:800;font-size:.8rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-user .rl{font-size:.68rem;opacity:.6} /* topbar */ .topbar{padding:.55rem 1.4rem;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);box-shadow:none;height:64px} [data-bs-theme="dark"] .topbar{background:rgba(17,26,46,.85)} .topbar .search{max-width:560px} .topbar .search input{height:42px;border-radius:14px;border:1.5px solid var(--v-border);background:var(--v-card);font-size:.84rem;padding-inline-end:3.4rem} .topbar .search kbd{position:absolute;inset-inline-end:.8rem;top:50%;transform:translateY(-50%);border:1px solid var(--v-border);border-radius:6px;padding:1px 7px;font-size:.66rem;color:var(--v-muted);background:var(--v-bg)} .topbar .icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--v-border);background:var(--v-card)} .topbar .btn-light{height:40px;border-radius:12px;border:1px solid var(--v-border);background:var(--v-card);font-weight:700;font-size:.8rem} .tb-quick{height:40px;border-radius:12px;background:var(--v-primary);color:#fff;display:inline-flex;align-items:center;gap:8px;padding:0 14px;font-weight:800;font-size:.82rem;border:0;box-shadow:0 10px 24px -12px rgba(37,99,235,.8)} .tb-quick:hover{color:#fff;background:var(--v-primary-dark)} /* page header */ .page-header{align-items:flex-end;margin-bottom:1.1rem} .page-header h1{font-size:1.45rem;font-weight:900;letter-spacing:-.2px} .page-header .crumbs{font-size:.74rem;color:#94a3b8;display:flex;gap:6px;align-items:center;margin-bottom:4px;flex-wrap:wrap} .page-header .crumbs a{color:#94a3b8}.page-header .crumbs a:hover{color:var(--v-primary)} .page-header .btn{height:42px;border-radius:12px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem} .page-header .btn-sm{height:36px;padding:0 12px} /* cards, stats, tables, chips, forms */ .card{border-radius:var(--radius);box-shadow:var(--v-shadow-sm)} .card-header{padding:.75rem 1rem;font-size:.9rem} .content .card:hover{transform:none;box-shadow:var(--v-shadow-sm)} .stat{border-radius:var(--radius);padding:.85rem 1rem;gap:.8rem;flex-direction:column;align-items:stretch} .stat .ic{width:32px;height:32px;border-radius:9px;font-size:.85rem;order:-1;box-shadow:none} .stat .v{font-size:1.5rem;font-weight:900} .stat .l{font-size:.74rem;font-weight:700} .stat .st-head{display:flex;justify-content:space-between;align-items:center} .stat .trend{font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;color:var(--v-muted)} .stat .trend.up{color:#16a34a}.stat .trend.down{color:#dc2626} .stat svg.spark{width:100%;height:24px;display:block} .content .stat:hover{transform:translateY(-2px)} .table{font-size:.85rem} .table thead th{position:sticky;top:0;z-index:1;background:#fafbfd;text-transform:none;letter-spacing:0;font-size:.74rem;padding:.65rem .8rem} [data-bs-theme="dark"] .table thead th{background:#0f172a} .table td{padding:.6rem .8rem} .table-hover>tbody>tr:hover>td:first-child{box-shadow:none} .badge{border-radius:999px;font-weight:800;padding:.32em .7em;font-size:.7rem} .btn{border-radius:12px;font-weight:700} .btn-sm{border-radius:10px} .btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info{box-shadow:0 8px 20px -12px rgba(15,23,42,.45)} .btn-primary{box-shadow:0 10px 24px -12px rgba(37,99,235,.8)} /* The field's shape is defined once, in quiet.css, from component.input in the design system. The rule that stood here restated it with different numbers and was simply overridden — two answers to one question. */ .form-control:focus,.form-select:focus{box-shadow:0 0 0 4px rgba(37,99,235,.12)} .input-group-text{border-radius:12px;border-width:1.5px;background:var(--v-hover)} .form-label{color:var(--v-text);font-size:.8rem;font-weight:700} .nav-tabs{gap:2px;background:var(--v-card);border:1px solid var(--v-border);border-radius:14px;padding:4px} .nav-tabs .nav-link{border-radius:10px;padding:.45rem .9rem;font-size:.8rem;border:0} .nav-tabs .nav-link.active{background:var(--v-ink);color:#fff;border:0} .nav-tabs .nav-link:hover{background:var(--v-hover)} .nav-pills .nav-link{border-radius:10px;font-weight:700} .dropdown-menu{border-radius:14px;box-shadow:var(--v-shadow-md);padding:.4rem} .dropdown-item{padding:.45rem .8rem;font-size:.84rem} .dropdown-item:hover{padding-inline-start:.95rem} .list-group-item-action:hover{padding-inline-start:1.2rem} .modal-content{border-radius:18px} .alert{border-radius:14px} .pagination .page-link{border-radius:10px;margin:0 2px;font-weight:700} /* patient banner */ .patient-banner{border-radius:18px;padding:1rem 1.2rem;border-inline-start-width:5px} .patient-banner .avatar{border-radius:16px} .patient-banner .meta{gap:1rem;font-size:.8rem} /* command palette */ .cmdk{position:fixed;inset:0;z-index:2050;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px;background:rgba(11,23,48,.45);backdrop-filter:blur(4px)} .cmdk.open{display:flex} .cmdk-box{width:min(680px,100%);background:var(--v-card);border:1px solid var(--v-border);border-radius:18px;box-shadow:0 30px 80px -20px rgba(11,23,48,.6);overflow:hidden;animation:vPop .18s var(--v-ease)} .cmdk-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--v-border)} .cmdk-in input{flex:1;border:0;outline:0;background:transparent;font-size:1rem;font-family:inherit;color:var(--v-text)} .cmdk-in kbd{border:1px solid var(--v-border);border-radius:6px;padding:1px 7px;font-size:.66rem;color:var(--v-muted)} .cmdk-list{max-height:min(60vh,520px);overflow:auto;padding:6px;scrollbar-width:thin} .cmdk-grp{font-size:.66rem;font-weight:800;color:var(--v-muted);padding:8px 10px 4px;letter-spacing:.5px} .cmdk-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;color:var(--v-text);text-decoration:none;font-size:.86rem} .cmdk-it:hover,.cmdk-it.sel{background:var(--v-hover);color:var(--v-text)} .cmdk-it.sel{box-shadow:inset 0 0 0 1.5px var(--v-primary)} .cmdk-it .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--v-bg);color:var(--v-primary);flex:none;font-size:.8rem} .cmdk-it .tx{flex:1;min-width:0}.cmdk-it .tx b{display:block;font-weight:700}.cmdk-it .tx small{color:var(--v-muted);font-size:.7rem} .cmdk-it .k{font-size:.62rem;color:var(--v-muted);border:1px solid var(--v-border);border-radius:5px;padding:0 5px} .cmdk-empty{padding:28px;text-align:center;color:var(--v-muted);font-size:.85rem} .cmdk-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--v-border);font-size:.66rem;color:var(--v-muted)} /* decision list (dashboard) */ .need{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--v-border);font-size:.84rem;overflow:hidden;max-width:100%} .need:last-child{border-bottom:0} .need .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none} .need .who{flex:1 1 0;min-width:0;overflow:hidden;display:block}.need .who b{display:block;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.need .who span{font-size:.72rem;color:var(--v-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.need .chip,.need .btn{flex:none} .need .btn{height:34px;padding:0 12px;font-size:.76rem} .chip{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .chip-r{background:#fee2e2;color:#b91c1c}.chip-a{background:#fef3c7;color:#b45309}.chip-g{background:#dcfce7;color:#15803d}.chip-b{background:#dbeafe;color:#1d4ed8}.chip-s{background:#f1f5f9;color:#475569}.chip-p{background:#ede9fe;color:#6d28d9} [data-bs-theme="dark"] .chip-r{background:#450a0a;color:#fca5a5}[data-bs-theme="dark"] .chip-a{background:#451a03;color:#fcd34d}[data-bs-theme="dark"] .chip-g{background:#052e16;color:#86efac}[data-bs-theme="dark"] .chip-b{background:#172554;color:#93c5fd}[data-bs-theme="dark"] .chip-s{background:#1e293b;color:#cbd5e1}[data-bs-theme="dark"] .chip-p{background:#2e1065;color:#c4b5fd} .seg{display:inline-flex;gap:3px;background:var(--v-bg);border-radius:10px;padding:3px} .seg a,.seg button{padding:4px 10px;border-radius:8px;font-size:.74rem;font-weight:700;color:var(--v-muted);border:0;background:transparent;text-decoration:none} .seg .on{background:var(--v-card);color:var(--v-text);box-shadow:0 1px 2px rgba(15,23,42,.08)} @media (max-width:576px){.stat .v{font-size:1.25rem}.topbar{height:auto}.page-header h1{font-size:1.15rem}} @media print{.topbar,.sidebar,.cmdk{display:none!important}} /* ═══════════════ Page tools (v22): filter / print / excel / pdf everywhere ═══════════════ */ #pageTools .btn{padding:.3rem .55rem} .pt-filter{background:var(--v-bg,#f6f8fb);border-bottom:1px solid var(--v-border,#e6eaf0)} th[data-pt-dir]::after{content:'▲';font-size:.6rem;margin-inline-start:.25rem;color:var(--v-primary)} th[data-pt-dir="desc"]::after{content:'▼'} @media print{ html,body{background:#fff!important} .sidebar,.topbar,.fab,#fab,.v-fab,.toast-container,.page-header .btn,.page-header form,.page-header .btn-group,#pageTools,.pt-filter,.pagination,.card-footer .pagination,form.card,.no-print,#facilityAlarm,footer,.heart-map,.command-palette,.modal,.dropdown-menu{display:none!important} .main,.content{margin:0!important;padding:0!important;max-width:100%!important} .card{break-inside:avoid;border:1px solid #ddd!important;box-shadow:none!important;margin-bottom:.6rem} .table-responsive{overflow:visible!important;max-height:none!important} table{font-size:9pt!important;width:100%!important} tr[hidden]{display:none!important} .badge{border:1px solid #999;color:#000!important;background:#fff!important} a{color:#000!important;text-decoration:none!important} .row{display:block}.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-3,.col-md-6{width:100%!important;max-width:100%!important;flex:0 0 100%!important} .stat{border:1px solid #ddd;display:inline-block;width:32%;margin:.2%} .print-header{display:block!important} @page{margin:12mm 10mm} } /* ── searchable select (every