/* ============================================================
   Refund Service - Stylesheet
   #1448: Design language consistent with peppol-orgs / tasks-service
   #1449: Extended with user-facing refund UI components
   ============================================================ */

/* ---- Light mode (default) ---- */
:root {
	/* #1448: Admin UI variables */
	--bg-color: #ffffff;
	--text-color: #1a1a1a;
	--heading-color: #1a1a1a;
	--nav-bg: #2b9242;
	--nav-text: #ffffff;
	--card-bg: #ffffff;
	--muted-text: #555555;
	--link-color: #1a7a32;
	--link-hover: #145f27;
	--border-color: #dddddd;
	--border-light: #eeeeee;
	--input-bg: #ffffff;
	--input-border: #cccccc;
	--input-focus-border: #2b9242;
	--table-header-bg: #f5f7f5;
	--table-stripe-bg: #fafcfa;
	--table-hover-bg: #f0f5f0;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--btn-primary-bg: #2b9242;
	--btn-primary-hover: #1a7a32;
	--btn-danger-bg: #cc0000;
	--btn-danger-hover: #990000;
	--btn-text: #ffffff;
	--alert-success-bg: #e8f5e9;
	--alert-success-text: #1a7f37;
	--alert-success-border: #a5d6a7;
	--alert-error-bg: #fef2f2;
	--alert-error-text: #991b1b;
	--alert-error-border: #fca5a5;
	--modal-backdrop: rgba(0, 0, 0, 0.5);
	--modal-bg: #ffffff;
	--focus-ring: 0 0 0 2px rgba(43, 146, 66, 0.3);

	/* #1449: User UI variables (short aliases + additional tokens) */
	--bg: #f8f9fa;
	--text: #212529;
	--text-muted: #6c757d;
	--border: #dee2e6;
	--primary: #2b9242;
	--primary-hover: #1a7a32;
	--danger: #dc3545;
	--danger-hover: #bb2d3b;
	--danger-bg: #f8d7da;
	--danger-border: #f5c2c7;
	--success: #198754;
	--success-bg: #d1e7dd;
	--success-border: #badbcc;
	--warning-bg: #fff3cd;
	--warning-border: #ffecb5;
	--warning-text: #664d03;
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--radius: 6px;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
	:root {
		/* #1448: Admin UI dark variables */
		--bg-color: #1a1a1a;
		--text-color: #e0e0e0;
		--heading-color: #e0e0e0;
		--nav-bg: #222222;
		--nav-text: #e0e0e0;
		--card-bg: #222222;
		--muted-text: #999999;
		--link-color: #5cb85c;
		--link-hover: #7dd87d;
		--border-color: #333333;
		--border-light: #2a2a2a;
		--input-bg: #2a2a2a;
		--input-border: #444444;
		--input-focus-border: #5cb85c;
		--table-header-bg: #2a2a2a;
		--table-stripe-bg: #1e1e1e;
		--table-hover-bg: #2a2a2a;
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--btn-primary-bg: #3da34d;
		--btn-primary-hover: #5cb85c;
		--btn-danger-bg: #cc3333;
		--btn-danger-hover: #dd5555;
		--btn-text: #ffffff;
		--alert-success-bg: #1a3a1a;
		--alert-success-text: #66bb6a;
		--alert-success-border: #2a5a2a;
		--alert-error-bg: #3a1a1a;
		--alert-error-text: #ff8888;
		--alert-error-border: #663333;
		--modal-backdrop: rgba(0, 0, 0, 0.7);
		--modal-bg: #222222;
		--focus-ring: 0 0 0 2px rgba(92, 184, 92, 0.3);

		/* #1449: User UI dark variables */
		--bg: #1a1e1a;
		--text: #e0e0e0;
		--text-muted: #adb5bd;
		--border: #495057;
		--primary: #5cb85c;
		--primary-hover: #4cae4c;
		--danger: #ff6b6b;
		--danger-hover: #fa5252;
		--danger-bg: #3d1f1f;
		--danger-border: #6b2b2b;
		--success: #51cf66;
		--success-bg: #1f3d27;
		--success-border: #2b6b38;
		--warning-bg: #3d3a1f;
		--warning-border: #6b6229;
		--warning-text: #ffe066;
		--shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	}
}

/* ============================================================
   Base Reset
   ============================================================ */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ============================================================
   Base Styles
   ============================================================ */

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
	color: var(--text-color);
	background: var(--bg-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

a:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ============================================================
   Layout
   ============================================================ */

.container {
	width: 72rem;
	max-width: 100%;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 0;
}

main {
	flex: 1;
	padding: 1.5rem 0 3rem;
}

/* ============================================================
   Header / Navigation (#1448: Admin)
   ============================================================ */

.site-header {
	background: var(--nav-bg);
	color: var(--nav-text);
	border-bottom: 1px solid var(--border-color);
}

.header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0;
	gap: 1rem;
}

.nav-brand {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--nav-text);
	text-decoration: none;
}

.nav-brand:hover {
	text-decoration: none;
	color: var(--nav-text);
}

.header-auth {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.875rem;
}

.nav-user {
	color: var(--muted-text);
}

.nav-links {
	display: flex;
	list-style: none;
	gap: 0.25rem;
}

.nav-links a {
	color: var(--nav-text);
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	font-size: 0.875rem;
	text-decoration: none;
}

.nav-links a:hover {
	background: rgba(0, 0, 0, 0.08);
	text-decoration: none;
}

.nav-links a.active {
	background: rgba(0, 0, 0, 0.12);
	font-weight: 600;
}

/* ============================================================
   Navigation (#1449: User)
   ============================================================ */

/* #1574: Navbar spans full width for background/border; inner .navbar-content
   constrains items to the same max-width as .container (72rem). */
.navbar {
	background: var(--nav-bg);
	color: var(--nav-text);
	border-bottom: 1px solid var(--border);
}

.navbar-content {
	width: 72rem;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.75rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.navbar-brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--nav-text);
	text-decoration: none;
}

