/* ============================================================
 * voice-ios.css — Apple Settings / Health-stijl
 * Witte cards op grijze achtergrond, geen shadow, dunne separators,
 * uppercase section-labels boven cards.
 * Scope via .ios-page wrapper.
 * ============================================================ */


/* GEEN hover/focus/active/visited-effect of underline op links/knoppen (overal).
   color:inherit ZONDER !important: wint van Bootstrap/w3-default, verliest netjes
   van class-/inline-link-kleuren. */
a:hover, a:focus, a:active, a:visited { color: inherit; text-decoration: none !important; outline: 0; }
a, button, .btn { -webkit-tap-highlight-color: transparent; }
button:hover, button:focus, button:active,
.btn:hover, .btn:focus, .btn:active,
a:focus-visible, button:focus-visible { outline: 0 !important; box-shadow: none !important; }
.ios-page {
	--ios-primary: var(--tenant-primary, #00af66);
	--ios-bg:        #f2f2f7;
	--ios-card-bg:   #ffffff;
	--ios-text:      #1c1c1e;
	--ios-text-2:    #3c3c43;
	--ios-text-3:    #8e8e93;
	--ios-sep:       rgba(60, 60, 67, 0.12);
	--ios-success:   #34c759;
	--ios-warn:      #ff9500;
	--ios-danger:    #ff3b30;
	--ios-info:      #007aff;

	--ios-r-card: 14px;
	--ios-r-pill: 999px;

	--ios-pad-card-h: 18px;
	--ios-pad-card-v: 16px;

	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	color: var(--ios-text);
	background: var(--ios-bg);
	line-height: 1.4;
	font-size: 16px;
	min-height: 100vh;
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 60px);
}

