/**
 * واجهة تطبيق PMR — RTL أصلي، تباين ≥ 4.5:1، لمسة ≥ 44px.
 *
 * @package PMR_Demo
 */

.pmr-app {
	--pmr-ground: #f4f6fb;
	--pmr-surface: #ffffff;
	--pmr-surface2: #eaedf6;
	--pmr-line: #d5daea;
	--pmr-line-soft: #e5e8f3;
	--pmr-ink: #131828;
	--pmr-ink2: #3a4158;
	--pmr-muted: #5f6784;
	--pmr-violet: #5c33c4;
	--pmr-blue: #1a55c0;
	--pmr-cyan: #076c80;
	--pmr-risk: #a52d22;
	--pmr-caution: #7a4f00;
	--pmr-ok: #0c6440;
	--pmr-risk-bg: #fbe9e6;
	--pmr-caution-bg: #faf1dc;
	--pmr-ok-bg: #e2f4eb;
	--pmr-grad: linear-gradient(140deg, #5c33c4, #1a55c0 55%, #076c80);
	--pmr-on-grad: #ffffff;
	--pmr-shadow: 0 1px 2px rgba(19, 24, 40, .07), 0 10px 26px -14px rgba(19, 24, 40, .22);

	direction: rtl;
	max-width: 560px;
	margin: 0 auto;
	background: var(--pmr-ground);
	color: var(--pmr-ink);
	font-size: 16px;
	line-height: 1.75;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--pmr-line);
}

