/* ==========================================================================
   GRIZZLY BIR v1.0.0 — GREEN-PHOSPHOR TERMINAL THEME
   Continental ledger-room look. Pure CSS, zero external assets.
   ========================================================================== */

:root {
	--bg: #070a07;
	--bg-panel: #0b120b;
	--bg-inset: #050805;
	--green: #41ff7a;
	--green-soft: #7dffa4;
	--green-dim: #2ba854;
	--green-faint: #14331e;
	--amber: #ffb000;
	--red: #ff5544;
	--glow: 0 0 6px rgba(65, 255, 122, 0.35);
	--glow-strong: 0 0 10px rgba(65, 255, 122, 0.55);
	--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

* {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	/* Bottom padding clears the fixed status bar plus any Android /
	   iOS navigation area so no content is ever hidden behind it. */
	padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px)) 0;
	background: var(--bg);
	color: var(--green);
	font-family: var(--mono);
	font-size: 15px;
	line-height: 1.5;
	text-shadow: var(--glow);
	min-height: 100vh;
}

.scanlines {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.16) 0px,
		rgba(0, 0, 0, 0.16) 1px,
		transparent 1px,
		transparent 3px
	);
	z-index: 9000;
}

/* ---------- HEADER ---------- */

.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--green-faint);
	background: var(--bg-panel);
	box-shadow: inset 0 -18px 30px rgba(0, 0, 0, 0.45);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.brand-logo {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	filter: drop-shadow(0 0 6px rgba(65, 255, 122, 0.35));
}

.brand-name {
	margin: 0;
	font-size: 22px;
	letter-spacing: 4px;
	font-weight: 700;
	color: var(--green-soft);
	text-shadow: var(--glow-strong);
}

.brand-tag {
	margin: 2px 0 0 0;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--green-dim);
}

.header-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.install-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#installBtn[hidden] {
	display: none;
}

.header-meta {
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--green-dim);
	border: 1px solid var(--green-faint);
	padding: 4px 10px;
	border-radius: 2px;
}

/* ---------- NAV ---------- */

.nav-toggle {
	display: block;
	width: 100%;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 2px;
	text-align: left;
	background: var(--bg-inset);
	color: var(--green);
	border: none;
	border-bottom: 1px solid var(--green-faint);
	padding: 12px 16px;
	min-height: 44px;
	cursor: pointer;
	text-shadow: var(--glow);
}

.nav-toggle:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: -2px;
}

.app-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--green-faint);
	background: var(--bg-inset);
}

.app-nav button {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 1px;
	background: transparent;
	color: var(--green-dim);
	border: 1px solid var(--green-faint);
	padding: 10px 12px;
	min-height: 44px;
	border-radius: 2px;
	cursor: pointer;
	text-shadow: var(--glow);
}

.app-nav button:hover {
	color: var(--green);
	border-color: var(--green-dim);
}

.app-nav button.active {
	color: #05140a;
	background: var(--green);
	border-color: var(--green);
	text-shadow: none;
	font-weight: 700;
	box-shadow: var(--glow-strong);
}

/* ---------- LAYOUT / PANELS ---------- */

.view {
	padding: 16px;
	max-width: 1120px;
	margin: 0 auto;
}

.view-inner {
	display: block;
}

.panel {
	border: 1px solid var(--green-faint);
	background: var(--bg-panel);
	border-radius: 4px;
	margin: 0 0 18px 0;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.panel-title {
	margin: 0;
	padding: 10px 14px;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--green-soft);
	background: var(--bg-inset);
	border-bottom: 1px solid var(--green-faint);
	display: flex;
	align-items: center;
	gap: 8px;
}

.panel-title::before {
	content: "\2593\2592\2591 ";
	color: var(--green-dim);
}

.panel-title-text {
	flex: 1 1 auto;
}

.panel-body {
	padding: 14px;
}

.empty {
	color: var(--green-dim);
	letter-spacing: 1px;
}

