/* EMR Helper — custom UI tweaks.
 * Loaded by Chainlit via .chainlit/config.toml > [UI] custom_css.
 *
 * Goal of v1: make the MoH coat-of-arms logo visibly larger in the
 * header. The original PNG is portrait-orientation; Chainlit's default
 * header constraints squeeze it into a tiny badge. We bump max-height
 * and let width follow proportionally.
 */

/* Catch the logo regardless of which specific class Chainlit's React
 * component happens to emit. Several selector patterns to be resilient
 * to Chainlit version bumps. */
img[src*="/logo"],
img[alt="logo"i],
img[alt*="logo"i],
[class*="logo" i] img,
[data-testid*="logo" i] img,
[data-testid*="logo" i] {
    max-height: 64px !important;
    height: 64px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* If Chainlit's header has a tight fixed height that clips the logo,
 * give it a touch more room. Header selectors vary by version too. */
header,
[class*="Header" i],
[role="banner"] {
    min-height: 72px !important;
    height: auto !important;
}

/* The welcome-screen logo (different element, sometimes 'cl-welcome-logo'
 * or rendered inside a hero block). Slightly larger there since there's room. */
[class*="welcome" i] img[src*="/logo"],
[class*="hero" i]    img[src*="/logo"] {
    max-height: 120px !important;
    height: 120px !important;
}

/* -------------------------------------------------------------------------
 * Cross-reference "📄 Open: …" action buttons.
 * By default Chainlit renders message actions as low-contrast grey-on-white
 * text, which a busy health worker can miss. Style them as a clear green
 * call-to-action pill. Defensive selectors (class / data-testid / id) so it
 * survives Chainlit version bumps — if your build uses a different class,
 * inspect the button and add its selector here.
 * ------------------------------------------------------------------------- */
/* public/script.js tags every "📄 Open: …" cross-reference button with the
 * class .emr-cta — we style that here. This is reliable because the class is
 * ours, not Chainlit's version-dependent internal one. */
.emr-cta {
    background-color: #28a745 !important;    /* light green default */
    color: #ffffff !important;
    border: none !important;
    border-radius: 9999px !important;         /* pill shape */
    padding: 6px 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(21, 115, 71, 0.30) !important;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}

/* The label/icon are child spans — force them white too. */
.emr-cta * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Darker green on hover, slight press feedback. */
.emr-cta:hover {
    background-color: #0f5132 !important;     /* dark green */
    box-shadow: 0 3px 10px rgba(21, 115, 71, 0.45) !important;
}
.emr-cta:active {
    transform: translateY(1px) !important;
}

/* -------------------------------------------------------------------------
 * Caution and Note boxes in answers.
 * Answers render each Caution / Note as a Markdown blockquote; public/script.js
 * tags them .emr-caution / .emr-note. Colours follow the cleaned Word manuals:
 * red for a Caution, amber for a Note. Translucent backgrounds so the boxes
 * read in both the light and the dark theme. Chainlit renders bold text as
 * span.font-bold rather than <strong>, so both are styled.
 * ------------------------------------------------------------------------- */
blockquote.emr-callout {
    border-left: 4px solid !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin: 10px 0 !important;
    font-style: normal !important;
    color: inherit !important;
}
blockquote.emr-callout p,
blockquote.emr-callout > div {
    margin: 0 !important;
}
blockquote.emr-note {
    border-left-color: #B8860B !important;
    background-color: rgba(184, 134, 11, 0.12) !important;
}
blockquote.emr-note strong,
blockquote.emr-note .font-bold {
    color: #8A6508 !important;
}
blockquote.emr-caution {
    border-left-color: #C00000 !important;
    background-color: rgba(192, 0, 0, 0.09) !important;
}
blockquote.emr-caution strong,
blockquote.emr-caution .font-bold {
    color: #B00000 !important;
}
/* Dark theme: lighter label colours for contrast. */
.dark blockquote.emr-note strong,
.dark blockquote.emr-note .font-bold {
    color: #E6B84A !important;
}
.dark blockquote.emr-caution strong,
.dark blockquote.emr-caution .font-bold {
    color: #FF6B6B !important;
}

/* Login page: the page itself explains a failed login, so hide Chainlit's
   technical pop-up ("Unauthorized: credentialssignin"). */
body:has(input[type="password"]) [data-sonner-toast] {
    display: none !important;
}