.navbar-brand:hover {
	color: var(--nav-text);
	text-decoration: none;
}

/* Sized to match the hamburger button box (padding + SVG + border). */
.navbar-brand__icon {
	display: none;
	width: 36px;
	height: 36px;
	border-radius: 4px;
}

.navbar-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
}

.navbar-nav a {
	color: var(--nav-text);
	text-decoration: none;
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	font-size: 0.875rem;
	transition: background-color 0.15s;
}

.navbar-nav a:hover {
	background: color-mix(in srgb, var(--nav-text) 15%, transparent);
	text-decoration: none;
}

.navbar-text {
	color: var(--nav-text);
	font-size: 0.875rem;
	opacity: 0.7;
	padding: 0.375rem 0.5rem;
}

/* #1637: Company switcher button for multi-company users in the navbar.
   Styled to look like navbar text but with a clickable hover state. */
.navbar-company-switcher {
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-sm, 4px);
	color: var(--nav-text);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.375rem 0.5rem;
}

.navbar-company-switcher:hover {
	background: color-mix(in srgb, var(--nav-text) 15%, transparent);
	border-color: color-mix(in srgb, var(--nav-text) 25%, transparent);
}

/* ============================================================
   Hamburger Menu (#1553)
   Hidden on desktop; on small screens it toggles navigation visibility.
   ============================================================ */

/* #1553: The hamburger button is hidden by default (desktop).
   Displayed only inside the 768px media query below. */
/* #1621: Styled to match .sidebar-hamburger (bordered button with SVG icon). */
.hamburger {
	display: none;
	background: color-mix(in srgb, var(--nav-text) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--nav-text) 25%, transparent);
	cursor: pointer;
	padding: 0.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: var(--nav-text);
}

.hamburger:hover {
	background: color-mix(in srgb, var(--nav-text) 20%, transparent);
}

.hamburger:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
}

/* #1621: .hamburger__bar rules removed — navbar hamburger now uses
   the same SVG icon as the sidebar hamburger for consistency. */

/* #1553: The nav-menu wrapper is a simple flex container on desktop.
   On small screens it becomes a collapsible block (see media query). */
.nav-menu {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex: 1;
	justify-content: space-between;
}

/* ============================================================
   Page Header
   ============================================================ */

.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.page-header h1 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--heading-color);
}

/* #1525: Aligns status badge and action buttons horizontally.
   flex-wrap ensures graceful wrapping on narrow viewports. */
.page-header-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* ============================================================
   Refund List (#1614, originally #1612)
   Shared by dashboard and refunds page.
   ============================================================ */

.refund-list {
	display: flex;
	flex-direction: column;
}

.refund-list__item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.625rem 0;
}

.refund-list__item + .refund-list__item {
	border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.refund-list__title {
	flex: 1;
	font-weight: 500;
	color: var(--link-color);
	text-decoration: none;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.refund-list__title:hover {
	text-decoration: underline;
}

.refund-list__amount {
	font-size: 0.875rem;
	color: var(--muted-text);
	white-space: nowrap;
}

.refund-list__status {
	font-size: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--bg-secondary, #f0f0f0);
	color: var(--muted-text);
	white-space: nowrap;
}

/* ============================================================
   Company Card Grid (#1608)
   ============================================================ */

.company-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
}

.company-card {
	border: 1px solid var(--border-color);
	border-radius: var(--radius, 6px);
	background: var(--card-bg);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.company-card__name {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--link-color);
	text-decoration: none;
}

.company-card__name:hover {
	text-decoration: underline;
}

.company-card__actions {
	display: flex;
	gap: 0.5rem;
}

/* ============================================================
   Cards
   ============================================================ */

.card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: var(--shadow-sm);
	margin-bottom: 1rem;
}

/* #1449: Card sub-components for structured layouts */
.card-header {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.card-header h2,
.card-header h3 {
	font-size: 1rem;
	font-weight: 600;
}

.card-body {
	padding: 1rem;
}

/* ============================================================
   Badges / Status (#1449)
   ============================================================ */

.badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.badge-draft {
	background: var(--warning-bg);
	color: var(--warning-text);
	border: 1px solid var(--warning-border);
}

.badge-sent {
	background: var(--success-bg);
	color: var(--success);
	border: 1px solid var(--success-border);
}

/* ============================================================
   Tables
   ============================================================ */

.table-wrap,
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

thead th {
	text-align: left;
	padding: 0.75rem 1rem;
	background: var(--table-header-bg);
	border-bottom: 2px solid var(--border-color);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted-text);
	white-space: nowrap;
}

tbody td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-light);
	vertical-align: middle;
}

tbody tr:nth-child(even) {
	background: var(--table-stripe-bg);
}

tbody tr:hover {
	background: var(--table-hover-bg);
}

tr:last-child td {
	border-bottom: none;
}

.table-empty {
	padding: 2rem;
	text-align: center;
	color: var(--muted-text);
}

/* #1448: Action links in table rows */
.table-actions {
	display: flex;
	gap: 0.75rem;
	white-space: nowrap;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;
	background: var(--btn-primary-bg);
	color: var(--btn-text);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
	background: var(--btn-primary-hover);
	text-decoration: none;
	color: var(--btn-text);
}

.btn:focus-visible {
	outline: 2px solid var(--btn-primary-bg);
	outline-offset: 2px;
}

.btn-sm {
	padding: 0.3125rem 0.75rem;
	font-size: 0.8125rem;
}

.btn-ghost {
	background: transparent;
	color: var(--text-color);
	border: 1px solid var(--border-color);
}

.btn-ghost:hover {
	background: var(--table-hover-bg);
	color: var(--text-color);
}

/* #1449: Additional button variants for user UI */
.btn-primary {
	background: var(--btn-primary-bg);
	color: var(--btn-text);
}

.btn-primary:hover {
	background: var(--btn-primary-hover);
}

.btn-danger {
	background: var(--btn-danger-bg);
	color: var(--btn-text);
}

