/**
 * Deposit widget components (issue #95). Owned by the widget workstream.
 * Tokens come from css/qonto-ui.css; never redefine a token here.
 *
 * Visual direction: Qonto's codes, not Qonto's brand. Light surfaces, rounded
 * cards, restrained typography, coloured state badges, discreet line icons.
 *
 * Responsive contract (issue #95, point 5): the acceptance width is 360 px.
 * The desktop layout is the enhancement, the narrow layout is the baseline, so
 * every block below is single-column by default and only spreads out from the
 * 768 px breakpoint upward. Touch targets use --qonto-tap-target.
 *
 * There is NO inline style anywhere in the widget's PHP: every state the
 * JavaScript toggles is a class defined here (.is-open, .is-hidden, ...).
 */

.qonto-deposit-box {
	color: var(--qonto-text);
	font-size: var(--qonto-font-size);
	line-height: var(--qonto-line-height);
}

/* Utility: the JavaScript hides and shows blocks by class, never by style. */
.qonto-deposit-box .is-hidden {
	display: none;
}

/* ---------------------------------------------------------------- drop zone */

.qonto-deposit-form {
	display: block;
	margin: 0;
}

.qonto-deposit-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qonto-space-2);
	box-sizing: border-box;
	width: 100%;
	padding: var(--qonto-space-4) var(--qonto-space-3);
	border: 2px dashed var(--qonto-border-strong);
	border-radius: var(--qonto-radius-lg);
	background: var(--qonto-bg);
	text-align: center;
}

.qonto-deposit-zone.qonto-deposit-hover {
	border-color: var(--qonto-accent);
	background: var(--qonto-badge-sent-bg);
}

.qonto-deposit-zone-icon {
	width: 28px;
	height: 28px;
	color: var(--qonto-text-muted);
}

.qonto-deposit-zone-label {
	font-size: var(--qonto-font-size-lg);
	font-weight: var(--qonto-font-weight-strong);
}

.qonto-deposit-input-label {
	display: block;
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-deposit-input {
	max-width: 100%;
	font-size: var(--qonto-font-size);
}

.qonto-deposit-input:focus-visible,
.qonto-deposit-btn:focus-visible,
.qonto-deposit-tx:focus-visible,
.qonto-deposit-tx-filter:focus-visible,
.qonto-deposit-modal-close:focus-visible {
	outline: none;
	box-shadow: var(--qonto-focus-ring);
}

.qonto-deposit-help {
	margin-top: var(--qonto-space-2);
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-deposit-feedback {
	margin-top: var(--qonto-space-2);
	padding: var(--qonto-space-2) var(--qonto-space-3);
	border-radius: var(--qonto-radius-sm);
	font-size: var(--qonto-font-size);
}

.qonto-deposit-feedback:empty {
	display: none;
}

.qonto-deposit-feedback.ok {
	background: var(--qonto-badge-imported-bg);
	color: var(--qonto-badge-imported-fg);
}

.qonto-deposit-feedback.duplicate {
	background: var(--qonto-badge-seen-bg);
	color: var(--qonto-badge-seen-fg);
}

.qonto-deposit-feedback.error {
	background: var(--qonto-badge-failed-bg);
	color: var(--qonto-badge-failed-fg);
}

/* ----------------------------------------------------------- prepared files */

.qonto-deposit-prepared {
	margin-top: var(--qonto-space-3);
}

.qonto-deposit-prepared-title {
	display: block;
	margin-bottom: var(--qonto-space-2);
	font-weight: var(--qonto-font-weight-strong);
}

.qonto-deposit-file-list {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.qonto-deposit-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qonto-space-2);
	padding: var(--qonto-space-2) var(--qonto-space-3);
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
	box-shadow: var(--qonto-shadow-card);
}

.qonto-deposit-file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qonto-deposit-file-size {
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
	white-space: nowrap;
}

.qonto-deposit-actions {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-2);
	margin-top: var(--qonto-space-3);
}

/* -------------------------------------------------------------------- buttons */

.qonto-deposit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--qonto-tap-target);
	padding: var(--qonto-space-2) var(--qonto-space-4);
	border: 1px solid var(--qonto-border-strong);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
	color: var(--qonto-text);
	font-size: var(--qonto-font-size);
	font-family: inherit;
	cursor: pointer;
}

.qonto-deposit-btn:hover {
	background: var(--qonto-surface-alt);
}

.qonto-deposit-btn-primary {
	border-color: var(--qonto-accent);
	background: var(--qonto-accent);
	color: var(--qonto-text-inverse);
	font-weight: var(--qonto-font-weight-strong);
}

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

.qonto-deposit-btn-ghost {
	min-height: auto;
	padding: var(--qonto-space-1) var(--qonto-space-2);
	border-color: transparent;
	background: transparent;
	color: var(--qonto-accent);
}

.qonto-deposit-btn-ghost:hover {
	background: var(--qonto-surface-alt);
}

.qonto-deposit-btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* --------------------------------------------------------------- pending list */

.qonto-deposit-pending {
	margin-top: var(--qonto-space-4);
	padding-top: var(--qonto-space-3);
	border-top: 1px solid var(--qonto-border);
}

.qonto-deposit-pending-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qonto-space-2);
	margin-bottom: var(--qonto-space-2);
}

.qonto-deposit-pending-title {
	font-weight: var(--qonto-font-weight-strong);
}

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