.fatal {
	color: var(--red);
	text-shadow: 0 0 6px rgba(255, 85, 68, 0.4);
	padding: 20px;
	letter-spacing: 1px;
}

/* ---------- FORMS ---------- */

.form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.field-label {
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--green-dim);
}

.input {
	font-family: var(--mono);
	font-size: 15px;
	color: var(--green);
	background: var(--bg-inset);
	border: 1px solid var(--green-faint);
	border-radius: 2px;
	padding: 10px 12px;
	min-height: 44px;
	width: 100%;
	text-shadow: var(--glow);
}

.input::placeholder {
	color: var(--green-faint);
}

.input:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: var(--glow);
}

.input[aria-invalid="true"] {
	border-color: var(--red);
}

.input.num {
	text-align: right;
}

select.input {
	appearance: auto;
}

.field-error {
	min-height: 16px;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--red);
	text-shadow: 0 0 6px rgba(255, 85, 68, 0.4);
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* A long field label wraps to more lines than its neighbours, which
   pushed that column's input out of line with the rest of the row
   (for example CREDITABLE WITHHOLDING TAX in STEP 1). Reserve a
   two-line label box so every label occupies the same height, and
   bottom-anchor the label so the inputs still line up even if a label
   ever needs a third line. */
.form-grid > .field > .field-label,
.sheet-controls > .field > .field-label {
	min-height: 33px;
	margin-top: auto;
}

/* ---------- BUTTONS ---------- */

.btn {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: 2px;
	background: transparent;
	color: var(--green);
	border: 1px solid var(--green-dim);
	padding: 10px 16px;
	min-height: 44px;
	border-radius: 2px;
	cursor: pointer;
	text-shadow: var(--glow);
}

.btn:hover {
	background: var(--green-faint);
	box-shadow: var(--glow);
}

.btn:active {
	transform: translateY(1px);
}

.btn-ghost {
	border-color: var(--green-faint);
	color: var(--green-dim);
}

.btn-amber {
	color: var(--amber);
	border-color: var(--amber);
	text-shadow: 0 0 6px rgba(255, 176, 0, 0.4);
}

.btn-amber:hover {
	background: rgba(255, 176, 0, 0.12);
	box-shadow: 0 0 10px rgba(255, 176, 0, 0.35);
}

.btn-red {
	color: var(--red);
	border-color: rgba(255, 85, 68, 0.5);
	text-shadow: 0 0 6px rgba(255, 85, 68, 0.4);
}

.btn-red:hover {
	background: rgba(255, 85, 68, 0.1);
	box-shadow: 0 0 10px rgba(255, 85, 68, 0.3);
}

.btn-mini {
	font-size: 11px;
	padding: 6px 10px;
	min-height: 36px;
	letter-spacing: 1px;
}

.btn-toggle.active {
	background: var(--green);
	color: #05140a;
	text-shadow: none;
	font-weight: 700;
}

/* ---------- HELP AFFORDANCE ---------- */

.help-dot {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1;
	width: 30px;
	height: 30px;
	min-width: 30px;
	padding: 0;
	background: transparent;
	color: var(--green-dim);
	border: 1px solid var(--green-faint);
	border-radius: 50%;
	cursor: pointer;
	text-shadow: var(--glow);
}

.help-dot:hover {
	color: var(--green);
	border-color: var(--green-dim);
	box-shadow: var(--glow);
}

:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

/* ---------- TABLES ---------- */

.table-block {
	margin: 0 0 18px 0;
}

.table-title {
	margin: 0 0 8px 0;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--green-dim);
}

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--green-faint);
	border-radius: 2px;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	white-space: nowrap;
}

.data-table th {
	text-align: left;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--green-dim);
	padding: 8px 10px;
	border-bottom: 1px solid var(--green-faint);
	background: var(--bg-inset);
}

.data-table td {
	padding: 8px 10px;
	border-bottom: 1px solid rgba(20, 51, 30, 0.6);
}

.data-table th.num,
.data-table td.num {
	text-align: right;
}

.row-actions {
	white-space: nowrap;
}