.btn-danger:hover {
	background: var(--btn-danger-hover);
}

.btn-danger:focus-visible {
	outline: 2px solid var(--btn-danger-bg);
	outline-offset: 2px;
}

.btn-outline {
	background: transparent;
	color: var(--text-color);
	border-color: var(--border-color);
}

.btn-outline:hover {
	background: var(--table-hover-bg);
	border-color: var(--muted-text);
}

.btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Button Groups (inline actions) */
.btn-group {
	display: inline-flex;
	gap: 0.375rem;
	align-items: center;
}

/* ============================================================
   Forms
   ============================================================ */

.form-plain {
	/* #1448: Reset form element default styling for card-based forms */
	margin: 0;
}

.form-group {
	margin-bottom: 1rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-color);
}

.form-required {
	color: var(--btn-danger-bg);
}

.form-help,
.form-hint {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	color: var(--muted-text);
}

/* #1448: Two-column form grid for side-by-side fields */
.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (max-width: 640px) {
	.form-grid {
		grid-template-columns: 1fr;
	}
}

/* #1509: Line form -- two-row layout for refund line fields */

/* Row 1: Date (narrow, content-width) + Description (fills remaining space) */
.line-form-row-1 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.line-form-row-1 {
		grid-template-columns: auto 1fr;
	}
}

/* Row 2: Amount | Currency | Tax % | (Amount in company currency when visible) */
.line-form-row-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.line-form-row-2 {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

/* #1509: Remove default form-group bottom margin inside line-form rows;
   the row gap handles spacing between fields. */
.line-form-row-1 > .form-group,
.line-form-row-2 > .form-group {
	margin-bottom: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="file"],
select,
textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.9375rem;
	font-family: inherit;
	border: 1px solid var(--input-border);
	border-radius: 6px;
	background: var(--input-bg);
	color: var(--text-color);
	line-height: 1.5;
	transition: border-color 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--input-focus-border);
	outline: none;
	box-shadow: var(--focus-ring);
}

textarea {
	resize: vertical;
	min-height: 4rem;
}

/* ============================================================
   Form Actions
   ============================================================ */

.actions,
.form-actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1rem;
}

/* ============================================================
   Alerts
   ============================================================ */

.alert {
	padding: 0.75rem 1rem;
	border-radius: 6px;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	border: 1px solid;
}

.alert-error,
.alert-danger {
	background: var(--alert-error-bg);
	color: var(--alert-error-text);
	border-color: var(--alert-error-border);
}

.alert-success {
	background: var(--alert-success-bg);
	color: var(--alert-success-text);
	border-color: var(--alert-success-border);
}

/* ============================================================
   Empty State (#1449)
   ============================================================ */

.empty-state {
	text-align: center;
	padding: 2rem 1rem;
	color: var(--muted-text);
}

.empty-state p {
	margin-bottom: 1rem;
}

/* ============================================================
   Document Section (#1449)
   ============================================================ */

.document-section {
	margin-bottom: 1.5rem;
}

.document-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	background: var(--table-header-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px 8px 0 0;
	font-weight: 600;
	font-size: 0.875rem;
}

.document-header .identifier {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--btn-primary-bg);
	color: #fff;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
}

.document-header .filename {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.document-body {
	border: 1px solid var(--border-color);
	border-top: none;
	border-radius: 0 0 8px 8px;
	padding: 0.75rem;
}

/* Lines Table within a document */
.lines-table {
	margin-bottom: 0.75rem;
}

.lines-table td.amount {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.lines-table th.amount {
	text-align: right;
}

/* #1522: Document reference column in the consolidated lines table.
   Uses a slightly muted style and truncates long filenames. */
.lines-table td.document-ref {
	white-space: nowrap;
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--muted-text);
	font-size: 0.8125rem;
}

/* #1620: .lines-add-actions removed — inline Add Line button no longer used. */

/* ============================================================
   Line Item Cards (#1560)
   Replaces the table layout in the consolidated all-lines view.
   Each line is a card with two rows:
     Row 1: [badge] [date] [description] ... [tax] [amount] [currency] [actions]
     Row 2 (conditional): right-aligned company-currency amount
   ============================================================ */

/* #1597: Flat rows with subtle dividers instead of card boxes. */
.line-items {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.75rem;
}

.line-item {
	padding: 0.5rem 0;
}

.line-item + .line-item {
	border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.line-item__row1 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.line-item__left {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
}

.line-item__date {
	white-space: nowrap;
	color: var(--muted-text);
	font-size: 0.8125rem;
}

.line-item__desc {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* #1578: Editable description -- clickable to open the edit modal.
   Uses link-color to signal interactivity, with hover/focus states. */
.line-item__desc--editable {
	cursor: pointer;
	color: var(--link-color);
	border-radius: 2px;
}

.line-item__desc--editable:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.line-item__desc--editable:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
}

.line-item__right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.line-item__tax {
	color: var(--muted-text);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.line-item__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	white-space: nowrap;
}

.line-item__currency {
	font-size: 0.8125rem;
	color: var(--muted-text);
	white-space: nowrap;
}

/* #1560: Second row -- company-currency amount, right-aligned.
   Only rendered when the line currency differs from the company currency. */
.line-item__row2 {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.125rem;
}

.line-item__company-amount {
	font-size: 0.8125rem;
	color: var(--muted-text);
	font-variant-numeric: tabular-nums;
}

/* #1560: Responsive -- on narrow screens, stack left and right sections
   vertically so the financial details wrap below the description. */
@media (max-width: 640px) {
	.line-item__row1 {
		flex-wrap: wrap;
	}

	.line-item__left {
		flex-basis: 100%;
	}

	.line-item__right {
		flex-basis: 100%;
		justify-content: flex-end;
		padding-top: 0.25rem;
	}
}

/* ============================================================
   Upload Area / Drop Zone (#1449, #1473)
   ============================================================ */

/* #1473: Drop zone replaces the simple upload-area with drag-and-drop support */
.upload-area {
	border: 2px dashed var(--border-color);
	border-radius: 8px;
	padding: 1.25rem;
	text-align: center;
	margin-top: 1rem;
}

.upload-area label {
	font-weight: 500;
	margin-bottom: 0.5rem;
	display: block;
}

.upload-area input[type="file"] {
	margin: 0.5rem auto;
	max-width: 300px;
}

/* #1473: Drop zone -- interactive drag-and-drop target */
.drop-zone {
	border: 2px dashed var(--border-color);
	border-radius: 8px;
	padding: 2rem 1.25rem;
	text-align: center;
	margin-top: 1rem;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.drop-zone:hover {
	border-color: var(--btn-primary-bg);
}

/* #1473: Highlight state when files are dragged over the drop zone */
.drop-zone--active {
	border-color: var(--btn-primary-bg);
	background-color: rgba(0, 85, 170, 0.05);
}

@media (prefers-color-scheme: dark) {
	.drop-zone--active {
		background-color: rgba(85, 153, 221, 0.1);
	}
}

.drop-zone__prompt {
	color: var(--muted-text);
	font-size: 0.9375rem;
	margin-bottom: 0.75rem;
}

.drop-zone__prompt strong {
	color: var(--text-color);
}

.drop-zone label {
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.5rem;
	display: block;
	color: var(--text-color);
}

/* #1473: Hide the native file input; use the Browse button instead */
.drop-zone__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* #1473: File list preview showing selected files before upload */
.file-list {
	list-style: none;
	margin-top: 1rem;
	text-align: left;
	padding: 0;
}

.file-list:empty {
	display: none;
}

.file-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.375rem 0.625rem;
	font-size: 0.875rem;
	color: var(--text-color);
	border-bottom: 1px solid var(--border-light);
}

.file-list__item:last-child {
	border-bottom: none;
}

.file-list__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-list__size {
	flex-shrink: 0;
	color: var(--muted-text);
	font-size: 0.8125rem;
	margin-left: 0.75rem;
}

/* ============================================================
   Refund Meta (#1449)
   ============================================================ */

.refund-meta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	font-size: 0.875rem;
	color: var(--muted-text);
}

.refund-meta dt {
	font-weight: 600;
	color: var(--text-color);
}

.refund-meta dd {
	margin-left: 0;
}

/* ============================================================
   Inline Delete Form (#1449)
   ============================================================ */

.inline-form {
	display: inline;
}

/* ============================================================
   Detail / Description List (#1448)
   ============================================================ */

.detail-list {
	list-style: none;
}

.detail-item {
	display: flex;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border-light);
}

