/* =============================================================
   Financial Tracker — TUI Stylesheet
   Location: frontend/style.css

   Rules:
   - All colors via CSS variables only. Never hardcode hex in HTML or JS.
   - No border-radius, no box-shadow, no gradients, no transitions.
   - No hover effects. Keyboard-only interaction model.
   - All structural borders use Unicode box-drawing characters in markup.
   - Fixed monospace font throughout. No fluid sizing.
   ============================================================= */

/* -------------------------------------------------------------
   VARIABLES
   ------------------------------------------------------------- */
:root {
	/* Core palette */
	--bg: #0a0a0a;
	--fg: #ffffff; /* was #f0f0f0 — full white */
	--fg-dim: #b0b0b0; /* was #909090 — much lighter gray */
	--fg-bright: #ffffff;
	--accent: #00e5a0;
	--accent-dim: #007a55;

	/* Selection / active row — inverted video */
	--select-bg: #e0e0e0;
	--select-fg: #0a0a0a;

	/* Panel borders */
	--border: #666666; /* was #444444 — clearly visible against black */
	--border-focus: #00e5a0;

	/* Status indicators */
	--positive: #00e5a0; /* income, surplus */
	--negative: #ff4d4d; /* expense, deficit */
	--neutral: #e0e0e0; /* transfer, zero */
	--warning: #ffb000; /* budget near limit */

	/* Layout */
	--font: "Courier New", Consolas, "Lucida Console", monospace;
	--font-size: 16px;
	--line-height: 1.4;
	--char-width: 9.6px; /* approximate; used for column calculations */

	/* Fixed chrome heights */
	--status-bar-height: 1.4em;
	--key-bar-height: 1.4em;
}

/* -------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	width: 100%;
	overflow: hidden; /* no page scroll — app manages its own scroll */
}

body {
	background-color: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: var(--line-height);
	cursor: default; /* no text cursor on non-input elements */
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: unset;
	/* Disable font smoothing for authentic CRT character rendering */
}

/* Prevent text selection except in inputs */
body,
.tui-panel,
.tui-row {
	-webkit-user-select: none;
	user-select: none;
}

input,
textarea {
	-webkit-user-select: text;
	user-select: text;
}

/* -------------------------------------------------------------
   THREE-ZONE LAYOUT
   ------------------------------------------------------------- */
#app {
	display: grid;
	grid-template-rows: var(--status-bar-height) 1fr var(--key-bar-height);
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

/* LOGIN OVERLAY */
#login-overlay {
	position: fixed;
	inset: 0;
	background-color: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
}

#login-overlay.hidden {
	display: none !important;
}

#login-box {
	display: flex;
	flex-direction: column;
	width: fit-content;
}

#login-form {
	padding: 1em 2ch;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

#login-form .tui-label {
	min-width: 10ch;
	text-align: right;
}

#login-form .tui-input {
	width: 24ch;
}

#login-form .btn-submit {
	width: 12ch;
}

/* -------------------------------------------------------------
   STATUS BAR  (top chrome)
   ------------------------------------------------------------- */
#status-bar {
	background-color: var(--accent);
	color: var(--bg);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1ch;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 0;
}

#status-bar .status-left {
	flex: 1;
}
#status-bar .status-center {
	flex: 1;
	text-align: center;
}
#status-bar .status-right {
	flex: 1;
	text-align: right;
}

#status-mode:focus {
	outline: 2px solid var(--bg);
	outline-offset: 2px;
	cursor: pointer;
}

/* -------------------------------------------------------------
   CONTENT AREA  (main workspace)
   ------------------------------------------------------------- */
#content {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0.5ch;
	gap: 0.5ch;
}

/* -------------------------------------------------------------
   KEY BAR  (bottom chrome)
   ------------------------------------------------------------- */
#key-bar {
	background-color: var(--bg);
	color: var(--fg-dim);
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding: 0 1ch;
	gap: 2ch;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 0;
}

.key-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4ch;
}

.key-label {
	color: var(--bg);
	background-color: var(--fg-dim);
	padding: 0 0.4ch;
	font-weight: 700;
	font-size: 0.85em;
}

.key-action {
	color: var(--fg-dim);
	font-size: 0.85em;
}

/* -------------------------------------------------------------
   PANELS
   ------------------------------------------------------------- */
.tui-panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	padding: 0 0.5ch;
}

.tui-panel:focus {
	outline: none;
}

/* Panel title drawn as part of the box — see index.html for markup pattern */
.tui-panel-title {
	color: var(--accent);
	font-weight: 700;
	white-space: nowrap;
}

.tui-panel.inactive .tui-panel-title {
	color: var(--fg-dim);
}

/* -------------------------------------------------------------
   TABLES / LISTS
   ------------------------------------------------------------- */
.tui-table {
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
}

/* Column header row */
.tui-thead {
	color: var(--fg-dim);
	font-weight: 400;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
	overflow: hidden;
	padding: 0 1ch;
}

/* Data rows */
.tui-row {
	white-space: nowrap;
	overflow: hidden;
	color: var(--fg);
	cursor: default;
	display: block;
	width: 100%;
}

