/* ═══════════════════════════════════════════════════════════════
   IB FINANCE PAYMENT TRACKER — BOTTOM NAV (mobile & tablet)

   Loaded after frontend.css. Delete this file, assets/js/bottom-nav.js
   and the two include lines in layout.php to revert completely.

   BREAKPOINT FOLLOWS THE PLUGIN
   900px / 640px, matching the TABLET / MOBILE constants the existing
   fptNav retrofit uses. The other InsBOSS systems switch at 1024, but
   changing it here would move this plugin's drawer, inline-grid collapse
   and table stacking too — so it is left alone.

   SHARED BOTTOM-NAV SPEC
   The token block is the same in every InsBOSS system; only the accent
   differs, so the bars read as one product family:
     IB Portal #2563eb · IB Goals #0d9488 · IB LMS #175CFF
     Wiki #385DFF · Finance #0032FF
   ═══════════════════════════════════════════════════════════════ */
:root{
	--fptb-accent:#0032FF;
	--fptb-accent-soft:rgba(0,50,255,.10);
	--fptb-ink:#64748b;
	--fptb-line:rgba(15,23,42,.08);
	--fptb-h:64px;
	--fptb-safe:env(safe-area-inset-bottom,0px);
}

/* Hidden at every width; the media query opts it in. */
.fpt-bnav{ display:none; }