.detail-item:last-child {
	border-bottom: none;
}

.detail-item dt {
	flex: 0 0 10rem;
	font-size: 0.875rem;
	color: var(--muted-text);
	font-weight: 500;
}

.detail-item dd {
	flex: 1;
	font-size: 0.9375rem;
}

@media (max-width: 640px) {
	.detail-item {
		flex-direction: column;
		gap: 0.125rem;
	}

	.detail-item dt {
		flex: none;
	}
}

/* ============================================================
   Page Layout (#1617)
   Reusable 5:2 grid for content + sidebar. Used on the dashboard
   and available for any page that needs a main/sidebar split.
   ============================================================ */

/* #1617: Two-column grid with 7:2 ratio. The sidebar holds action
   buttons and becomes a fixed bottom action bar on small screens. */
.page-layout {
	display: grid;
	grid-template-columns: 7fr 2fr;
	gap: 1.5rem;
	align-items: start;
}

.page-layout__main {
	min-width: 0;
}

.page-layout__sidebar {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.page-layout__sidebar .btn {
	justify-content: flex-start;
}

/* #1618: Back button in sidebar — hidden on desktop, shown on mobile
   as part of the fixed bottom action bar. */
.sidebar-back {
	display: none;
}

/* #1619: Hamburger toggle for sidebar — hidden on desktop,
   shown on mobile to collapse action buttons into a dropdown. */
.sidebar-hamburger {
	display: none;
}

/* #1619: Action buttons container — on desktop, inherits the parent
   sidebar's flex column layout via display:contents so buttons flow
   naturally as direct flex children. On mobile, this becomes a
   collapsible dropdown. */
.sidebar-actions {
	display: contents;
}

/* #1620: .page-layout__sidebar .inline-form removed — sidebar no longer
   contains inline forms after Send button was changed to open a modal. */

/* ============================================================
   Section Header (#1448)
   ============================================================ */

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.section-header h2 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
}

.section-header__link {
	font-size: 0.8125rem;
	color: var(--link-color);
	text-decoration: none;
	margin-left: 0.75rem;
}

.section-header__link:hover {
	text-decoration: underline;
}

.section-header-actions {
	display: flex;
	gap: 0.5rem;
}

/* ============================================================
   Modal / Dialog (#1448)
   ============================================================ */

dialog {
	border: none;
	border-radius: 8px;
	padding: 0;
	background: var(--modal-bg);
	/* #1570: Explicitly set text color so dialog content (titles, body text)
	   is legible in dark mode. The <dialog> top-layer element does not
	   reliably inherit color from <body>/<html> across all browsers. */
	color: var(--text-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	/* #1600: box-sizing + viewport-relative max-width prevents horizontal
	   overflow on small screens for all dialogs. */
	box-sizing: border-box;
	max-width: min(28rem, calc(100vw - 2rem));
	width: 90%;
	overflow-x: hidden;
	/* Flex column so header/footer stay fixed and body scrolls. */
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 2rem);
	/* #1554: Override UA default top-aligned positioning to center
	   the dialog both vertically and horizontally on screen. */
	margin: auto;
}

/* Hide dialog when not open — display:flex above overrides the UA
   display:none, so we restore it explicitly. */
dialog:not([open]) {
	display: none;
}

/* When a <form> wraps the entire modal content (header + body + footer),
   it must participate in the flex column layout so max-height works. */
dialog > form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

