:root {
    --mv-ink: #0B3A4F;
    --mv-primary: #0B4F6C;
    --mv-teal: #14A39A;
    --mv-bg: #F4F7F8;
    --mv-line: #DDE5E8;
    --mv-muted: #5B7683;
}

html, body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--mv-bg);
    color: var(--mv-ink);
}

.page { padding: 20px; max-width: 1400px; margin: 0 auto; }
.grow { flex: 1 1 auto; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.muted { color: var(--mv-muted); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row-overdue td { background: #FFF4E5; }
.row-critical td { background: #FDECEA; }
/* Radiology reports mix English and Arabic: each paragraph takes the direction of its own text. */
.report-text textarea { unicode-bidi: plaintext; text-align: start; line-height: 1.6; }
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: #EEF6F7; }

.brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; margin-inline-start: 8px; }
.brand img { width: 28px; height: 28px; border-radius: 6px; }

.menu-logout { background: none; border: none; width: 100%; text-align: start; padding: 8px 16px; cursor: pointer; font: inherit; color: inherit; }
.menu-logout:hover { background: rgba(0,0,0,.05); }

.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { font-size: 1.4rem; margin: 0; font-weight: 700; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--mv-line); border-radius: 10px; padding: 14px 16px; }
.kpi .label { font-size: .82rem; color: var(--mv-muted); }
.kpi .value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; direction: ltr; unicode-bidi: isolate; text-align: right; }
.kpi.warn .value { color: #B54708; }
.kpi.bad .value { color: #B42318; }

.cap { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); vertical-align: middle; margin-inline-end: 6px; }

.scan-box input { font-size: 1.3rem !important; letter-spacing: 1px; direction: ltr; }

table.compact td, table.compact th { padding: 6px 8px !important; }
.result-input input { direction: ltr; text-align: left; font-weight: 600; }

/* Login */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(135deg, #0B4F6C 0%, #14A39A 100%); }
.login-card { background: #fff; width: 100%; max-width: 380px; border-radius: 14px; padding: 28px; box-shadow: 0 10px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 8px; }
.login-logo { width: 220px; margin: 0 auto 6px; }
.login-card h1 { font-size: 1.2rem; margin: 6px 0 10px; text-align: center; }
.login-card label { font-size: .9rem; color: var(--mv-muted); }
.login-card input { padding: 10px 12px; border: 1px solid var(--mv-line); border-radius: 8px; font-size: 1rem; }
.login-card button { margin-top: 10px; padding: 11px; border: 0; border-radius: 8px; background: var(--mv-primary); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
.login-error { background: #FDECEA; color: #B42318; padding: 8px 10px; border-radius: 8px; font-size: .9rem; }
.login-note { font-size: .78rem; color: var(--mv-muted); text-align: center; margin: 8px 0 0; }

/* Public result page */
.public-shell { max-width: 420px; margin: 40px auto; background: #fff; border-radius: 14px; padding: 24px; border: 1px solid var(--mv-line); }

/* Printing */
.print-toolbar { padding: 10px; background: #fff; border-bottom: 1px solid var(--mv-line); display: flex; gap: 8px; }
.print-toolbar button { padding: 8px 14px; border: 0; background: var(--mv-primary); color: #fff; border-radius: 6px; cursor: pointer; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; }
.label {
    width: 50mm; height: 25mm; box-sizing: border-box; padding: 1.2mm 2mm; border: 1px dashed #bbb; background: #fff;
    font-family: Arial, sans-serif; font-size: 7.5pt; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
}
.label .l-top { display: flex; justify-content: space-between; gap: 4px; }
.label .l-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label .l-bar svg { width: 100%; height: 9mm; }
.label .l-bottom { display: flex; justify-content: space-between; direction: ltr; }
.receipt { max-width: 80mm; margin: 0 auto; padding: 6mm 4mm; background: #fff; font-size: 9.5pt; }
.receipt h2 { font-size: 11pt; text-align: center; margin: 0 0 2mm; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { padding: 1mm 0; vertical-align: top; }
.receipt .tot td { border-top: 1px solid #000; font-weight: 700; }

@media print {
    .print-toolbar { display: none; }
    body { background: #fff; }
    .labels { padding: 0; gap: 0; }
    .label { border: none; page-break-after: always; }
    @page { margin: 0; }
}

/* Patient and referring-doctor portal (static pages, phone first) */
.portal { min-height: 100vh; background: var(--mv-bg); display: flex; flex-direction: column; }
.portal-head { background: linear-gradient(135deg, #0B4F6C 0%, #14A39A 100%); padding: 12px 16px; }
.portal-head img { height: 34px; filter: brightness(0) invert(1); }
.portal-main { width: 100%; max-width: 920px; margin: 0 auto; padding: 16px; box-sizing: border-box; flex: 1; }
.portal-foot { text-align: center; font-size: .78rem; color: var(--mv-muted); padding: 12px 16px 20px; }
.portal-card { background: #fff; border: 1px solid var(--mv-line); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.portal-card.narrow { max-width: 420px; margin: 24px auto; }
.portal-card h1 { font-size: 1.2rem; margin: 0 0 6px; }
.portal-card h2 { font-size: 1.05rem; margin: 0 0 12px; color: var(--mv-ink); }
.portal .muted { color: var(--mv-muted); }
.portal .small { font-size: .82rem; }
.portal-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.portal-form.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.portal-form.grid .wide { grid-column: 1 / -1; }
.portal-form label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--mv-muted); }
.portal-form input, .portal-form select, .portal-form textarea, .portal-filter input {
    padding: 10px 12px; border: 1px solid var(--mv-line); border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--mv-ink); }
.portal-form button, .portal-filter button { padding: 11px; border: 0; border-radius: 8px; background: var(--mv-primary); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; }
.portal-form .code-input { font-size: 1.4rem; letter-spacing: 6px; text-align: center; direction: ltr; }
.portal-info { background: #E7F6F4; color: #0B4F6C; padding: 8px 10px; border-radius: 8px; font-size: .9rem; margin: 8px 0; }
.portal-training { background: #FFF4E5; color: #8A4B00; padding: 8px 10px; border-radius: 8px; font-size: .9rem; margin: 8px 0; }
.portal-note { background: #F4F7F8; padding: 6px 10px; border-radius: 8px; font-size: .88rem; color: var(--mv-muted); margin-top: 6px; }
.portal-link, .portal-switch a { color: var(--mv-primary); font-size: .9rem; }
.portal-switch { text-align: center; margin: 14px 0 0; }
.portal-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.link-button { background: none; border: 0; color: var(--mv-primary); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.portal-visit { border-top: 1px solid var(--mv-line); padding: 10px 0; }
.portal-visit:first-of-type { border-top: 0; }
.pv-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pv-items { font-size: .88rem; color: var(--mv-muted); margin: 4px 0; }
.pv-status { font-size: .78rem; padding: 2px 8px; border-radius: 10px; background: #EEF2F4; }
.pv-status.s-Completed { background: #E3F4E8; color: #1B6B35; }
.pv-status.s-InProgress { background: #FFF4E5; color: #8A4B00; }
.pv-status.s-Cancelled { background: #FDECEA; color: #B42318; }
.portal-report { display: inline-block; margin: 4px 0 0 10px; color: var(--mv-primary); font-weight: 600; text-decoration: none; }
.portal-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.portal-table th, .portal-table td { text-align: start; padding: 8px 6px; border-bottom: 1px solid var(--mv-line); vertical-align: top; }
.portal-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.portal-filter label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--mv-muted); }
@media (max-width: 640px) {
    .portal-form.grid { grid-template-columns: 1fr; }
    .portal-table thead { display: none; }
    .portal-table tr { display: block; border-bottom: 1px solid var(--mv-line); padding: 6px 0; }
    .portal-table td { display: block; border: 0; padding: 2px 0; }
}