@media (max-width: 900px){

	/* #fpt-app is `fixed inset-0 overflow-hidden`, so the bar is absolute
	   against the shell rather than fixed to the viewport — inside a
	   full-screen app the two coincide, and this keeps it inside the
	   shell's stacking context instead of fighting z-[9990]. */
	#fpt-app .fpt-bnav{
		position:absolute; left:0; right:0; bottom:0; z-index:60;
		display:flex; align-items:stretch;
		height:calc(var(--fptb-h) + var(--fptb-safe));
		padding:4px 4px var(--fptb-safe);
		background:#fff;
		border-top:1px solid var(--fptb-line);
	}

	/* !important throughout: this plugin styles almost everything inline
	   (the sidebar is style="width:256px", nav links carry style strings
	   and onmouseover handlers), and Tailwind utilities are in play too. */
	#fpt-app .fpt-bnav__i{
		flex:1 1 0; min-width:0;
		display:flex !important; flex-direction:column;
		align-items:center; justify-content:center; gap:2px;
		padding:6px 2px !important; margin:0 !important;
		width:auto !important; height:auto !important; min-height:0 !important;
		border:0 !important; border-radius:12px !important;
		background:transparent !important; box-shadow:none !important;
		text-decoration:none !important; text-transform:none !important;
		letter-spacing:.005em !important;
		color:var(--fptb-ink) !important;
		font-size:10.5px !important; font-weight:600 !important; line-height:1.2 !important;
		cursor:pointer; -webkit-tap-highlight-color:transparent;
		transition:color .18s ease;
	}

	/* The icon sits in its own pill, which carries the active state.
	   Tinting a fixed-width pill rather than the whole tab keeps every
	   item optically equal — "Processing" is three times the width of
	   "New", and tinting the tab made the bar look lopsided. */
	#fpt-app .fpt-bnav__ic{
		display:flex; align-items:center; justify-content:center;
		width:40px; height:26px; border-radius:999px;
		background:transparent;
		transition:background-color .18s ease, transform .12s ease;
	}
	#fpt-app .fpt-bnav__i svg{
		width:21px; height:21px; flex:0 0 auto;
		stroke:currentColor; fill:none; stroke-width:1.75;
		stroke-linecap:round; stroke-linejoin:round;
	}
	#fpt-app .fpt-bnav__l{
		max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
	}

	#fpt-app .fpt-bnav__i.is-active{ color:var(--fptb-accent) !important; }
	#fpt-app .fpt-bnav__i.is-active .fpt-bnav__ic{ background:var(--fptb-accent-soft); }
	#fpt-app .fpt-bnav__i.is-active svg{ stroke-width:2.1; }
	#fpt-app .fpt-bnav__i:focus-visible{ outline:2px solid var(--fptb-accent); outline-offset:-3px; }

	@media (hover:hover){
		#fpt-app .fpt-bnav__i:hover{ color:var(--fptb-accent) !important; }
		#fpt-app .fpt-bnav__i:hover .fpt-bnav__ic{ background:var(--fptb-accent-soft); }
	}
	#fpt-app .fpt-bnav__i:active .fpt-bnav__ic{ transform:scale(.9); }

	/* Clear the bar. This goes on .fpt-scroller, NOT body — #fpt-app is a
	   fixed full-viewport shell, so <body> never scrolls here and padding
	   on it would do nothing. */
	#fpt-app .fpt-scroller{
		padding-bottom:calc(var(--fptb-h) + var(--fptb-safe) + 8px) !important;
	}

	/* ── The drawer becomes a BOTTOM SHEET ───────────────────────────
	   The plugin's own rule (printed inline from class-loader.php around
	   line 190) makes the sidebar a LEFT drawer:

	     #fpt-sidebar{ position:fixed!important; left:0; height:100%!important;
	                   transform:translateX(-100%) }

	   Only the anchor and the axis change here, so fptNav still owns the
	   .fpt-nav-open state and no JavaScript is touched. Matching the
	   IB Portal dashboard, IB Goals and the wiki: rises from the bottom,
	   stops above the bar so More can toggle it shut.

	   Every property needs !important — the <aside> carries inline
	   position/z-index, and the plugin's own rule already uses !important
	   on position and height. */
	#fpt-app #fpt-sidebar{
		top:auto !important;
		bottom:calc(var(--fptb-h) + var(--fptb-safe)) !important;
		left:0 !important;
		right:0 !important;
		width:100% !important;
		max-width:none !important;
		height:auto !important;
		max-height:calc(100vh - var(--fptb-h) - var(--fptb-safe) - 72px) !important;
		border-right:0 !important;
		border-radius:18px 18px 0 0 !important;
		padding-top:18px !important;
		overflow-y:auto !important;
		overscroll-behavior:contain;
		z-index:9996 !important;
		box-shadow:0 -10px 40px rgba(15,23,42,.22) !important;
		/* Clears its own height AND the bottom offset. A plain 100% would
		   leave the top edge peeking over the bar. */
		transform:translateY(calc(100% + var(--fptb-h) + var(--fptb-safe) + 24px)) !important;
		/* visibility is what actually keeps it hidden. A transform alone
		   leaves it in the paint tree, and a phone's collapsing URL bar
		   resizes the viewport mid-scroll, flashing it into view. */
		visibility:hidden !important;
		transition:transform .25s ease, visibility 0s linear .25s !important;
	}

	#fpt-app.fpt-nav-open #fpt-sidebar{
		transform:translateY(0) !important;
		visibility:visible !important;
		transition:transform .25s ease, visibility 0s linear 0s !important;
	}

	/* Grab handle, as on the other systems. */
	#fpt-app #fpt-sidebar::before{
		content:'';
		position:absolute; top:7px; left:50%;
		transform:translateX(-50%);
		width:36px; height:4px; border-radius:999px;
		background:var(--fptb-line);
		pointer-events:none; z-index:2;
	}

	/* The admin bar offset was for a full-height left drawer; a bottom
	   sheet is anchored to the bottom, so it must not be pushed down. */
	.admin-bar #fpt-app #fpt-sidebar{ top:auto !important; }

	/* Backdrop stays below the sheet but above the bar. */
	#fpt-app.fpt-nav-open #fpt-nav-backdrop{ z-index:9995 !important; }

	/* ── The hamburger goes ─────────────────────────────────────────
	   More does the same job. The plugin force-shows this button at
	   <=900px with display:flex!important, so this needs !important too.
	   Hidden rather than removed: fptNav is still wired to it, and
	   bottom-nav.js routes through fptNav. */
	#fpt-nav-toggle{ display:none !important; }

	/* The apps panel is fixed at z-index 10000 and can land on the bar. */
	#fpt-apps-panel{
		max-width:calc(100vw - 20px) !important;
		bottom:auto;
	}
}

@media (prefers-reduced-motion: reduce){
	#fpt-app .fpt-bnav__i,
	#fpt-app .fpt-bnav__ic{ transition:none !important; }
	#fpt-app .fpt-bnav__i:active .fpt-bnav__ic{ transform:none; }
}