/**
 * Transaction table and detail pane components (issue #96). Owned by the table
 * workstream. Tokens come from css/qonto-ui.css; never redefine a token here.
 *
 * Visual target: Qonto's grammar, not its brand. Dense rows, right-aligned
 * amounts that are readable as money at a glance, counterparty in bold with the
 * raw bank label underneath, state carried by a coloured badge rather than by a
 * column of words.
 *
 * One breakpoint (min-width: 768px), mobile first, matching the widget sheet.
 * Below it the table stops being a table and becomes a stack of cards, because
 * the acceptance criterion is 360 px wide and a horizontally scrolling table at
 * that width is not usable, it is technically present.
 */

/* --------------------------------------------------------------- screen --- */

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

/* ----------------------------------------------------------- quick views --- */

.qonto-views {
	display: flex;
	gap: var(--qonto-space-1);
	overflow-x: auto;
	/* The tabs scroll sideways on a narrow screen rather than wrapping into a
	   second row that pushes the table down. */
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid var(--qonto-border);
	margin-bottom: var(--qonto-space-3);
}

.qonto-view-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--qonto-space-2);
	white-space: nowrap;
	padding: var(--qonto-space-3) var(--qonto-space-4);
	min-height: var(--qonto-tap-target);
	color: var(--qonto-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.qonto-view-tab:hover {
	color: var(--qonto-text);
	background: var(--qonto-surface-alt);
}

.qonto-view-tab.selected {
	color: var(--qonto-text);
	font-weight: var(--qonto-font-weight-strong);
	border-bottom-color: var(--qonto-accent);
}

.qonto-view-count {
	font-size: var(--qonto-font-size-sm);
	color: var(--qonto-text-muted);
	background: var(--qonto-surface-alt);
	border-radius: 999px;
	padding: 0 var(--qonto-space-2);
}

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

/* -------------------------------------------------------------- filters --- */

.qonto-quickfilters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qonto-space-2);
	align-items: flex-end;
	padding: var(--qonto-space-3) 0;
}

.qonto-field {
	display: flex;
	flex-direction: column;
	gap: var(--qonto-space-1);
}

.qonto-field-pair {
	display: flex;
	gap: var(--qonto-space-2);
}

.qonto-field-amount input {
	width: 7em;
}

.qonto-field-text input {
	min-width: 12em;
}

.qonto-field-buttons {
	display: flex;
	gap: var(--qonto-space-2);
	margin-left: auto;
}

/* ---------------------------------------------------------------- table --- */

.qonto-list-table {
	position: relative;
}

.qonto-list-busy {
	opacity: 0.55;
	pointer-events: none;
}

.qonto-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--qonto-surface);
}

.qonto-row {
	border-bottom: 1px solid var(--qonto-border);
	cursor: pointer;
}

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

.qonto-row:focus-within {
	outline: none;
	box-shadow: var(--qonto-focus-ring);
}

.qonto-row td {
	padding: var(--qonto-space-3) var(--qonto-space-2);
	vertical-align: middle;
}

/* Counterparty in bold, the raw bank label underneath and quieter: the two
   answer different questions and must not compete. */
.qonto-cp {
	display: block;
	font-weight: var(--qonto-font-weight-strong);
}

.qonto-cp-sub {
	display: block;
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 28em;
}

.qonto-date {
	color: var(--qonto-text-muted);
	white-space: nowrap;
}

.qonto-amount {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-weight: var(--qonto-font-weight-strong);
}

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

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

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

/* Matched document: the type on its own line, the document underneath.
   "Factures clients FA2609-0044" on one line is the longest thing in the table
   and it pushed the columns people read sideways; as two lines it reads as what
   it is, a label and the document it labels. display:block does the break, so
   the cell keeps nowrap and neither line breaks in the middle of a reference. */
.qonto-doctype {
	display: block;
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
	line-height: 1.2;
}

.qonto-doclink {
	color: var(--qonto-accent);
}

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

.qonto-badge {
	display: inline-block;
	padding: 2px var(--qonto-space-2);
	border-radius: 999px;
	font-size: var(--qonto-font-size-sm);
	font-weight: var(--qonto-font-weight-strong);
	background: var(--qonto-badge-neutral-bg);
	color: var(--qonto-badge-neutral-fg);
	white-space: nowrap;
}

.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); }

/* --------------------------------------------------------- row actions --- */

.qonto-rowactions {
	white-space: nowrap;
}

.qonto-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--qonto-tap-target);
	min-height: var(--qonto-tap-target);
	border: 1px solid transparent;
	border-radius: var(--qonto-radius-sm);
	background: transparent;
	color: var(--qonto-text-muted);
	cursor: pointer;
}