/* Selected / active row — inverted video */
.tui-row.selected {
	background-color: var(--select-bg);
	color: var(--select-fg);
}

.tui-row.selected .dimmed {
	color: var(--select-fg);
}

.tui-row.selected .amount-positive {
	color: var(--select-fg);
}
.tui-row.selected .amount-negative {
	color: var(--select-fg);
}

/* Dimmed rows (e.g. future-dated transactions) */
.tui-row.dimmed {
	color: var(--fg-dim);
}

/* -------------------------------------------------------------
   COLUMN CELLS
   All columns are fixed-width spans. Widths set inline or via
   utility classes. Text always truncates with ellipsis.
   ------------------------------------------------------------- */
.tui-cell {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}

/* Column width utilities (in character units) */
.col-4 {
	width: 4ch;
}
.col-6 {
	width: 6ch;
}
.col-8 {
	width: 8ch;
}
.col-10 {
	width: 10ch;
}
.col-12 {
	width: 12ch;
}
.col-16 {
	width: 16ch;
}
.col-20 {
	width: 20ch;
}
.col-24 {
	width: 24ch;
}
.col-32 {
	width: 32ch;
}
.col-flex {
	flex: 1;
} /* takes remaining width */

/* Right-align numeric columns */
.col-right {
	text-align: right;
}

/* -------------------------------------------------------------
   AMOUNT FORMATTING
   ------------------------------------------------------------- */
.amount-positive {
	color: var(--positive);
}
.amount-negative {
	color: var(--negative);
}
.amount-neutral {
	color: var(--neutral);
}
.amount-warning {
	color: var(--warning);
}

/* -------------------------------------------------------------
   FORMS & INPUT FIELDS
   ------------------------------------------------------------- */
.tui-form {
	display: flex;
	flex-direction: column;
	gap: 1em;
	padding: 1ch 2ch;
}

.tui-field {
	display: flex;
	align-items: baseline;
	gap: 1ch;
}

.tui-label {
	color: var(--fg-dim);
	min-width: 16ch;
	flex-shrink: 0;
	text-align: right;
}

.tui-input {
	background-color: var(--bg);
	color: var(--fg);
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: var(--line-height);
	outline: none;
	padding: 0 0.5ch;
	width: 32ch;
	caret-color: var(--accent);
}

.tui-input:focus {
	border-bottom-color: var(--accent);
	color: var(--fg-bright);
}

.tui-input::placeholder {
	color: var(--fg-dim);
}

/* Select dropdowns — styled to match inputs */
.tui-select {
	background-color: var(--bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23b0b0b0' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5ch center;
	color: var(--fg);
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: var(--line-height);
	outline: none;
	padding: 0 0.5ch;
	padding-right: 2ch;
	width: 32ch;
	-webkit-appearance: none;
	appearance: none;
	cursor: default;
}

.tui-select:focus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%2300e5a0' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E");
	border-bottom-color: var(--accent);
	color: var(--fg-bright);
}

/* Option styling (limited browser support — best effort) */
.tui-select option {
	background-color: var(--bg);
	color: var(--fg);
}

/* -------------------------------------------------------------
   MODAL / OVERLAY
   ------------------------------------------------------------- */
.tui-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.tui-modal {
	background-color: var(--bg);
	border: 1px solid var(--border-focus);
	padding: 1em 2ch;
	min-width: 40ch;
	max-width: 80ch;
}

.tui-modal-title {
	color: var(--accent);
	font-weight: 700;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.25em;
}

/* -------------------------------------------------------------
   NOTIFICATIONS / STATUS MESSAGES
   ------------------------------------------------------------- */
.tui-message {
	padding: 0.25em 1ch;
	font-size: 0.9em;
}

.tui-message.success {
	color: var(--positive);
}
.tui-message.error {
	color: var(--negative);
}
.tui-message.info {
	color: var(--fg-dim);
}
.tui-message.warning {
	color: var(--warning);
}

/* -------------------------------------------------------------
   SCROLLBAR — minimal, dark
   ------------------------------------------------------------- */
::-webkit-scrollbar {
	width: 1ch;
	background: var(--bg);
}

::-webkit-scrollbar-thumb {
	background: var(--border);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--fg-dim);
}

/* Firefox */
@supports (scrollbar-width: thin) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--border) var(--bg);
	}
}

/* -------------------------------------------------------------
   UTILITY
   ------------------------------------------------------------- */
.hidden {
	display: none !important;
}
.dimmed {
	color: var(--fg-dim);
}
.bright {
	color: var(--fg-bright);
}
.accented {
	color: var(--accent);
}
.bold {
	font-weight: 700;
}

/* Horizontal rule — drawn with characters in markup, but this
   class handles the rare case of a CSS-only divider */
.tui-rule {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0;
}

/* Screen-reader only — for any minimal accessibility labels */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tui-modal button:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Box drawing pre tags */
pre.tui-box {
	color: var(--border);
	margin: 0;
}

pre.tui-box-rule {
	color: var(--border);
	margin: 0;
	padding: 0 1ch;
}

