/*
 * Staff (IndividualApp) Bootstrap panel — app-owned overrides layered on top of
 * the vendored design CSS (bootstrap-ltr.min.css, animate.min.css, main-style-ltr.css).
 * Keep the vendored files byte-identical; put all of our adjustments here.
 *
 * The design's .main-header and .main-footer are position:fixed, but the vendored
 * CSS ships no .main-page spacing, so page content renders underneath them. Pad the
 * scroll area to clear both bars.
 */
.main-page {
    padding-top: 3.625rem; /* clear the fixed .main-header (head-bar min-height) */
    padding-bottom: 4rem; /* clear the fixed .main-footer bottom nav */
}

/*
 * Pages whose header carries an in-header tab bar (.head-tabs-bar) need extra
 * top padding: the fixed header is head-bar (3.625rem) + head-tabs-bar (2.7rem)
 * tall. StaffLayout adds .has-head-tabs to <main> when a tabs slot is present.
 */
.main-page.has-head-tabs {
    padding-top: 6.325rem;
}

/* Clinical record detail: structured staff-facing fields within the existing dashboard palette. */
.clinical-record {
    border-bottom: 0;
}

.record-detail-summary {
    margin-bottom: 1.25rem;
}

.record-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.record-detail-field {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr);
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(15, 15, 15, 0.08);
}

.record-detail-field:first-child {
    padding-top: 0;
}

.record-detail-field:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.record-detail-field dt {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0;
    color: #666;
    font-size: 0.875rem;
    font-weight: 600;
}

.record-detail-field dt i {
    color: #239ea0;
    font-size: 0.95rem;
}

.record-detail-field dd {
    min-width: 0;
    margin: 0;
    color: #0f0f0f;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.record-detail-instructions {
    margin: 0;
    color: #0f0f0f;
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

@media (max-width: 35.9375rem) {
    .record-detail-field {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/*
 * RTL (Arabic) residuals. rtlcss mirrors layout properties (margin/padding/float/
 * text-align/position) automatically, but it cannot flip directional *font-glyph*
 * icons. These two are the only directional icons in the panel — the header
 * back-arrow and the profile-row forward chevron — so mirror them under RTL.
 * (display:inline-block is required for transform to take effect on the <i>.)
 */
[dir='rtl'] .fi-rr-arrow-small-left,
[dir='rtl'] .fi-rr-angle-small-right {
    display: inline-block;
    transform: scaleX(-1);
}