/* TF Mobile App — the installed-app shell.
   Everything in the @media (display-mode: standalone) block only applies once the site has been
   installed to a home screen and opened from there — a normal browser visit to the site (including
   these same 4 pages) is completely unaffected: full header, footer, and menu, exactly as today. */

#tfma-bottom-nav {
	display: none;
}

/* Niemeyer Core narrows every page's content column to ~86% of the viewport via #qodef-page-inner
   (.qodef-content-grid) — fine for a normal page, but the app shell's iframes sit inside THIS page's
   own copy of that narrowed column, so the iframe itself renders at only ~86% of the true screen
   width. Whatever tool page loads inside it then applies that SAME 86% reduction a second time,
   relative to the already-narrowed iframe — compounding into a visibly narrower result than visiting
   that page directly. Widening this page's own column back out to 100% means the iframe gets the
   true full width, and the embedded page's one reduction ends up matching a direct visit exactly. */
body.tfma-shell-page #qodef-page-inner {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Reduces (can't fully guarantee on every browser) the OS/browser's own native overscroll-bounce
   or pull-to-refresh competing with the Hifz tab's custom pull-to-refresh gesture. */
body.tfma-shell-page {
	overscroll-behavior-y: contain;
}

@media (display-mode: standalone) {

	/* Niemeyer Core's own header (desktop + the separate mobile header it swaps in on small
	   screens), footer, slide-out side menu, back-to-top button, the "Home • Page Name" breadcrumb,
	   and the floating chat widget — replaced by the bottom tab bar below. */
	#qodef-page-header,
	#qodef-page-mobile-header,
	#qodef-page-footer,
	#qodef-back-to-top,
	#qodef-side-area,
	#tfFloatWrap,
	.qodef-page-title {
		display: none !important;
	}

	/* The theme pads page content to clear its own header; with the header gone there's nothing
	   left to clear, so without this the content would start with an odd empty gap up top. */
	#qodef-page-wrapper,
	#qodef-page-content-wrapper {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	body {
		padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
	}

	#tfma-bottom-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100000;
		background: #000000;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	#tfma-bottom-nav .tfma-nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		padding: 15px 4px 13px;
		color: #9a9a9a;
		text-decoration: none;
		font-size: 11.5px;
		font-weight: 600;
		letter-spacing: .01em;
		text-align: center;
		line-height: 1.2;
	}

	#tfma-bottom-nav .tfma-nav-item.is-active {
		color: #bc9868;
	}

	#tfma-bottom-nav .tfma-nav-item svg {
		display: block;
	}
}

/* A page loaded inside the app shell's iframe gets the same header/footer/chrome hiding as standalone
   mode above, unconditionally — the shell page wrapping it already provides the header/footer
   replacement (its own bottom nav), regardless of whether the outer page happens to be running in a
   normal tab or installed. Two independent signals trigger this, deliberately kept both:
   - body.tfma-embedded: set server-side (PHP) when Home explicitly loaded this URL with ?tfma_embed=1
     — catches the very first paint, before any JS has run, avoiding a flash of the real chrome.
   - html.tfma-in-iframe: set client-side the instant any page detects window.self !== window.top
     — the one that actually matters for a plugin like Hifz Tracker that navigates BETWEEN several of
     its own real WordPress pages (a class directory, individual student pages, ...): none of those
     other URLs carry ?tfma_embed=1 (they're built by that plugin's own code, which has no reason to
     know about it), so the query-string signal alone went stale the moment you clicked into a student.
     This one doesn't care what the URL is — it's simply true for as long as the page is inside the
     iframe at all. Each page's own big duplicate title (e.g. "FINISH THE AYAH" above its own branded
     card) is deliberately left alone for now — it's per-page Elementor content, not a single reusable
     theme element like the breadcrumb, so hiding it needs a different, targeted approach if wanted later. */