@media (prefers-color-scheme: dark) {
	.pmr-app {
		--pmr-ground: #0a0d16;
		--pmr-surface: #121727;
		--pmr-surface2: #182036;
		--pmr-line: #2a3455;
		--pmr-line-soft: #1e2740;
		--pmr-ink: #eaeefb;
		--pmr-ink2: #c6cee6;
		--pmr-muted: #96a1c1;
		--pmr-violet: #b49bff;
		--pmr-blue: #7fb2ff;
		--pmr-cyan: #4fdff5;
		--pmr-risk: #f5a49c;
		--pmr-caution: #f3c976;
		--pmr-ok: #6fdfae;
		--pmr-risk-bg: #2a1517;
		--pmr-caution-bg: #2a2113;
		--pmr-ok-bg: #0e2921;
		--pmr-grad: linear-gradient(140deg, #7c4dff, #2b6fe6 55%, #12a0b8);
		--pmr-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 34px -18px rgba(0, 0, 0, .8);
	}
}

.pmr-app * { box-sizing: border-box; }
.pmr-app button { font: inherit; color: inherit; cursor: pointer; }
.pmr-app input,
.pmr-app select,
.pmr-app textarea { font: inherit; color: inherit; }
.pmr-app :focus-visible { outline: 2px solid var(--pmr-cyan); outline-offset: 2px; border-radius: 6px; }

/* --- الرأس --- */
.pmr-bar {
	position: sticky;
	top: 0;
	z-index: 5;
	background: var(--pmr-ground);
	border-bottom: 1px solid var(--pmr-line);
	padding: 12px 16px 10px;
}
.pmr-bar-row { display: flex; align-items: center; gap: 10px; }
.pmr-logo {
	width: 32px; height: 32px; border-radius: 9px; flex: none;
	background: var(--pmr-grad); color: var(--pmr-on-grad);
	display: grid; place-items: center;
	font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.pmr-name { font-weight: 700; font-size: 16px; line-height: 1.25; }
.pmr-name small { display: block; font-size: 10px; letter-spacing: .12em; color: var(--pmr-muted); font-weight: 400; }
.pmr-flag {
	margin-inline-start: auto; font-size: 10.5px; padding: 3px 9px; border-radius: 999px;
	background: var(--pmr-caution-bg); color: var(--pmr-caution); white-space: nowrap;
}
.pmr-chips { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; scrollbar-width: none; }
.pmr-chips::-webkit-scrollbar { display: none; }
.pmr-pchip {
	flex: none; border: 1px solid var(--pmr-line); background: var(--pmr-surface);
	border-radius: 999px; padding: 8px 14px; font-size: 13.5px; white-space: nowrap; min-height: 40px;
}
.pmr-pchip[aria-current="true"] { border-color: transparent; background: var(--pmr-grad); color: var(--pmr-on-grad); }

/* --- المحتوى --- */
.pmr-main { padding: 16px; min-height: 340px; }
.pmr-h { font-size: 19px; font-weight: 700; margin: 0 0 3px; }
.pmr-sub { font-size: 13.5px; color: var(--pmr-muted); margin: 0 0 16px; }

.pmr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.pmr-act {
	border: 0; border-radius: 18px; padding: 20px 12px; min-height: 96px;
	background: var(--pmr-grad); color: var(--pmr-on-grad);
	display: grid; gap: 6px; justify-items: center; text-align: center;
	box-shadow: var(--pmr-shadow); transition: transform .12s;
}
.pmr-act:active { transform: scale(.975); }
.pmr-act.alt { background: var(--pmr-surface); color: var(--pmr-ink); border: 1px solid var(--pmr-line); box-shadow: none; }
.pmr-act[disabled] { opacity: .55; cursor: not-allowed; }
.pmr-act b { font-size: 15px; font-weight: 700; }
.pmr-act span { font-size: 11.5px; opacity: .85; line-height: 1.4; }
.pmr-act svg { width: 28px; height: 28px; }

.pmr-card { background: var(--pmr-surface); border: 1px solid var(--pmr-line); border-radius: 16px; padding: 16px; margin-bottom: 12px; }
.pmr-card h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }

.pmr-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pmr-vit { border: 1px solid var(--pmr-line-soft); border-radius: 13px; padding: 12px 13px; }
.pmr-vit .n { font-size: 12px; color: var(--pmr-muted); }
.pmr-vit .v { font-size: 21px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pmr-vit .u { font-size: 11px; color: var(--pmr-muted); font-weight: 400; }
.pmr-vit .d { font-size: 11.5px; margin-top: 2px; }
.pmr-up { color: var(--pmr-risk); }
.pmr-dn { color: var(--pmr-ok); }
.pmr-fl { color: var(--pmr-muted); }

/* --- الخط الزمني --- */
.pmr-tl { display: grid; gap: 10px; }
.pmr-item {
	display: grid; grid-template-columns: 44px 1fr; gap: 12px; width: 100%; text-align: start;
	background: var(--pmr-surface); border: 1px solid var(--pmr-line); border-inline-start-width: 3px;
	border-radius: 14px; padding: 13px;
}
.pmr-t-lab { border-inline-start-color: var(--pmr-cyan); }
.pmr-t-imaging { border-inline-start-color: var(--pmr-blue); }
.pmr-t-prescription { border-inline-start-color: var(--pmr-violet); }
.pmr-t-device { border-inline-start-color: var(--pmr-ok); }
.pmr-t-report,
.pmr-t-other { border-inline-start-color: var(--pmr-muted); }
.pmr-thumb {
	width: 44px; height: 44px; border-radius: 9px; background: var(--pmr-surface2);
	display: grid; place-items: center; font-size: 18px; overflow: hidden;
}
.pmr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pmr-item .ttl { font-weight: 700; font-size: 14.5px; line-height: 1.4; }
.pmr-item .met { font-size: 11.5px; color: var(--pmr-muted); display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.pmr-item .prev { font-size: 12.5px; color: var(--pmr-ink2); margin-top: 5px; }
.pmr-empty { text-align: center; padding: 32px 18px; color: var(--pmr-muted); font-size: 14px; border: 1px dashed var(--pmr-line); border-radius: 16px; }

/* --- النماذج --- */
.pmr-field { margin-bottom: 13px; }
.pmr-field label { display: block; font-size: 13px; color: var(--pmr-muted); margin-bottom: 5px; }
.pmr-field input,
.pmr-field select,
.pmr-field textarea {
	width: 100%; background: var(--pmr-surface); border: 1px solid var(--pmr-line);
	border-radius: 11px; padding: 11px 13px; font-size: 15px; min-height: 44px;
}
.pmr-field textarea { min-height: 90px; resize: vertical; line-height: 1.7; }
.pmr-btn {
	width: 100%; border: 0; border-radius: 13px; padding: 14px; min-height: 48px;
	background: var(--pmr-grad); color: var(--pmr-on-grad); font-weight: 700; font-size: 15px;
	box-shadow: var(--pmr-shadow);
}
.pmr-btn.ghost { background: var(--pmr-surface); color: var(--pmr-ink); border: 1px solid var(--pmr-line); box-shadow: none; }
.pmr-btn.danger { background: var(--pmr-surface); color: var(--pmr-risk); border: 1px solid var(--pmr-risk); box-shadow: none; }
.pmr-btn[disabled] { opacity: .55; cursor: not-allowed; }
.pmr-btnrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pmr-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
.pmr-chip {
	border: 1px solid var(--pmr-line); background: var(--pmr-surface); border-radius: 999px;
	padding: 9px 14px; font-size: 13px; min-height: 40px;
}
.pmr-chip[aria-pressed="true"] { background: var(--pmr-grad); color: var(--pmr-on-grad); border-color: transparent; }

/* --- شاشة التأكيد --- */
.pmr-exhd,
.pmr-exrow { display: grid; grid-template-columns: 1fr 92px 66px 34px; gap: 7px; align-items: center; }
.pmr-exhd { margin-bottom: 6px; }
.pmr-exhd span { font-size: 10.5px; letter-spacing: .06em; color: var(--pmr-muted); }
.pmr-exrow { margin-bottom: 7px; }
.pmr-exrow input {
	background: var(--pmr-surface); border: 1px solid var(--pmr-line); border-radius: 9px;
	padding: 9px 10px; font-size: 13.5px; width: 100%; min-height: 42px;
}
.pmr-exrow input.v { font-variant-numeric: tabular-nums; }
.pmr-exrow .rm {
	background: none; border: 1px solid var(--pmr-line); border-radius: 9px;
	min-height: 42px; color: var(--pmr-risk); font-size: 16px; line-height: 1;
}
.pmr-preview { width: 100%; border-radius: 12px; display: block; }

/* --- التسجيل الصوتي --- */
.pmr-rec {
	display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin-bottom: 10px;
	background: var(--pmr-risk-bg); color: var(--pmr-risk); border-radius: 13px; font-size: 14px;
}
.pmr-rec-dot { width: 11px; height: 11px; border-radius: 50%; background: currentColor; flex: none; animation: pmr-pulse 1.4s ease-in-out infinite; }
.pmr-rec-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; }
@keyframes pmr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pmr-app audio { width: 100%; }
.pmr-app details summary::-webkit-details-marker { display: none; }

/* --- الحالة والتنبيهات --- */
.pmr-status { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--pmr-ink2); padding: 12px 14px; background: var(--pmr-surface2); border-radius: 12px; margin-bottom: 12px; }
.pmr-spin { width: 15px; height: 15px; border: 2px solid var(--pmr-line); border-top-color: var(--pmr-violet); border-radius: 50%; animation: pmr-sp .8s linear infinite; flex: none; }
@keyframes pmr-sp { to { transform: rotate(360deg); } }
.pmr-alert { padding: 12px 14px; border-radius: 12px; font-size: 13.5px; margin-bottom: 12px; border-inline-start: 3px solid; }
.pmr-alert.w { background: var(--pmr-caution-bg); color: var(--pmr-caution); border-color: var(--pmr-caution); }
.pmr-alert.e { background: var(--pmr-risk-bg); color: var(--pmr-risk); border-color: var(--pmr-risk); }
.pmr-alert.g { background: var(--pmr-ok-bg); color: var(--pmr-ok); border-color: var(--pmr-ok); }

/* --- التنقل --- */
.pmr-nav { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--pmr-surface); border-top: 1px solid var(--pmr-line); }
.pmr-nav button { background: none; border: 0; display: grid; justify-items: center; gap: 2px; padding: 10px 0; min-height: 56px; color: var(--pmr-muted); font-size: 10.5px; }
.pmr-nav button[aria-current="true"] { color: var(--pmr-violet); }
.pmr-nav svg { width: 21px; height: 21px; }

