/**
 * WB Ad Manager — shared admin "family".
 *
 * One vocabulary of classes every admin screen in both the free and Pro
 * plugins uses, so 20-plus screens read as one product instead of hand-rolled
 * one-offs. Ported from Learnomy's proven admin family and tokenised to the
 * single --wbam-* palette in admin-tokens.css (this file's dependency), so
 * nothing here hardcodes a colour, space, or radius.
 *
 * The parts, mirroring Learnomy:
 *   .wbam-page-header            page chrome: icon + title + subtitle + actions
 *   .wbam-settings-card          a titled white box for a group of settings
 *   .wbam-admin-table(-wrap)     a list table that scrolls on narrow screens
 *   .wbam-admin-btn              buttons (+ --primary / --danger / --ghost / --sm)
 *   .wbam-status-badge           status pill (+ --success / --danger / --warn / …)
 *   .wbam-empty-state            the empty / no-results panel
 *
 * Use these instead of a bare <h1>, a raw WP `.button`, or an ad-hoc table.
 *
 * @package WB_Ad_Manager
 * @since   2.9.2
 */

/* ── Page header ─────────────────────────────────────────────────────────── */

.wbam-page-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             var(--wbam-space-3);
	margin:          0 0 var(--wbam-space-5);
	padding-bottom:  var(--wbam-space-4);
	border-bottom:   1px solid var(--wbam-border);
}

.wbam-page-header__left {
	display:        flex;
	flex-direction: column;
	gap:            var(--wbam-space-1);
}

.wbam-page-header__title {
	display:     flex;
	align-items: center;
	gap:         var(--wbam-space-3);
	margin:      0;
	padding:     0;
	font-size:   var(--wbam-font-size-xl);
	font-weight: var(--wbam-weight-semibold);
	color:       var(--wbam-text);
	line-height: 1.2;
}

.wbam-page-header__desc {
	margin:    0;
	font-size: var(--wbam-font-size-sm);
	color:     var(--wbam-text-muted);
}

