/* ============================================================================
* Chattrly EHR — Editorial theme
* ----------------------------------------------------------------------------
* Ports the Chattrly web-app "editorial" design system (apps/web billing page /
* components/editorial/theme.ts) onto the Bahmni-based EHR. UI-ONLY: no markup
* or behaviour change — a stylesheet injected on every /bahmni/ + /openmrs/ page
* (nginx-ehr.dev.conf) that restyles Bahmni's served chrome to the editorial look.
*
* Palette (source of truth: apps/web/src/components/editorial/theme.ts `ed`):
* canvas #FAFAF7 · card #FFFFFF · hairline #E8E3D6 · ink #15181B / #3A4148
* muted #6E7681 · faint #A8AEB6 · green #00C853 (accent) / #00A843 (deep) /
* #00DF82 (logo mark) · greenSoft rgba(0,200,83,.12). Font: Inter.
*
* The deep-forest green (#0E7A4E) used by the earlier rebrand is intentionally
* dropped for chrome — the editorial system uses green as an ACCENT on light
* surfaces, never as a header fill (see the theme file's brand note).
*
* !important is used deliberately + broadly: this sheet must win over Bahmni's
* own served CSS without editing the vendor bundles.
* ==========================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
--ed-bg:#FAFAF7; --ed-bg2:#F2EEE3; --ed-card:#FFFFFF;
--ed-hair:#E8E3D6; --ed-hairsoft:#F0EDE3;
--ed-ink:#15181B; --ed-ink2:#3A4148; --ed-muted:#6E7681; --ed-faint:#A8AEB6;
--ed-green:#00C853; --ed-green-deep:#00A843; --ed-green-logo:#00DF82;
--ed-green-soft:rgba(0,200,83,.12);
--ed-shadow:0 2px 6px rgba(0,0,0,.05); --ed-shadow-lift:0 12px 26px rgba(0,200,83,.14);
--ed-r:12px; --ed-rcard:18px;
--ed-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* ── global type + canvas ─────────────────────────────────────────────── */
html,body,button,input,select,textarea,.reg-wrapper,.dashboard,.patient-search-page,
.clinical-app,#content,.body-wrap,.content-wrap{
font-family:var(--ed-sans) !important;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body,.reg-wrapper,.dashboard,#content,.body-wrap,.content-wrap,.patient-search-page{
background:var(--ed-bg) !important; color:var(--ed-ink) !important;
}
a{color:var(--ed-green-deep);}
a:hover{color:var(--ed-green);}
::selection{background:var(--ed-green-soft);}
/* ── HOME: header → light editorial chrome (was the teal/green bar) ────── */
.dashboard .reg-header{
background:var(--ed-card) !important;
border-bottom:1px solid var(--ed-hair) !important;
box-shadow:none !important; height:60px !important; min-height:60px !important;
display:flex !important; align-items:center !important;
padding:0 28px !important; position:relative !important; z-index:1000 !important;
overflow:visible !important;
}
.dashboard .reg-header-left{display:flex !important;align-items:center !important;gap:11px;float:none !important;}
.dashboard .reg-header-left .chattrly-logo{height:24px;width:auto;display:block;}
.dashboard .reg-header-left .chattrly-ehrtag{
font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
color:var(--ed-muted);padding-left:11px;border-left:1px solid var(--ed-hair);
}
.dashboard .reg-header-right{
float:none !important;margin-left:auto !important;
display:flex !important;align-items:center !important;gap:12px;
}
/* location dropdown → editorial pill */
.dashboard .reg-header .change-location{float:none !important;margin:0 !important;}
.dashboard .reg-header .change-location select{
-webkit-appearance:none;appearance:none;
height:36px !important;padding:0 34px 0 14px !important;
border:1px solid var(--ed-hair) !important;border-radius:999px !important;
background:var(--ed-card) url("data:image/svg+xml;utf8,") no-repeat right 12px center !important;
color:var(--ed-ink2) !important;font-size:13.5px !important;font-weight:600 !important;
box-shadow:none !important;cursor:pointer;min-width:150px;
}
.dashboard .reg-header .change-location select:hover{border-color:var(--ed-green) !important;}
/* user button → editorial */
.dashboard .reg-header .btn-user-info{
position:static !important;height:36px !important;width:auto !important;padding:0 12px !important;
border:1px solid var(--ed-hair) !important;border-radius:999px !important;
background:var(--ed-card) !important;color:var(--ed-ink2) !important;
display:inline-flex !important;align-items:center;gap:6px;box-shadow:none !important;}
.dashboard .reg-header .btn-user-info:hover{border-color:var(--ed-green) !important;}
.dashboard .reg-header .btn-user-info i{color:var(--ed-green-deep) !important;}
/* header dropdown menu (username / location / logout) */
.dashboard .reg-header-right>ul{
background:var(--ed-card) !important;border:1px solid var(--ed-hair) !important;
border-radius:14px !important;box-shadow:0 12px 24px rgba(21,24,27,.12) !important;
padding:6px !important;z-index:2000 !important;top:56px !important;right:24px !important;
min-width:210px !important;overflow:hidden !important;
}
.dashboard .reg-header-right>ul li{display:block !important;border:none !important;}
.dashboard .reg-header-right>ul li a{display:flex !important;align-items:center;gap:9px;
min-width:0 !important;padding:9px 12px !important;white-space:nowrap;border:none !important;
border-radius:9px !important;font-size:13.5px !important;font-weight:600 !important;}
.dashboard .reg-header-right>ul li a.disabled{opacity:1 !important;color:var(--ed-ink) !important;font-weight:700 !important;}
.dashboard .reg-header-right>ul li a{color:var(--ed-ink2) !important;border-radius:9px !important;}
.dashboard .reg-header-right>ul li a:hover{background:var(--ed-green-soft) !important;color:var(--ed-green-deep) !important;}
.dashboard .reg-header-right>ul li a i{color:var(--ed-green-deep) !important;}
/* ── HOME: masthead (injected in chattrly-dashboard.html) ─────────────── */
.chattrly-masthead{max-width:960px;margin:0 auto;padding:48px 28px 8px;}
.chattrly-masthead .eyebrow{
font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--ed-muted);
}
.chattrly-masthead h1{
margin:12px 0 0 !important;font-size:40px;line-height:1.03;font-weight:800;
letter-spacing:-1.4px;color:var(--ed-ink);text-wrap:balance;
}
.chattrly-masthead h1 .pd{color:var(--ed-green);}
.chattrly-masthead p{margin:14px 0 0;max-width:560px;font-size:15.5px;line-height:23px;color:var(--ed-muted);}
/* ── HOME: app tiles → editorial cards ────────────────────────────────── */
.dashboard .apps{background:transparent !important;width:auto !important;max-width:none !important;
margin:0 !important;padding:0 !important;text-align:left !important;}
.dashboard .apps ul{
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:16px !important;max-width:980px !important;width:auto !important;margin:14px auto 48px !important;
padding:0 28px !important;list-style:none !important;box-sizing:border-box !important;
}
@media (max-width:860px){.dashboard .apps ul{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media (max-width:560px){.dashboard .apps ul{grid-template-columns:1fr !important;}}
.dashboard .apps li{margin:0 !important;padding:0 !important;list-style:none !important;
float:none !important;width:auto !important;display:block !important;vertical-align:top !important;}
.dashboard .apps a.button.app.big{
display:flex !important;flex-direction:column !important;align-items:flex-start !important;
justify-content:flex-start !important;text-align:left !important;
width:100% !important;height:auto !important;min-height:150px !important;margin:0 !important;
box-sizing:border-box !important;background:var(--ed-card) !important;
border:1px solid var(--ed-hair) !important;border-radius:var(--ed-rcard) !important;
box-shadow:var(--ed-shadow) !important;color:var(--ed-ink) !important;text-decoration:none !important;
font-family:var(--ed-sans) !important;font-weight:600 !important;font-size:15.5px !important;
letter-spacing:-.2px !important;padding:18px 18px 16px !important;text-transform:none !important;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease !important;
}
.dashboard .apps a.button.app.big:hover{
transform:translateY(-3px) !important;border-color:var(--ed-green) !important;
box-shadow:var(--ed-shadow-lift) !important;color:var(--ed-ink) !important;
}
/* the one-line description injected under each tile title (mockup parity) */
.dashboard .apps a.button.app.big .chattrly-tile-desc{
margin:5px 0 0 !important;font-size:12.5px !important;line-height:17px !important;
font-weight:400 !important;color:var(--ed-muted) !important;letter-spacing:0 !important;
}
/* icon → editorial green-soft rounded square with a small centred line-icon.
Use background-* LONGHAND (never the `background` shorthand — it resets
background-image to none, which blanked the icons); per-icon selectors carry
the SAME specificity as this container rule so their image isn't overridden. */
.dashboard .apps a.button.app.big i{
display:flex !important;align-items:center;justify-content:center;
flex:0 0 auto !important;box-sizing:border-box !important;
width:46px !important;height:46px !important;min-height:46px !important;max-height:46px !important;
border-radius:13px !important;padding:0 !important;
background-color:var(--ed-green-soft) !important;background-repeat:no-repeat !important;
background-position:center !important;background-size:24px 24px !important;
margin:0 0 14px 0 !important;font-size:0 !important;line-height:0 !important;
}
.dashboard .apps a.button.app.big i.chattrly-ic-registration{background-image:url(/bahmni/chattrly-icons/registration.svg) !important;}
.dashboard .apps a.button.app.big i.chattrly-ic-clinical{background-image:url(/bahmni/chattrly-icons/clinical.svg) !important;}
.dashboard .apps a.button.app.big i.chattrly-ic-reports{background-image:url(/bahmni/chattrly-icons/reports.svg) !important;}
.dashboard .apps a.button.app.big i.chattrly-ic-admin{background-image:url(/bahmni/chattrly-icons/admin.svg) !important;}
.dashboard .apps a.button.app.big i.chattrly-ic-documents{background-image:url(/bahmni/chattrly-icons/documents.svg) !important;}
.dashboard .apps a.button.app.big i.chattrly-ic-appointments{background-image:url(/bahmni/chattrly-icons/appointments.svg) !important;}
.dashboard .apps a.button.app.big i.chattrly-ic-billing{background-image:url(/bahmni/chattrly-icons/billing.svg) !important;}
/* Bahmni SUB-dashboards (e.g. Admin) reuse this same `.apps` tile grid but keep their
STOCK Font Awesome glyphs (fa-eye Audit Log, fa-upload Order Set, …). The chip frame
above reaches them, but the home custom icons don't — so they rendered as heavy black
glyphs. Give the known ones editorial line SVGs (matching the home tiles), and recolor
ANY other fa- tile glyph to the editorial green so no sub-page ever shows a black icon
(scalable — the fallback needs no per-icon list). `color:transparent` reliably hides the
replaced glyph — Font Awesome puts its own font-size on `.fa`, which fights the chip
rule's font-size:0, so the glyph would otherwise still show. */
.dashboard .apps a.button.app.big i.fa{color:var(--ed-green-deep) !important;}
.dashboard .apps a.button.app.big i.fa-eye,
.dashboard .apps a.button.app.big i.fa-upload{color:transparent !important;text-shadow:none !important;}
.dashboard .apps a.button.app.big i.fa-eye{background-image:url(/bahmni/chattrly-icons/audit-log.svg) !important;}
.dashboard .apps a.button.app.big i.fa-upload{background-image:url(/bahmni/chattrly-icons/order-set.svg) !important;}
/* ── Chattrly loading spinner ──────────────────────────────────────────────
Every Bahmni AngularJS app (home / clinical / registration / appointments)
renders its full-screen loader as `#overlay { background: rgba(0,0,0,.6)
url(../images/spinner.gif) center }` — a Bahmni-TEAL segmented ring baked into
a binary GIF (so the sub_filter recolour never touched it). This editorial
sheet loads AFTER the app CSS on both /bahmni/ and /appointments/, so a
longhand background-image override swaps ONLY the spinner (the rgba scrim from
the shorthand persists) for the Chattrly loader — a brand-green rotating arc,
inline animated SVG (no binary asset, crisp at any DPR). */
#overlay{
background-image:url('data:image/svg+xml;utf8,') !important;
background-repeat:no-repeat !important;
background-position:center center !important;
}
/* ── Appointments: hide the "Awaiting Appointments" (wait-list) tab ─────────
The appointments BACKEND module deployed here (appointments-1.7.0) predates
the wait-list feature — its AppointmentStatus enum has no `WaitList` value.
The newer appointments FE exposes an "Awaiting Appointments" tab whose route
(home.manage.awaitingappointments) queries statusList:["WaitList"], so the
module throws `No enum constant …AppointmentStatus.WaitList`, surfaced to the
clinician as a misleading "Connection timed out". Until/unless the module is
upgraded, hide the tab so the UI only exposes what this backend supports.
SAFETY: this sheet is injected into /bahmni/clinical too, so we hide ONLY the
anchor itself — NEVER a `:has()` ancestor (a bare `:has(> a…)` could match and
collapse a page-level container elsewhere). Hiding an can never blank a
page; the appointments tab's link becomes non-clickable → no WaitList query.
The appointments tab item may keep an empty slot; that's cosmetic and safe. */
a[href*="awaiting-appointments"]{display:none !important;}
/* ── GLOBAL editorial components (clinical / registration / reports / admin) ─ */
/* primary buttons */
button,.btn,input[type="button"],input[type="submit"],.button:not(.app){
font-family:var(--ed-sans) !important;border-radius:10px !important;
}
.btn.btn-primary,.button.confirm,button.confirm,.fr.btn-success,input[type="submit"]{
background:var(--ed-green) !important;border:1px solid var(--ed-green) !important;
color:#fff !important;font-weight:600 !important;box-shadow:none !important;
}
.btn.btn-primary:hover,.button.confirm:hover,button.confirm:hover,input[type="submit"]:hover{
background:var(--ed-green-deep) !important;border-color:var(--ed-green-deep) !important;
}
/* fields */
input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select,textarea{
font-family:var(--ed-sans) !important;border:1px solid var(--ed-hair) !important;
border-radius:10px !important;background:var(--ed-card) !important;color:var(--ed-ink) !important;
}
input:focus,select:focus,textarea:focus{
border-color:var(--ed-green) !important;box-shadow:0 0 0 3px var(--ed-green-soft) !important;outline:none !important;
}
/* cards / panels commonly used in Bahmni */
.dashboard-section,.widget,.panel,.tab-content,.info-view,.patient-search-page .patients-list li{
background:var(--ed-card) !important;border:1px solid var(--ed-hair) !important;
border-radius:var(--ed-rcard) !important;box-shadow:var(--ed-shadow) !important;
}
/* tables */
table th,thead td,.table-header{
background:var(--ed-bg2) !important;color:var(--ed-muted) !important;
font-size:11px !important;font-weight:700 !important;letter-spacing:.5px !important;
text-transform:uppercase !important;border-color:var(--ed-hair) !important;
}
table td{border-color:var(--ed-hairsoft) !important;color:var(--ed-ink2) !important;}
/* tabs / nav strips */
.nav-tabs>li>a,.tabs>li>a{color:var(--ed-muted) !important;border:none !important;font-weight:600 !important;}
.nav-tabs>li.active>a,.tabs>li.active>a{color:var(--ed-green-deep) !important;border-bottom:2px solid var(--ed-green) !important;background:transparent !important;}
/* headings */
h1,h2,h3,h4,.section-title,.dashboard-section-title{color:var(--ed-ink) !important;font-family:var(--ed-sans) !important;letter-spacing:-.3px;}
/* generic teal/lime accents Bahmni bakes in → editorial green */
.fa.fa-white,.header-wrap .fa{color:inherit;}
/* ============================================================================
* Clinical patient dashboard (the deep-link view) — the stock teal fills were
* recoloured to green by the sub_filter, which put GREEN on the whole nav bar +
* every section header ("too much green"). Neutralise those LARGE fills to light
* editorial surfaces; green stays only on CTAs + small accents (billing/IAM look).
* ==========================================================================*/
/* clinical top nav bar → light chrome */
.header-wrapper,.clinical-header .header-wrapper,#clinical .header-wrapper{
background:var(--ed-card) !important;border-bottom:1px solid var(--ed-hair) !important;box-shadow:none !important;
}
.header-wrapper a,.header-wrapper span,.header-wrapper .patient-name,.clinical-header .patient-name{color:var(--ed-ink2) !important;}
.header-wrapper i,.clinical-header i{color:var(--ed-green-deep) !important;}
/* top-left square nav buttons + tab strip → light (ghost), green underline on active */
.clinical-header a.mobile-menu-icon,.clinical-header .header-tabs,
.tabs ul li.tab-item a,.tabs ul li.tab-item button{
background:transparent !important;color:var(--ed-muted) !important;border-color:var(--ed-hair) !important;box-shadow:none !important;
}
.tabs ul li.tab-item a:hover{background:var(--ed-green-soft) !important;color:var(--ed-green-deep) !important;}
.tabs ul li.tab-item.active a,.tabs ul li.tab-item a.active{
background:transparent !important;color:var(--ed-green-deep) !important;border-bottom:2px solid var(--ed-green) !important;
}
/* dashboard section widget → white card */
.dashboard-section,.dashboardSection,.dashboard-section-box{
background:var(--ed-card) !important;border:1px solid var(--ed-hair) !important;
border-radius:var(--ed-rcard) !important;box-shadow:var(--ed-shadow) !important;overflow:hidden !important;
margin-bottom:16px !important;
}
/* section header: white bg + INK title + hairline (was a solid green bar) */
.section-title-wrapper{
background:var(--ed-card) !important;border-bottom:1px solid var(--ed-hairsoft) !important;
}
h2.section-title,h2.section-title.has-link,h2.section-title.has-link:hover,.section-title{
background:transparent !important;color:var(--ed-ink) !important;
font-weight:700 !important;letter-spacing:-.2px !important;text-decoration:none !important;
}
h2.section-title a,.section-title a,.section-title-wrapper a{color:var(--ed-ink) !important;text-decoration:none !important;}
/* the "open in new / expand" affordance in a section header → green accent */
.section-title .fa,.section-title-wrapper .fa,h2.section-title i,.section-title a.has-link i,
.section-title-wrapper .expand-icon,.dashboard-section .fa-external-link{color:var(--ed-green-deep) !important;}
.template-header{background:var(--ed-bg2) !important;color:var(--ed-ink) !important;}
/* selected/hover tints → soft green wash instead of a solid green fill */
table tr.selected{background:var(--ed-green-soft) !important;color:var(--ed-ink) !important;}
ul.select li:hover,ul.select li.selected{background-color:var(--ed-green-soft) !important;color:var(--ed-ink) !important;}
/* flatten the lime→green gradient CTAs to a single editorial green */
.button.confirm,.button.confirm:hover,.button.confirm.active,a.back-btn,button.back-btn,button.btn--add,
.template-control .template-control-panel-button button{
background:var(--ed-green) !important;background-image:none !important;border-color:var(--ed-green) !important;color:#fff !important;
}
.button.confirm:hover,button.back-btn:hover{background:var(--ed-green-deep) !important;}
/* ============================================================================
* Broad safety net — neutralise the common Bahmni structural GREEN fills across
* every classic app (registration, reports, admin, search) so no page keeps a
* harsh green band. Green survives only on accents/CTAs. Unknown app-specific
* fills are tuned per feedback; these cover the shared chrome classes.
* ==========================================================================*/
.patient-search-page .header,.patient-search-page .search-header,.registration-page .header,
.control-panel,.controlPanel,.reports-page .header,.report-header,.top-header,.page-header,
.panel-heading,.widget-header,.box-header,.toolbar-wrapper,.action-header{
background:var(--ed-card) !important;color:var(--ed-ink) !important;
border-bottom:1px solid var(--ed-hair) !important;box-shadow:none !important;
}
.patient-search-page .header *,.control-panel *,.page-header *{color:var(--ed-ink2) !important;}
.patient-search-page .header a,.control-panel a,.page-header a,.panel-heading a{color:var(--ed-green-deep) !important;}
/* generic pill/badge on a green fill → soft green wash + green ink */
.label,.badge,.pill,.tag{background:var(--ed-green-soft) !important;color:var(--ed-green-deep) !important;}
/* primary action buttons across apps → flat editorial green */
.btn-success,.btn.btn-primary,.primary-btn,button.primary,.save-button{
background:var(--ed-green) !important;background-image:none !important;
border-color:var(--ed-green) !important;color:#fff !important;
}
.btn-success:hover,.btn.btn-primary:hover,.primary-btn:hover{background:var(--ed-green-deep) !important;border-color:var(--ed-green-deep) !important;}
/* ============================================================================
* GLOBAL user-menu dropdown + button — editorial on EVERY page (home, registration,
* clinical, opd…). Bahmni styles these as a dark-teal box scoped per app-wrapper
* (.reg-header-wrapper / .opd-header-wrapper / .dashboard). !important beats those
* higher-specificity rules, so one un-scoped set themes them all consistently.
* ==========================================================================*/
.btn-user-info{
background:var(--ed-card) !important;border:1px solid var(--ed-hair) !important;
border-radius:999px !important;color:var(--ed-ink2) !important;box-shadow:none !important;
height:auto !important;width:auto !important;padding:7px 11px !important;margin:0 !important;
}
.btn-user-info i,.btn-user-info .fa{color:var(--ed-green-deep) !important;}
/* the dropdown panel */
.btn-user-info+ul.active{
background:var(--ed-card) !important;border:1px solid var(--ed-hair) !important;
border-radius:14px !important;box-shadow:0 12px 24px rgba(21,24,27,.12) !important;
padding:6px !important;z-index:5000 !important;overflow:hidden !important;min-width:214px !important;
}
.btn-user-info+ul li{
float:none !important;clear:none !important;border:none !important;background:transparent !important;
border-bottom:none !important;
}
.btn-user-info+ul li a,.btn-user-info+ul li a.disabled{
color:var(--ed-ink) !important;background:transparent !important;border:none !important;
border-radius:9px !important;padding:9px 12px !important;min-width:0 !important;
display:flex !important;align-items:center;gap:9px;font-weight:600 !important;font-size:13.5px !important;
text-decoration:none !important;white-space:nowrap;
}
.btn-user-info+ul li a:hover{background:var(--ed-green-soft) !important;color:var(--ed-green-deep) !important;text-decoration:none !important;}
.btn-user-info+ul li a i,.btn-user-info+ul li a .fa{color:var(--ed-green-deep) !important;}
/* headers that host the dropdown must not clip it */
.reg-header,.reg-header-wrapper .reg-header,.opd-header-wrapper header,.header-wrapper,
.patient-search-page .header{overflow:visible !important;}
/* ============================================================================
* Appointments SPA (React; styles injected from its JS bundle at runtime). Its
* top bar is `.header-wrapper { background:#00DF82 }` (+ .opd-header-wrapper).
* Stable classes → override to light editorial. Broad selectors + background-color
* so a runtime-injected