/* --- التقييم --- */
.pmr-stars { display: flex; gap: 6px; direction: ltr; justify-content: flex-end; }
.pmr-stars button { background: none; border: 0; font-size: 27px; line-height: 1; padding: 4px; color: var(--pmr-line); min-height: 44px; min-width: 44px; }
.pmr-stars button[data-on="1"] { color: var(--pmr-caution); }

@media (prefers-reduced-motion: reduce) {
	.pmr-app *, .pmr-app *::before, .pmr-app *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------
 * التقرير والمشاركة — 0.5.0
 * ------------------------------------------------------------------ */

.pmr-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin: 14px 0;
}

.pmr-kpi {
	background: var(--pmr-bg);
	border-radius: 12px;
	padding: 10px 8px;
	text-align: center;
}

.pmr-kpi b {
	display: block;
	font-size: 20px;
	line-height: 1.3;
}

.pmr-kpi span {
	font-size: 11.5px;
	color: var(--pmr-muted);
}

.pmr-vitals {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 10px;
}

.pmr-vital {
	border: 1px solid var(--pmr-line);
	border-radius: 12px;
	padding: 11px 12px;
}

.pmr-vital-h {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
}

.pmr-vital-h span {
	font-size: 12px;
	white-space: nowrap;
	font-weight: 600;
}

