:root {
	--border: 1px solid var(--color-tableBorder);
}

html,
body {
	overscroll-behavior: none;
}

/* ── Privacy mode font ─────────────────────────────────────────────── */
.abt-privacy-enabled .abt-privacy-number {
	font-family: "Redacted Script", cursive !important;
	filter: none;
	transition: font-family 0.15s;
}

.abt-privacy-enabled .abt-privacy-number:hover {
	font-family: inherit !important;
	filter: none;
}

/* Actual's mobile view (under 512px) is a different component tree these anchors don't describe;
   keep in step with DESKTOP_QUERY in src/lib/utilities/pages.ts. */
@media (min-width: 512px) {
	/* Page frame. The side panel marks Actual's content grid on every page (side-panel/index.ts);
	   its children are the header, toasts, the bank-sync banner, then the page. The header is
	   marked on its own (native-hooks.ts), since the grid is only known once a page renders. */
	[data-abt-header] {
		position: sticky;
		height: 3.75rem;
		flex-shrink: 0;
		padding: 1.5rem 1rem;
		background-color: var(--color-pageBackground);
	}

	[data-abt-content-grid] > div:nth-child(3) {
		z-index: 1000 !important;
	}

	/* A variable so the month header can cancel it whenever it lands (budget-month-header). */
	[data-abt-content-grid] > div:nth-child(4) {
		--abt-page-pad-top: 1.5rem;
		padding-top: var(--abt-page-pad-top);
	}

	/* Every page's content sits the budget page's distance from the sidebar, in from Actual's 20px. */
	[data-abt-page="accounts"] > div:first-of-type {
		padding-inline: var(--abt-page-gutter, 13px) !important;
	}

	:is(
			[data-abt-page="payees"],
			[data-abt-page="rules"],
			[data-abt-page="bank-sync"],
			[data-abt-page="tags"],
			[data-abt-page="settings"],
			[data-abt-page="schedules"]
		)
		> div:first-of-type {
		margin-inline: var(--abt-page-gutter, 13px) !important;
	}

	:is(
			[data-abt-page="payees"],
			[data-abt-page="rules"],
			[data-abt-page="bank-sync"],
			[data-abt-page="tags"],
			[data-abt-page="settings"],
			[data-abt-page="schedules"]
		)
		> div:nth-of-type(2) {
		padding-inline: var(--abt-page-gutter, 13px) !important;
	}

	/* Dashboards only (marked in native-hooks); a single report keeps Actual's own layout. */
	[data-abt-reports-dashboard] > div:not([data-abt-calendar]) > div:first-of-type {
		padding-right: var(--abt-page-gutter, 13px) !important;
	}

	[data-abt-reports-dashboard]
		> div:not([data-abt-calendar])
		> div:first-of-type
		> div:first-of-type {
		margin-left: var(--abt-page-gutter, 13px) !important;
	}

	/* The widget grid adds 10px of its own around each widget. */
	[data-abt-reports-dashboard] > div:not([data-abt-calendar]) > div:nth-of-type(2) {
		padding-inline: calc(var(--abt-page-gutter, 13px) - 10px) !important;
	}

	/* Space under list and settings page titles; the title has no hook, the page body after it does. */
	[data-abt-content-grid] > div:nth-child(4) > div + [role="main"] {
		margin-top: 0.5rem;
	}

	/* Reports wraps the page container one level deeper. */
	[data-abt-content-grid] > div[data-testid="reports-page"] {
		padding-top: 0;
	}

	[data-abt-reports-dashboard] > div:first-child {
		padding-top: 1.5rem;
	}

	/* /budget -- budget cards */
	[data-testid="budget-summary"] {
		box-shadow: none;
		border-radius: var(--border-radius);
	}

	/* /budget -- table header */
	[data-testid="budget-totals"] {
		border-radius: var(--border-radius) var(--border-radius) 0px 0px;
		border-bottom-width: 0px;
		box-shadow: none;
		overflow: hidden;
	}

	/* /budget -- table body */
	[data-testid="budget-table-scroll-container"] > div > div {
		box-shadow: none;
		border-radius: 0 0 var(--border-radius) var(--border-radius);
		margin-bottom: 1rem;
	}

	/* Actual already insets the cards and table 13px; match it above and between them. */
	[data-testid="budget-summary"] {
		flex: 1 1 0%;
		overflow: hidden;
		margin: 13px 0;
	}

	/* reports borders */
	.react-grid-item {
		border-radius: var(--border-radius);
	}

	/* The widget's card paints square corners; clip it inside the item's 1px border. */
	.react-grid-item > :first-child {
		border-radius: max(0px, calc(var(--border-radius) - 1px));
		overflow: hidden;
	}

	.recharts-surface {
		border-bottom-left-radius: var(--border-radius);
		border-bottom-right-radius: var(--border-radius);
	}

	/* /settings -- card gap */
	[data-testid="settings"]:not([data-abt-settings-grouped]) {
		gap: 1.25rem;
	}

	/* /settings -- cards (the last child is the advanced-settings toggle) */
	[data-testid="settings"]:not([data-abt-settings-grouped]) > div:not(:last-child) {
		border-radius: var(--border-radius);
		border: var(--border);
	}

	/* /settings/* -- Actual borders the card under each heading itself */
	[data-abt-settings-grouped] > div > div:last-child {
		border-radius: var(--border-radius);
	}

	[data-abt-settings-nav] {
		width: 200px !important;
	}

	/* /settings -- ABT's tab, styled as Actual's own nav links */
	[data-abt-tweaks-link] {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px;
		border-radius: 4px;
		font-size: 13px;
		font-weight: 500;
		text-decoration: none;
		color: var(--color-settingsNavItemText);
	}

	[data-abt-tweaks-link]:hover {
		background-color: var(--color-settingsNavItemBackgroundHover);
	}

	[data-abt-tweaks-link] img {
		width: 15px;
		height: 15px;
		flex-shrink: 0;
	}

	[data-abt-tweaks-link] .abt-tweaks-chevron {
		display: none;
	}

	[data-abt-tweaks-link][aria-current="page"],
	[data-abt-tweaks-link][aria-current="page"]:hover {
		font-weight: 600;
		color: var(--color-settingsNavItemTextSelected);
		background-color: var(--color-settingsNavItemBackgroundSelected);
	}

	/* The route stays on General underneath, so its link shouldn't look selected too */
	[data-abt-tweaks-open] > a[aria-current="page"]:not([data-abt-tweaks-link]) {
		font-weight: 500 !important;
		color: var(--color-settingsNavItemText) !important;
		background-color: transparent !important;
	}

	[data-abt-tweaks-open] > a[aria-current="page"]:not([data-abt-tweaks-link]):hover {
		background-color: var(--color-settingsNavItemBackgroundHover) !important;
	}

	[data-abt-tweaks-pane] > :not([data-abt-tweaks-host]) {
		display: none !important;
	}

	/* The panel's pinned toolbar inherits this background */
	[data-abt-tweaks-host] {
		max-width: 640px;
		width: 100%;
		padding-bottom: var(--abt-space-6);
		background: var(--color-pageBackground);
	}

	/* List-page tables and search boxes, marked by core/native-hooks.ts */
	[data-abt-table] {
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
	}

	/* /bank-sync -- provider cards and the account table, which is bordered on all sides */
	[data-abt-content-grid] [data-testid^="bank-sync-provider-"],
	[data-abt-content-grid] [data-abt-card-table] {
		border-radius: var(--border-radius);
	}

	/* Tables in modals (e.g. a schedule's matching transactions, found schedules) */
	[role="dialog"] [data-testid="table"],
	[role="dialog"] [data-abt-card-table] {
		border-radius: calc(var(--border-radius) / 1.5);
	}

	[data-abt-search] {
		box-sizing: border-box;
		height: var(--abt-control-h);
		padding: 0 var(--abt-space-3) !important;
		gap: var(--abt-space-3);
		border: 1px solid var(--abt-line) !important;
		border-radius: var(--abt-radius) !important;
		background: var(--abt-fill) !important;
		box-shadow: none !important;
		color: var(--abt-muted);
		transition:
			border-color 0.1s,
			box-shadow 0.1s;
	}

	[data-abt-search]:focus-within {
		border-color: var(--abt-accent-4) !important;
		box-shadow: 0 0 0 3px var(--abt-accent-2) !important;
	}

	[data-abt-search] input {
		padding: 0 !important;
		background: transparent !important;
		font-size: var(--abt-text-base) !important;
	}

	/* select checkbox padding */
	[data-testid="select"] {
		padding-inline: 1rem;
	}

	/* textareas */
	textarea {
		color: var(--color-formInputText);
		border-radius: calc(var(--border-radius) / 1.5);
		border: var(--border);
		/* background-color: var(--ctp-mantle); */
		padding: 0.25rem;
		height: 2.35rem;
	}

	/* consistent popups/modals */
	[role="tooltip"],
	[role="dialog"],
	[data-placement]:not(:has([role="dialog"])) {
		box-shadow: none;
		border-radius: var(--border-radius);
		border: var(--border) !important;
		overflow: auto;
	}

	[data-placement]:has([role="dialog"]) {
		border-radius: var(--border-radius);
		border-width: 0px;
	}

	/* reports */
	[id="custom-report-content"] {
		border-top-left-radius: var(--border-radius);
		border-left: var(--border);
		border-top: var(--border);
	}

	/* charts */
	.recharts-cartesian-axis-line,
	.recharts-cartesian-grid-vertical line,
	.recharts-cartesian-grid-horizontal line {
		stroke: #a3aac5;
	}

	.recharts-tooltip-wrapper {
		border-radius: var(--border-radius);
		border: var(--border);
		overflow: hidden;
	}

	/* green balance */
	[data-testid="balance"] {
		color: var(--color-noticeTextLight);
	}

	/* red negative balance */
	[data-testid="balance"][data-cellname^="-"] {
		color: var(--color-errorText);
		font-weight: bold;
	}

	/* svg icon in button */
	[data-testid="category-month-spent"] * {
		flex-shrink: 0;
	}

	.abt-side-drawer-sidebar {
		border-top: var(--border);
		border-top-left-radius: var(--border-radius);
	}

	[data-testid="spent"] svg {
		color: var(--color-pageTextLight) !important;
	}
}