dialog::backdrop {
	background: var(--modal-backdrop);
	/* #1554: Blur the page content behind the modal overlay, matching
	   the visual treatment the owner expects for modal dialogs. */
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* #1626: Green background on modal headers to match the navbar, using the
   same --nav-bg / --nav-text variables so both themes stay consistent. */
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	background: var(--nav-bg);
	color: var(--nav-text);
	/* #1626: Match the dialog's 8px border-radius on top corners so the
	   colored background does not bleed outside the rounded container. */
	border-radius: 8px 8px 0 0;
	flex-shrink: 0;
}

.modal-header h2 {
	font-size: 1.125rem;
	font-weight: 700;
	color: inherit;
	/* #1589: Truncate long titles (e.g. filenames) so they don't push
	   other header elements (nav buttons, close) off screen. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.modal-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	/* #1626: Use nav text color with reduced opacity so the close button
	   is visible but not competing with the header title. */
	color: var(--nav-text);
	opacity: 0.8;
	padding: 0.25rem;
	line-height: 1;
}

.modal-close:hover {
	color: var(--nav-text);
	opacity: 1;
}

.modal-body {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--border-color);
	flex-shrink: 0;
}

/* #1554: Confirmation modal -- reusable variant for destructive action
   confirmations. Uses the base dialog/modal styles above and adds
   confirmation-specific layout and animation. */

.confirm-modal {
	animation: confirm-modal-appear 0.15s ease-out;
}

.confirm-modal .modal-body p {
	color: var(--text-color);
	line-height: 1.6;
}

/* #1554: The inline-form inside the modal footer should not disrupt flex layout. */
.confirm-modal .confirm-modal__form {
	display: contents;
}

@keyframes confirm-modal-appear {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ============================================================
   Edit Refund Modal (#1557)
   ============================================================ */

/* #1557: Wider dialog for the edit form with title + description fields. */
.edit-refund-modal {
	max-width: 36rem;
	animation: confirm-modal-appear 0.15s ease-out;
}

.edit-refund-modal .form-group {
	margin-bottom: 1rem;
}

.edit-refund-modal .form-group:last-child {
	margin-bottom: 0;
}

.edit-refund-modal label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	color: var(--text-color);
}

.edit-refund-modal .form-input {
	width: 100%;
	box-sizing: border-box;
}

.edit-refund-modal textarea.form-input {
	resize: vertical;
	min-height: 6rem;
	font-family: inherit;
	line-height: 1.5;
}

/* ============================================================
   New Refund Modal (#1617)
   ============================================================ */

/* #1617: Modal dialog for creating a new refund from the dashboard
   sidebar. Same width and form-group styling as the edit-refund modal. */
.new-refund-modal {
	max-width: 36rem;
	animation: confirm-modal-appear 0.15s ease-out;
}

.new-refund-modal .form-group {
	margin-bottom: 1rem;
}

.new-refund-modal .form-group:last-child {
	margin-bottom: 0;
}

.new-refund-modal label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.375rem;
	font-size: 0.875rem;
	color: var(--text-color);
}

.new-refund-modal .form-input {
	width: 100%;
	box-sizing: border-box;
}

.new-refund-modal textarea.form-input {
	resize: vertical;
	min-height: 6rem;
	font-family: inherit;
	line-height: 1.5;
}

/* ============================================================
   Company/User Form Modal (#1630)
   ============================================================ */

/* #1630: Wider dialog for company and user create/edit forms.
   The two-column form-grid layout needs more horizontal space than
   confirmation modals (28rem default). */
.company-form-modal {
	max-width: min(36rem, calc(100vw - 2rem));
	animation: confirm-modal-appear 0.15s ease-out;
}

.company-form-modal .form-group {
	margin-bottom: 1rem;
}

.company-form-modal .form-group:last-child {
	margin-bottom: 0;
}

/* #1630: Clickable user card name for edit-user htmx trigger. */
.company-card__name--editable {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.15s;
}

.company-card__name--editable:hover,
.company-card__name--editable:focus-visible {
	text-decoration-color: var(--link-color);
}

/* #1599: Upload document modal -- uses the same width as the edit modal
   to give the drop zone enough horizontal space. The drop zone inside
   the modal body does not need additional border/shadow since the dialog
   provides the card-like container. */
.upload-document-modal {
	max-width: min(36rem, calc(100vw - 2rem));
	animation: confirm-modal-appear 0.15s ease-out;
}

/* #1600: Upload field fills edge-to-edge in the body area.
   #1626: border-bottom removal is now inherited from the base .modal-header
   (which uses a colored background instead of a border). Keep the override
   block for clarity but only zero the body padding below. */

.upload-document-modal .modal-body {
	padding: 0;
}

/* #1599: Remove the drop zone's border and background inside the modal
   to avoid a box-within-a-box appearance. The modal itself provides
   the visual container. */
.upload-document-modal .drop-zone {
	border: 2px dashed var(--border-color);
	background: none;
	box-shadow: none;
	margin-top: 0;
	border-radius: 0;
}

/* #1557: Description display on the refund view page.
   Uses white-space: pre-wrap to preserve line breaks without a markdown renderer. */
.refund-description {
	margin-top: 0.25rem;
	margin-bottom: 0.5rem;
}

.refund-description p {
	color: var(--text-muted, var(--muted-text));
	font-size: 0.9375rem;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
}

/* #1622: Refund total shown above lines divider when lines exist */
.refund-total {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-size: 0.9375rem;
}

.refund-total__label {
	color: var(--text-muted, var(--muted-text));
	font-weight: 500;
}

.refund-total__amount {
	font-weight: 600;
	color: var(--text-color, var(--text));
}

/* ============================================================
   Breadcrumbs (#1448)
   ============================================================ */

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--muted-text);
	margin-bottom: 1rem;
}

.breadcrumbs li::before {
	content: "/";
	margin-right: 0.25rem;
	color: var(--border-color);
}

.breadcrumbs li:first-child::before {
	content: none;
}

.breadcrumbs a {
	color: var(--muted-text);
}

.breadcrumbs a:hover {
	color: var(--link-color);
}