html, body { background: #f2f2f7 !important; margin: 0; }
.ios-page * { box-sizing: border-box; }

/* ============================================================
 * Back-knop: 44×44px tap-target (Apple HIG) + grotere arrow.
 * Overschrijft de inline back-stijl in elke voice-page.
 * ============================================================ */
.ios-top-bar__back {
	width: 40px !important; height: 40px !important;
	min-width: 40px !important; min-height: 40px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.ios-top-bar__back-arrow {
	width: 9px !important;
	height: 9px !important;
	border-left-width: 2.2px !important;
	border-bottom-width: 2.2px !important;
}

/* ============================================================
 * Fixed bars die env(safe-area-inset-*) gebruiken — geldt voor
 * chat-input-bar in /voice/chat.php en /voice/chat-coach.php
 * en .ios-bottom-bar in /voice/recorder/.
 * Vereist viewport-fit=cover in header (zit nu in header-generic).
 *
 * Pattern: visuele "core" hoogte + safe-area-inset onder.
 * Op iPhone met home-indicator wordt de bar dus langer — exact
 * zoals iOS's eigen tab-bars.
 * ============================================================ */
.chat-input-bar {
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
}
.ios-bottom-bar {
	height: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
	padding-bottom: env(safe-area-inset-bottom, 0px) !important;
	box-sizing: border-box !important;
}

/* Record-knop op /voice/recorder/ — zit normaal bottom:0 met inline CSS,
 * shift omhoog met safe-area-inset zodat 'em boven home-indicator komt. */
#AudioRecording {
	bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ============================================================
 * App-frame: op brede viewports content centreren binnen vaste
 * mobile-app-breedte zodat de Voice-app er als een phone-frame
 * uitziet (zoals app.healfie.nl). Mobile blijft natural.
 * ============================================================ */
:root { --app-max-width: 520px; }
@media (min-width: 521px) {
	html, body { background: #f2f2f7 !important; min-height: 100vh; height: 100%; }
	.ios-container { max-width: var(--app-max-width) !important; padding-left: 16px !important; padding-right: 16px !important; }
	.ios-page {
		max-width: var(--app-max-width); margin: 0 auto;
		background: var(--ios-bg) !important;
		min-height: 100vh !important; height: auto;
		/* Subtiele schaduw maakt app-frame visueel los van page-bg zonder
		 * andere kleur achter de scroll-content (geen tint-overgang). */
		box-shadow: 0 0 0 1px rgba(60,60,67,0.08), 0 8px 24px rgba(0,0,0,0.04);
	}

	/* Fixed bars + modal-sheet binnen app-frame centred via calc — geen
	 * transformX zodat slide-up-animation alleen op Y-as werkt. */
	#AudioHeader,
	.ios-top-bar,
	.ios-bottom-bar,
	#AudioRecording,
	.ios-sheet {
		width: var(--app-max-width) !important;
		max-width: var(--app-max-width) !important;
		left: calc(50% - var(--app-max-width) / 2) !important;
		right: auto !important;
		transform: none !important;
	}

	/* Bootstrap-grid binnen AudioHeader/AudioRecording-inner moet volle
	 * app-frame breedte pakken (niet 41% via .col-lg-5). */
	#AudioHeader .row, #AudioRecording .row { width: 100% !important; margin: 0 !important; }
	#AudioHeaderInner, #AudioRecordingInner {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
	}
	/* #AudioHeader en #AudioRecording HEBBEN de bootstrap .container-class
	 * zelf — compound-selector zonder spatie, anders matched het alleen
	 * descendants en blijft 15px Bootstrap zij-padding staan (waardoor
	 * hairline-bottom ~15px korter is dan de app-frame-rand). */
	#AudioHeader.container, #AudioHeader .container,
	#AudioRecording.container, #AudioRecording .container {
		padding: 0 !important;
		max-width: 100% !important;
	}

	/* Backdrop blijft full-viewport zodat ook de wallpaper-zijkanten gedimd worden */
	.ios-sheet-backdrop { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; }

	/* Modal-slide alleen op Y-as */
	.ios-sheet { transform: translateY(100%) !important; }
	.ios-sheet.is-open { transform: translateY(0) !important; }
}

/* ---------- Layout ---------- */
.ios-container {
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 16px 60px;
}
/* Kaart op 16px van de schermrand, altijd. header-generic zet de pagina in
   #MainData.container-fluid (Bootstrap, 15px per kant) en dat kwam bovenop de
   container: 29px. De wrapper telt daarom niet mee zodra er een ios-container
   in staat. Geen eigen padding of wrapper om een ios-container heen zetten. */
#MainData:has(.ios-container) { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Typografie ---------- */
.ios-page h1, .ios-page .ios-large-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.2; color: var(--ios-text); }
.ios-page h2, .ios-page .ios-title       { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.25; color: var(--ios-text); }
.ios-page h3, .ios-page .ios-headline    { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--ios-text); }
.ios-page .ios-subhead   { font-size: 14px; color: var(--ios-text-2); }
.ios-page .ios-footnote  { font-size: 13px; color: var(--ios-text-3); }
.ios-page p { margin: 0 0 10px; }

/* ---------- Section label (uppercase boven card, à la iOS Settings) ---------- */
.ios-section-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ios-text-3);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 22px 16px 6px;
	line-height: 1.3;
}
.ios-flow > .ios-section-label:first-child { margin-top: 6px; }

