/* Cabinet Medical 7~95 — Clinic Management System Design intent: calm, clinical, generous whitespace, large readable text, no emoji. Works on phone, laptop, desktop. */ :root { --bg: #f6f7f9; --surface: #ffffff; --subtle: #f0f3f7; /* table headers, tab strip */ --subtle-2: #f7f9fc; /* inset panels */ --input-bg: #ffffff; --ink: #1c2433; --muted: #5b6678; --line: #e3e7ee; --primary: #1f6f8b; /* clinical teal - button fills */ --primary-d: #155565; --link: #1f6f8b; /* text links (lifted in dark mode) */ --on-primary:#ffffff; /* text sitting on a teal fill */ --logo-bg: #ffffff; /* the logo tile stays white in both themes */ --accent: #d39c2a; /* warm gold (accent only) */ --ok: #2c7a4b; --ok-bg: #f0f8f3; --ok-line: #cfe6d8; --error: #b3261e; --error-bg: #fdf2f1; --error-line:#f0c4c1; --pill-open: #fff7e0; --pill-open-ink: #8a6a14; --pill-closed: #e6f1ea; --pill-closed-ink: #2c7a4b; --radius: 10px; --shadow: 0 1px 2px rgba(20,30,50,0.05), 0 4px 14px rgba(20,30,50,0.06); } /* ----- Night mode ----- Same layout, re-tinted. Set on by the inline script in base.html before first paint, so there is never a white flash on a dark screen. Values are chosen for readable contrast on a clinic screen at night, not for maximum darkness: pure black on bright white text is tiring to read from. */ :root[data-theme="dark"] { --bg: #131820; --surface: #1b222c; --subtle: #222b37; --subtle-2: #1f2731; --input-bg: #202836; --ink: #e6ebf2; --muted: #9aa7b8; --line: #2c3644; --primary: #2a86a3; /* still dark enough for white button text */ --primary-d: #35a0c1; --link: #6cc5e0; /* lifted so links read on a dark ground */ --accent: #e0b350; --ok: #6cc08d; --ok-bg: #172a20; --ok-line: #2c4a37; --error: #f08a82; --error-bg: #2e1c1b; --error-line:#5a2f2c; --pill-open: #3a2f14; --pill-open-ink: #e6c67f; --pill-closed: #1c2f24; --pill-closed-ink: #7cc79b; --shadow: 0 1px 2px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Khmer", sans-serif; font-size: 16px; line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.6rem; margin: 0 0 0.5rem; } h2 { font-size: 1.2rem; margin: 1.6rem 0 0.6rem; } .muted { color: var(--muted); } /* ----- Top bar ----- */ .topbar { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 24px; } .brand { display: flex; align-items: center; gap: 12px; } .logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: var(--logo-bg); } .brand-text { line-height: 1.15; } .brand-text .brand-en { font-weight: 700; font-size: 1.05rem; } .brand-text .brand-km { font-size: 0.85rem; color: var(--muted); font-family: 'Noto Sans Khmer', 'Khmer Sangam MN', sans-serif; } .topnav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .topnav a { color: var(--ink); } .topnav a:hover { color: var(--link); } .topnav .who { color: var(--muted); font-size: 0.92rem; } .topnav .who em { font-style: normal; color: var(--accent); margin-left: 4px; } .topnav .logout { border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; } /* ----- Layout ----- */ .content { max-width: 1100px; margin: 24px auto; padding: 0 24px 80px; } .footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 16px 0 24px; } /* ----- Flash ----- */ .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--surface); } .flash-ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); } .flash-error { border-color: var(--error-line); background: var(--error-bg); color: var(--error); } /* ----- Buttons ----- */ .btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; cursor: pointer; font-size: 0.95rem; text-decoration: none; } .btn:hover { border-color: var(--primary); color: var(--primary); } .btn.primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .btn.primary:hover { background: var(--primary-d); border-color: var(--primary-d); color: var(--on-primary); } .btn.small { padding: 4px 10px; font-size: 0.85rem; } .btn.wide { width: 100%; } .btn.right { margin-left: auto; } /* ----- Cards / dashboard ----- */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .card-num { font-size: 2rem; font-weight: 700; color: var(--primary); } .card-label { color: var(--muted); } .actions { display: flex; gap: 10px; margin: 12px 0 24px; } /* ----- Tables ----- */ .data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.95rem; vertical-align: top; } .data-table thead { background: var(--subtle); } .data-table tr:last-child td { border-bottom: none; } /* ----- Pills ----- */ .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; } .pill-open { background: var(--pill-open); color: var(--pill-open-ink); } .pill-closed { background: var(--pill-closed); color: var(--pill-closed-ink); } /* ----- Forms ----- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--surface); padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .form-grid label { display: flex; flex-direction: column; font-size: 0.92rem; color: var(--muted); } .form-grid label.full { grid-column: 1 / -1; } .form-grid input, .form-grid select, .form-grid textarea { margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; color: var(--ink); background: var(--input-bg); font-family: inherit; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .form-actions { grid-column: 1 / -1; display: flex; gap: 10px; } .search-row { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; } .search-row input[type=search] { flex: 1; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; } /* ----- Login ----- */ .login-card { max-width: 380px; margin: 60px auto; background: var(--surface); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .login-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .login-card label { display: flex; flex-direction: column; font-size: 0.9rem; color: var(--muted); } .login-card input { margin-top: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; } /* ----- Patient detail ----- */ .patient-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .patient-actions { display: flex; gap: 8px; flex-wrap: wrap; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } dl.kv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); display: grid; grid-template-columns: 180px 1fr; column-gap: 18px; row-gap: 8px; } dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; } .visit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .visit-list li a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; color: var(--ink); } .visit-list li a:hover { border-color: var(--primary); text-decoration: none; } form.inline { display: inline; } /* ----- Encounter (visit detail) ----- */ .section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow); } .section-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 10px; } .section-head h2 { margin: 0; font-size: 1.1rem; color: var(--primary); } .section-head .actions { display: flex; gap: 6px; } .section .empty { color: var(--muted); font-style: italic; } .section pre { white-space: pre-wrap; font-family: inherit; margin: 0; font-size: 0.98rem; } .vital-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px 14px; } .vital-grid .vital { background: var(--subtle-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; } .vital .lbl { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; } .vital .val { font-size: 1.15rem; font-weight: 700; color: var(--ink); } .vital .val small { color: var(--muted); font-weight: 400; } .lab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; background: var(--surface); padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); } .lab-section h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--primary); border-bottom: 1px solid var(--line); padding-bottom: 4px; } .lab-section ul { list-style: none; padding: 0; margin: 0; } .lab-section li { padding: 2px 0; } .lab-section label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; font-size: 0.92rem; } .lab-section input[type=checkbox] { margin-top: 4px; } .section-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .section-list li { background: var(--subtle-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; } .action-bar { display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; } /* ----- Patient page tabs ----- */ .patient-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-top: 18px; overflow-x: auto; } .patient-tabs .tab { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--subtle); color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; margin-bottom: -2px; } .patient-tabs .tab:hover { background: var(--surface); color: var(--link); } .patient-tabs .tab.active { background: var(--surface); border-color: var(--line) var(--line) var(--surface) var(--line); color: var(--primary); } .patient-tabs .tab-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 0.78rem; font-weight: 700; } .patient-tabs .tab.active .tab-num { background: var(--accent); } .tab-body { padding-top: 16px; } .allergy-banner { display: inline-block; background: var(--error-bg); color: var(--error); border: 1px solid var(--error-line); border-radius: 6px; padding: 4px 10px; margin: 6px 0 0; font-size: 0.92rem; } .kv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 740px) { .kv-cols { grid-template-columns: 1fr; } } /* ----- Mobile ----- */ @media (max-width: 740px) { .cards { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } dl.kv { grid-template-columns: 1fr; } dl.kv dt { font-weight: 600; color: var(--ink); margin-top: 6px; } .topbar { flex-direction: column; align-items: flex-start; gap: 10px; } .content { padding: 0 14px 60px; } } /* ========================================================================== Staff roles, account actions, and the night-mode control ========================================================================== */ /* Role colours. Declared for both themes so a pill never ends up dark-on-dark. */ :root { --role-admin-bg: #efe3c6; --role-admin-ink: #7a5b12; --role-doctor-bg: #dceaf1; --role-doctor-ink: #175a72; --role-nurse-bg: #e2ecdd; --role-nurse-ink: #3a6b3f; --role-lab-bg: #e6e3f2; --role-lab-ink: #4c418c; --role-pharmacy-bg: #f6e2df; --role-pharmacy-ink: #8c3f38; } :root[data-theme="dark"] { --role-admin-bg: #3a2f14; --role-admin-ink: #e6c67f; --role-doctor-bg: #16323d; --role-doctor-ink: #7fc7de; --role-nurse-bg: #1c2f24; --role-nurse-ink: #8fcf9f; --role-lab-bg: #262247; --role-lab-ink: #b0a6e8; --role-pharmacy-bg: #3a2320; --role-pharmacy-ink: #e5a49b; } .role-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .role-admin { background: var(--role-admin-bg); color: var(--role-admin-ink); } .role-doctor { background: var(--role-doctor-bg); color: var(--role-doctor-ink); } .role-nurse { background: var(--role-nurse-bg); color: var(--role-nurse-ink); } .role-lab { background: var(--role-lab-bg); color: var(--role-lab-ink); } .role-pharmacy { background: var(--role-pharmacy-bg); color: var(--role-pharmacy-ink); } /* Several small buttons and mini-forms sitting on one table row. */ .row-actions { white-space: nowrap; } .row-actions .btn, .row-actions .inline-form { vertical-align: middle; } .inline-form { display: inline; margin: 0; } .actions-col { min-width: 320px; } /* Destructive actions read as destructive, but stay quiet until hovered — this sits next to everyday buttons in a busy list. */ .btn.danger { color: var(--error); border-color: var(--error-line); } .btn.danger:hover { background: var(--error); color: var(--on-primary); border-color: var(--error); } /* A deactivated account should be obviously switched off at a glance. */ .row-inactive { opacity: 0.55; } .row-inactive td { text-decoration: line-through; } .row-inactive .row-actions, .row-inactive .role-pill { text-decoration: none; } .check-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .check-row input[type="checkbox"] { width: auto; margin: 0; } .small-note { margin-top: 18px; font-size: 0.92rem; max-width: 60ch; } /* Night-mode picker */ .theme-picker { display: inline-flex; align-items: center; } .theme-picker select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--ink); font-size: 0.9rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Anything printed goes onto white paper, whatever the screen is set to. Prescriptions render from their own standalone template and are unaffected either way, but lab requisitions and lists print from these styles. */ @media print { :root, :root[data-theme="dark"] { --bg: #ffffff; --surface: #ffffff; --subtle: #ffffff; --subtle-2: #ffffff; --input-bg: #ffffff; --ink: #000000; --muted: #333333; --line: #999999; --link: #000000; --shadow: none; } .topnav, .theme-picker, .row-actions, .flash { display: none !important; } } /* ----- Wide tables on small screens ----- A staff or investigations table has more columns than a phone is wide. Let the table scroll inside its own box rather than dragging the whole page sideways, which makes the header and buttons hard to reach one-handed. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > .data-table { margin-bottom: 0; } @media (max-width: 820px) { /* Let the row's buttons stack instead of forcing the table wider. */ .actions-col { min-width: 0; } .row-actions { white-space: normal; } .row-actions .btn { margin: 0 4px 4px 0; } /* Secondary detail that is not worth horizontal scrolling on a phone. */ .hide-narrow { display: none; } } /* ----- Form controls: one baseline for every theme ----- Some inputs (the login box, the patient search) never declared a background or colour and simply inherited the browser default of black-on-white. That is invisible in light mode and glaring at night, so set it once here for every text-entry control rather than per component. */ input[type=text], input[type=password], input[type=search], input[type=email], input[type=number], input[type=date], input[type=time], input[type=tel], input[type=url], input:not([type]), select, textarea { background: var(--input-bg); color: var(--ink); border-color: var(--line); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; } /* Native widgets (date pickers, dropdown arrows, scrollbars) follow the theme. */ :root[data-theme="dark"] { color-scheme: dark; } :root { color-scheme: light; }