/* ==========================================================
   Manage Withdraw — theme CSS
   Blue background, indigo accent, dark text.
   Used by: manage_withdraw.php
   ========================================================== */

/* ===== Theme v4 — blue background, solid dark text ===== */
:root{
	--navy:       #4F46E5;
	--navy-2:     #3730A3;
	--ink:        #111827;
	--ink-soft:   #374151;
	--ink-faint:  #5B6472;
	--paper:      #CFE0F7;
	--paper-card: #E6F0FC;
	--gold:       #A5B4FC;
	--gold-light: #EEF2FF;
	--gold-deep:  #4338CA;
	--brick:      #DC2626;
	--line:       #A9C3E8;
	--shadow:     0 1px 2px rgba(17,24,39,0.08), 0 8px 20px rgba(17,24,39,0.10);
	--radius:     12px;
}

body{
	background: var(--paper) !important;
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--ink);
}
.page-body-wrapper,
.main-panel,
.content-wrapper{
	background: var(--paper) !important;
}

/* ---- Header banner ---- */
.ledger-banner{
	background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
	border-radius: var(--radius);
	padding: 1.6rem 1.75rem;
	box-shadow: var(--shadow);
	border-bottom: 3px solid var(--gold);
	margin-bottom: 1.5rem;
}
.ledger-eyebrow{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-light);
	margin-bottom: 0.35rem;
}
.ledger-title{
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	font-size: 1.85rem;
	color: #FFFFFF;
	letter-spacing: -0.01em;
	margin: 0;
}
.ledger-sub{
	color: rgba(255,255,255,0.85);
	font-size: 0.9rem;
	margin-top: 0.25rem;
}

/* ---- Summary stubs (ticket / receipt styling) ---- */
.stub-row{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 1.75rem;
}
.stub{
	position: relative;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.4rem;
	min-width: 210px;
	flex: 1 1 210px;
}
.stub-label{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.stub-value{
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 600;
	font-size: 1.55rem;
	color: var(--navy);
	margin-top: 0.3rem;
	font-variant-numeric: tabular-nums;
}
.stub-value.brick{ color: var(--brick); }

/* ---- Ledger table ---- */
.ledger-panel{
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
table.ledger{
	width: 100% !important;
	border-collapse: collapse;
	margin: 0 !important;
}
table.ledger thead th{
	background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%);
	color: #FFFFFF;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.85rem 1rem;
	border: none !important;
	border-bottom: 2px solid var(--gold) !important;
	white-space: nowrap;
}
table.ledger tbody td{
	padding: 0.85rem 1rem;
	border-top: 1px dashed var(--line) !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	vertical-align: middle;
	font-size: 0.9rem;
	color: var(--ink) !important;
}
table.ledger tbody tr:hover{
	background: rgba(212,175,55,0.08);
}
table.ledger tbody tr.odd, table.ledger tbody tr.even{
	background: transparent;
}
.col-num{
	font-family: 'IBM Plex Mono', monospace;
	color: var(--ink-soft) !important;
	font-size: 0.82rem;
	font-weight: 500;
}
.col-amount{
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--navy) !important;
}
.col-account{
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--ink) !important;
}
.type-badge{
	display: inline-block;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--gold-light) 0%, var(--gold) 100%);
	color: var(--navy);
	border: 1px solid var(--gold-deep);
}

/* ---- Review action button (signature element) ---- */
.review-btn{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1.5px solid var(--navy);
	color: #FFFFFF;
	background: var(--navy);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}
.review-btn i{ font-size: 13px; }
.review-btn:hover{
	background: var(--navy-2);
	border-color: var(--navy-2);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(79,70,229,0.3);
	text-decoration: none;
}

.ledger-empty{
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ink-faint);
	font-family: 'Space Grotesk', sans-serif;
}

/* ---- Mobile: table rows become stacked cards ---- */
@media (max-width: 768px){
	.ledger-banner{ padding: 1.25rem 1.35rem; }
	.ledger-title{ font-size: 1.5rem; }
	.stub-row{ margin: 1.25rem 0; }
	.stub{ min-width: 0; flex: 1 1 45%; padding: 0.9rem 1rem; }
	.stub-value{ font-size: 1.25rem; }

	table.ledger thead{ display: none; }
	table.ledger, table.ledger tbody, table.ledger tr, table.ledger td{
		display: block;
		width: 100% !important;
	}
	table.ledger tbody tr{
		background: var(--paper-card);
		border: 1px solid var(--line);
		border-left: 3px solid var(--gold);
		border-radius: 10px;
		margin: 0.75rem;
		box-shadow: var(--shadow);
		overflow: hidden;
	}
	table.ledger tbody td{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.6rem 0.9rem;
		border-top: 1px dashed var(--line) !important;
		text-align: right;
	}
	table.ledger tbody td:first-child{ border-top: none !important; }
	table.ledger tbody td::before{
		content: attr(data-label);
		font-family: 'Space Grotesk', sans-serif;
		font-size: 0.65rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-faint);
		text-align: left;
	}
	table.ledger tbody td.action-cell{
		justify-content: flex-end;
		background: rgba(212,175,55,0.06);
	}
	table.ledger tbody td.action-cell::before{ display: none; }
	.review-btn{ width: 100%; justify-content: center; padding: 0.6rem 0.9rem; }
}

/* DataTables chrome, restyled to match */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	background: #FFFFFF;
	color: var(--ink);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
	background: var(--navy) !important;
	border-color: var(--navy) !important;
	color: #fff !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate .paginate_button{
	color: var(--ink-soft) !important;
}
.ledger-panel .col-sm-6, .ledger-panel .col-sm-5, .ledger-panel .col-sm-7{
	padding: 1rem 1.25rem;
}