/* ============================================================
   Utility
   ============================================================ */

.text-muted {
	color: var(--muted-text);
}

.mb-1 {
	margin-bottom: 0.5rem;
}

.mb-2 {
	margin-bottom: 1rem;
}

.mt-0 {
	margin-top: 0;
}

.mt-1 {
	margin-top: 0.5rem;
}

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

/* ============================================================
   Frontpage (#1461)
   ============================================================ */

/* #1461: Override default body flex-direction for the centered landing layout */
.frontpage-body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-color);
}

.frontpage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	width: 100%;
}

.frontpage-card {
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 2.5rem 2rem;
	width: 100%;
	max-width: 440px;
	box-shadow: var(--shadow-sm);
	text-align: center;
}

.frontpage-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--heading-color);
	margin-bottom: 1rem;
}

.frontpage-description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--muted-text);
	margin-bottom: 1.5rem;
}

.frontpage-cta {
	display: inline-flex;
	padding: 0.625rem 2rem;
	font-size: 1rem;
}

/* ============================================================
   Document View Split-Pane (#1519)
   Split-pane layout for the individual document view page.
   Left pane: refund dashboard (document list, metadata).
   Right pane: document preview (image or PDF), independently scrollable.
   ============================================================ */

/* #1519: Grid container -- fixed left pane width, flexible right pane */
.document-view-split {
	display: grid;
	grid-template-columns: 380px 1fr;
	min-height: calc(100vh - 7.5rem);
	gap: 0;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
	background: var(--card-bg);
}

/* #1519: Left pane -- scrollable refund overview */
.document-view-split__left {
	overflow-y: auto;
	max-height: calc(100vh - 7.5rem);
	padding: 1.25rem;
	border-right: 1px solid var(--border-color);
	background: var(--bg-color);
}

/* #1519: Right pane -- scrollable document viewer */
.document-view-split__right {
	overflow-y: auto;
	max-height: calc(100vh - 7.5rem);
	display: flex;
	flex-direction: column;
}

/* #1519: Compact page header inside the left pane */
.document-view-split__left .page-header {
	margin-bottom: 1rem;
}

.document-view-split__left .page-header h1 {
	font-size: 1.25rem;
}

/* ---- Document navigation list ---- */

.document-nav-heading {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--muted-text);
	margin-bottom: 0.5rem;
}

.document-nav-list {
	list-style: none;
	margin: 0 0 1rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/* ============================================================
   Refund Page Layout (#1573, #1618)
   #1618: .refund-layout removed — refund view now uses .page-layout.
   Title, description, and clickable-title styles retained.
   ============================================================ */

/* #1573: Title within the details sidebar uses a slightly smaller size
   than the main page header to establish visual hierarchy. */
.refund-details-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--heading-color);
	line-height: 1.4;
	margin: 0;
}

/* #1573: Header group for title + description in the details sidebar. */
.refund-details-header {
	margin-bottom: 1rem;
}

/* #1580: Clickable title styled like .line-item__desc--editable —
   link color signals interactivity, hover changes color, no underline. */
.refund-details-title--clickable {
	cursor: pointer;
	color: var(--link-color);
	border-radius: 2px;
}

.refund-details-title--clickable:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

.refund-details-title--clickable:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
}

/* #1580: Description is no longer clickable — only the title opens
   the edit modal. Removed .refund-description--clickable styles. */

/* #1621: Flex row for title + status badge — badge sits top-right. */
.refund-details-header__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
}

/* #1621: Subtle divider between title/description and expense lines,
   matching the style used between individual line items. */
#lines-pane {
	border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
	padding-top: 0.25rem;
	margin-top: 0.5rem;
}

/* ============================================================
   Split Pane Layout (#1516)
   ============================================================ */

/* #1522: Two-column 50/50 layout for documents + upload (left) and
   lines table (right). Equal-width columns give both panes room to
   display their content. Each pane scrolls independently. */
.split-pane {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1.5rem;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	overflow: hidden;
}

.split-pane__left {
	overflow-y: auto;
	max-height: 70vh;
	border-right: 1px solid var(--border-color);
	padding: 1rem;
}

.split-pane__right {
	overflow-y: auto;
	max-height: 70vh;
	padding: 1rem;
}

/* ============================================================
   Document Card (#1516, #1519)
   Shared clickable card used in both the refund view split-pane
   (as a <button> with HTMX) and the document view navigation
   (as an <a> link). Base styles cover both contexts.
   ============================================================ */

.document-card {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: none;
	border-left: 3px solid transparent;
	background: transparent;
	cursor: pointer;
	font-size: 0.875rem;
	font-family: inherit;
	color: var(--text-color);
	text-align: left;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.document-card:hover {
	background: var(--table-hover-bg);
	text-decoration: none;
	color: var(--text-color);
}

.document-card:focus-visible {
	outline: 2px solid var(--btn-primary-bg);
	outline-offset: -2px;
	border-radius: 2px;
}

/* #1516: Active state highlights the selected document with a left border
   accent and subtle background tint. */
.document-card--active {
	border-left-color: var(--btn-primary-bg);
	background: var(--card-bg);
	font-weight: 600;
}

/* #1519: In the document-nav context, active cards also get a visible border */
.document-nav-list .document-card--active {
	border-color: var(--border-color);
	border-left-color: var(--btn-primary-bg);
	border-radius: 6px;
}

/* #1583: Removed .document-card .identifier and .document-card__id badge styles */

.document-card .filename,
.document-card__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.document-card__lines {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--muted-text);
	font-weight: 400;
}

/* #1516: Section divider inside the left pane (e.g., before standalone lines). */
.split-pane__divider {
	border: none;
	border-top: 1px solid var(--border-color);
	margin: 0.25rem 0.75rem;
}

/* #1519: Standalone lines indicator below the document list */
.document-nav-standalone {
	padding: 0.5rem 0.75rem;
	font-size: 0.8125rem;
}

/* ---- Document viewer (right pane) ---- */