.qonto-iconbtn:hover {
	background: var(--qonto-surface-alt);
	color: var(--qonto-text);
	border-color: var(--qonto-border);
}

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

.qonto-iconbtn-danger:hover {
	color: var(--qonto-amount-debit);
}

/* ------------------------------------------------- accordion and drawer --- */

.qonto-accordion,
.qonto-deposit-drawer {
	margin-top: var(--qonto-space-5);
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
}

.qonto-accordion > summary,
.qonto-deposit-drawer > summary {
	cursor: pointer;
	padding: var(--qonto-space-3) var(--qonto-space-4);
	min-height: var(--qonto-tap-target);
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-accordion > summary:hover,
.qonto-deposit-drawer > summary:hover {
	color: var(--qonto-text);
}

.qonto-accordion-body,
.qonto-deposit-drawer-body {
	padding: var(--qonto-space-4);
	border-top: 1px solid var(--qonto-border);
}

.qonto-accordion-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qonto-space-3);
	align-items: flex-end;
}

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

/* ----------------------------------------------------------------- pane --- */

.qonto-pane-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(16, 24, 40, 0.35);
	z-index: calc(var(--qonto-pane-z) - 1);
}

.qonto-pane-backdrop[hidden],
.qonto-pane[hidden] {
	display: none;
}

.qonto-pane {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 100%;
	background: var(--qonto-surface);
	box-shadow: var(--qonto-shadow-pane);
	z-index: var(--qonto-pane-z);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.qonto-pane-inner {
	padding: var(--qonto-space-4);
}

.qonto-pane-head {
	display: flex;
	align-items: flex-start;
	gap: var(--qonto-space-3);
	padding-bottom: var(--qonto-space-3);
	border-bottom: 1px solid var(--qonto-border);
}

.qonto-pane-title {
	flex: 1 1 auto;
	min-width: 0;
}

.qonto-pane-counterparty {
	display: block;
	font-size: var(--qonto-font-size-lg);
	font-weight: var(--qonto-font-weight-strong);
}

.qonto-pane-sublabel {
	display: block;
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

.qonto-pane-amount {
	font-size: var(--qonto-font-size-xl);
	font-weight: var(--qonto-font-weight-strong);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.qonto-pane-nav {
	display: flex;
	gap: var(--qonto-space-1);
}

.qonto-pane-navbtn,
.qonto-pane-close {
	min-width: var(--qonto-tap-target);
	min-height: var(--qonto-tap-target);
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius-sm);
	background: var(--qonto-surface);
	color: var(--qonto-text-muted);
	cursor: pointer;
	font-size: var(--qonto-font-size-lg);
}

.qonto-pane-navbtn:hover:not([disabled]),
.qonto-pane-close:hover {
	background: var(--qonto-surface-alt);
	color: var(--qonto-text);
}

.qonto-pane-navbtn[disabled] {
	opacity: 0.4;
	cursor: default;
}

.qonto-pane-navbtn:focus-visible,
.qonto-pane-close:focus-visible {
	outline: none;
	box-shadow: var(--qonto-focus-ring);
}

.qonto-pane-badges {
	display: flex;
	gap: var(--qonto-space-2);
	padding: var(--qonto-space-3) 0;
}

.qonto-pane-section {
	padding: var(--qonto-space-3) 0;
	border-top: 1px solid var(--qonto-border);
}

.qonto-pane-heading {
	margin: 0 0 var(--qonto-space-2);
	font-size: var(--qonto-font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--qonto-text-muted);
}

.qonto-pane-row {
	display: flex;
	gap: var(--qonto-space-3);
	padding: var(--qonto-space-1) 0;
}

.qonto-pane-label {
	flex: 0 0 40%;
	color: var(--qonto-text-muted);
}

.qonto-pane-value {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.qonto-pane-empty,
.qonto-pane-loading,
.qonto-pane-error {
	color: var(--qonto-text-muted);
	padding: var(--qonto-space-3);
}

.qonto-pane-error {
	color: var(--qonto-amount-debit);
}

.qonto-pane-file {
	display: flex;
	align-items: center;
	gap: var(--qonto-space-3);
	padding: var(--qonto-space-2) 0;
}

.qonto-pane-thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius-sm);
	background: var(--qonto-surface-alt);
}

/* The Qonto identifier column (off by default): long, machine written, and it
   must break rather than shove the readable columns off a narrow screen. */
.qonto-txid {
	overflow-wrap: anywhere;
	max-width: 14ch;
}

.qonto-pane-filename {
	overflow-wrap: anywhere;
}

/* Removing a receipt: a form, not a link, so it needs to stop behaving like a
   block and pushing the file name onto its own line. It sits at the end of the
   row, away from the name and the preview it would otherwise be mistaken for
   part of. */
.qonto-pane-file-delete {
	margin: 0 0 0 auto;
	flex: 0 0 auto;
}

.qonto-pane-file-pdf .qonto-pane-file-delete {
	margin-left: 0;
	align-self: flex-end;
}

.qonto-pane-file-deletebtn {
	min-height: var(--qonto-tap-target);
	white-space: nowrap;
}

/* A PDF attachment is previewed by the browser's own renderer, inside the pane
   (issue #109). It needs the full width and a real height to be worth the
   name, so that row stacks instead of sitting on one line like a thumbnail. */
.qonto-pane-file-pdf {
	flex-direction: column;
	align-items: stretch;
	gap: var(--qonto-space-2);
}

.qonto-pane-pdf {
	width: 100%;
	height: 320px;
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius-sm);
	background: var(--qonto-surface-alt);
}