.pmr-vital-h .t-up { color: var(--pmr-caution); }
.pmr-vital-h .t-down { color: var(--pmr-ok, #0f766e); }
.pmr-vital-h .t-flat,
.pmr-vital-h .t-none { color: var(--pmr-muted); font-weight: 400; }

.pmr-vital-v {
	font-size: 24px;
	font-weight: 700;
	margin: 4px 0 2px;
	line-height: 1.2;
}

.pmr-vital-v small {
	font-size: 12px;
	font-weight: 400;
	color: var(--pmr-muted);
	margin-inline-start: 4px;
}

.pmr-vital-s {
	color: var(--pmr-accent);
	min-height: 34px;
}

.pmr-vital-s svg { display: block; width: 100%; height: 34px; }

.pmr-vital-d {
	font-size: 11.5px;
	color: var(--pmr-muted);
	margin-top: 2px;
}

.pmr-share { text-align: center; }

.pmr-share .pmr-qr {
	display: inline-block;
	background: #fff;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid var(--pmr-line);
	margin: 6px 0 10px;
}

.pmr-share .pmr-qr svg { display: block; }

.pmr-url {
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 12px;
	word-break: break-all;
	background: var(--pmr-bg);
	border-radius: 9px;
	padding: 8px 10px;
	color: var(--pmr-muted);
	margin-bottom: 10px;
}

.pmr-sharebtns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.pmr-sharebtns .pmr-btn {
	text-decoration: none;
	text-align: center;
	display: block;
}

.pmr-linkrow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--pmr-line);
}

.pmr-linkrow:last-child { border-bottom: 0; }

.pmr-linkrow .met {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11.5px;
	color: var(--pmr-muted);
}

.pmr-btn.sm { padding: 6px 12px; font-size: 13px; width: auto; }

.pmr-btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 380px) {
	.pmr-kpis { grid-template-columns: repeat(2, 1fr); }
}