/* ========================================================================== Hooyo Clinic HMS — app.css Last updated: 2025-08-30 Uses Bootstrap 5 as base. Adds modern theming, layout polish, components, RTL support, and print styles for reports/invoices. -------------------------------------------------------------------------- HOW TO USE: 1) Ensure then in . 2) Put if you have sidebar. Add "theme-dark" on or for dark mode. 3) To enable RTL, add dir="rtl" on . ========================================================================== */ /* ------------------------- Root & Theme Tokens --------------------------- */ :root { --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; /* Brand */ --brand-50:#f3faf0; --brand-100:#e6f4e0; --brand-200:#cde9c0; --brand-300:#b4dea1; --brand-400:#9bd381; --brand-500:#84bf41; /* Primary brand (kept from your snippet) */ --brand-600:#6aa233; --brand-700:#56812a; --brand-800:#416021; --brand-900:#294016; /* Accents */ --accent-info:#0dcaf0; --accent-success:#12b886; --accent-warning:#ffc107; --accent-danger:#dc3545; /* Neutrals */ --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1; --gray-400:#94a3b8; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-800:#1f2937; --gray-900:#0f172a; /* Base (Light) */ --bg:#f7f8fb; --surface:#ffffff; --text:#1e293b; --muted:#475569; --border:#e5e7eb; /* Effects */ --radius-sm:10px; --radius-md:16px; --radius-lg:20px; --shadow-sm:0 6px 16px rgba(17,24,39,.06); --shadow-md:0 10px 28px rgba(17,24,39,.08); --shadow-lg:0 16px 40px rgba(17,24,39,.12); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(132,191,65,.22); } /* Dark Theme (opt-in: add .theme-dark on html or body) */ .theme-dark, html.theme-dark, body.theme-dark { --bg:#0b1220; --surface:#111827; --text:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --shadow-sm:0 6px 16px rgba(0,0,0,.35); --shadow-md:0 10px 28px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.55); } /* ---------------------------- Base Resets -------------------------------- */ html, body { height: 100%; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); color: var(--text); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--brand-600); text-decoration: none; } a:hover { color: var(--brand-700); text-decoration: underline; } hr { border-top:1px solid var(--border); opacity:1; } /* ---------------------------- Layout Shell ------------------------------- */ .layout .container-fluid { padding-left: 1rem; padding-right: 1rem; } /* Top Navbar */ .navbar { background: var(--surface) !important; border-bottom: 1px solid var(--border); } .navbar .navbar-brand { font-weight: 700; letter-spacing: .2px; color: var(--text); } .navbar .nav-link { color: var(--muted); } .navbar .nav-link.active, .navbar .nav-link:hover { color: var(--brand-700); } /* Sidebar (optional) */ .sidebar { position: sticky; top: 0; height: calc(100dvh - 0px); background: var(--surface); border-right: 1px solid var(--border); padding: 1rem .75rem; } .sidebar .menu .menu-item { display:flex; align-items:center; gap:.6rem; padding:.6rem .8rem; border-radius: var(--radius-sm); color: var(--muted); } .sidebar .menu .menu-item:hover { background: var(--gray-100); color: var(--text); } .theme-dark .sidebar .menu .menu-item:hover { background:#0f172a; } .sidebar .menu .menu-item.active { background: linear-gradient(180deg, var(--brand-100), transparent); color: var(--brand-700); border: 1px solid var(--brand-200); } /* Content wrapper spacing */ .page-header { display:flex; align-items:center; justify-content:space-between; gap: 1rem; margin: 1.4rem 0 1rem; } .page-title { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; letter-spacing: .2px; } .breadcrumb { margin: 0; background: transparent; } .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--gray-400); } /* ---------------------------- Cards & Surfaces --------------------------- */ .card { border: 0; border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .card-header { border-bottom: 1px solid var(--border); background: transparent; font-weight: 700; } .card-footer { border-top: 1px solid var(--border); background: transparent; } .stat-card { display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:center; padding: 1rem 1.1rem; } .stat-card .stat-eyebrow { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; } .stat-card .stat-value { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight:800; } .stat-card .stat-trend { font-size:.85rem; } .trend-up { color: var(--accent-success); } .trend-down { color: var(--accent-danger); } /* Chips/Pills */ .badge { border-radius: 999px; padding: .35rem .6rem; font-weight: 600; } .badge-soft { background: var(--gray-100); color: var(--text); } .badge-brand { background: var(--brand-100); color: var(--brand-800); border: 1px solid var(--brand-200); } /* ------------------------------- Tables ---------------------------------- */ .table { --bs-table-bg: transparent; color: var(--text); margin-bottom: 0; } .table thead th { background: var(--gray-50); text-transform: uppercase; font-size: .78rem; color: var(--gray-600); border-bottom: 1px solid var(--border); letter-spacing: .04em; } .table tbody td { vertical-align: middle; border-color: var(--border); } .table-hover > tbody > tr:hover { background: rgba(132,191,65,.06); } .table .cell-fit { width: 1%; white-space: nowrap; } .table .cell-sm { width: 140px; } .table .avatar { width: 34px; height:34px; border-radius:50%; object-fit:cover; } /* Sticky header table wrapper */ .table-scroll { max-height: 62vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); } .table-scroll table { margin:0; } /* Status tags for HMS */ .status { display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .6rem; border-radius:999px; font-size:.82rem; font-weight:600; border: 1px solid transparent; } .status.paid { background:#e6ffed; color:#057a55; border-color:#c7f9d5; } .status.unpaid { background:#fff7ed; color:#c2410c; border-color:#fde4d5; } .status.partial { background:#fefce8; color:#854d0e; border-color:#f6e9b0; } .status.cancelled { background:#fee2e2; color:#991b1b; border-color:#f8c7c7; } /* Lab results */ .lab-positive { background:#fee2e2; color:#991b1b; border-color:#f8c7c7; } .lab-negative { background:#e0f2fe; color:#075985; border-color:#cce6fb; } .lab-pending { background:#fef9c3; color:#854d0e; border-color:#f3e8a3; } /* Pharmacy stock indicators */ .stock-ok { color:#0f766e; background:#ccfbf1; border:1px solid #99f6e4; } .stock-low { color:#a16207; background:#fef3c7; border:1px solid #fde68a; } .stock-out { color:#991b1b; background:#fee2e2; border:1px solid #fecaca; } /* ----------------------------- Forms & Inputs ---------------------------- */ .form-control, .form-select, .form-check-input { border-radius: 12px; border-color: var(--border); background: var(--surface); color: var(--text); } .form-control:focus, .form-select:focus { box-shadow: var(--focus-ring); border-color: var(--brand-400); } .input-group-text { background: var(--gray-100); border-color: var(--border); color: var(--muted); } /* Search bars */ .searchbar { position: relative; } .searchbar .search-icon { position:absolute; inset-inline-start: .75rem; inset-block-start: 50%; transform: translateY(-50%); opacity:.55; } .searchbar input.form-control { padding-inline-start: 2.2rem; } /* ---------------------------- Buttons & Links ---------------------------- */ .btn { border-radius: 12px; font-weight: 700; letter-spacing: .2px; } .btn-primary { background: var(--brand-600); border-color: var(--brand-600); } .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); } .btn-outline-primary { color: var(--brand-700); border-color: var(--brand-300); background: var(--brand-50); } .btn-outline-primary:hover { color: #fff; background: var(--brand-600); border-color: var(--brand-600); } .btn-ghost { background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--gray-100); color: var(--text); } /* Floating action button (use for +New) */ .fab { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; width:56px;height:56px; border-radius:50%; display:grid; place-items:center; background: var(--brand-600); color:#fff; border:0; box-shadow: var(--shadow-lg); } .fab:hover { background: var(--brand-700); } /* --------------------------- Navs, Tabs, Pills --------------------------- */ .nav-pills .nav-link { border-radius: 999px; color: var(--muted); } .nav-pills .nav-link.active { background: var(--brand-600); } /* ---------------------------- Pagination -------------------------------- */ .pagination .page-link { border: 1px solid var(--border); color: var(--muted); } .pagination .page-item.active .page-link { background: var(--brand-600); border-color: var(--brand-600); } /* ------------------------------ Alerts ---------------------------------- */ .alert { border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .alert a { text-decoration: underline; } /* ------------------------------ Modals ---------------------------------- */ .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ------------------------------ Dropdowns -------------------------------- */ .dropdown-menu { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); background: var(--surface); } /* ------------------------------ Tooltips --------------------------------- */ .tooltip-inner { background: var(--gray-800); } .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--gray-800); } /* ---------------------------- Toasts / Notices --------------------------- */ .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); } /* --------------------------- Utility Helpers ----------------------------- */ .shadow-smx { box-shadow: var(--shadow-sm) !important; } .shadow-mdx { box-shadow: var(--shadow-md) !important; } .shadow-lgx { box-shadow: var(--shadow-lg) !important; } .rounded-smx { border-radius: var(--radius-sm) !important; } .rounded-mdx { border-radius: var(--radius-md) !important; } .rounded-lgx { border-radius: var(--radius-lg) !important; } .text-muted-strong { color: var(--muted) !important; } .border-soft { border: 1px solid var(--border) !important; } .bg-surface { background: var(--surface) !important; } .bg-brand-50 { background: var(--brand-50) !important; } .bg-brand-100{ background: var(--brand-100) !important; } .inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background: var(--gray-100); padding:.2rem .5rem; border-radius:8px; } /* ---------------------------- Login / Auth ------------------------------- */ .auth-wrapper { min-height: 100dvh; display:grid; place-items:center; padding: 2rem; background: radial-gradient(800px 400px at 20% 0%, rgba(132,191,65,.06), transparent 60%), radial-gradient(800px 400px at 80% 100%, rgba(13,202,240,.06), transparent 60%), var(--bg); } .auth-card { width: 100%; max-width: 460px; padding: 1.2rem; } .brand-mark { width: 42px; height:42px; border-radius:12px; display:grid; place-items:center; background: var(--brand-600); color:#fff; font-weight:800; box-shadow: var(--shadow-md); } /* --------------------------- Modules: Invoices --------------------------- */ .invoice-card .amount { font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; } .invoice-meta { font-size: .9rem; color: var(--muted); } .invoice-actions .btn { margin-inline: .25rem; } /* --------------------------- Modules: Pharmacy --------------------------- */ .item-card { display:flex; flex-direction:column; gap:.6rem; border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: .9rem; box-shadow: var(--shadow-sm); } .item-card .sku { font-size:.78rem; color:var(--gray-500); letter-spacing:.06em; } .item-card .name { font-weight:800; } .item-card .meta { font-size:.88rem; color: var(--muted); } .item-card .actions { display:flex; gap:.5rem; flex-wrap:wrap; } /* Cards grid for products */ .card-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax(240px, 1fr) ); gap: .9rem; } /* Quick Sale keypad/summary boxes */ .quick-sale { display:grid; gap: .8rem; } .quick-sale .summary-box { border:1px dashed var(--border); border-radius: var(--radius-md); padding:.8rem; background: var(--surface); } /* ------------------------------ Timeline --------------------------------- */ .timeline { position:relative; padding-left:1.4rem; } .timeline::before { content:""; position:absolute; inset-block:0; inset-inline-start:.55rem; width:2px; background: var(--border); } .timeline .event { position:relative; margin-bottom:1rem; } .timeline .event::before { content:""; position:absolute; inset-inline-start:-.13rem; inset-block-start:.2rem; width:.8rem; height:.8rem; border-radius:50%; background: var(--brand-600); box-shadow: 0 0 0 3px rgba(132,191,65,.2); } /* ------------------------------ Animations ------------------------------- */ @keyframes subtle-fade-up { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } } .fade-up { animation: subtle-fade-up .3s ease both; } /* ------------------------------- RTL ------------------------------------ */ [dir="rtl"] .ms-1 { margin-right:.25rem !important; margin-left:0 !important; } [dir="rtl"] .ms-2 { margin-right:.5rem !important; margin-left:0 !important; } [dir="rtl"] .ms-3 { margin-right:1rem !important; margin-left:0 !important; } [dir="rtl"] .me-1 { margin-left:.25rem !important; margin-right:0 !important; } [dir="rtl"] .me-2 { margin-left:.5rem !important; margin-right:0 !important; } [dir="rtl"] .me-3 { margin-left:1rem !important; margin-right:0 !important; } [dir="rtl"] .searchbar .search-icon { inset-inline-start: auto; inset-inline-end: .75rem; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { transform: scaleX(-1); } /* ------------------------------ Print (A4) ------------------------------- */ @media print { :root { --bg:#fff; --surface:#fff; --text:#000; --border:#c7c7c7; } html, body { background:#fff; } .navbar, .sidebar, .fab, .btn, .no-print { display:none !important; } .card, .table, .invoice-card, .print-surface { box-shadow:none !important; border:1px solid var(--border) !important; } .table thead th { background:#f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { size: A4; margin: 12mm; } .page-break { page-break-after: always; } } /* -------------------------- Small Screens Tweaks ------------------------- */ @media (max-width: 992px) { .sidebar { position: static; height: auto; border-right:0; margin-bottom: .8rem; } .page-header { flex-direction: column; align-items: flex-start; gap: .5rem; } } /* --------------------------- Helpers for Reports ------------------------- */ .report-title { font-weight: 800; font-size: 1.25rem; margin-bottom:.2rem; } .report-subtitle { color: var(--muted); font-size:.92rem; } .report-meta { display:flex; flex-wrap:wrap; gap:.6rem; color: var(--muted); font-size:.88rem; } .report-stamp { border:2px dashed var(--border); padding:.6rem .9rem; border-radius:12px; font-weight:700; }