/* Panel row containers */
.panel-row {
	display: flex;
	height: 50%;
}

.panel-row-full {
	display: flex;
	height: 100%;
}

/* Panel size variants */
.panel-fill {
	flex: 1;
}

.panel-sidebar {
	width: 26ch;
	flex-shrink: 0;
}

/* Summary body padding */
.summary-body {
	padding: 0 1ch;
}

/* Divider glyph color in table headers */
.tui-divider {
	color: var(--border);
}

/* Filter form layout */
.filter-controls {
	padding: 0.5em 1ch;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.filter-control {
	width: 20ch;
}

/* Modal spacing helpers */
.modal-message-spaced {
	margin-top: 1em;
}

.modal-message-spaced-half {
	margin-top: 0.5em;
}

.tui-field-actions {
	margin-top: 0.5em;
}

.field-note {
	margin-left: 1ch;
	color: var(--fg-dim);
	font-size: 0.85em;
}

.required-mark {
	color: var(--negative);
	margin-left: 0.25ch;
}

.form-hint {
	padding-left: 2ch;
	color: var(--fg-dim);
	font-size: 0.85em;
}

.small-text {
	font-size: 0.85em;
}

.row-padded {
	padding: 0.5em 1ch;
}

.btn-submit {
	width: 16ch;
	cursor: pointer;
	background: var(--accent);
	color: var(--bg);
	font-weight: 700;
	border: none;
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: var(--line-height);
	padding: 0 0.5ch;
}

.btn-submit:focus {
	outline: 2px solid var(--fg-bright);
	outline-offset: 2px;
}

.btn-cancel {
	width: 10ch;
	cursor: pointer;
	border: 1px solid var(--border);
	color: var(--fg-dim);
	font-weight: 400;
	background: var(--bg);
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: var(--line-height);
	padding: 0 0.5ch;
}

.btn-cancel:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	color: var(--fg);
	border-color: var(--accent);
}

/* Mobile overrides for panel rows */
@media (max-width: 768px) {
	:root {
		--font-size: 13px; /* slightly smaller on mobile */
	}

	.panel-row,
	.panel-row-full {
		flex-direction: column;
		height: auto !important;
	}

	.panel-sidebar {
		width: 100% !important;
		max-height: 14em;
	}

	.panel-fill {
		max-height: 50vh;
	}

	/* Stack all side-by-side panel rows vertically */
	.screen > div {
		flex-direction: column;
		height: auto !important;
		overflow-y: auto;
	}

	/* Each panel takes full width and auto height */
	.tui-panel {
		width: 100% !important;
		flex: none !important;
		height: auto !important;
		min-height: 8em;
		max-height: 40vh;
		overflow-x: hidden;
	}

	/* Content area becomes scrollable */
	#content {
		overflow-y: auto;
		height: auto;
	}

	/* App takes at least full screen height */
	#app {
		min-height: 100vh;
		height: auto;
	}

	/* Key bar wraps on mobile */
	#key-bar {
		flex-wrap: wrap;
		height: auto;
		padding: 0.25em 1ch;
		gap: 1ch;
	}

	/* Filter sidebar on transactions takes full width */
	#panel-tx-filters {
		width: 100% !important;
		max-height: 14em;
	}

	/* Modal takes full width on mobile */
	.tui-modal {
		min-width: unset;
		width: 95vw;
		max-width: 95vw;
	}

	/* Prevent fixed-width cells from overflowing on mobile */
	.tui-row {
		display: flex;
		width: 100%;
		overflow: hidden;
	}

	/* Column widths relax on mobile — allow wrapping */
	.tui-cell {
		white-space: normal;
		flex-shrink: 1;
		min-width: 0;
	}

	#accounts-list .col-16.dimmed,
	#accounts-list .tui-thead .col-16.dimmed,
	#accounts-list .col-1:nth-child(2),
	#accounts-list .tui-thead .col-1:nth-child(2) {
		display: none;
	}

	/* Make name column narrower on mobile */
	#accounts-list .col-24,
	#accounts-list .tui-thead .col-24 {
		width: 40%;
	}

	/* Balance takes remaining space */
	#accounts-list .col-16.col-right,
	#accounts-list .tui-thead .col-16.col-right {
		flex: 1;
		width: auto;
		text-align: right;
	}

	/* Hide less important columns on narrow screens */
	.col-hide-mobile {
		display: none !important;
	}
}

/* =============================================================
   SPACING & RESPONSIVE LAYOUT
   ============================================================= */

/* All screen flex rows get a gap between panels */
.screen > div {
	gap: 0.5ch;
}

/* Tables get left padding so text doesn't touch panel edge */
.tui-table {
	padding: 0 0.5ch;
}

/* =============================================================
   SMALL MOBILE — below 480px
   ============================================================= */
@media (max-width: 480px) {
	:root {
		--font-size: 12px;
	}

	/* Stack key bar items more compactly */
	.key-item {
		font-size: 0.8em;
	}

	/* Status bar sections stack */
	#status-bar {
		font-size: 0.85em;
	}

	.status-center {
		display: none; /* hide mode indicator on very small screens */
	}
}