@media (max-width: 767px) {
	.qonto-pane-pdf {
		height: 220px;
	}
}

.qonto-pane-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--qonto-space-2);
	padding-top: var(--qonto-space-3);
	border-top: 1px solid var(--qonto-border);
}

/* Stop the page behind the pane scrolling under the finger on mobile. */
body.qonto-pane-open {
	overflow: hidden;
}

/* ------------------------------------------------------ mobile to desk --- */

@media (max-width: 767px) {
	/* The table becomes a stack of cards. Each cell carries its own label
	   through data-label, so a row reads top to bottom without a header. */
	.qonto-table thead {
		display: none;
	}

	.qonto-table,
	.qonto-table tbody,
	.qonto-row,
	.qonto-row td {
		display: block;
		width: 100%;
	}

	.qonto-row {
		margin-bottom: var(--qonto-space-3);
		border: 1px solid var(--qonto-border);
		border-radius: var(--qonto-radius);
		box-shadow: var(--qonto-shadow-card);
		padding: var(--qonto-space-2);
	}

	.qonto-row td {
		display: flex;
		justify-content: space-between;
		gap: var(--qonto-space-3);
		padding: var(--qonto-space-1) var(--qonto-space-2);
		text-align: left;
	}

	.qonto-row td::before {
		content: attr(data-label);
		color: var(--qonto-text-muted);
		font-size: var(--qonto-font-size-sm);
	}

	.qonto-amount {
		text-align: right;
	}

	.qonto-field-buttons {
		margin-left: 0;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.qonto-pane {
		width: var(--qonto-pane-width);
		max-width: 92vw;
	}

	.qonto-cp-sub {
		max-width: 40em;
	}
}

/* ------------------------------------------------ statistics, announced --- */

/* Issue #110: the page announces what is coming. It should look intentional,
   not like a template someone forgot to fill, so it gets real typography and
   breathing room rather than a bare list. */

.qonto-stats-soon {
	max-width: 46em;
	padding: var(--qonto-space-5) 0;
}

.qonto-stats-lead {
	font-size: var(--qonto-font-size-lg);
	color: var(--qonto-text);
	margin: 0 0 var(--qonto-space-4);
}

.qonto-stats-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--qonto-space-2);
}

.qonto-stats-list li {
	background: var(--qonto-surface);
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius);
	box-shadow: var(--qonto-shadow-card);
	padding: var(--qonto-space-3) var(--qonto-space-4);
}

.qonto-stats-note {
	margin-top: var(--qonto-space-4);
	color: var(--qonto-text-muted);
	font-size: var(--qonto-font-size-sm);
}

/* ------------------------------------------------ drop a file on a row --- */

/* Issue #114: the fast path for attaching a receipt is dropping it on the line
   it belongs to. The feedback has to be unmistakable, because a drop that
   silently lands on the wrong row is worse than no drop at all. */

.qonto-row-dropping {
	outline: 2px dashed var(--qonto-accent);
	outline-offset: -2px;
	background: var(--qonto-badge-sent-bg);
}

.qonto-row-uploading {
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------- upload, in the pane --- */

.qonto-pane-upload-form {
	display: grid;
	gap: var(--qonto-space-2);
}

.qonto-pane-upload-input {
	width: 100%;
}

.qonto-pane-upload-send {
	justify-self: start;
	min-height: var(--qonto-tap-target);
}

/* ------------------------------------------ catch-up, now in settings --- */

.qonto-settings-block {
	border: 1px solid var(--qonto-border);
	border-radius: var(--qonto-radius);
	background: var(--qonto-surface);
	padding: var(--qonto-space-4);
}