/* ============================================================ Smart Hospital — Modern Design System v2 Full reskin overlay on top of AdminLTE 2 / Bootstrap 3. Loaded LAST in ; non-destructive (CSS-only). Target aesthetic: Pluscare / Mediso / MediKit references — white surfaces, soft shadows, green accent, generous spacing, refined typography, RTL-polished. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap'); :root { /* Surfaces */ --sh-bg: #f6f7fb; --sh-surface: #ffffff; --sh-surface-alt: #fafbfd; --sh-border: #eceff5; --sh-border-strong: #dfe3eb; /* Text */ --sh-text: #111827; --sh-text-2: #374151; --sh-muted: #6b7280; --sh-faint: #9ca3af; /* Brand */ --sh-brand: #16a34a; --sh-brand-dark: #15803d; --sh-brand-soft: #e9f8ee; --sh-brand-softer: #f3fbf6; /* Status */ --sh-info: #2563eb; --sh-info-soft: #e0ecff; --sh-warning: #f59e0b; --sh-warning-soft:#fef3c7; --sh-danger: #ef4444; --sh-danger-soft: #fde8e8; /* Geometry — radius */ --sh-r-sm: 8px; --sh-r: 12px; --sh-r-lg: 16px; /* Geometry — spacing scale (4px base, mostly multiples of 4) Use these instead of ad-hoc values. Cheat sheet: --sp-1 4px icon gap, hairline padding --sp-2 8px compact inline padding, small gap --sp-3 12px default cell/list padding --sp-4 16px card body / modal body --sp-5 20px section padding (desktop default) --sp-6 24px roomy section padding --sp-7 32px hero / page-level padding --sh-pad is the legacy alias for "default padding" — kept as a pointer to --sp-5 so any straggling references still resolve. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sh-pad: var(--sp-5); /* Shadow */ --sh-shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --sh-shadow-2: 0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04); --sh-shadow-3: 0 12px 32px rgba(16,24,40,.10); /* Type */ --sh-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --sh-font-ar: 'Tajawal', 'Cairo', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif; } /* ============== RESET / BASE ============== */ html, body { background: var(--sh-bg) !important; } body, body.skin-blue, body.skin-blue-light, body.hold-transition { background: var(--sh-bg) !important; color: var(--sh-text); font-family: var(--sh-font); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.005em; } [dir="rtl"] body { font-family: var(--sh-font-ar); } .content-wrapper, .right-side { background: var(--sh-bg) !important; padding-bottom: 40px; } /* 9 view files (chat, charges, expmedicine report, income search, online appointment, stock report, blood-bank status, unauthorized) hard-code inline `style="min-height: 946px;"` on .content-wrapper. That forces 946px of vertical space on every viewport — fine on 1080p desktops, massive empty scroll on phones. Override globally with a viewport- relative minimum so the content area always fills the screen but never overshoots. Header is 60px desktop / 124px mobile (logo+navbar stacked); mobile override lives in the @media block at the bottom. */ .content-wrapper, .right-side { min-height: calc(100vh - 60px) !important; } /* The body has class="fixed" so AdminLTE pins .main-header (and the sidebar) with position:fixed at the top of the viewport. AdminLTE's default content-wrapper padding-top is 50px (sized for its 50px navbar) — but our reskin made the header 60px. Need 60px to clear the header + 10px breathing room so the page content (welcome hero, content-header, etc.) doesn't touch the header's bottom edge. Mobile override at the bottom uses 134px (60px logo + 60px navbar + 14px). */ .fixed .content-wrapper, .fixed .right-side { padding-top: 70px !important; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--sh-text); letter-spacing: -.01em; } /* ============================================================ UTILITY CLASSES (sh-u-*) ------------------------------------------------------------ Purpose: kill the most-repeated inline `style="..."` patterns we found in the admin views (1,636 inline styles, top offenders: width:100% ~480x, display:none ~226x, color:red 114x, padding-left:0 30x, text-transform:capitalize 28x, margin-bottom:18px 12x, height:50px 16x). Naming: `.sh-u-` — namespaced so it never collides with Bootstrap (.text-*, .pull-*) or AdminLTE (.no-padding, .text-center). Sized off the spacing scale (--sp-1..--sp-7) defined in :root. Intentionally small set — utility creep is real. Add to it when a new pattern shows up in 5+ places, not preemptively. ============================================================ */ /* Width / sizing */ .sh-u-w-full { width: 100% !important; } .sh-u-w-auto { width: auto !important; } .sh-u-mw-100 { max-width: 100% !important; } /* Display */ .sh-u-hidden { display: none !important; } .sh-u-block { display: block !important; } .sh-u-inline-blk { display: inline-block !important; } .sh-u-flex { display: flex !important; } .sh-u-flex-wrap { flex-wrap: wrap !important; } .sh-u-items-ctr { align-items: center !important; } /* Spacing — margin (uses --sp-1..--sp-7) */ .sh-u-m-0 { margin: 0 !important; } .sh-u-mt-1 { margin-top: var(--sp-1) !important; } .sh-u-mt-2 { margin-top: var(--sp-2) !important; } .sh-u-mt-3 { margin-top: var(--sp-3) !important; } .sh-u-mt-4 { margin-top: var(--sp-4) !important; } .sh-u-mt-5 { margin-top: var(--sp-5) !important; } .sh-u-mb-1 { margin-bottom: var(--sp-1) !important; } .sh-u-mb-2 { margin-bottom: var(--sp-2) !important; } .sh-u-mb-3 { margin-bottom: var(--sp-3) !important; } .sh-u-mb-4 { margin-bottom: var(--sp-4) !important; } .sh-u-mb-5 { margin-bottom: var(--sp-5) !important; } /* Spacing — padding */ .sh-u-p-0 { padding: 0 !important; } .sh-u-pl-0 { padding-left: 0 !important; } .sh-u-pr-0 { padding-right: 0 !important; } .sh-u-pt-0 { padding-top: 0 !important; } .sh-u-pb-0 { padding-bottom: 0 !important; } .sh-u-p-2 { padding: var(--sp-2) !important; } .sh-u-p-3 { padding: var(--sp-3) !important; } .sh-u-p-4 { padding: var(--sp-4) !important; } .sh-u-p-5 { padding: var(--sp-5) !important; } [dir="rtl"] .sh-u-pl-0 { padding-left: initial !important; padding-right: 0 !important; } [dir="rtl"] .sh-u-pr-0 { padding-right: initial !important; padding-left: 0 !important; } /* Text */ .sh-u-text-cap { text-transform: capitalize !important; } .sh-u-text-up { text-transform: uppercase !important; } .sh-u-text-low { text-transform: lowercase !important; } .sh-u-nowrap { white-space: nowrap !important; } .sh-u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sh-u-text-red { color: var(--sh-danger) !important; } /* prefer Bootstrap .text-danger */ /* Float / clear */ .sh-u-clear { clear: both; overflow: hidden; } /* ============== TOP NAV ============== */ .skin-blue .main-header .navbar, .main-header .navbar { background: var(--sh-surface) !important; border-bottom: 1px solid var(--sh-border); box-shadow: none !important; height: 60px; min-height: 60px; } .main-header { height: 60px; } .skin-blue .main-header .logo, .main-header .logo { background: var(--sh-surface) !important; color: var(--sh-text) !important; border-bottom: 1px solid var(--sh-border); border-right: 1px solid var(--sh-border); font-weight: 700; font-size: 18px; letter-spacing: -.02em; height: 60px; line-height: 60px; } [dir="rtl"] .skin-blue .main-header .logo, [dir="rtl"] .main-header .logo { border-right: 0; border-left: 1px solid var(--sh-border); } .skin-blue .main-header .logo:hover { background: var(--sh-surface-alt) !important; } /* Hospital name shown in the top nav (sidebar-session span). Override the skin defaults: LTR skin leaves it inheriting white-on-white; RTL skin sets a stale green (#b0dd38); both also force width:100% which makes the span overlap the sidebar-toggle / search / icons next to it. Force a brand-aligned dark color and cap width so it never collides. */ .main-header .sidebar-session, .skin-blue .main-header .sidebar-session, [dir="rtl"] .main-header .sidebar-session, [dir="rtl"] .skin-blue .main-header .sidebar-session { color: var(--sh-text) !important; font-weight: 600; font-size: 15px; line-height: 60px; padding: 0 !important; width: auto !important; max-width: calc(100% - 8px); display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Keep the hospital-name column clear of the toggle on LTR (toggle floats left) and of the icons on RTL (toggle floats right). Adds a safe gap. */ .main-header .navbar > .col-lg-4, .main-header .navbar > .col-md-4, .main-header .navbar > .col-sm-3, .main-header .navbar > .col-xs-3 { padding-left: 44px; padding-right: 44px; } .skin-blue .main-header .navbar .sidebar-toggle { color: var(--sh-text-2) !important; height: 60px; line-height: 30px; } .skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--sh-surface-alt) !important; color: var(--sh-brand) !important; } .skin-blue .main-header .navbar .nav > li > a { color: var(--sh-text-2) !important; height: 60px; line-height: 30px; padding: 15px 14px; } .skin-blue .main-header .navbar .nav > li > a:hover, .skin-blue .main-header .navbar .nav > li > a:focus, .skin-blue .main-header .navbar .nav .open > a, .skin-blue .main-header .navbar .nav .open > a:hover, .skin-blue .main-header .navbar .nav .open > a:focus { background: var(--sh-surface-alt) !important; color: var(--sh-brand) !important; } .skin-blue .main-header .navbar .nav > li > a > .label { background: var(--sh-danger); border: 2px solid var(--sh-surface); border-radius: 999px; font-weight: 600; font-size: 10px; padding: 2px 6px; top: 9px; right: 4px; } /* ============== TOP NAV SEARCH FORM ============== */ /* The patient-search input lives in the navbar (.search-form). It's a Bootstrap 3 input-group: +