.wbam-page-header__actions {
	display:     flex;
	align-items: center;
	gap:         var(--wbam-space-2);
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.wbam-settings-card {
	margin-bottom: var(--wbam-space-5);
	background:    var(--wbam-bg);
	border:        1px solid var(--wbam-border);
	border-radius: var(--wbam-r-lg);
	box-shadow:    var(--wbam-shadow-sm);
	overflow:      hidden;
}

.wbam-settings-card__head {
	padding:       var(--wbam-space-4) var(--wbam-space-5);
	background:    var(--wbam-surface);
	border-bottom: 1px solid var(--wbam-border);
}

.wbam-settings-card__title {
	margin:         0 0 2px;
	font-size:      var(--wbam-font-size-sm);
	font-weight:    var(--wbam-weight-semibold);
	color:          var(--wbam-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wbam-settings-card__desc {
	margin:    0;
	font-size: var(--wbam-font-size-sm);
	color:     var(--wbam-text-muted);
}

.wbam-settings-card__body {
	padding: var(--wbam-space-5);
}

/* ── Table ───────────────────────────────────────────────────────────────── */

.wbam-admin-table-wrap {
	background:     var(--wbam-bg);
	border:         1px solid var(--wbam-border);
	border-radius:  var(--wbam-r-lg);
	box-shadow:     var(--wbam-shadow-sm);
	/* Scroll horizontally on narrow screens rather than clipping columns. */
	overflow-x:     auto;
}

.wbam-admin-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       var(--wbam-font-size-sm);
}

.wbam-admin-table th,
.wbam-admin-table td {
	padding:       var(--wbam-space-3) var(--wbam-space-4);
	text-align:    start;
	vertical-align: middle;
	border-bottom: 1px solid var(--wbam-border-subtle);
}

.wbam-admin-table thead th {
	background:     var(--wbam-surface);
	font-weight:    var(--wbam-weight-semibold);
	color:          var(--wbam-text-muted);
	text-transform: uppercase;
	font-size:      var(--wbam-font-size-xs);
	letter-spacing: 0.03em;
	white-space:    nowrap;
}

.wbam-admin-table tbody tr:last-child td {
	border-bottom: 0;
}

.wbam-admin-table tbody tr:hover {
	background: var(--wbam-surface);
}

.wbam-admin-table__primary {
	font-weight: var(--wbam-weight-semibold);
	color:       var(--wbam-text);
}

/*
 * WP_List_Table interop.
 *
 * The rules above were written for hand-rolled markup. A WP_List_Table wearing
 * `wbam-admin-table` (see the List_Table_Family trait) brings structure they do
 * not anticipate: a checkbox column WordPress sizes itself, sortable headers
 * that wrap their label in an anchor, a tfoot that repeats thead, and a
 * row-actions block that stays in flow while parked off-screen. Left alone the
 * family's padding misaligns the checkbox and flattens the sort affordance.
 */

/* WordPress sizes and pads the checkbox column itself; family padding pushes
   the checkbox out of alignment with the row. */
.wbam-admin-table .check-column {
	padding:    11px 0 0 3px;
	width:      2.2em;
	vertical-align: top;
}

/* Tighter horizontal padding on WP-generated tables only. The family's
   `space-4` is sized for hand-rolled tables carrying three or four columns; a
   list table runs to eight under `table-layout: fixed`, where every extra pixel
   of padding comes straight out of the content box and pushes cells into
   wrapping. Measured on Campaigns (8 columns): `space-4` took the median row
   from 118px to 145px purely through extra wrap, while Advertisers (6 columns)
   moved 109px to 117px. `space-3` keeps the vertical rhythm and holds the wide
   tables near their original density. */
.wp-list-table.wbam-admin-table th,
.wp-list-table.wbam-admin-table td {
	padding-inline: var(--wbam-space-3);
}

/* Sortable headers put their label inside an <a>, and core zeroes the cell's
   own padding to suit — `.widefat th.sortable { padding: 0 }` in list-tables.css
   outranks the family's `.wbam-admin-table th`, so a sortable header rendered
   flush against the row while its non-sortable neighbours kept the family
   spacing. The padding has to move onto the anchor, which is where core puts
   its own. The anchor also needs the family colour, or the sort target renders
   in the theme's link blue and breaks the header row's typography. */
.wbam-admin-table thead th.sortable a,
.wbam-admin-table thead th.sorted a,
.wbam-admin-table tfoot th.sortable a,
.wbam-admin-table tfoot th.sorted a {
	display:         flex;
	align-items:     center;
	gap:             var(--wbam-space-1);
	padding:         var(--wbam-space-3) var(--wbam-space-3);
	color:           inherit;
	text-decoration: none;
}

/* tfoot repeats thead — it must read identically or the table looks like it
   changes vocabulary halfway down. */
.wbam-admin-table tfoot th {
	background:     var(--wbam-surface);
	font-weight:    var(--wbam-weight-semibold);
	color:          var(--wbam-text-muted);
	text-transform: uppercase;
	font-size:      var(--wbam-font-size-xs);
	letter-spacing: 0.03em;
	white-space:    nowrap;
	border-top:     1px solid var(--wbam-border-subtle);
}

/* The density lever. This block reserves vertical space on every row even while
   parked off-screen, which is why tables carrying row actions measured ~109px
   against ~55px for those without. Fixing the line-height makes that reservation
   the same on every screen instead of inheriting whatever the cell set. The file
   has no line-height token scale, so this matches the literal convention used by
   the page-header and badge rules rather than inventing one. */
.wbam-admin-table .row-actions {
	line-height: 1.4;
	padding-top: var(--wbam-space-1);
}

/* `striped` paints alternating row backgrounds; the family hover must win on
   both parities or hovering reads as a no-op on every other row. */
.wbam-admin-table.striped > tbody > tr:hover,
.wbam-admin-table.striped > tbody > tr:nth-child(odd):hover {
	background: var(--wbam-surface);
}

/*
 * WordPress list tables (WP_List_Table -> .wp-list-table) are used by several
 * screens we do not rewrite. Normalise them toward the family so a native list
 * table and a .wbam-admin-table read the same — scoped to our admin screens via
 * the .wbam-admin wrapper the page header sits in.
 */
.wbam-admin .wp-list-table {
	border:        1px solid var(--wbam-border);
	border-radius: var(--wbam-r-lg);
	box-shadow:    var(--wbam-shadow-sm);
	overflow:      hidden;
}

.wbam-admin .wp-list-table thead th,
.wbam-admin .wp-list-table tfoot th {
	background: var(--wbam-surface);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.wbam-admin-btn {
	display:        inline-flex;
	align-items:    center;
	gap:            var(--wbam-space-2);
	height:         32px;
	padding:        0 var(--wbam-space-4);
	font-size:      var(--wbam-font-size-sm);
	font-weight:    var(--wbam-weight-medium);
	line-height:    1;
	color:          var(--wbam-text);
	background:     var(--wbam-bg);
	border:         1px solid var(--wbam-border-strong);
	border-radius:  var(--wbam-r-sm);
	cursor:         pointer;
	text-decoration: none;
	transition:     background var(--wbam-transition), border-color var(--wbam-transition);
}

.wbam-admin-btn:hover {
	background: var(--wbam-surface);
}

.wbam-admin-btn--primary {
	color:        var(--wbam-accent-fg);
	background:   var(--wbam-accent);
	border-color: var(--wbam-accent);
}

.wbam-admin-btn--primary:hover {
	background:   var(--wbam-accent-hover);
	border-color: var(--wbam-accent-hover);
}

.wbam-admin-btn--danger {
	color:        var(--wbam-danger);
	border-color: var(--wbam-danger);
}

.wbam-admin-btn--danger:hover {
	color:      var(--wbam-accent-fg);
	background: var(--wbam-danger);
}

.wbam-admin-btn--ghost {
	background:   transparent;
	border-color: transparent;
}

.wbam-admin-btn--sm {
	height:  26px;
	padding: 0 var(--wbam-space-3);
}

/* ── Status badge ────────────────────────────────────────────────────────── */

.wbam-status-badge {
	display:        inline-flex;
	align-items:    center;
	padding:        2px var(--wbam-space-2);
	font-size:      var(--wbam-font-size-xs);
	font-weight:    var(--wbam-weight-medium);
	line-height:    1.5;
	border-radius:  var(--wbam-r-sm);
	white-space:    nowrap;
}

.wbam-status-badge--success {
	color:      var(--wbam-success);
	background: var(--wbam-success-bg, rgba(0, 163, 42, 0.12));
}

.wbam-status-badge--danger {
	color:      var(--wbam-danger-text);
	background: var(--wbam-danger-bg);
}

.wbam-status-badge--warn {
	color:      var(--wbam-warning-text);
	background: var(--wbam-warning-bg);
}

.wbam-status-badge--info {
	color:      var(--wbam-info-text, #1d4e73);
	background: var(--wbam-info-bg, #e7f2fa);
}

.wbam-status-badge--muted {
	color:      var(--wbam-text-muted);
	background: var(--wbam-surface-alt);
}

/* ── Amount (ledger / money columns) ─────────────────────────────────────── */

.wbam-amount-positive {
	color:       var(--wbam-success);
	font-weight: var(--wbam-weight-medium);
}

.wbam-amount-negative {
	color:       var(--wbam-danger);
	font-weight: var(--wbam-weight-medium);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.wbam-empty-state {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             var(--wbam-space-2);
	padding:         var(--wbam-space-12) var(--wbam-space-6);
	text-align:      center;
	background:      var(--wbam-surface);
	border:          1px dashed var(--wbam-border-strong);
	border-radius:   var(--wbam-r-lg);
	color:           var(--wbam-text-muted);
}

.wbam-empty-state__title {
	margin:      0;
	font-size:   var(--wbam-font-size-lg);
	font-weight: var(--wbam-weight-semibold);
	color:       var(--wbam-text);
}

/* ── Settings screens: each <h2> + form-table reads as a labelled card ────── */

/*
 * Settings pages (Pro Settings, free Ad Settings) render sections as an <h2>
 * heading followed by a WordPress `.form-table`. Rather than rewrite every
 * section's markup, this cards them in place: the form-table becomes a white
 * box and the <h2> its section label, so the settings sections match the
 * Site Mode card and the rest of the family. Scoped to .wbam-settings-page so
 * it never touches the form-tables on edit/detail screens.
 */
.wbam-settings-page .nav-tab-wrapper {
	margin-bottom: var(--wbam-space-5);
	border-bottom: 1px solid var(--wbam-border);
}

.wbam-settings-page form h2 {
	margin:      var(--wbam-space-6) 0 var(--wbam-space-2);
	font-size:   var(--wbam-font-size-md);
	font-weight: var(--wbam-weight-semibold);
	color:       var(--wbam-text);
}

.wbam-settings-page form h2:first-of-type {
	margin-top: var(--wbam-space-2);
}

.wbam-settings-page form h2 + p.description {
	margin: 0 0 var(--wbam-space-3);
	color:  var(--wbam-text-muted);
}

.wbam-settings-page .form-table {
	margin:        0 0 var(--wbam-space-3);
	background:    var(--wbam-bg);
	border:        1px solid var(--wbam-border);
	border-radius: var(--wbam-r-lg);
	box-shadow:    var(--wbam-shadow-sm);
}

.wbam-settings-page .form-table th,
.wbam-settings-page .form-table td {
	padding:       var(--wbam-space-4) var(--wbam-space-5);
	border-bottom: 1px solid var(--wbam-border-subtle);
}

.wbam-settings-page .form-table tr:last-child th,
.wbam-settings-page .form-table tr:last-child td {
	border-bottom: 0;
}

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

	.wbam-settings-page .form-table th,
	.wbam-settings-page .form-table td {
		display: block;
		width:   auto;
		border-bottom: 0;
		padding: var(--wbam-space-2) var(--wbam-space-4);
	}

	.wbam-settings-page .form-table tr {
		display:       block;
		border-bottom: 1px solid var(--wbam-border-subtle);
		padding:       var(--wbam-space-2) 0;
	}

	.wbam-settings-page .form-table tr:last-child {
		border-bottom: 0;
	}
}

/* Demo_Data_Cleaner::render_clear_button() — the form sits inline next to
   whatever button/text precedes it, and the tracked-item count reads as a
   subdued suffix on the button label. Lives here (not admin.css) because
   the button can render on any WB Ad Manager admin screen, not just the
   ad-edit screen. */
.wbam-demo-clear-form {
	display: inline-block;
	margin-inline-start: var(--wbam-space-2);
}

.wbam-demo-count {
	opacity: 0.7;
	margin-inline-start: var(--wbam-space-1);
}