.row-actions .btn {
	margin: 2px 2px;
}

.row-total td {
	border-top: 1px solid var(--green-dim);
	border-bottom: none;
	color: var(--green-soft);
	font-weight: 700;
	background: rgba(20, 51, 30, 0.25);
}

.row-group td {
	color: var(--green-soft);
	letter-spacing: 2px;
	font-size: 11px;
	background: var(--bg-inset);
	border-bottom: 1px solid var(--green-faint);
}

.row-subtotal td {
	color: var(--green-soft);
	background: rgba(20, 51, 30, 0.2);
	border-bottom: 1px solid var(--green-faint);
}

.row-grand td {
	color: #05140a;
	background: var(--green);
	text-shadow: none;
	font-weight: 700;
}

.badge {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 1px;
	border: 1px solid var(--green-faint);
	border-radius: 2px;
	padding: 2px 6px;
	color: var(--green-dim);
}

.badge-rcpt {
	color: var(--green);
	border-color: var(--green-dim);
}

.badge-dsmt {
	color: var(--amber);
	border-color: rgba(255, 176, 0, 0.5);
	text-shadow: 0 0 6px rgba(255, 176, 0, 0.35);
}

/* ---------- RECONCILIATION ---------- */

.recon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 2px;
	letter-spacing: 1px;
	font-size: 13px;
	margin: 0 0 14px 0;
}

.recon-ok {
	border: 1px solid var(--green-dim);
	background: rgba(65, 255, 122, 0.07);
	color: var(--green);
}

.recon-warn {
	border: 1px solid var(--amber);
	background: rgba(255, 176, 0, 0.08);
	color: var(--amber);
	text-shadow: 0 0 6px rgba(255, 176, 0, 0.4);
}

/* ---------- CHEAT SHEETS ---------- */

.subnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px 0;
}

.sheet-controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 14px 0;
}

.sheet {
	border: 1px solid var(--green-dim);
	border-radius: 4px;
	background: var(--bg-inset);
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), var(--glow);
	overflow: hidden;
	margin: 0 0 14px 0;
}

.sheet-head {
	padding: 12px 14px;
	border-bottom: 1px solid var(--green-faint);
	background: var(--bg-panel);
}

.sheet-title {
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--green-soft);
	text-shadow: var(--glow-strong);
}

.sheet-sub {
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--green-dim);
	margin-top: 4px;
}

.sheet-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.sheet-table td {
	padding: 9px 12px;
	border-bottom: 1px solid rgba(20, 51, 30, 0.6);
	vertical-align: top;
}

.item-no {
	width: 56px;
	color: var(--green-dim);
	letter-spacing: 1px;
	white-space: nowrap;
}

.item-label {
	color: var(--green);
}

.item-val {
	text-align: right;
	white-space: nowrap;
	color: var(--green-soft);
}

.sheet-sub .item-label {
	padding-left: 18px;
	color: var(--green-dim);
}

.sheet-hl td {
	background: rgba(65, 255, 122, 0.08);
	border-top: 1px solid var(--green-dim);
	border-bottom: 1px solid var(--green-dim);
}

.sheet-hl .item-label,
.sheet-hl .item-val {
	color: var(--green-soft);
	font-weight: 700;
	text-shadow: var(--glow-strong);
}

.sheet-note {
	font-size: 12px;
	letter-spacing: 1px;
	margin: 0 0 14px 0;
	padding: 8px 12px;
	border: 1px dashed var(--green-faint);
	border-radius: 2px;
	color: var(--green-dim);
}

.sheet-note.warn {
	color: var(--amber);
	border-color: rgba(255, 176, 0, 0.5);
	text-shadow: 0 0 6px rgba(255, 176, 0, 0.35);
}

/* ---------- HELP VIEW ---------- */

.help-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.help-section {
	border-top: 1px solid var(--green-faint);
	padding: 14px 0 4px 0;
}

.help-section:first-child {
	border-top: none;
	padding-top: 0;
}

.help-title {
	margin: 0 0 8px 0;
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--green-soft);
}