.qonto-deposit-cards {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Stacked cards: one card per deposit, readable at 360 px without a scrollbar. */
.qonto-deposit-card {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-2);
	padding: var(--qonto-space-3);
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
	box-shadow: var(--qonto-shadow-card);
}

.qonto-deposit-card-main {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--qonto-space-2);
	min-width: 0;
}

.qonto-deposit-card-name {
	overflow: hidden;
	font-weight: var(--qonto-font-weight-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qonto-deposit-card-age {
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
	white-space: nowrap;
}

.qonto-deposit-card-side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qonto-space-2);
	flex-wrap: wrap;
}

.qonto-deposit-card-detail {
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

/* ---------------------------------------------------------------- state badges */

.qonto-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--qonto-space-1);
	padding: 2px var(--qonto-space-2);
	border-radius: 999px;
	background: var(--qonto-badge-neutral-bg);
	color: var(--qonto-badge-neutral-fg);
	font-size: var(--qonto-font-size-sm);
	font-weight: var(--qonto-font-weight-strong);
}

/* Discreet icon: a coloured dot inheriting the badge's own colour, so a state
   is not carried by colour alone at a glance but by position + shape too. */
.qonto-badge::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.qonto-badge-sent {
	background: var(--qonto-badge-sent-bg);
	color: var(--qonto-badge-sent-fg);
}

.qonto-badge-seen {
	background: var(--qonto-badge-seen-bg);
	color: var(--qonto-badge-seen-fg);
}

.qonto-badge-imported {
	background: var(--qonto-badge-imported-bg);
	color: var(--qonto-badge-imported-fg);
}

.qonto-badge-matched {
	background: var(--qonto-badge-matched-bg);
	color: var(--qonto-badge-matched-fg);
}

.qonto-badge-failed {
	background: var(--qonto-badge-failed-bg);
	color: var(--qonto-badge-failed-fg);
}

/* ----------------------------------------------------------------------- modal */

.qonto-deposit-modal {
	display: none;
}

.qonto-deposit-modal.is-open {
	display: block;
}

.qonto-deposit-modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--qonto-modal-z);
	background: rgba(16, 24, 40, 0.45);
}

.qonto-deposit-modal-card {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var(--qonto-modal-z);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	max-height: 100%;
	margin: auto;
	padding: var(--qonto-space-4);
	background: var(--qonto-surface);
	color: var(--qonto-text);
	overflow-y: auto;
}

.qonto-deposit-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--qonto-space-2);
}

.qonto-deposit-modal-title {
	margin: 0;
	font-size: var(--qonto-font-size-xl);
	font-weight: var(--qonto-font-weight-strong);
}

.qonto-deposit-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--qonto-tap-target);
	min-height: var(--qonto-tap-target);
	border: none;
	border-radius: var(--qonto-radius);
	background: transparent;
	color: var(--qonto-text-muted);
	cursor: pointer;
}

.qonto-deposit-modal-close:hover {
	background: var(--qonto-surface-alt);
}

.qonto-deposit-modal-close svg {
	width: 16px;
	height: 16px;
}

.qonto-deposit-modal-help {
	margin: var(--qonto-space-2) 0 0 0;
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-deposit-modal-files {
	margin-top: var(--qonto-space-3);
}

.qonto-deposit-tx-filter {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--qonto-tap-target);
	margin-top: var(--qonto-space-2);
	padding: var(--qonto-space-2) var(--qonto-space-3);
	border: 1px solid var(--qonto-border-strong);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
	color: var(--qonto-text);
	font-size: var(--qonto-font-size);
	font-family: inherit;
}

.qonto-deposit-tx-list {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-2);
	max-height: 40vh;
	margin-top: var(--qonto-space-3);
	overflow-y: auto;
}

.qonto-deposit-tx {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--qonto-tap-target);
	padding: var(--qonto-space-2) var(--qonto-space-3);
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
	color: var(--qonto-text);
	font-size: var(--qonto-font-size);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.qonto-deposit-tx:hover {
	border-color: var(--qonto-accent);
	background: var(--qonto-badge-sent-bg);
}

.qonto-deposit-tx-label {
	font-weight: var(--qonto-font-weight-strong);
}

.qonto-deposit-tx-meta {
	display: flex;
	gap: var(--qonto-space-2);
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-deposit-tx-amount-debit {
	color: var(--qonto-amount-debit);
}

.qonto-deposit-tx-amount-credit {
	color: var(--qonto-amount-credit);
}

.qonto-deposit-tx-state {
	margin-top: var(--qonto-space-2);
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-deposit-modal-foot {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-2);
	margin-top: var(--qonto-space-4);
	padding-top: var(--qonto-space-3);
	border-top: 1px solid var(--qonto-border);
}

/* ------------------------------------------------------------- desktop layout */

@media (min-width: 768px) {
	.qonto-deposit-zone {
		flex-direction: row;
		justify-content: center;
		padding: var(--qonto-space-5) var(--qonto-space-4);
	}

	.qonto-deposit-actions {
		flex-direction: row;
		justify-content: flex-end;
	}

	.qonto-deposit-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.qonto-deposit-card-main {
		flex: 1 1 auto;
	}

	.qonto-deposit-card-side {
		flex: 0 0 auto;
		justify-content: flex-end;
	}

	.qonto-deposit-modal-card {
		top: 10vh;
		bottom: auto;
		max-height: 80vh;
		border-radius: var(--qonto-radius-lg);
		box-shadow: var(--qonto-shadow-pane);
	}

	.qonto-deposit-modal-foot {
		flex-direction: row;
		justify-content: flex-end;
	}
}