/* ==========================================================================
   ATO Staff Portal — Mobile app shell (v1.2.0)
   Loads after portal.css. Desktop (>980px) is untouched.
   Pairs with portal-mobile.js, which builds the bottom tab bar, the
   mobile search sheet and the page title from the existing markup.
   ========================================================================== */

:root {
	--m-top-h: 56px;
	--m-tab-h: 60px;
	--m-safe-t: env(safe-area-inset-top, 0px);
	--m-safe-b: env(safe-area-inset-bottom, 0px);
	--m-safe-l: env(safe-area-inset-left, 0px);
	--m-safe-r: env(safe-area-inset-right, 0px);
	--m-ease: cubic-bezier(.32, .72, 0, 1); /* iOS-like sheet curve */
}

/* Elements injected by JS are hidden on desktop */
.atosp-tabbar, .atosp-m-title, .atosp-m-search-btn, .atosp-m-search,
.atosp-more { display: none; }

@media (max-width: 980px) {

	/* ---------- Global touch polish ---------- */
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body.atosp-body {
		-webkit-tap-highlight-color: transparent;
		overscroll-behavior-y: none;
		background: var(--p-bg);
	}
	.atosp-body a, .atosp-body button, .atosp-body [role="button"],
	.atosp-body label, .atosp-body select, .atosp-body summary { touch-action: manipulation; }
	/* 16px stops iOS Safari zooming into form fields */
	.atosp-body input:not([type="checkbox"]):not([type="radio"]),
	.atosp-body select, .atosp-body textarea { font-size: 16px !important; }
	.atosp-body .atosp-btn, .atosp-body button[type="submit"] { min-height: 44px; }
	body.atosp-lock { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }

	/* ---------- Header (top app bar) ---------- */
	.atosp-topbar {
		position: sticky; top: 0; z-index: 30;
		height: calc(var(--m-top-h) + var(--m-safe-t));
		padding: var(--m-safe-t) calc(8px + var(--m-safe-r)) 0 calc(8px + var(--m-safe-l));
		gap: 4px;
		/* Solid (no backdrop-filter/transform): either would trap the
		   position:fixed bottom sheets inside the header */
		background: #fff;
		border-bottom: 1px solid transparent;
		transition: border-color .2s, box-shadow .2s, top .28s var(--m-ease);
	}
	.atosp-scrolled .atosp-topbar { border-bottom-color: var(--p-line); box-shadow: 0 1px 10px rgba(1, 38, 27, .06); }
	/* Hide header while scrolling down, reveal on scroll up */
	.atosp-hide-top .atosp-topbar { top: calc(-1 * (var(--m-top-h) + var(--m-safe-t))); }

	.atosp-topbar .atosp-icon-btn,
	.atosp-topbar .atosp-dropdown > button {
		width: 44px; height: 44px; min-width: 44px;
		border: 0; background: transparent; border-radius: 12px;
		display: inline-grid; place-items: center; padding: 0;
	}
	.atosp-topbar .atosp-icon-btn:active,
	.atosp-topbar .atosp-dropdown > button:active { background: rgba(2, 68, 48, .08); }

	.atosp-m-title {
		display: block; flex: 1; min-width: 0; margin: 0 4px;
		font-family: var(--p-head); font-weight: 800; font-size: 1.02rem;
		color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
		text-align: left;
	}
	.atosp-topsearch { display: none !important; }
	.atosp-m-search-btn { display: inline-grid; }
	.atosp-m-search-btn svg { width: 21px; height: 21px; }
	.atosp-topbar-actions { gap: 0; margin-left: auto; flex: none; }
	/* Public website link lives in the drawer on mobile */
	.atosp-topbar-actions > a.atosp-icon-btn { display: none; }
	/* "+ New" becomes an icon-only gold button */
	.atosp-topbar-actions .atosp-dropdown:first-of-type > button {
		background: var(--p-gold); color: var(--p-ink); font-size: 0; gap: 0;
		width: 36px; height: 36px; min-width: 36px; border-radius: 50%; margin: 0 4px;
	}
	.atosp-topbar-actions .atosp-dropdown:first-of-type > button svg { width: 18px; height: 18px; font-size: 14px; }
	.atosp-topbar-actions .atosp-dropdown:first-of-type > button > *:not(svg):not(.atosp-i) { display: none; }

	/* Large in-page title is replaced by the app-bar title on scroll */
	.atosp-pagehead { margin-bottom: 14px; }
	.atosp-pagehead h1, .atosp-pagehead h2 { font-size: 1.5rem; line-height: 1.2; }

	/* ---------- Dropdowns become bottom sheets ---------- */
	.atosp-dropdown.is-open .atosp-dropdown-menu {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto;
		min-width: 0; width: 100%; max-height: 75vh; overflow-y: auto;
		border-radius: 18px 18px 0 0; border: 0;
		padding: 8px 10px calc(14px + var(--m-safe-b));
		box-shadow: 0 -12px 40px rgba(1, 26, 18, .22);
		z-index: 5;
		animation: atospSheetUp .3s var(--m-ease);
	}
	.atosp-dropdown.is-open .atosp-dropdown-menu::before {
		content: ""; display: block; width: 38px; height: 5px; border-radius: 3px;
		background: #d4ddd9; margin: 2px auto 10px;
	}
	/* Header sits above the page overlay while a sheet is open, and dims itself */
	.atosp-sheet-open .atosp-topbar { z-index: 91; }
	.atosp-sheet-open .atosp-topbar::after { content: ""; position: absolute; inset: 0; background: rgba(1, 26, 18, .4); z-index: 1; }
	.atosp-sheet-open .atosp-dropdown.is-open { position: static; }
	.atosp-dropdown-menu a { min-height: 48px; font-size: 1rem; padding: 12px 14px; }
	.atosp-sheet-open .atosp-overlay {
		display: block; position: fixed; inset: 0; background: rgba(1, 26, 18, .4); z-index: 85;
		animation: atospFade .2s ease;
	}

	/* ---------- Sidebar is replaced by the native "More" screen ---------- */
	.atosp-sidebar { display: none; }
	/* Menu button stays (opens the More screen) */
	.atosp-menu-toggle { display: inline-grid !important; }
	.atosp-sidebar-open .atosp-overlay { display: none !important; }

	/* ---------- "More" screen (native grouped list) ---------- */
	.atosp-more {
		--g-bg: #f2f4f3; --g-card: #fff; --g-sep: rgba(11, 31, 23, .1); --g-label: #6b7f76;
		display: block; position: fixed; left: 0; right: 0; top: 0;
		bottom: calc(var(--m-tab-h) + var(--m-safe-b));
		z-index: 79; background: var(--g-bg);
		overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		opacity: 0; visibility: hidden; transform: translateY(14px);
		transition: opacity .22s ease, transform .3s var(--m-ease), visibility 0s linear .3s;
		font-family: var(--p-font); color: var(--p-ink);
	}
	.atosp-more, .atosp-more * { box-sizing: border-box; }
	.atosp-more-open .atosp-more { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s var(--m-ease); }
	.atosp-more-open .atosp-topbar { visibility: hidden; }

	/* Compact nav bar that fades in once the large title scrolls away */
	.atosp-more-bar {
		position: sticky; top: 0; z-index: 2;
		height: calc(44px + var(--m-safe-t)); padding-top: var(--m-safe-t);
		display: grid; place-items: center;
		font-family: var(--p-head); font-weight: 800; font-size: 1rem;
		background: rgba(242, 244, 243, .82);
		-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
		border-bottom: .5px solid transparent;
		transition: border-color .2s;
	}
	.atosp-more-bar span { opacity: 0; transition: opacity .2s; }
	.atosp-more.is-scrolled .atosp-more-bar { border-bottom-color: var(--g-sep); }
	.atosp-more.is-scrolled .atosp-more-bar span { opacity: 1; }

	.atosp-more-inner { padding: 0 calc(16px + var(--m-safe-r)) 28px calc(16px + var(--m-safe-l)); max-width: 640px; margin: 0 auto; }
	.atosp-more-title { margin: -6px 4px 10px; font-family: var(--p-head); font-size: 2.05rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--p-ink); }

	.atosp-more-search {
		display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; margin-bottom: 22px;
		border-radius: 11px; background: rgba(11, 31, 23, .07); color: var(--g-label);
	}
	.atosp-more-search svg { width: 17px; height: 17px; flex: none; }
	.atosp-body .atosp-more-search input {
		flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important;
		box-shadow: none !important; padding: 0 !important; outline: 0; color: var(--p-ink);
	}
	.atosp-more-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

	.atosp-more-card { background: var(--g-card); border-radius: 14px; overflow: hidden; }
	.atosp-more-group { margin-bottom: 26px; }
	.atosp-more-gtitle {
		padding: 0 16px 7px; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
		text-transform: uppercase; color: var(--g-label);
	}

	/* Profile card */
	.atosp-more-profile {
		display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 26px;
		background: var(--g-card); border-radius: 14px; color: var(--p-ink) !important; text-decoration: none !important;
	}
	.atosp-more-avatar {
		flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
		background: linear-gradient(135deg, var(--p-mint), var(--p-primary-2)); color: #fff;
		font-family: var(--p-head); font-weight: 800; font-size: 1.25rem; overflow: hidden;
	}
	.atosp-more-avatar img { width: 100%; height: 100%; object-fit: cover; }
	.atosp-more-who { flex: 1; min-width: 0; }
	.atosp-more-who strong { display: block; font-size: 1.12rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.atosp-more-who small { display: block; color: var(--g-label); font-size: .85rem; margin-top: 1px; }

	/* Rows */
	.atosp-more-row {
		position: relative; display: flex; align-items: center; gap: 14px;
		min-height: 50px; padding: 0 14px 0 16px;
		color: var(--p-ink) !important; text-decoration: none !important; font-size: 1.02rem;
		background: none; border: 0; width: 100%; font-family: inherit; text-align: left; cursor: pointer;
	}
	.atosp-more-row + .atosp-more-row::before {
		content: ""; position: absolute; top: 0; right: 0; left: 60px; height: .5px; background: var(--g-sep);
	}
	.atosp-more-row:active, .atosp-more-profile:active { background: #e6ebe9; }
	.atosp-more-ic {
		flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
		background: var(--c, var(--p-primary-2)); color: #fff;
	}
	.atosp-more-ic svg, .atosp-more-ic .atosp-i { width: 18px; height: 18px; color: #fff !important; stroke: #fff; }
	.atosp-more-label { flex: 1; min-width: 0; padding: 14px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.atosp-more-badge {
		flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
		background: var(--p-red); color: #fff; font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; font-style: normal;
	}
	.atosp-more-chev { flex: none; width: 8px; height: 13px; color: #b5c0bb; }
	.atosp-more-row.is-current .atosp-more-label { font-weight: 700; color: var(--p-primary); }
	.atosp-more-row.is-current .atosp-more-chev { display: none; }
	.atosp-more-check { display: none; flex: none; width: 18px; height: 18px; color: var(--p-primary-2); }
	.atosp-more-row.is-current .atosp-more-check { display: block; }
	.atosp-more-signout { justify-content: center; color: var(--p-red) !important; font-weight: 600; }
	.atosp-more-signout .atosp-more-label { flex: none; }

	.atosp-more-foot { text-align: center; font-size: .76rem; color: var(--g-label); margin: 4px 0 0; line-height: 1.6; }
	.atosp-more-foot a { color: var(--g-label) !important; text-decoration: underline !important; }
	.atosp-more-empty { display: none; text-align: center; color: var(--g-label); padding: 30px 0; }
	.atosp-more.is-filtering .atosp-more-profile,
	.atosp-more.is-filtering .atosp-more-foot,
	.atosp-more.is-filtering .atosp-more-group[data-static] { display: none; }
	.atosp-more.is-empty .atosp-more-empty { display: block; }

	/* ---------- Bottom tab bar (footer menu) ---------- */
	.atosp-tabbar {
		display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
		height: calc(var(--m-tab-h) + var(--m-safe-b));
		padding: 0 var(--m-safe-r) var(--m-safe-b) var(--m-safe-l);
		background: rgba(255, 255, 255, .92);
		-webkit-backdrop-filter: saturate(180%) blur(18px);
		backdrop-filter: saturate(180%) blur(18px);
		border-top: 1px solid var(--p-line);
		box-shadow: 0 -2px 14px rgba(1, 38, 27, .05);
	}
	.atosp-tab {
		position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; padding: 6px 2px 4px; min-width: 0;
		color: var(--p-muted) !important; font-size: .68rem; font-weight: 700; letter-spacing: .01em;
		background: none; border: 0; font-family: inherit; cursor: pointer; text-decoration: none !important;
	}
	.atosp-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.atosp-tab svg { width: 24px; height: 24px; transition: transform .18s var(--m-ease); }
	.atosp-tab::before {
		content: ""; position: absolute; top: 6px; left: 50%; width: 52px; height: 30px;
		transform: translateX(-50%) scale(.6); border-radius: 16px; background: rgba(6, 214, 160, .16);
		opacity: 0; transition: opacity .2s, transform .25s var(--m-ease); z-index: -1;
	}
	.atosp-tab.is-active { color: var(--p-primary) !important; }
	.atosp-tab.is-active svg { fill: currentColor; fill-opacity: .14; }
	.atosp-tab.is-active::before { opacity: 1; transform: translateX(-50%) scale(1); }
	.atosp-tab:active svg { transform: scale(.88); }
	.atosp-tab-badge {
		position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px;
		border-radius: 9px; background: var(--p-red); color: #fff; font-size: .62rem; line-height: 17px; text-align: center;
		box-shadow: 0 0 0 2px #fff;
	}

	/* Keep content clear of the tab bar */
	.atosp-has-tabbar .atosp-content { padding-bottom: calc(var(--m-tab-h) + var(--m-safe-b) + 24px) !important; }
	.atosp-has-tabbar .atosp-main { min-height: 100dvh; }

	/* ---------- Mobile search sheet ---------- */
	.atosp-m-search {
		display: flex; align-items: center; gap: 8px;
		position: fixed; left: 0; right: 0; top: 0; z-index: 96;
		padding: calc(8px + var(--m-safe-t)) 10px 8px;
		background: #fff; box-shadow: 0 6px 24px rgba(1, 26, 18, .14);
		transform: translateY(-110%); transition: transform .28s var(--m-ease);
	}
	.atosp-search-open .atosp-m-search { transform: none; }
	.atosp-search-open .atosp-overlay { display: block; position: fixed; inset: 0; z-index: 85; background: rgba(1, 26, 18, .35); }
	.atosp-m-search input {
		flex: 1; min-width: 0; height: 44px; padding: 0 14px !important;
		border: 1px solid var(--p-line) !important; border-radius: 12px !important; background: var(--p-bg) !important;
	}
	.atosp-m-search button {
		border: 0; background: none; color: var(--p-primary-2); font-weight: 700; font-size: 1rem;
		padding: 10px 6px; cursor: pointer; font-family: inherit;
	}

	/* ---------- Content ergonomics ---------- */
	.atosp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	.atosp-card { border-radius: 14px; }
}

/* Phones */
@media (max-width: 640px) {
	.atosp-content { padding: 14px calc(14px + var(--m-safe-r)) 30px calc(14px + var(--m-safe-l)); }
	.atosp-tab span { font-size: .66rem; }
	/* Tables become stacked cards when flagged by JS (data-label on cells) */
	.atosp-table.atosp-stack thead { display: none; }
	.atosp-table.atosp-stack, .atosp-table.atosp-stack tbody,
	.atosp-table.atosp-stack tr, .atosp-table.atosp-stack td { display: block; width: 100%; }
	.atosp-table.atosp-stack tr { padding: 12px 14px; border-bottom: 1px solid var(--p-line); }
	.atosp-table.atosp-stack td { padding: 4px 0 !important; border: 0 !important; display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: right; }
	.atosp-table.atosp-stack td::before { content: attr(data-label); flex: none; text-align: left; color: var(--p-muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
	.atosp-table.atosp-stack td[data-label=""]::before { display: none; }
	.atosp-table.atosp-stack td:first-child { justify-content: flex-start; text-align: left; padding-bottom: 8px !important; }
	.atosp-table.atosp-stack td:first-child::before { display: none; }
	.atosp-table.atosp-stack td select { width: auto; min-width: 150px; max-width: 65%; }
	.atosp-table-wrap:has(.atosp-stack) { margin: 0 -14px; overflow: visible; }
}

/* Installed / standalone (Add to Home Screen) */
@media (display-mode: standalone) and (max-width: 980px) {
	body.atosp-body { user-select: none; -webkit-user-select: none; }
	.atosp-body input, .atosp-body textarea, .atosp-body [contenteditable], .atosp-content p, .atosp-content td { user-select: text; -webkit-user-select: text; }
}

@media (prefers-reduced-motion: reduce) {
	.atosp-more, .atosp-topbar, .atosp-m-search, .atosp-tab svg, .atosp-tab::before { transition: none !important; }
	.atosp-dropdown.is-open .atosp-dropdown-menu, .atosp-overlay { animation: none !important; }
}

@keyframes atospSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes atospFade { from { opacity: 0; } to { opacity: 1; } }