/* Zadesta Finance Hub — shared phone interface: bottom tab bar, sheets, toast.
   Used by the app home and by every Hub page. Sized for thumbs: every target is at
   least 48px tall, the things used most sit at the bottom of the screen. */
/* Brand colours (Settings → Brand colours replaces these on every screen). */
:root{--zb-main:#19376d;--zb-main-deep:#12284f;--zb-main-light:#2b5299;--zb-accent:#d4af37;--zb-accent-bright:#f4d03f;--zb-accent-deep:#9a7a12}


:root {
	--zu-navy: var(--zb-main);
	--zu-navy-deep: var(--zb-main-deep);
	--zu-gold: var(--zb-accent);
	--zu-gold-deep: var(--zb-accent-deep);
	--zu-ink: #16243a;
	--zu-muted: #5f6b7d;
	--zu-paper: #f6f4ef;
	--zu-card: #ffffff;
	--zu-line: #e6e0d5;
	--zu-red: #b3372b;
	--zu-green: #1f7a52;
	--zu-tab-h: 64px;
	--zu-safe-b: env(safe-area-inset-bottom, 0px);
}

/* Bottom tab bar ----------------------------------------------------------- */
.zfh-tabbar {
	display: none;
}
@media (max-width: 899px) {
	.zfh-tabbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
		display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
		height: calc(var(--zu-tab-h) + var(--zu-safe-b));
		padding: 0 4px var(--zu-safe-b);
		background: rgba(255, 255, 255, .96);
		-webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
		border-top: 1px solid var(--zu-line);
		box-shadow: 0 -6px 24px rgba(18, 40, 79, .08);
	}
	.zfh-tab-btn {
		position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		min-height: 48px; color: #6b7588 !important; text-decoration: none !important;
		font: 600 12px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: .1px;
		-webkit-tap-highlight-color: transparent; border-radius: 14px; margin: 6px 2px 0;
	}
	.zfh-tab-btn svg { width: 25px; height: 25px; }
	.zfh-tab-btn:active { background: rgba(25, 55, 109, .08); }
	.zfh-tab-btn.is-active { color: var(--zu-navy) !important; }
	.zfh-tab-btn.is-active::before {
		content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--zu-gold);
	}
	.zfh-tab-btn:focus-visible { outline: 2px solid var(--zu-gold); outline-offset: -2px; box-shadow: none; }
	.zfh-tab-badge {
		position: absolute; top: 2px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
		background: #d9482f; color: #fff; font: 700 11px/19px sans-serif; text-align: center; border: 2px solid #fff;
	}
}

/* Sheets (Alerts, More, Snap a receipt) ------------------------------------ */
.zfh-sheet {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: flex-end; justify-content: center;
	background: rgba(10, 22, 44, .5);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	animation: zu-fade .18s ease;
}
.zfh-sheet[hidden] { display: none; }
.zfh-sheet-panel {
	width: 100%; max-width: 560px; max-height: calc(92vh - env(safe-area-inset-top, 0px)); max-height: calc(92dvh - env(safe-area-inset-top, 0px));
	display: flex; flex-direction: column;
	background: var(--zu-card); color: var(--zu-ink);
	border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(10, 22, 44, .3);
	padding-bottom: var(--zu-safe-b);
	animation: zu-up .24s cubic-bezier(.2, .8, .25, 1);
	overscroll-behavior: contain;
}
@media (min-width: 900px) {
	.zfh-sheet { align-items: center; padding: 24px; }
	.zfh-sheet-panel { border-radius: 20px; max-height: 86vh; }
	.zfh-sheet-grip { display: none; }
}
.zfh-sheet-grip { width: 42px; height: 5px; border-radius: 3px; background: #d5d0c6; margin: 9px auto 0; flex: none; }
.zfh-sheet-head {
	flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 12px 12px 20px; border-bottom: 1px solid #efeae1; font-size: 19px;
}
.zfh-sheet-head strong { font: 700 20px/1.25 Georgia, serif; color: var(--zu-navy); }
.zfh-sheet-close {
	flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: #f2efe8; color: var(--zu-ink);
	display: grid; place-items: center; cursor: pointer;
}
.zfh-sheet-close:active { background: #e6e1d6; }
.zfh-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px 20px; }
body.zfh-sheet-open { overflow: hidden; }

@keyframes zu-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes zu-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .zfh-sheet, .zfh-sheet-panel { animation: none; } }

