/* ============================================================ HMS INH — Professional Hospital Theme (Dark Blue + Red) Bootstrap 5 layered with a custom dashboard skin. Theme colors are overridable per-hospital via CSS variables injected from branding settings in the layout . ============================================================ */ :root { --hms-primary: #0b2447; /* dark blue */ --hms-secondary: #19376d; /* mid blue */ --hms-accent: #c1121f; /* hospital red */ --hms-accent-dark: #8d0801; --hms-light: #f4f6fb; --hms-sidebar-w: 260px; --hms-sidebar-bg: linear-gradient(180deg, #0b2447 0%, #122e57 100%); --hms-radius: 14px; --hms-card-shadow: 0 2px 14px rgba(11, 36, 71, .08); } * { scroll-behavior: smooth; } body { background: var(--hms-light); font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; color: #28324a; } a { text-decoration: none; } /* ---------- Layout shell ---------- */ .hms-shell { display: flex; min-height: 100vh; } .hms-sidebar { width: var(--hms-sidebar-w); background: var(--hms-sidebar-bg); color: #cdd7ee; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1040; display: flex; flex-direction: column; transition: transform .25s ease; box-shadow: 4px 0 18px rgba(11,36,71,.18); } .hms-sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: 1.15rem; } .hms-sidebar .brand img { height: 34px; width: auto; } .hms-sidebar .brand .dot { color: var(--hms-accent); } .hms-nav { overflow-y: auto; padding: .5rem 0 2rem; flex: 1; } .hms-nav::-webkit-scrollbar { width: 6px; } .hms-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; } .hms-nav .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #6f86bd; padding: 1rem 1.4rem .35rem; font-weight: 700; } .hms-nav a.nav-link { color: #cdd7ee; padding: .6rem 1.4rem; display: flex; align-items: center; gap: .75rem; border-left: 3px solid transparent; font-size: .92rem; } .hms-nav a.nav-link i { width: 20px; text-align: center; font-size: 1.05rem; } .hms-nav a.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; } .hms-nav a.nav-link.active { background: rgba(193,18,31,.16); border-left-color: var(--hms-accent); color: #fff; font-weight: 600; } .hms-nav .badge-soft { margin-left: auto; } /* ---------- Main content ---------- */ .hms-main { margin-left: var(--hms-sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; transition: margin .25s ease; } .hms-topbar { background: #fff; height: 64px; position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; box-shadow: 0 1px 10px rgba(11,36,71,.06); } .hms-topbar .toggle-btn { border: 0; background: transparent; font-size: 1.4rem; color: var(--hms-primary); } .hms-content { padding: 1.5rem; flex: 1; } .hms-footer { padding: .75rem 1.5rem; color: #8893ad; font-size: .85rem; border-top: 1px solid #e6eaf3; background: #fff; text-align: center; width: 100%; } /* ---------- Cards & stats ---------- */ .card { border: 0; border-radius: var(--hms-radius); box-shadow: var(--hms-card-shadow); } .card .card-header { background: #fff; border-bottom: 1px solid #eef1f8; font-weight: 600; border-radius: var(--hms-radius) var(--hms-radius) 0 0 !important; } .stat-card { position: relative; overflow: hidden; color: #fff; border-radius: var(--hms-radius); } .stat-card .stat-body { padding: 1.1rem 1.25rem; position: relative; z-index: 2; } .stat-card .stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; } .stat-card .stat-label { opacity: .9; font-size: .85rem; } .stat-card .stat-icon { position: absolute; right: -.3rem; bottom: -.6rem; font-size: 4.5rem; opacity: .18; z-index: 1; } .stat-blue { background: linear-gradient(135deg,#0b2447,#19376d); } .stat-red { background: linear-gradient(135deg,#c1121f,#8d0801); } .stat-teal { background: linear-gradient(135deg,#0e7c7b,#0b605f); } .stat-amber { background: linear-gradient(135deg,#d9881f,#a8650a); } .stat-green { background: linear-gradient(135deg,#1a7f4b,#125a35); } .stat-purple { background: linear-gradient(135deg,#5b21b6,#3f1483); } /* ---------- Buttons & badges ---------- */ .btn-primary { background: var(--hms-primary); border-color: var(--hms-primary); } .btn-primary:hover { background: var(--hms-secondary); border-color: var(--hms-secondary); } .btn-danger { background: var(--hms-accent); border-color: var(--hms-accent); } .btn-danger:hover { background: var(--hms-accent-dark); border-color: var(--hms-accent-dark); } .btn-outline-primary { color: var(--hms-primary); border-color: var(--hms-primary); } .btn-outline-primary:hover { background: var(--hms-primary); } .text-primary { color: var(--hms-primary) !important; } .bg-primary { background: var(--hms-primary) !important; } .badge-cat-opd { background: #0e7c7b; } .badge-cat-observation { background: #d9881f; } .badge-cat-ipd { background: var(--hms-accent); } .badge-soft { background: rgba(193,18,31,.15); color: var(--hms-accent); } /* Status pills */ .pill { padding: .25rem .6rem; border-radius: 999px; font-size: .73rem; font-weight: 600; display: inline-block; } .pill-available, .pill-active, .pill-paid, .pill-completed { background: #e3f6ec; color: #1a7f4b; } .pill-occupied, .pill-unpaid, .pill-failed, .pill-cancelled { background: #fde3e5; color: var(--hms-accent); } .pill-reserved, .pill-partial, .pill-pending, .pill-processing { background: #fff3da; color: #a8650a; } .pill-maintenance, .pill-draft, .pill-inactive { background: #eceff5; color: #56627e; } .pill-discharged { background: #e7ecfa; color: var(--hms-secondary); } /* ---------- Tables ---------- */ .table thead th { background: #f3f6fc; color: var(--hms-primary); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid #e6eaf3; } .table-hover tbody tr:hover { background: #f7f9fe; } /* ---------- Auth / public ---------- */ .auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg,#0b2447 0%, #19376d 60%, #c1121f 160%); padding: 1rem; } .auth-card { width: 100%; max-width: 420px; background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.25); overflow: hidden; } .auth-card .auth-head { background: var(--hms-primary); color: #fff; padding: 1.6rem; text-align: center; } .auth-card .auth-head .logo-circle { width: 64px; height: 64px; border-radius: 50%; background: var(--hms-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: .5rem; } .auth-card .auth-body { padding: 1.7rem; } /* Notification dropdown */ .hms-notif { max-height: 380px; overflow-y: auto; width: 340px; } .hms-notif .notif-item { padding: .7rem .9rem; border-bottom: 1px solid #f0f2f8; display: flex; gap: .6rem; } .hms-notif .notif-item.unread { background: #f3f7ff; } .notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hms-accent); margin-top: .35rem; flex: none; } /* Bell ring animation — plays when a new notification arrives */ @keyframes hms-bell-ring { 0% { transform: rotate(0deg); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-15deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-9deg); } 75% { transform: rotate(5deg); } 90% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); } } .hms-bell-ring { animation: hms-bell-ring .7s ease; transform-origin: top center; } /* Timeline */ .hms-timeline { position: relative; padding-left: 1.6rem; } .hms-timeline::before { content: ''; position: absolute; left: .45rem; top: 0; bottom: 0; width: 2px; background: #d9e1f2; } .hms-timeline .tl-item { position: relative; padding-bottom: 1.1rem; } .hms-timeline .tl-item::before { content: ''; position: absolute; left: -1.32rem; top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--hms-accent); border: 2px solid #fff; box-shadow: 0 0 0 2px #d9e1f2; } .hms-timeline .tl-time { font-size: .76rem; color: #8893ad; } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { .hms-sidebar { transform: translateX(-100%); } .hms-sidebar.open { transform: translateX(0); } .hms-main { margin-left: 0; } .hms-backdrop { position: fixed; inset: 0; background: rgba(8,20,40,.5); z-index: 1035; display: none; } .hms-backdrop.show { display: block; } } /* ---------- Mobile / Small-screen Enhancements ---------- */ @media (max-width: 767.98px) { /* Ensure all tables scroll horizontally on small screens. */ .table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card .table:not(.table-sm) { font-size: .82rem; } /* Stat cards: smaller font on mobile */ .stat-value { font-size: 1.4rem !important; } .stat-label { font-size: .7rem !important; } /* Page header: stack buttons vertically */ .hms-page-header .hms-page-header-actions { flex-wrap: wrap; gap: .35rem !important; } /* Topbar: tighten padding */ .hms-topbar { padding: .4rem .75rem; gap: .5rem; } /* Dashboard alert widget cards: full width */ .card.border-warning, .card.border-danger { margin-bottom: .75rem; } /* Reduce card body padding on mobile */ .card-body { padding: .875rem; } /* Hide less-important table columns on mobile via utility class */ .d-mobile-none { display: none !important; } /* Full-width buttons in card-footer on mobile */ .card-footer .btn { width: 100%; margin-bottom: .3rem; } .card-footer .btn:last-child { margin-bottom: 0; } /* Department report: make summary strip 2-column on mobile */ .drw-summary { grid-template-columns: repeat(2, 1fr) !important; } /* Invoice / billing: tighten totals row */ .invoice-totals .d-flex { font-size: .88rem; } /* Form inputs: ensure tap-safe size */ .form-control, .form-select { min-height: 2.4rem; font-size: .9rem; } /* Admission show: make the running bill table scrollable */ .hms-main .table { min-width: 420px; } .hms-main .table-responsive { overflow-x: auto; } /* Global search: hidden on very small screens, shown ≥576 via d-sm-block */ #globalSearchWrap { min-width: 140px !important; max-width: 180px !important; } } @media (max-width: 575.98px) { /* Extra-small: badges and pills smaller */ .badge { font-size: .65rem; } .pill { font-size: .7rem; padding: .25em .55em; } /* Page headers: smaller title */ .hms-page-header h1, .hms-page-header .h4 { font-size: 1.1rem; } /* Stat grid: 2 columns max */ .row.g-3 > [class*="col-6"] { flex: 0 0 50%; max-width: 50%; } /* Topbar hospital badge: hide on tiny screens */ .hms-topbar .badge.d-md-inline { display: none !important; } } @media print { .hms-sidebar, .hms-topbar, .hms-footer, .no-print { display: none !important; } .hms-main { margin-left: 0 !important; } body { background: #fff; } .card { box-shadow: none; border: 1px solid #ddd; } }