/* Section-label met "Alle ›"-action rechts uitgelijnd */
.ios-section-label--action { display: flex !important; justify-content: space-between; align-items: baseline; }
.ios-section-label__action,
.ios-section-label__action:hover,
.ios-section-label__action:focus,
.ios-section-label__action:active,
.ios-section-label__action:visited {
	margin-left: auto;
	text-transform: none; letter-spacing: 0;
	color: var(--tenant-primary, #00af66);
	font-size: 14px; font-weight: 500;
	text-decoration: none !important;
	outline: 0;
}

/* ---------- Generic card (geen shadow, alleen witte vlek) ---------- */
.ios-card {
	background: var(--ios-card-bg);
	border-radius: var(--ios-r-card);
	padding: var(--ios-pad-card-v) var(--ios-pad-card-h);
	margin-bottom: 12px;
}
.ios-card-tight { padding: 12px var(--ios-pad-card-h); }

/* Strip any legacy shadow */
.ios-page .ios-card,
.ios-page .ios-legenda,
.ios-page .ios-collapsible,
.ios-page .ios-score { box-shadow: none; }

/* ---------- Score (Coherence) — sober witte card ---------- */
.ios-score {
	display: flex; gap: 18px; align-items: center;
	padding: 18px var(--ios-pad-card-h);
	border-radius: var(--ios-r-card);
	background: var(--ios-card-bg);
	margin-bottom: 12px;
}
.ios-score__num {
	font-size: 56px; font-weight: 700; letter-spacing: -0.03em;
	line-height: 1; min-width: 80px; text-align: center;
	font-variant-numeric: tabular-nums;
}
.ios-score--good   .ios-score__num { color: #1f8a3d; }
.ios-score--warn   .ios-score__num { color: #c2780a; }
.ios-score--danger .ios-score__num { color: #c0241c; }

.ios-score__label  { font-weight: 600; font-size: 15px; margin: 0 0 3px; color: var(--ios-text); }
.ios-score__sub    { font-size: 13px; color: var(--ios-text-3); margin: 0; line-height: 1.4; }
a.ios-score { transition: background 0.15s; }
a.ios-score:hover { background: rgba(60,60,67,0.04); }
.ios-score__chevron {
	flex-shrink: 0;
	width: 8px; height: 8px;
	border-right: 2px solid var(--ios-text-3);
	border-top:   2px solid var(--ios-text-3);
	transform: rotate(45deg);
}

.ios-score-duiding {
	background: var(--ios-card-bg);
	padding: var(--ios-pad-card-v) var(--ios-pad-card-h);
	border-radius: var(--ios-r-card);
	font-size: 15px; line-height: 1.5;
	color: var(--ios-text-2);
	margin: 0 0 12px;
}

/* ---------- Legenda — kleine info-card ---------- */
.ios-legenda {
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	background: var(--ios-card-bg);
	border-radius: var(--ios-r-card);
	padding: 12px var(--ios-pad-card-h);
	margin-bottom: 12px;
	font-size: 13px; color: var(--ios-text-2);
}
.ios-legenda__title { font-weight: 600; color: var(--ios-text); margin-right: 4px; }
.ios-legenda__item  { display: inline-flex; align-items: center; gap: 5px; }
.ios-legenda__dot   { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

/* ---------- Pills ---------- */
.ios-pill {
	display: inline-flex; align-items: center;
	padding: 2px 9px; border-radius: var(--ios-r-pill);
	font-size: 12px; font-weight: 600;
	background: rgba(60,60,67,0.08); color: var(--ios-text-2);
	white-space: nowrap;
}
.ios-pill--high   { background: rgba(255,59,48,0.10);  color: #c0241c; }
.ios-pill--low    { background: rgba(0,122,255,0.10);  color: #0056b3; }
.ios-pill--ok     { background: rgba(52,199,89,0.12);  color: #1f8a3d; }
.ios-pill--dis    { background: rgba(255,149,0,0.12);  color: #c2780a; }
.ios-pill--na     { background: rgba(60,60,67,0.06);   color: var(--ios-text-3); }

/* ---------- Collapsibles — iOS Settings-rij stijl ---------- */
.ios-collapsible {
	background: var(--ios-card-bg);
	border-radius: var(--ios-r-card);
	margin-bottom: 12px;
	overflow: hidden;
}
.ios-collapsible > summary {
	cursor: pointer;
	padding: 14px var(--ios-pad-card-h);
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	list-style: none;
	font-size: 16px;
}
.ios-collapsible > summary::-webkit-details-marker { display: none; }
.ios-collapsible > summary::after {
	content: ''; flex-shrink: 0;
	width: 8px; height: 8px;
	border-right: 2px solid var(--ios-text-3);
	border-top:   2px solid var(--ios-text-3);
	transform: rotate(45deg);
	margin-right: 4px;
	transition: transform 0.2s;
}
.ios-collapsible[open] > summary::after { transform: rotate(135deg); margin-top: -4px; }
.ios-collapsible__body {
	padding: 0 var(--ios-pad-card-h) 12px;
	border-top: 1px solid var(--ios-sep);
}

.ios-list__row__left  { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.ios-list__row__icon  { color: var(--ios-text-3); flex-shrink: 0; font-size: 16px; min-width: 16px; text-align: left; }
.ios-list__row__name  { font-weight: 500; color: var(--ios-text); }
.ios-list__row__right { color: var(--ios-text-3); font-size: 13px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------- CTA-knop ---------- */
.ios-btn {
	display: inline-block;
	padding: 11px 20px;
	border-radius: var(--ios-r-pill);
	background: var(--ios-primary);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
	border: none;
	font-size: 15px;
}
.ios-btn:hover { opacity: 0.92; }

/* ---------- Status dots ---------- */
.ios-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ios-dot--high   { background: var(--ios-danger); }
.ios-dot--low    { background: var(--ios-info); }
.ios-dot--ok     { background: var(--ios-success); }
.ios-dot--dis    { background: var(--ios-warn); }
.ios-dot--na     { background: var(--ios-text-3); }

/* ---------- Top 5 — als 1 card met aparte sub-cards ---------- */
.ios-top5 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--ios-card-bg); border-radius: var(--ios-r-card); overflow: hidden; }
@media (max-width: 540px) { .ios-top5 { grid-template-columns: 1fr; } .ios-top5__col + .ios-top5__col { border-top: 1px solid var(--ios-sep); border-left: 0; } }
.ios-top5__col { padding: 14px var(--ios-pad-card-h); }
.ios-top5__col + .ios-top5__col { border-left: 1px solid var(--ios-sep); }
.ios-top5__col h5 { font-size: 13px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.ios-top5__list { list-style: none; padding: 0; margin: 0; }
.ios-top5__list li {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 8px; padding: 7px 0;
	border-top: 1px solid var(--ios-sep);
	font-size: 15px;
}
.ios-top5__list li:first-child { border-top: 0; }
.ios-top5__list .ios-top5__name { font-weight: 500; color: var(--ios-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ios-top5__list .ios-top5__db   { color: var(--ios-text-3); font-size: 13px; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ---------- Recommendations — 1 card met rows, niet aparte cards per item ---------- */
.ios-rec {
	background: var(--ios-card-bg);
	border-radius: var(--ios-r-card);
	overflow: hidden;
}
.ios-rec__item {
	padding: 14px var(--ios-pad-card-h);
	border-top: 1px solid var(--ios-sep);
	border-left: 3px solid transparent;
}
.ios-rec__item:first-child { border-top: 0; }
.ios-rec__item--high   { border-left-color: var(--ios-danger); }
.ios-rec__item--low    { border-left-color: var(--ios-info); }
.ios-rec__item--ok     { border-left-color: var(--ios-success); }
.ios-rec__item--dis    { border-left-color: var(--ios-warn); }
.ios-rec__head {
	display: flex; align-items: center; gap: 10px;
	font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--ios-text);
}
.ios-rec__head__icon { color: var(--ios-text-3); width: 22px; text-align: center; flex-shrink: 0; }
.ios-rec__body { font-size: 14px; color: var(--ios-text-2); line-height: 1.45; }

/* ---------- Flow spacing ----------
 * Single source of truth voor de gap tussen top-level secties. !important
 * omdat legacy VoiceSection-class elders nog margin: 0 zou kunnen forceren.
 * Section-labels krijgen wat krappere bottom-gap zodat ze visueel bij de
 * volgende card horen. */
.ios-flow > * { margin-bottom: 16px !important; }
.ios-flow > .ios-section-label { margin-bottom: 6px !important; }
.ios-flow > *:last-child { margin-bottom: 0 !important; }

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
	.ios-container { padding: 8px 16px 60px; }
	.ios-page { font-size: 15px; }
	.ios-score__num { font-size: 48px; min-width: 70px; }
}