body.tfma-embedded #qodef-page-header,
body.tfma-embedded #qodef-page-mobile-header,
body.tfma-embedded #qodef-page-footer,
body.tfma-embedded #qodef-back-to-top,
body.tfma-embedded #qodef-side-area,
body.tfma-embedded #tfFloatWrap,
body.tfma-embedded .qodef-page-title,
html.tfma-in-iframe #qodef-page-header,
html.tfma-in-iframe #qodef-page-mobile-header,
html.tfma-in-iframe #qodef-page-footer,
html.tfma-in-iframe #qodef-back-to-top,
html.tfma-in-iframe #qodef-side-area,
html.tfma-in-iframe #tfFloatWrap,
html.tfma-in-iframe .qodef-page-title,
html.tfma-in-iframe #tfma-bottom-nav {
	display: none !important;
}
body.tfma-embedded #qodef-page-wrapper,
body.tfma-embedded #qodef-page-content-wrapper,
html.tfma-in-iframe #qodef-page-wrapper,
html.tfma-in-iframe #qodef-page-content-wrapper {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* A same-origin iframe reports the same display-mode as the page it's embedded in — so once this
   is genuinely installed and opened as an app, THIS page's own @media (display-mode: standalone)
   block above also matches inside the iframe, reserving bottom padding for a bottom nav that never
   actually renders here. Left unset, that's pure dead space at the bottom of every embedded tab —
   this cancels it back out. */
body.tfma-embedded,
html.tfma-in-iframe body {
	padding-bottom: 0 !important;
}

/* ---------- App shell ([tf_mobile_home] / the Home page) ----------
   One pane per tab; tfma-shell.js toggles which is visible. Panes for the 3 other tabs start empty
   and get a same-origin iframe appended into them the first time that tab is opened. The iframe is
   left un-sized until it reports its own content height (see tfma-shell.js) so the OUTER page scrolls
   normally instead of the tool living in its own little scrollable box — full-bleed, not "app in a box". */
.tfma-shell {
	position: relative;
	min-height: 100vh;
	background: #000000;
}
.tfma-pane {
	display: none;
	position: relative;
}
.tfma-pane.is-active {
	display: block;
}
.tfma-pane iframe {
	display: block;
	width: 100%;
	border: 0;
	background: #000000;
}
/* Pull-to-refresh (Hifz Classes tab only — see data-tfma-pull-refresh in home.php). Absolutely
   positioned so it takes up no layout space at rest; tfma-shell.js slides it down from behind the
   iframe as the pane is pulled, then reloads just that iframe on release past the threshold. */
.tfma-pull-indicator {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #9a9a9a;
	font-size: 12.5px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(-60px);
	transition: opacity .15s ease;
}
.tfma-pull-indicator.is-visible {
	opacity: 1;
}
.tfma-pull-indicator.is-ready,
.tfma-pull-indicator.is-refreshing {
	color: #bc9868;
}
.tfma-pull-indicator svg {
	display: block;
}
.tfma-pull-indicator.is-refreshing svg {
	animation: tfma-pull-spin .8s linear infinite;
}
@keyframes tfma-pull-spin {
	to { transform: rotate(360deg); }
}
/* While a tab's iframe is loading for the first time, show a plain placeholder instead of a blank/
   white flash — removed the moment the iframe reports it has actually finished loading. */
.tfma-pane.is-loading {
	min-height: 100vh;
}
.tfma-pane.is-loading::before {
	content: "Loading…";
	display: block;
	padding: 120px 20px;
	text-align: center;
	color: #9a9a9a;
	font-size: 14px;
}
.tfma-pane.is-loading iframe {
	display: none;
}

/* ---------- Mobile home page ([tf_mobile_home]) ----------
   Deliberately self-contained (own black background, own min-height) rather than relying on the
   theme's page background — this page is meant to feel like the app's home screen even when someone
   opens it directly in a normal browser tab, not only once installed. No max-width cap — matches
   the site's own content width exactly, same reasoning as Finish the Ayah's .fta. */
.tfma-home {
	min-height: 100vh;
	width: 100%;
	margin: 0 auto;
	padding: 20px 20px 32px;
	background: #000000;
	color: #ffffff;
	text-align: center;
	box-sizing: border-box;
}
.tfma-home-logo {
	width: 240px;
	height: 240px;
	border-radius: 40px;
	margin-bottom: 4px;
}
.tfma-home-tagline {
	margin: 0 0 28px;
	color: #b7b7b7;
	font-size: 14px;
}
.tfma-home-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tfma-home-card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: rgba(255, 255, 255, 0.04);
	text-align: left;
	text-decoration: none;
	color: #ffffff;
}
.tfma-home-card-title {
	font-weight: 700;
	font-size: 15px;
	color: #bc9868;
}
.tfma-home-card-desc {
	font-size: 12.5px;
	color: #a9a9a9;
}