/* More sheet */
.zfh-me { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zfh-me strong { display: block; font: 700 18px/1.2 Georgia, serif; color: var(--zu-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zfh-me small { display: block; color: var(--zu-muted); font-size: 14px; }
.zfh-avatar {
	flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--zu-gold), var(--zb-accent-bright)); color: var(--zu-navy-deep); font: 700 16px/1 sans-serif; letter-spacing: .5px;
}
.zfh-more-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	min-height: 54px; padding: 0 8px 0 6px; border: 0; border-bottom: 1px solid #f0ece4; background: none;
	color: var(--zu-ink) !important; text-decoration: none !important; font: 600 17px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: left; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.zfh-more-row svg { flex: none; width: 22px; height: 22px; color: #a5adbb; }
.zfh-more-row:active { background: #f7f4ee; }
.zfh-more-row.is-active { color: var(--zu-navy) !important; }
.zfh-more-row.is-active svg { color: var(--zu-gold); }
.zfh-more-row.is-quiet { color: var(--zu-muted) !important; font-weight: 500; }
.zfh-more-row.is-danger { color: var(--zu-red) !important; border-bottom: 0; margin-top: 6px; }
.zfh-more-row.is-danger svg { color: var(--zu-red); }
.zfh-more-form { margin: 0; }
.zfh-more-view { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 6px; border-bottom: 1px solid #f0ece4; font-size: 16px; color: var(--zu-muted); }
.zfh-more-view select { min-height: 46px; font-size: 16px; border-radius: 10px; border: 1px solid #d7d1c5; padding: 0 12px; background: #fff; color: var(--zu-ink); max-width: 60%; }

/* Toast */
.zfh-toast {
	position: fixed; left: 50%; bottom: calc(var(--zu-tab-h) + var(--zu-safe-b) + 14px); z-index: 100001;
	transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
	max-width: min(92vw, 460px); padding: 13px 18px; border-radius: 14px;
	background: var(--zu-navy-deep); color: #fff; font: 600 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 12px 30px rgba(10, 22, 44, .3); transition: opacity .2s, transform .2s;
}
.zfh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .zfh-toast { bottom: 28px; } }

/* Receipt form */
.zfh-rform { display: grid; gap: 12px; }
.zfh-rform label { display: grid; gap: 5px; font-size: 14px; font-weight: 600; color: var(--zu-muted); }
.zfh-rform input, .zfh-rform select {
	width: 100%; min-height: 50px; font-size: 17px; padding: 0 12px; border-radius: 12px; border: 1px solid #d7d1c5;
	background: #fff; color: var(--zu-ink); -webkit-appearance: none; appearance: none;
}
.zfh-rform select { background-image: linear-gradient(45deg, transparent 50%, #6b7588 50%), linear-gradient(135deg, #6b7588 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 30px; }
.zfh-rform input:focus, .zfh-rform select:focus { outline: none; border-color: var(--zb-accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, .3); }
.zfh-f2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.zfh-photo { position: relative; display: block !important; cursor: pointer; }
.zfh-photo input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.zfh-photo-empty { display: grid; place-items: center; gap: 4px; min-height: 130px; border-radius: 16px; border: 2px dashed #cfc7b6; background: #faf8f3; color: var(--zb-main); text-align: center; padding: 14px; }
.zfh-photo-empty svg { width: 34px; height: 34px; }
.zfh-photo-empty b { font-size: 17px; }
.zfh-photo-empty small { font-weight: 500; color: var(--zu-muted); }
.zfh-photo img { display: block; width: 100%; max-height: 220px; object-fit: contain; border-radius: 16px; background: #f1ede5; }
.zfh-primary {
	width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: var(--zb-main); color: #fff !important;
	font: 700 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.zfh-primary:active { background: var(--zb-main-deep); }
.zfh-primary[disabled] { opacity: .6; }
.zfh-form-msg { margin: 0; font-size: 14px; color: #9b2c1d; min-height: 1em; }
.zfh-form-msg:empty { display: none; }
.zfh-fine { margin: 0; font-size: 13px; color: var(--zu-muted); text-align: center; }

/* Receipt steps: photo → check (use / retake / cancel) → details */
.zfh-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zfh-rstep { display: none; }
.zfh-rform[data-step="photo"] .zfh-rstep[data-for="photo"],
.zfh-rform[data-step="check"] .zfh-rstep[data-for="check"],
.zfh-rform[data-step="details"] .zfh-rstep[data-for="details"] { display: grid; gap: 12px; }
button.zfh-photo-empty { width: 100%; font: inherit; cursor: pointer; }
.zfh-rstep[data-for="check"] img { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 16px; background: #1d2433; }
.zfh-rbtns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.zfh-secondary { min-height: 54px; border-radius: 14px; border: 2px solid var(--zb-main); background: #fff; color: var(--zb-main) !important; font: 700 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; }
.zfh-textbtn { min-height: 48px; border: 0; background: none; color: var(--zb-main) !important; font: 600 15px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-decoration: underline; cursor: pointer; }
.zfh-rthumb { display: flex; align-items: center; gap: 12px; }
.zfh-rthumb[hidden] { display: none; }
.zfh-rthumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.zfh-as-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 12px; }

/* Transactions behind a figure */
.zfh-drill-total { margin: 4px 0 8px; font-weight: 700; color: var(--zu-muted); }
.zfh-dlist { list-style: none; margin: 0; padding: 0; }
.zfh-dlist a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who val" "sub sub"; gap: 2px 10px; padding: 11px 2px; border-bottom: 1px solid #f0ece4; text-decoration: none; color: var(--zu-ink); min-height: 56px; }
.zfh-dlist strong { grid-area: who; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zfh-dlist b { grid-area: val; font-variant-numeric: tabular-nums; }
.zfh-dlist b.is-in { color: #1f7a52; } .zfh-dlist b.is-out { color: #b3452b; }
.zfh-dlist small { grid-area: sub; color: var(--zu-muted); font-size: 13px; }

/* Install the app */
.zfh-install { display: grid; gap: 14px; }
.zfh-install-app { display: flex; gap: 14px; align-items: center; padding: 6px 0; }
.zfh-install-app img { border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.zfh-install-app strong { display: block; font-size: 17px; }
.zfh-install-app small { display: block; color: var(--zu-muted); font-size: 14px; }
.zfh-install ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; line-height: 1.45; }
.zfh-install ol[hidden], .zfh-install [data-os][hidden] { display: none; }

/* More sheet extras */
.zfh-more-row.is-accent { color: var(--zb-main) !important; }
.zfh-more-row.is-accent svg { color: var(--zb-accent); }
.zfh-more-row[hidden] { display: none; }
.zfh-more-note { margin: 6px 6px 10px; font-size: 14px; color: var(--zu-muted); background: #fbf6e3; border-radius: 10px; padding: 10px 12px; }

/* Dark mode (the app home only; Hub pages stay light) */
@media (prefers-color-scheme: dark) {
	body.zfh-app { --zu-card: #17233a; --zu-ink: #e8edf5; --zu-muted: #a3aec0; --zu-line: #2a3a58; }
	body.zfh-app .zfh-tabbar { background: rgba(14, 25, 45, .95); border-top-color: #25365a; }
	body.zfh-app .zfh-tab-btn { color: #8f9bb0 !important; }
	body.zfh-app .zfh-tab-btn.is-active { color: #fff !important; }
	body.zfh-app .zfh-tab-badge { border-color: #0e192d; }
	body.zfh-app .zfh-sheet-head { border-bottom-color: #26375a; }
	body.zfh-app .zfh-sheet-head strong, body.zfh-app .zfh-me strong { color: var(--zb-accent-bright); }
	body.zfh-app .zfh-sheet-close { background: #22324f; color: #e8edf5; }
	body.zfh-app .zfh-more-row { border-bottom-color: #22324f; color: var(--zu-ink) !important; }
	body.zfh-app .zfh-more-row.is-active { color: var(--zb-accent-bright) !important; }
	body.zfh-app .zfh-more-row:active { background: #1d2c47; }
	body.zfh-app .zfh-more-view { border-bottom-color: #22324f; }
	body.zfh-app .zfh-more-view select { background: #0f1a2e; color: var(--zu-ink); border-color: #33466b; }
	body.zfh-app .zfh-sheet-grip { background: #3a4b6c; }
	body.zfh-app .zfh-secondary { background: #15213a; color: var(--zb-accent-bright) !important; border-color: var(--zb-accent-bright); }
	body.zfh-app .zfh-textbtn { color: var(--zb-accent-bright) !important; }
	body.zfh-app .zfh-dlist a { border-bottom-color: #22324f; }
	body.zfh-app .zfh-more-note { background: #2a2a1c; }
	body.zfh-app .zfh-rform input, body.zfh-app .zfh-rform select { background: #0f1a2e; color: var(--zu-ink); border-color: #33466b; }
	body.zfh-app .zfh-photo-empty { background: #0f1a2e; border-color: #33466b; color: var(--zb-accent-bright); }
	body.zfh-app .zfh-primary { background: var(--zb-accent-bright); color: var(--zb-main-deep) !important; }
}

/* 2.0: Add a transaction choices */
.zfh-add-choices{display:grid;gap:10px}
.zfh-add-choice{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid #e3e6ee;border-radius:16px;background:#fff;text-decoration:none;color:inherit;text-align:left;cursor:pointer;min-height:64px;font:inherit;width:100%}
.zfh-add-choice svg{width:28px;height:28px;color:var(--zb-main);flex-shrink:0}
.zfh-add-choice strong{display:block;font-size:16px}
.zfh-add-choice small{display:block;color:#646970;font-size:13px;margin-top:2px}
.zfh-add-choice:hover{border-color:var(--zb-main)}

/* 2.1: Ask Rue button above the tab bar on phones; the chat opens above everything. */
:root { --ra-z: 99980; --ra-zs: 100002; --ra-c: var(--zb-main, #1E3A8A); --ra-bottom: 24px; }
@media (max-width: 899px) { :root { --ra-bottom: calc(var(--zu-tab-h) + 14px); } }
.zfh-form-msg.is-ok { color: #067647; }
.zfh-rqueue { margin: 0 0 4px; font-weight: 700; color: var(--zfh-main, #1E3A8A); }

/* 2.5: "Add transaction" in words, never a lone "+" */
.zfh-addtx-top { font-weight: 700 !important; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--zu-gold, #d4af37); color: #14213d; font: 700 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.zfh-addtx-top svg { width: 20px; height: 20px; }
@media (max-width: 899px) { .zfh-addtx-top { display: none; } }
.zfh-addtx { background: var(--zu-gold, #d4af37) !important; color: #14213d !important; border-color: transparent !important; }
@media (max-width: 899px) {
	.zfh-cam.zfh-addtx { display: none; }
	.zfh-tab-btn.zfh-tab-add { color: #14213d !important; font-size: 10.5px; white-space: nowrap; }
	.zfh-tab-btn.zfh-tab-add svg { width: 44px; height: 44px; padding: 10px; margin-top: -18px; border-radius: 14px; background: var(--zu-gold, #d4af37); box-shadow: 0 6px 16px rgba(18, 40, 79, .22); }
}

@media (max-width: 899px) { .zfh-tab-btn { font-size: 11px; letter-spacing: -.1px; white-space: nowrap; } }