/* #1519: Header row with filename and close button */
.document-viewer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border-color);
	background: var(--table-header-bg);
	flex-shrink: 0;
}

.document-viewer__title {
	font-size: 1rem;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* #1519: Close button styled as an X, links back to the normal refund view */
.document-viewer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--muted-text);
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.document-viewer__close:hover {
	background: var(--table-hover-bg);
	color: var(--text-color);
	text-decoration: none;
}

.document-viewer__close:focus-visible {
	outline: 2px solid var(--link-color);
	outline-offset: -2px;
}

/* #1519: Content area fills remaining height for the document preview */
.document-viewer__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* #1519: Image preview scales to fit the pane width */
.document-viewer__image {
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* #1519: PDF iframe fills all available space */
.document-viewer__iframe {
	width: 100%;
	flex: 1;
	min-height: 60vh;
	border: none;
	border-radius: 4px;
}

/* #1519: Fallback for unsupported file types */
.document-viewer__fallback {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--muted-text);
}

.document-viewer__fallback p {
	margin-bottom: 1rem;
}

/* #1618: Refund Action Bar (#1551) removed — actions moved to
   .page-layout__sidebar. Hamburger menu no longer needed. */

/* ============================================================
   Responsive Adjustments
   ============================================================ */

@media (max-width: 768px) {
	.page-header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* #1553: Show hamburger button on small screens */
	.hamburger {
		display: flex;
	}

	/* Replace text brand with favicon icon on small screens. */
	.navbar-brand__text {
		display: none;
	}

	.navbar-brand__icon {
		display: block;
	}

	/* #1553: Admin header -- place brand and hamburger on one row */
	.header-row {
		flex-wrap: wrap;
	}

	/* #1553: Admin nav-menu becomes a collapsible block below the header row.
	   Hidden by default; shown when nav-menu--open class is toggled. */
	.nav-menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		width: 100%;
		padding-top: 0.5rem;
		border-top: 1px solid var(--border-color);
		margin-top: 0.5rem;
	}

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

	.nav-links {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.nav-links a {
		display: block;
		padding: 0.5rem 0.75rem;
		width: 100%;
	}

	.header-auth {
		border-top: 1px solid var(--border-color);
		width: 100%;
		padding-top: 0.5rem;
		margin-top: 0.25rem;
	}

	/* #1553: User-facing navbar -- place brand and hamburger on one row,
	   collapse the nav list below. */
	.navbar-content {
		flex-wrap: wrap;
	}

	/* Admin: collapsible column when toggled open. */
	.navbar-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		width: 100%;
		padding-top: 0.5rem;
		border-top: 1px solid color-mix(in srgb, var(--nav-text) 20%, transparent);
		margin-top: 0.5rem;
	}

	.navbar-nav.nav-menu--open {
		display: flex;
	}

	/* Non-admin: always visible row, no wrapping. */
	.navbar-nav--no-collapse {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: auto;
		padding-top: 0;
		border-top: none;
		margin-top: 0;
	}

	.card-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.document-header {
		flex-wrap: wrap;
	}

	table {
		font-size: 0.875rem;
	}

	thead th,
	tbody td {
		padding: 0.5rem 0.625rem;
	}

	/* #1519: Stack the document view vertically on small screens.
	   The left pane becomes a compact navigation strip above the viewer. */
	.document-view-split {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.document-view-split__left {
		max-height: none;
		border-right: none;
		border-bottom: 1px solid var(--border-color);
		padding: 1rem;
	}

	.document-view-split__right {
		max-height: none;
		min-height: 60vh;
	}

	/* #1617: On small screens, sidebar becomes a fixed bottom action bar. */
	.page-layout {
		grid-template-columns: 1fr;
	}

	/* #1619: Fixed bottom bar with back button (left) and hamburger (right).
	   Action buttons are hidden in a dropdown that opens above the bar. */
	.page-layout__sidebar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0.75rem 1rem;
		background: var(--card-bg);
		border-top: 1px solid var(--border-color);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
		z-index: 100;
	}

	/* #1619: When there's no back button (e.g. dashboard), push the
	   hamburger to the right. */
	.page-layout__sidebar .sidebar-hamburger:first-child {
		margin-left: auto;
	}

	/* Ensure main content isn't hidden behind the fixed bar. */
	.page-layout__main {
		padding-bottom: 4rem;
	}

	/* #1618: Show the sidebar back button on small screens. */
	.sidebar-back {
		display: flex;
	}

	/* #1619: Show the hamburger toggle on small screens. */
	.sidebar-hamburger {
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 1px solid var(--border-color);
		border-radius: 0.375rem;
		padding: 0.5rem;
		cursor: pointer;
		color: var(--text-color);
	}

	.sidebar-hamburger:hover {
		background: var(--table-hover-bg);
	}

	/* #1619: Action buttons become a hidden dropdown on mobile.
	   #1621: Full viewport width with 2-column grid layout. */
	.sidebar-actions {
		display: none;
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		width: 100vw;
		background: var(--card-bg);
		border-top: 1px solid var(--border-color);
		padding: 0.5rem;
	}

	/* #1621: Opened state — 2-column grid so buttons fill the width. */
	.sidebar-actions--open {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
	}

	/* #1621: Buttons stretch to fill their grid cell, text left-aligned. */
	.sidebar-actions .btn {
		width: 100%;
		justify-content: flex-start;
	}

	/* #1618: .refund-layout mobile rules removed — now uses .page-layout. */

	/* #1516: Stack split pane vertically on small screens. */
	.split-pane {
		grid-template-columns: 1fr;
	}

	.split-pane__left {
		border-right: none;
		border-bottom: 1px solid var(--border-color);
		max-height: none;
	}

	.split-pane__right {
		max-height: none;
	}

	/* #1618: .refund-action-bar mobile rules removed — sidebar is the action bar now. */
}

/* ============================================================
   Line Form Modal (#1562)
   Modal dialog for add/edit refund line forms. Wider than the
   confirmation modals to accommodate the multi-field form layout.
   Reuses the global dialog centering + backdrop blur from #1554.
   ============================================================ */

