/*
 * ePMR theme layer.
 *
 * Constitution I2: LOGICAL PROPERTIES ONLY.
 *   Use  margin-inline-start / padding-inline-end / inset-inline-start / border-inline-start
 *   NOT  margin-left / padding-right / left / right / float
 *
 * This single stylesheet serves both LTR and RTL. There is no RTL variant of our own CSS to
 * maintain and drift. A stylelint rule fails the build on physical properties.
 *
 * Colour tokens arrive in slice 004. This file currently holds only direction-critical rules.
 */

/* ---------------------------------------------------------------------------
   LTR islands
   Identifiers must never be reversed by the bidirectional algorithm inside an
   Arabic page. A GTIN rendered in reversed segments looks subtly wrong rather
   than obviously broken, which is the dangerous kind of wrong for a code a
   pharmacist compares by eye.
   --------------------------------------------------------------------------- */

.code-value {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.code-value--mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* Numeric table cells stay LTR and start-aligned even in an RTL page. */
.numeric-cell {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Directional icons
   Arrows and chevrons mirror in RTL; clock, check and warning must not.
   --------------------------------------------------------------------------- */

[dir="rtl"] .icon-directional {
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
   Font application
   Latin and Arabic get different families; the Arabic faces are self-hosted
   because hospital networks routinely block font CDNs.
   --------------------------------------------------------------------------- */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    background-color: var(--bg);
    color: var(--text);
}

:lang(ar) body,
:lang(ar) {
    font-family: var(--font-body-arabic);
}

h1, h2, h3, .epmr-display {
    font-family: var(--font-display);
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) .epmr-display {
    font-family: var(--font-display-arabic);
}

/* ---------------------------------------------------------------------------
   Script-specific typography
   Arabic needs more vertical space than Latin at the same point size, so
   bilingual blocks clip without a per-script line-height.
   Fonts are self-hosted (slice 004) - hospital networks routinely block CDNs.
   --------------------------------------------------------------------------- */

:lang(ar) {
    line-height: 1.9;
}

:lang(en) {
    line-height: 1.5;
}

/* Bilingual label block: Arabic primary, Latin beneath. */
.bilingual-name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.bilingual-name__arabic {
    font-size: 1.125em;
    font-weight: 600;
}

.bilingual-name__latin {
    font-size: 0.9em;
    opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   Missing resource marker (Development only)
   A missing key must be visible, never silently blank.
   --------------------------------------------------------------------------- */

.missing-resource {
    outline: 2px dashed currentColor;
    padding-inline: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Pseudo-localisation banner
   --------------------------------------------------------------------------- */

.pseudo-loc-banner {
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    text-align: center;
    font-size: 0.875rem;
}