/* Actual's mobile Settings list and ABT's page in it, styled as Actual's own rows */
@media not all and (min-width: 512px) {
	[data-abt-tweaks-link] {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 40px;
		padding: 0 16px;
		border-top: 1px solid var(--color-settingsCardBorder);
		font-size: 15px;
		text-decoration: none;
		color: var(--color-settingsNavItemText);
	}

	[data-abt-tweaks-link] img {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	[data-abt-tweaks-link] > span:nth-of-type(1) {
		flex: 1;
	}

	[data-abt-tweaks-link] .abt-tweaks-chevron {
		display: flex;
		opacity: 0.5;
	}

	[data-abt-tweaks-hidden] {
		display: none !important;
	}

	/* The route is General's; the header names ABT's page instead, drawn over the hidden title so
	   it takes whatever font the header gives it */
	[data-abt-tweaks-title] {
		position: relative;
		-webkit-text-fill-color: transparent;
	}

	[data-abt-tweaks-title]::after {
		content: "Tweaks";
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-text-fill-color: currentColor;
	}

	/* Clear of Actual's tab bar, as its own settings pages are; the pinned toolbar inherits the
	   background */
	[data-abt-tweaks-host] {
		margin-top: 10px;
		padding-bottom: 85px;
		background: var(--color-mobilePageBackground);
	}
}