/* #1562: Wider dialog for the line form -- the multi-field layout needs
   more horizontal space than confirmation modals (28rem default).
   #1563: Increased from 42rem to 48rem to accommodate the document preview. */
.line-form-modal {
	max-width: 48rem;
	animation: confirm-modal-appear 0.15s ease-out;
}

/* #1562: The inline-line-form inside the modal body does not need its own
   card styling (border, shadow, background) since the dialog provides that.
   Remove the card-like appearance when rendered inside a modal. */
/* #1627: The .inline-line-form must participate in the flex chain so the
   footer stays fixed. Chain: dialog -> .modal-body -> .inline-line-form
   -> form -> .line-form-fields (scrolls) + .modal-footer (fixed). */
.line-form-modal .inline-line-form {
	border: none;
	border-radius: 0;
	padding: 0;
	margin-top: 0;
	box-shadow: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* .modal-body must be a flex container for .inline-line-form to fill it. */
.line-form-modal .modal-body {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* The <form> is a flex column: fields scroll, footer stays fixed. */
.line-form-modal .inline-line-form form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

/* Scrollable wrapper for form fields. */
.line-form-fields {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	padding: 1.5rem;
}

/* #1552: Override form-group bottom margin inside the inline form rows;
   the row gap handles spacing. Matches the full-page form behaviour. */
.inline-line-form .line-form-row-1 > .form-group,
.inline-line-form .line-form-row-2 > .form-group {
	margin-bottom: 0;
}

/* Footer stays at bottom, doesn't scroll with form fields. */
.inline-line-form .modal-footer {
	flex-shrink: 0;
}

/* #1598: Visually move destructive actions to the left while keeping them
   last in DOM order (tab goes through positive actions first). order:-1
   moves it visually; margin-right:auto pushes positive actions right. */
.form-actions__delete,
.confirm-modal__confirm,
.confirm-modal__form {
	order: -1;
	margin-right: auto;
}

/* #1563: Document preview area shown above the form in the line modal.
   Constrained height keeps the form visible while showing the document. */
/* #1596: No padding/border/background around preview — just spacing below.
   Negative margins pull the preview edge-to-edge past the parent's
   .modal-body padding (1.5rem) so the document fills the full width. */
.doc-preview {
	margin: 0;
	max-height: 18rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.doc-preview__image {
	max-width: 100%;
	max-height: 18rem;
	object-fit: contain;
	display: block;
}

.doc-preview__iframe {
	width: 100%;
	height: 18rem;
	border: none;
	display: block;
}

/* ============================================================
   Document Preview Modal (#1585)
   Full-size document preview opened by clicking a document card
   in the refund view. Uses the global dialog centering + backdrop
   blur. Wider than other modals to show documents at a useful
   size. Includes a delete button (draft only) that chains to
   the existing delete-file confirmation modal.
   ============================================================ */

/* #1585: Wide dialog for document previews -- documents need more
   horizontal space than form-based modals. On mobile, fills the
   viewport width minus small margins. */
.document-preview-modal {
	/* #1590: Use calc to guarantee the modal never exceeds the viewport
	   minus a small margin on each side, preventing horizontal overflow
	   on small screens. box-sizing ensures padding is included. */
	max-width: min(56rem, calc(100vw - 2rem));
	width: 95%;
	max-height: 90vh;
	animation: confirm-modal-appear 0.15s ease-out;
}

/* #1588: display:flex now applied globally on dialog, with dialog:not([open])
   reset. The document-preview-modal[open] override is no longer needed. */

/* #1585: The modal body scrolls independently so the header and
   footer remain visible even with large documents. */
.document-preview-modal__body {
	flex: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 0;
	/* #1591: Remove inherited .modal-body padding so document content
	   fills the available space edge-to-edge. */
	padding: 0;
}

/* #1585: Image preview scales to fit the modal width while
   preserving aspect ratio. Max height prevents very tall images
   from pushing the footer off screen. */
.document-preview-modal__image {
	max-width: 100%;
	max-height: 70vh;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 4px;
}

/* #1585: PDF iframe fills the available modal body space.
   min-height ensures it is usable even on shorter viewports. */
.document-preview-modal__iframe {
	width: 100%;
	flex: 1;
	min-height: 60vh;
	border: none;
	border-radius: 4px;
}

/* #1589: Navigation controls for browsing between documents in the
   preview modal. Positioned in the modal header between the title
   and the close button. */
/* Segmented control: prev | counter | next joined as one unit. */
.doc-preview-nav {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	overflow: hidden;
}

.doc-preview-nav__btn {
	background: none;
	border: none;
	border-right: 1px solid var(--border-color);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: var(--text-color);
	padding: 0.25rem 0.75rem;
	transition: background-color 0.15s;
}

.doc-preview-nav__btn:last-child {
	border-right: none;
	border-left: 1px solid var(--border-color);
}

.doc-preview-nav__btn:hover:not(:disabled) {
	background-color: var(--table-hover-bg);
}

.doc-preview-nav__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.doc-preview-nav__btn:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.doc-preview-nav__counter {
	display: flex;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--muted-text);
	min-width: 2.5rem;
	text-align: center;
	justify-content: center;
	padding: 0 0.5rem;
	user-select: none;
}

/* ============================================================
   #1616: Pagination
   Previous/Next navigation for paginated listing pages.
   ============================================================ */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.5rem;
	padding: 0.75rem 0;
}

.pagination__link {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--link-color);
	text-decoration: none;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	transition: background-color 0.15s, color 0.15s;
}

.pagination__link:hover:not(.pagination__link--disabled) {
	background-color: var(--table-hover-bg);
	text-decoration: none;
}

.pagination__link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.pagination__link--disabled {
	color: var(--muted-text);
	border-color: var(--border-light);
	cursor: default;
	opacity: 0.5;
}

.pagination__info {
	font-size: 0.875rem;
	color: var(--muted-text);
	user-select: none;
}