.help-text {
	margin: 0 0 8px 0;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--green);
}

/* ---------- DISCLAIMERS ---------- */

.disclaimer {
	border: 1px dashed var(--green-faint);
	border-radius: 2px;
	padding: 10px 12px;
	margin: 0 0 18px 0;
}

.disclaimer p {
	margin: 4px 0;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--green-dim);
}

/* ---------- MODAL ---------- */

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(3, 6, 3, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 10000;
}

.modal {
	background: var(--bg-panel);
	border: 1px solid var(--amber);
	border-radius: 4px;
	box-shadow: 0 0 24px rgba(255, 176, 0, 0.25);
	max-width: 480px;
	width: 100%;
	padding: 18px;
}

.modal-title {
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--amber);
	text-shadow: 0 0 8px rgba(255, 176, 0, 0.5);
	margin: 0 0 10px 0;
}

.modal-msg {
	font-size: 14px;
	color: var(--green-soft);
	margin: 0 0 16px 0;
}

.modal-list {
	margin: 0 0 16px 0;
	padding-left: 18px;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--green-soft);
}

.modal-list li {
	margin: 0 0 6px 0;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---------- TOAST ---------- */

.toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(78px + env(safe-area-inset-bottom, 0px));
	z-index: 9500;
	padding: 0;
	font-size: 13px;
	letter-spacing: 1px;
	pointer-events: none;
}

.toast:empty {
	display: none;
}

.toast-ok,
.toast-warn,
.toast-err {
	padding: 10px 14px;
	border-radius: 2px;
	background: var(--bg-panel);
}

.toast-ok {
	border: 1px solid var(--green-dim);
	color: var(--green);
}

.toast-warn {
	border: 1px solid var(--amber);
	color: var(--amber);
}

.toast-err {
	border: 1px solid var(--red);
	color: var(--red);
}

/* ---------- STATUS BAR (FIXED FOOTER) ---------- */

.status-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8500;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: space-between;
	/* env() keeps the bar clear of Android gesture / button navigation
	   bars and the iOS home indicator. */
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
	border-top: 1px solid var(--green-faint);
	background: var(--bg-panel);
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--green-dim);
}

/* ---------- FILE INPUT ---------- */

.file-input {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--green);
	width: 100%;
}

.file-input::file-selector-button {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 2px;
	background: transparent;
	color: var(--green);
	border: 1px solid var(--green-dim);
	padding: 10px 16px;
	min-height: 44px;
	border-radius: 2px;
	cursor: pointer;
	margin-right: 10px;
}

.hint {
	font-size: 12px;
	letter-spacing: 1px;
	color: var(--green-dim);
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 599px) {
	.app-nav {
		display: none;
	}

	.app-nav.nav-open {
		display: flex;
	}
}

@media (min-width: 600px) {
	.nav-toggle {
		display: none;
	}

	.app-nav {
		display: flex;
	}

	.form-grid {
		grid-template-columns: 1fr 1fr;
	}

	.form-actions {
		grid-column: 1 / -1;
	}

	.sheet-controls {
		grid-template-columns: 1fr 1fr;
	}

	.brand-name {
		font-size: 26px;
	}
}

@media (min-width: 1024px) {
	.view {
		padding: 24px 16px;
	}

	.form-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.sheet-controls {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* ---------- PRINT (book views / sheets) ---------- */

@media print {
	.scanlines,
	.app-nav,
	.nav-toggle,
	.help-dot,
	.install-wrap,
	.status-bar,
	.toast,
	.form-actions,
	.row-actions,
	.subnav,
	.sheet-controls {
		display: none;
	}

	body {
		background: #ffffff;
		color: #000000;
		text-shadow: none;
		padding-bottom: 0;
	}

	.panel,
	.sheet,
	.table-scroll {
		border-color: #000000;
		box-shadow: none;
	}

	.data-table th,
	.data-table td,
	.sheet-table td {
		color: #000000;
		border-color: #999999;
		text-shadow: none;
	}
}