/*
 * css/main.css
 *
 * GNU Noark5 Core — GNU GPL v3
 *
 * Design direction: a quiet, official "arkivsak" register — deep
 * ink-navy and aged ledger-paper, a slab serif for structural headings
 * (evoking stamped archive labels) paired with a plain grotesk for
 * data, and a single brass/seal-wax accent used only for the active
 * state and primary actions.
 */

:root {
	--color-paper: #f2ede1;
	--color-paper-line: #dcd3bd;
	--color-ink: #1c2a3a;
	--color-ink-soft: #3c4d61;
	--color-seal: #a6532a;
	--color-seal-hover: #8a4220;
	--color-brass: #c9a24b;
	--color-danger: #a3352b;

	--font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
	--font-body: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--radius: 3px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 40px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
}

#app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.app-header {
	padding: var(--space-4) var(--space-4) var(--space-3);
	border-bottom: 2px solid var(--color-ink);
	background: var(--color-ink);
	color: var(--color-paper);
}

.app-header h1 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	font-size: 1.6rem;
}

.app-header .tagline {
	margin: var(--space-1) 0 0;
	color: var(--color-brass);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: #e9e2d0;
	border-bottom: 1px solid var(--color-paper-line);
}

.toolbar label {
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

button, .import-label {
	font-family: var(--font-body);
	font-size: 0.85rem;
	padding: var(--space-2) var(--space-3);
	background: var(--color-ink);
	color: var(--color-paper);
	border: 1px solid var(--color-ink);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background 0.15s ease;
}

button:hover, .import-label:hover {
	background: var(--color-ink-soft);
}

#btn-export-zip, #btn-export-targz {
	background: var(--color-seal);
	border-color: var(--color-seal);
}
#btn-export-zip:hover, #btn-export-targz:hover {
	background: var(--color-seal-hover);
}

select, input[type="search"] {
	font-family: var(--font-body);
	font-size: 0.85rem;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--color-paper-line);
	border-radius: var(--radius);
	background: #fffdf8;
	color: var(--color-ink);
}

.search-bar {
	position: relative;
	padding: var(--space-2) var(--space-4);
	border-bottom: 1px solid var(--color-paper-line);
}

.search-bar input {
	width: 100%;
	max-width: 480px;
}

.search-results {
	display: none;
	position: absolute;
	z-index: 10;
	background: #fffdf8;
	border: 1px solid var(--color-paper-line);
	box-shadow: 0 4px 14px rgba(28, 42, 58, 0.15);
	max-width: 480px;
	max-height: 320px;
	overflow-y: auto;
	padding: var(--space-2);
}

.search-results ul { margin: 0; padding-left: var(--space-3); }

.workspace {
	flex: 1;
	display: grid;
	grid-template-columns: 260px 1fr 260px;
	gap: 0;
	min-height: 0;
}

.folder-tree, .record-panel, .dropzone {
	padding: var(--space-3);
	overflow-y: auto;
}

.folder-tree {
	border-right: 1px solid var(--color-paper-line);
	background: #eee7d7;
}

.folder-tree ul { list-style: none; margin: 0; padding-left: var(--space-3); }
.folder-tree > ul { padding-left: 0; }

.folder-node {
	display: block;
	padding: var(--space-1) var(--space-2);
	color: var(--color-ink-soft);
	text-decoration: none;
	border-radius: var(--radius);
	font-size: 0.9rem;
}

.folder-node:hover { background: var(--color-paper-line); }
.folder-node.active {
	background: var(--color-ink);
	color: var(--color-paper);
}

.record-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-2);
}

.record-panel-header h2 {
	font-family: var(--font-display);
	font-size: 1.1rem;
	margin: 0;
}

.record-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

.record-table th, .record-table td {
	text-align: left;
	padding: var(--space-1) var(--space-2);
	border-bottom: 1px solid var(--color-paper-line);
}

.record-table tbody tr { cursor: pointer; }
.record-table tbody tr:hover { background: #eee7d7; }
.record-table tbody tr.active { background: var(--color-brass); color: var(--color-ink); }

.dropzone {
	border-left: 1px dashed var(--color-paper-line);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-ink-soft);
	font-size: 0.85rem;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.dropzone.dragover {
	background: #fdf6e3;
	border-color: var(--color-seal);
	color: var(--color-seal);
}

.hint {
	color: var(--color-ink-soft);
	font-size: 0.85rem;
	font-style: italic;
}

.app-footer {
	padding: var(--space-2) var(--space-4);
	border-top: 1px solid var(--color-paper-line);
	background: #e9e2d0;
	font-size: 0.75rem;
	color: var(--color-ink-soft);
	font-family: var(--font-mono);
	min-height: 1.5em;
}

.fatal-error {
	margin: var(--space-5) auto;
	max-width: 480px;
	padding: var(--space-4);
	background: #fdf0ee;
	border: 1px solid var(--color-danger);
	color: var(--color-danger);
	border-radius: var(--radius);
	text-align: center;
}

@media (max-width: 860px) {
	.workspace { grid-template-columns: 1fr; }
	.folder-tree, .dropzone { border: none; border-bottom: 1px solid var(--color-paper-line); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}