/*!
Theme Name: PaymentIHC
Theme URI: https://example.com/paymentihc
Author: PaymentIHC Team
Author URI: https://example.com
Description: Custom WordPress theme for PaymentIHC. Built on an Underscores-style starter with Bootstrap 5 and Alpine.js for approval-flow interactions.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paymentihc
Tags: custom, bootstrap-5, alpine-js, approval-workflow
*/

/* Theme overrides go here. Bootstrap 5 is loaded as a separate stylesheet. */

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

main {
	flex: 1 0 auto;
}

footer.site-footer {
	flex-shrink: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: #000;
	color: #fff;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

.login-logo {
	max-height: 64px;
	width: auto;
}

/* Auth screens: full-height centered card, no navbar / footer chrome. */
body.auth-page {
	display: block;
	min-height: 100vh;
}

.auth-main {
	width: 100%;
}

.auth-main .card {
	border-radius: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* App shell — logged-in dashboard (sidebar + main).                  */
/* ------------------------------------------------------------------ */

body.app-page {
	display: block;
	min-height: 100vh;
	background: #f5f7fa;
}

.app-layout {
	display: flex;
	min-height: 100vh;
}

.app-sidebar {
	width: 260px;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

/* Bootstrap's `.offcanvas-lg` forces background-color:transparent !important
   above the lg breakpoint, so we must use !important too. The brand colour
   becomes the mid-stop of a subtle dark-blue gradient — slightly lighter top-
   left fading to darker bottom-right gives the nav some depth without
   straying from the palette. */
.app-sidebar.offcanvas-lg,
.app-sidebar {
	background-color: var(--paymentihc-brand) !important;
	background-image: linear-gradient(135deg, #053a72 0%, #02274c 55%, #001528 100%) !important;
}

.app-sidebar-brand {
	padding: 1.25rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar-brand strong {
	font-size: 1.05rem;
	line-height: 1.25;
	color: #fff;
}

.app-sidebar-logo {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 48px;
}

/* Desktop sidebar: centre the brand and enlarge the logo by 20%. The mobile
   layout keeps space-between so the offcanvas close button stays right. */
@media (min-width: 992px) {
	.app-sidebar-brand {
		justify-content: center;
	}
	.app-sidebar-logo {
		max-height: 58px; /* 48 * 1.2 */
	}
}

.app-sidebar-nav {
	display: flex;
	flex-direction: column;
	padding: 1rem 0.75rem;
	gap: 0.25rem;
	flex: 1 1 auto;
	overflow-y: auto;
}

.app-sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.85rem;
	border-radius: 0.5rem;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-size: 0.95rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.app-sidebar-link:hover,
.app-sidebar-link:focus {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.app-sidebar-link.active {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-weight: 500;
}

.app-sidebar-link .app-icon {
	flex-shrink: 0;
	opacity: 0.85;
}

.app-sidebar-footer {
	padding: 0.75rem 0.75rem 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.app-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.75rem;
	background: #fff;
	border-bottom: 1px solid #e9ecef;
}

.app-topbar-title h1 {
	color: #15243a;
}

.app-topbar-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Mobile-only brand mark on the topbar — sized to keep the bar compact. */
.app-topbar-logo-link {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.app-topbar-logo {
	display: block;
	width: auto;
	height: 32px;
	max-height: 32px;
}

/* Mobile topbar: dark brand background with white text. Scoped to <lg
   so the desktop chrome (which has a sidebar carrying the brand) keeps
   its clean white topbar. */
@media (max-width: 991.98px) {
	.app-topbar {
		background: #02274c linear-gradient(135deg, #053a72 0%, #02274c 55%, #001528 100%);
		border-bottom-color: #001528;
		color: #fff;
	}
	.app-topbar .app-topbar-title h1,
	.app-topbar .app-topbar-title small,
	.app-topbar .app-topbar-title a {
		color: #fff;
	}
	.app-topbar .text-muted {
		color: rgba(255, 255, 255, 0.75) !important;
	}
	.app-topbar .app-sidebar-toggle,
	.app-topbar .app-sidebar-toggle:hover,
	.app-topbar .app-sidebar-toggle:focus {
		color: #fff;
	}

	/* Logo +30%: 32 * 1.3 = ~42 */
	.app-topbar-logo {
		height: 42px;
		max-height: 42px;
	}

	/* Reduce centre title size on mobile so the dark bar stays compact. */
	.app-topbar-title {
		text-align: center;
		min-width: 0;
	}
	.app-topbar-title h1 {
		font-size: 1rem;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* Hide the subtitle line on mobile — keeps the topbar single-line. */
	.app-topbar-title small {
		display: none;
	}
}

.app-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 0.5rem;
	background: #f5f7fa;
	color: #4a5b73;
	border: 1px solid transparent;
}

.app-icon-btn:hover {
	background: #e9eef5;
	color: var(--paymentihc-brand);
}

.app-user-btn {
	border: none;
	background: transparent;
	padding: 0.25rem 0.5rem;
	color: #15243a;
}

.app-user-btn:hover {
	background: #f5f7fa;
}

.app-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--paymentihc-brand);
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
}

.app-content {
	padding: 1.75rem;
	flex: 1 1 auto;
}

/* Per-page actions row (e.g. "Add User" / "Add Team" buttons). Sits at the
   top of .app-content, right-aligned so it reads as the page's primary CTA
   without crowding the shared topbar. */
.page-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

/* Stat cards */
.stat-card {
	border: 1px solid #eaecef;
	border-radius: 0.75rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.stat-card-clickable {
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.stat-card-clickable:hover {
	border-color: var(--paymentihc-brand);
	box-shadow: 0 2px 8px rgba(2, 39, 76, 0.10);
	transform: translateY(-1px);
}

.stat-card-clickable.stat-card-active {
	border-color: var(--paymentihc-brand);
	box-shadow: 0 0 0 2px rgba(2, 39, 76, 0.15), 0 2px 8px rgba(2, 39, 76, 0.10);
}

.stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: #15243a;
	line-height: 1;
}

.stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 0.5rem;
	color: #fff;
	flex-shrink: 0;
}

.stat-icon-blue   { background: #3b82f6; }
.stat-icon-orange { background: #f59e0b; }
.stat-icon-green  { background: #10b981; }
.stat-icon-red    { background: #ef4444; }
.stat-icon-purple { background: #8b5cf6; }
.stat-icon-gray   { background: #6b7280; }

/* Status pills */
.status-pill {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.4;
}

.status-pending,
.status-inreview {
	background: #fef3c7;
	color: #92400e;
}

.status-approved {
	background: #d1fae5;
	color: #065f46;
}

.status-rejected {
	background: #fee2e2;
	color: #991b1b;
}

.status-cancel {
	background: #f3f4f6;
	color: #6b7280;
	text-decoration: line-through;
}

/* Payment requests table — header echoes the brand gradient used on the
   sidebar and mobile topbar so all chrome reads as one surface. The gradient
   lives on <thead> so it spans the full row continuously; each <th> is
   transparent so the gradient shows through without per-cell seams. */
.pr-table thead {
	background: #02274c linear-gradient(135deg, #1a5fa5 0%, #0a3d7a 55%, #02274c 100%);
}
.pr-table thead th {
	background: transparent !important;
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: none;
	border-bottom: 1px solid #02274c;
	padding: 0.85rem 0.9rem;
}

/* Sort affordance — clickable headers get a cursor + dim arrow placeholder
   that turns solid when the column is the active sort. */
.pr-table thead th.pr-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
.pr-table thead th.pr-sortable:hover {
	background: rgba(255, 255, 255, 0.06) !important;
}
.pr-table thead th.pr-sortable::after {
	content: '';
	display: inline-block;
	margin-left: 0.4rem;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid rgba(255, 255, 255, 0.35);
	vertical-align: middle;
	transition: opacity 0.15s ease;
}
.pr-table thead th.pr-sort-asc::after {
	border-bottom-color: #fff;
}
.pr-table thead th.pr-sort-desc::after {
	border-bottom: 0;
	border-top: 5px solid #fff;
}

.pr-table tbody td {
	color: #1f2937;
	padding: 0.95rem 0.9rem;
	vertical-align: middle;
}

.pr-table tbody tr + tr td {
	border-top: 1px solid #f1f5f9;
}

/* Expense voucher mobile card list (view-expenses.php under md).
   Each card mirrors a table row: a bold "Employee | Amount" header strip,
   then label/value rows for Voucher No., Title, Date, Status. */
.ev-card-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ev-card {
	border: 1px solid #e5e7eb;
	border-radius: 0.6rem;
	background: #fff;
	padding: 0.85rem 1rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.ev-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.5rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #f1f5f9;
}

.ev-card-employee {
	font-weight: 600;
	color: #1f2937;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ev-card-amount {
	font-weight: 700;
	color: #15243a;
	white-space: nowrap;
}

.ev-card-body {
	display: grid;
	grid-template-columns: minmax(110px, max-content) 1fr;
	column-gap: 0.85rem;
	row-gap: 0.4rem;
	margin: 0;
	font-size: 0.92rem;
}

.ev-card-body dt {
	font-weight: 500;
	color: #6b7280;
}

.ev-card-body dd {
	margin: 0;
	color: #1f2937;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ev-card-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.75rem;
	padding-top: 0.6rem;
	border-top: 1px solid #f1f5f9;
}

/* Filters */
.filter-row .input-group-text {
	color: #6b7280;
}

.filter-row .form-control:focus,
.filter-row .form-select:focus {
	border-color: var(--paymentihc-brand);
	box-shadow: 0 0 0 0.2rem rgba(2, 39, 76, 0.12);
}

/* Responsive: collapse the sidebar into an offcanvas under lg */
@media (max-width: 991.98px) {
	.app-sidebar {
		width: 280px;
	}
	.app-content {
		padding: 1.25rem;
	}
	.app-topbar {
		padding: 0.9rem 1.25rem;
	}
}

/* Bootstrap offcanvas behavior on small screens — restore static layout on lg+ */
@media (min-width: 992px) {
	.app-sidebar.offcanvas-lg {
		position: static;
		visibility: visible;
		transform: none;
	}
}

/* Brand button: every Bootstrap variant resolves to #02274c bg + white text. */
:root {
	--paymentihc-brand:        #02274c;
	--paymentihc-brand-hover:  #043567;
	--paymentihc-brand-active: #011a34;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
	--bs-btn-color:                 #fff;
	--bs-btn-bg:                    var(--paymentihc-brand);
	--bs-btn-border-color:          var(--paymentihc-brand);
	--bs-btn-hover-color:           #fff;
	--bs-btn-hover-bg:              var(--paymentihc-brand-hover);
	--bs-btn-hover-border-color:    var(--paymentihc-brand-hover);
	--bs-btn-active-color:          #fff;
	--bs-btn-active-bg:             var(--paymentihc-brand-active);
	--bs-btn-active-border-color:   var(--paymentihc-brand-active);
	--bs-btn-disabled-color:        #fff;
	--bs-btn-disabled-bg:           var(--paymentihc-brand);
	--bs-btn-disabled-border-color: var(--paymentihc-brand);
	--bs-btn-focus-shadow-rgb:      2, 39, 76;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
	--bs-btn-color:               var(--paymentihc-brand);
	--bs-btn-border-color:        var(--paymentihc-brand);
	--bs-btn-hover-color:         #fff;
	--bs-btn-hover-bg:            var(--paymentihc-brand);
	--bs-btn-hover-border-color:  var(--paymentihc-brand);
	--bs-btn-active-color:        #fff;
	--bs-btn-active-bg:           var(--paymentihc-brand);
	--bs-btn-active-border-color: var(--paymentihc-brand);
	--bs-btn-focus-shadow-rgb:    2, 39, 76;
}

/* ------------------------------------------------------------------ */
/* Workflow Step Builder                                               */
/* ------------------------------------------------------------------ */

.wf-steps {
	position: relative;
}

.wf-step-card {
	position: relative;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 0.75rem;
	padding: 0;
	margin-bottom: 0;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wf-step-card:hover {
	border-color: var(--paymentihc-brand);
	box-shadow: 0 2px 8px rgba(2, 39, 76, 0.08);
}

.wf-step-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #f1f5f9;
	background: #f8fafc;
	border-radius: 0.75rem 0.75rem 0 0;
}

.wf-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--paymentihc-brand);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.wf-step-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.wf-step-actions .btn {
	padding: 0.25rem 0.4rem;
	line-height: 1;
}

.wf-step-body {
	padding: 1rem;
}

/* Connector line between steps */
.wf-step-connector {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	position: relative;
	height: 36px;
}

.wf-connector-line {
	width: 2px;
	flex: 1;
	background: var(--paymentihc-brand);
	opacity: 0.35;
}

.wf-connector-arrow {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--paymentihc-brand);
	opacity: 0.45;
}

/* Type badges inside the step builder */
.wf-step-card .form-select,
.wf-step-card .form-control {
	font-size: 0.9rem;
}

/* Select2 (assignee multi-select) — match Bootstrap 5 form-control look. */
.wf-step-card .select2-container { width: 100% !important; }
.select2-container--default .select2-selection--multiple {
	border-color: #ced4da;
	border-radius: 0.375rem;
	min-height: 38px;
	padding: 0.1rem 0.25rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: #86b7fe;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	outline: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--paymentihc-brand, #02274c);
	border: none;
	color: #fff;
	border-radius: 4px;
	font-size: 0.82rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: rgba(255, 255, 255, 0.85);
	margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff;
	background: transparent;
}
/* Select2 single-select (e.g. the requestor filter) — match form-select
   exactly: Bootstrap's control height is calc(1.5em + 0.75rem + 2px).
   Scoped under .filter-row so these rules out-specify Select2's own CDN
   defaults (which load after this stylesheet). */
.filter-row .select2-container { width: 100% !important; }
.filter-row .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	height: calc(1.5em + 0.75rem + 2px);
	border-color: #ced4da;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	padding: 0 0.25rem 0 0.5rem;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.5;
	padding-left: 0;
	padding-right: 0;
	color: #212529;
}
.filter-row .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: calc(1.5em + 0.75rem);
}
.filter-row .select2-container--default.select2-container--focus .select2-selection--single,
.filter-row .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #86b7fe;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	outline: 0;
}
.select2-dropdown { z-index: 1085; }

/* Responsive tweaks */
@media (max-width: 767.98px) {
	.wf-step-body .row > [class*="col-md"] {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.wf-step-header {
		padding: 0.6rem 0.75rem;
	}

	.wf-step-body {
		padding: 0.75rem;
	}
}

/* ------------------------------------------------------------------ */
/* Expense Voucher                                                    */
/* ------------------------------------------------------------------ */

.ev-card {
	overflow: hidden;
}

.ev-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.25rem;
	background: linear-gradient(135deg, #02274c 0%, #0a4a8a 100%);
	color: #fff;
}

.ev-header-title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
}

/* Line-items table */
.ev-table {
	font-size: 0.85rem;
}

.ev-table thead {
	background: #02274c linear-gradient(135deg, #1a5fa5 0%, #0a3d7a 55%, #02274c 100%);
}
.ev-table thead th {
	background: transparent !important;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	border-color: rgba(255, 255, 255, 0.15);
}

.ev-table tbody td {
	vertical-align: middle;
	padding: 0.35rem 0.4rem;
}

.ev-table tbody input.form-control {
	border-color: #e2e8f0;
}

.ev-table tbody input.form-control:focus {
	border-color: var(--paymentihc-brand);
	box-shadow: 0 0 0 0.15rem rgba(2, 39, 76, 0.08);
}

/* Column widths */
.ev-col-no   { width: 50px; text-align: center; }
.ev-col-date { min-width: 120px; }
.ev-col-cust { min-width: 100px; }
.ev-col-name { min-width: 130px; }
.ev-col-desc { min-width: 180px; }
.ev-col-num  { min-width: 110px; }
.ev-col-total { min-width: 110px; }
.ev-col-act  { width: 110px; }

/* ── Mobile: turn the line-item table into stacked cards (no L/R scroll) ──
   Applied only to tables flagged .ev-table-cards. Each row becomes a bordered
   card; each cell becomes a "label : value" line using the td's data-label. */
@media (max-width: 767.98px) {
	.ev-table-cards,
	.ev-table-cards tbody,
	.ev-table-cards tfoot {
		display: block;
		width: 100%;
	}
	.ev-table-cards thead { display: none; }

	.ev-table-cards tbody tr {
		display: block;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		margin: 0 0 12px;
		padding: 4px 12px;
		background: #fff;
	}

	.ev-table-cards tbody td {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		border: 0;
		border-bottom: 1px solid #f1f3f5;
		padding: 7px 0;
	}
	.ev-table-cards tbody td:last-child { border-bottom: 0; }

	.ev-table-cards tbody td::before {
		content: attr(data-label);
		flex: 0 0 7.5rem;
		max-width: 7.5rem;
		font-size: 0.78rem;
		font-weight: 600;
		color: #6c757d;
	}

	.ev-table-cards tbody td > .form-control,
	.ev-table-cards tbody td > input,
	.ev-table-cards tbody td > select {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* Row number → card header strip */
	.ev-table-cards tbody td.ev-col-no {
		justify-content: flex-start;
		font-weight: 700;
		color: var(--paymentihc-brand, #02274c);
		border-bottom: 2px solid #dee2e6;
	}
	.ev-table-cards tbody td.ev-col-no::before {
		content: "#";
		flex: 0 0 auto;
		max-width: none;
	}

	/* Total line inside each card */
	.ev-table-cards tbody td.ev-row-total { justify-content: space-between; }

	/* Action cell: no label, let buttons + thumbnails span full width */
	.ev-table-cards tbody td.ev-col-act { display: block; }
	.ev-table-cards tbody td.ev-col-act::before { content: none; }

	/* Footer: show only the grand total (hide per-column subtotals). */
	.ev-table-cards tfoot tr {
		display: block;
		padding: 8px 12px;
	}
	.ev-table-cards tfoot td { display: none; }
	.ev-table-cards tfoot td.ev-grand-total {
		display: flex;
		justify-content: space-between;
		font-size: 1rem;
	}
	.ev-table-cards tfoot td.ev-grand-total::before {
		content: attr(data-label);
		font-weight: 700;
	}
}

/* Per-row attachment thumbnails (line-item upload). */
.ev-attachments {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	margin-top: 4px;
}

/* Mobile: line-item attachment thumbnails go 2-up at 50% width each
   (the voucher-level .ev-attachments-grid keeps its own grid rules). */
@media (max-width: 767.98px) {
	.ev-attachments:not(.ev-attachments-grid) {
		justify-content: flex-start;
		gap: 8px;
	}
	.ev-attachments:not(.ev-attachments-grid) .ev-att-chip {
		flex: 0 0 calc(50% - 4px);
		max-width: calc(50% - 4px);
	}
	.ev-attachments:not(.ev-attachments-grid) .ev-att-trigger {
		display: block;
		width: 100%;
	}
	.ev-attachments:not(.ev-attachments-grid) .ev-att-thumb {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}
}
.ev-att-chip {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.ev-att-thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	display: block;
}
.ev-att-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: none;
	background: #dc3545;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ev-att-remove:hover { background: #b02a37; }

/* Grid variant for the full-width voucher attachments (Advance & Summary):
   4 thumbnails per row on desktop, 2 per row on mobile. The line-item strip
   keeps the plain flex layout above. */
.ev-attachments-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	justify-content: initial;
}
.ev-attachments-grid .ev-att-chip {
	display: block;
	width: 100%;
}
.ev-attachments-grid .ev-att-trigger {
	display: block;
	width: 100%;
}
.ev-attachments-grid .ev-att-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}
@media (max-width: 575.98px) {
	.ev-attachments-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ev-upload-input { display: none; }
.ev-upload-progress {
	font-size: 11px;
	color: #6c757d;
	margin-top: 2px;
}

/* Thumbnail trigger — strip default button chrome so the image fills it. */
.ev-att-trigger {
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

/* Hide elements with x-cloak until Alpine takes over — prevents flash of
   the un-bound lightbox div on page load. */
[x-cloak] { display: none !important; }

/* Lightbox overlay for tapping a thumbnail. Fixed position so it floats
   above everything; backdrop dim + click-anywhere-to-close. */
.ev-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1080;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	cursor: zoom-out;
}
.ev-lightbox-img {
	max-width: 95%;
	max-height: 90vh;
	width: auto;
	height: auto;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	cursor: default;
}
.ev-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ev-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Mobile-friendly add-row dialog (lives inside the voucher edit form).
   Custom modal so it stays inside the same Alpine scope as the form,
   avoiding Bootstrap's modal API which would break the data binding. */
.ev-modal {
	position: fixed;
	inset: 0;
	z-index: 1070;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.ev-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
.ev-modal-dialog {
	position: relative;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	width: 100%;
	max-width: 440px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
}
.ev-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e9ecef;
}
.ev-modal-body {
	padding: 16px 20px;
	overflow-y: auto;
}
.ev-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 20px;
	border-top: 1px solid #e9ecef;
}

/* Gallery of all line-item uploads, shown beneath the items table.
   Each tile takes 25% width (4 per row), with a square thumbnail. */
.ev-att-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ev-att-gallery-item {
	flex: 0 0 calc(25% - 9px); /* 4-up minus the 12px gap pro-rated */
	max-width: calc(25% - 9px);
}
.ev-att-gallery-item .ev-att-trigger {
	display: block;
	width: 100%;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	overflow: hidden;
	background: #f8f9fa;
}
.ev-att-gallery-item .ev-att-gallery-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.ev-att-gallery-caption {
	display: block;
	font-size: 12px;
	color: #6c757d;
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 575.98px) {
	.ev-att-gallery-item {
		flex: 0 0 calc(50% - 6px);
		max-width: calc(50% - 6px);
	}
}

.ev-row-total {
	background: #f5f8fb;
	font-variant-numeric: tabular-nums;
}

/* Totals row */
.ev-totals-row td {
	background: #eef2f7;
	border-top: 2px solid #02274c;
	font-variant-numeric: tabular-nums;
}

.ev-grand-total {
	color: #02274c;
	font-size: 1rem;
}

/* Status pill – draft variant */
.status-pill.status-secondary,
.status-pill.status-draft {
	background: #e9ecef;
	color: #495057;
}

/* Approval chain preview (view-expenses-edit.php). Vertical list of steps
   with a numbered bullet; the current step is highlighted, completed steps
   are dimmed, rejected step is red. */
.ev-approval-card {
	border-radius: 0.6rem;
}

.ev-chain {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ev-chain-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #fff;
}

.ev-chain-step {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e5e7eb;
	color: #4b5563;
	font-weight: 600;
	font-size: 0.85rem;
}

.ev-chain-text {
	min-width: 0;
}

.ev-chain-label {
	font-weight: 600;
	color: #1f2937;
}

.ev-chain-current {
	border-color: #f59e0b;
	background: #fffbeb;
}

.ev-chain-current .ev-chain-step {
	background: #f59e0b;
	color: #fff;
}

.ev-chain-done {
	opacity: 0.7;
}

.ev-chain-done .ev-chain-step {
	background: #10b981;
	color: #fff;
}

.ev-chain-rejected {
	border-color: #ef4444;
	background: #fef2f2;
}

.ev-chain-rejected .ev-chain-step {
	background: #ef4444;
	color: #fff;
}

/* Approval history log (ordered list of approve / reject events with
   actor + timestamp + optional comment). Lives beneath .ev-chain on
   the voucher edit page once at least one approver has acted. */
.ev-history {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ev-history-item {
	border: 1px solid #e5e7eb;
	border-left-width: 3px;
	border-radius: 0.5rem;
	padding: 0.55rem 0.75rem;
	background: #fff;
}

.ev-history-approve {
	border-left-color: #10b981;
}

.ev-history-reject {
	border-left-color: #ef4444;
}

.ev-history-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ev-history-action {
	font-weight: 600;
	color: #1f2937;
}

.ev-history-approve .ev-history-action {
	color: #047857;
}

.ev-history-reject .ev-history-action {
	color: #b91c1c;
}

.ev-history-label {
	color: #4b5563;
}

.ev-history-comment {
	margin-top: 0.35rem;
	white-space: pre-wrap;
}