/* /public/assets/css/app.css */

/* =========================
	Design system
========================= */
:root{
	--bg:#f5f7fb;
	--surface:#ffffff;
	--surface-2:#fbfcff;

	--text:#0f172a;
	--muted:#64748b;

	--border:#e6eaf2;
	--border-2:#dbe2ee;

	--primary:#f2542c;
	--primary-2:#542cf2;

	--success:#2cf254;
	--success-2:#2cf2b7;
	--warning:#d97706;
	--danger:#dc2626;

	--shadow:0 18px 45px rgba(15, 23, 42, 0.08);
	--shadow-2:0 10px 25px rgba(15, 23, 42, 0.06);

	--radius:18px;
	--radius-sm:12px;

	--pad:16px;
	--pad-lg:22px;

	--font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* =========================
	Reset + base (light)
========================= */
*{box-sizing:border-box;}
html,body{height:100%;}

body{
	margin:0;
	padding:22px;
	font-family:var(--font);
	background:var(--bg);
	color:var(--text);
	line-height:1.35;

	font-weight:400;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

a{color:var(--primary);text-decoration:none;}
a:hover{text-decoration:underline;}

h1,h2,h3{
	margin:0 0 14px 0;
	line-height:1.15;
	letter-spacing:-0.015em;
	font-weight:300;
}

h1{font-size:26px;}
h2{font-size:18px;margin-top:18px;}
h3{font-size:16px;margin-top:14px;}

p{margin:0 0 10px 0;color:var(--text);}

small,.muted{
	color:var(--muted);
	font-weight:400;
}

.hr{
	height:1px;
	background:var(--border);
	margin:16px 0;
}

/* =========================
	Layout
========================= */
.container{max-width:1200px;margin:0 auto;}

.stack{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.row{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:center;
}
.row.start{align-items:flex-start;}
.row.between{justify-content:space-between;}
.row.center{justify-content:center;}

.grow{flex:1;}
.right{text-align:right;}
.center{text-align:center;}
.hidden{display:none !important;}

/* =========================
	Topbar (optional)
========================= */
.topbar{
	background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow-2);
	padding:14px 16px;
	margin:0 0 16px 0;
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:space-between;
}

.topbar .brand{display:flex;flex-direction:column;gap:2px;}
.topbar .brand b{font-size:14px;font-weight:400;}
.topbar .brand span{font-size:12px;color:var(--muted);}

.topbar .links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* =========================
	Cards / panels
========================= */
.card{
	background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:var(--pad-lg);
	max-width:560px;
	margin:18px auto;
}

.card.wide{max-width:1200px;}

.panel{
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow-2);
	padding:16px;
}

/* =========================
	Alerts
========================= */
.alert{
	border-radius:var(--radius-sm);
	padding:12px 14px;
	border:1px solid;
	box-shadow:var(--shadow-2);
	margin:10px 0 14px 0;
}
.alert.info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a;}
.alert.success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;}
.alert.warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.alert.danger{background:#fef2f2;border-color:#fecaca;color:#991b1b;}

/* =========================
	Badges / pills (light)
========================= */
.badge{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 10px;
	border-radius:999px;
	font-size:13px;
	font-weight:300;
	border:1px solid var(--border);
	background:#fff;
	color:var(--text);
	white-space:nowrap;
}

.badge.success{border-color:#a7f3d0;background:#ecfdf5;color:#065f46;}
.badge.warning{border-color:#fed7aa;background:#fff7ed;color:#9a3412;}
.badge.danger{border-color:#fecaca;background:#fef2f2;color:#991b1b;}
.badge.neutral{border-color:var(--border);background:#fff;color:var(--muted);}

.badge.primary{border-color:var(--primary);background:var(--primary);color:white;}

.pill{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:5px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:300;
	border:1px solid var(--border);
	background:#fff;
	color:var(--muted);
}

.pill-ok{background:var(--primary);border-color:var(--primary);color:white;font-weight: 500;}
.pill-bad{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
.pill-warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.pill-off{background:#f8fafc;border-color:#e2e8f0;color:#475569;}

/* =========================
	Buttons (light)
========================= */
button,.btn{
	appearance:none;
	border:1px solid transparent;
	border-radius:14px;
	padding:10px 14px;
	font-weight:300;
	font-size:14px;
	cursor:pointer;
	transition:transform .03s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
	user-select:none;
}

button:active,.btn:active{transform:translateY(1px);}

.btn-primary,button{
	background:var(--primary);
	color:#fff;
	box-shadow:0 10px 20px rgba(37,99,235,.20);
}
.btn-primary:hover,button:hover{box-shadow:0 12px 26px rgba(37,99,235,.26);}

.btn-secondary{
	background:#fff;
	color:var(--text);
	border-color:var(--border);
	box-shadow:var(--shadow-2);
}
.btn-secondary:hover{border-color:var(--border-2);}

.btn-ghost{
	background:transparent;
	color:var(--text);
	border-color:transparent;
}
.btn-ghost:hover{background:#f1f5f9;border-color:#e2e8f0;}

.btn-danger{
	background:linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
	color:#fff;
	box-shadow:0 10px 20px rgba(220,38,38,.18);
}

.btn-small,button.small{
	padding:8px 10px;
	font-size:13px;
	border-radius:12px;
}

.btn-icon{
	padding:8px 10px;
	border-radius:12px;
	background:#fff;
	border:1px solid var(--border);
	box-shadow:var(--shadow-2);
	color:var(--text);
}
.btn-icon:hover{border-color:var(--border-2);}

/* =========================
	Forms (light)
========================= */
form{margin:0;}

label{
	display:block;
	margin:10px 0 6px 0;
	font-size:12px;
	color:var(--muted);
	font-weight:300;
	letter-spacing:.02em;
	text-transform:uppercase;
}

input,select,textarea{
	width:100%;
	padding:11px 12px;
	border:1px solid var(--border);
	border-radius:14px;
	background:#fff;
	color:var(--text);
	outline:none;
	box-shadow:inset 0 1px 0 rgba(15, 23, 42, 0.02);
	transition:border-color .12s ease, box-shadow .12s ease, transform .03s ease;
}

input:focus,select:focus,textarea:focus{
	border-color:#93c5fd;
	box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

textarea{min-height:92px;resize:vertical;}

input[type="checkbox"]{
	width:auto;
	transform:scale(1.05);
	accent-color:var(--primary);
}

.form-row{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	align-items:flex-end;
}
.form-row .col{flex:1;min-width:200px;}

.help{font-size:12px;color:var(--muted);margin-top:6px;}

/* =========================
	Tables (left/right, not centered)
========================= */
table{
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow-2);
}

th,td{
	padding:12px 12px;
	border-bottom:1px solid var(--border);
	vertical-align:middle;
	font-size:14px;
	text-align:left;
}

th{
	background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	color:#475569;
	font-weight:300;
}

tr:last-child td{border-bottom:none;}
tr:hover td{background:#fbfdff;}

td input[type="number"]{max-width:90px;}
td .mini{font-size:12px;color:var(--muted);}
td .money{font-variant-numeric:tabular-nums;}

/* Optional: last column centered for pills/status */
table th:last-child,
table td:last-child{
	text-align:center;
}

/* =========================
	Modal
========================= */
#modal{
	border-radius:var(--radius);
	box-shadow:0 30px 90px rgba(2, 6, 23, .25);
	border:1px solid rgba(2, 6, 23, .12);
	background:#fff;
	padding:16px;
}

#modalTitle{
	margin:0 0 10px 0;
	font-size:16px;
	font-weight:300;
}

#modalBody{
	max-height:62vh;
	overflow:auto;
	padding-right:6px;
}

#closeModal{margin-top:12px;}

.modal-overlay{
	position:fixed;
	inset:0;
	background:rgba(2, 6, 23, .45);
	backdrop-filter:blur(3px);
	display:none;
}

/* =========================
	KPIs (light)
========================= */
.kpi{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
}

.kpi .kpi-card{
	min-width:220px;
	flex:1;
	background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow-2);
	padding:14px 16px;
}

.kpi .kpi-card .label{
	font-size:12px;
	color:#6b7280;
	font-weight:300;
	text-transform:uppercase;
	letter-spacing:0.04em;
	margin-bottom:6px;
}

.kpi .kpi-card .value{
	font-size:22px;
	font-weight:300;
	letter-spacing:-0.02em;
	font-variant-numeric:tabular-nums;
}

.kpi .sub{
	margin-top:6px;
	color:var(--muted);
	font-size:12px;
	font-weight:400;
}

.text-bad{color:var(--primary);font-weight:bold;}
.text-good{color:var(--primary);font-weight:bold;}
.big-text{font-weight:300;font-size:14px;margin-top:6px;letter-spacing:0.02em;}

/* =========================
	Token page (hero + layout)
========================= */
.hero{
	background:var(--primary);
	border-radius:18px;
	padding:18px;
	box-shadow:0 18px 45px rgba(15, 23, 42, 0.12);
	margin-bottom:16px;
}
.hero-inner{display:flex;align-items:center;justify-content:space-between;}
.hero-title{color:#fff;font-weight:300;font-size:40px;letter-spacing:-0.02em;}
.hero-subtitle{color:rgba(255,255,255,.85);font-weight:300;font-size:20px;margin-top:4px;opacity:0.9;}

.page-card{
	background:linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border:1px solid var(--border);
	border-radius:18px;
	box-shadow:var(--shadow);
	padding:18px;
}

.page-head{
	display:flex;
	gap:14px;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
}

.page-title{
	font-size:30px;
	font-weight:400;
	letter-spacing:-0.02em;
}

.page-meta{color:var(--muted);margin-top:6px;font-weight:400;}
.page-status{display:flex;align-items:center;}

.dot{margin:0 8px;color:#cbd5e1;}

.table-soft{
	border:1px solid var(--border);
	border-radius:18px;
	overflow:hidden;
}
.table-soft th{background:linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);}

/* Two columns layout used on token page */
.split-2{
	display:grid;
	grid-template-columns:1fr 360px;
	gap:14px;
	align-items:start;
}

.stack-right{
	display:flex;
	flex-direction:column;
	gap:14px;
}

/* Détails rows */
.detail-row{
	display:flex;
	justify-content:space-between;
	gap:12px;
	padding:10px 0;
	border-bottom:1px solid var(--border);
}
.detail-row:last-child{border-bottom:none;}
.detail-val{font-weight:400;}

/* =========================
	Médailles
========================= */
.medal{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:30px;
	height:30px;
	border-radius:999px;
	font-weight:300;
	font-size:16px;
	margin-left:2px;
	margin-bottom: 5px;
	border:1px solid #cbd5e1;
	color:#64748b;
	background:#fff;
}

.medal-off{border-color:#cbd5e1;color:var(--primary);background:#fff;}
.medal-on{border-color:#cbd5e1;color:primary;background:#fff;}

.medal-gold{
	border-color:#d4af37;
	background:#f7d44a;
	color:var(--muted);
	box-shadow:0 8px 18px rgba(212,175,55,.25);
}

/* =========================
	Responsive
========================= */
@media (max-width: 980px){
	.split-2{grid-template-columns:1fr;}
}

@media (max-width: 820px){
	body{padding:14px;}
	.card{padding:18px;}
	th,td{padding:10px 10px;font-size:13px;}
	td input[type="number"]{max-width:78px;}
}

.orange_sum{
	display:inline-block;
	text-align:right;
	white-space:nowrap;
}

/* =========================
	Modal popup (overlay + centré)
========================= */
.modal-overlay{
	position:fixed;
	inset:0;
	background:rgba(2, 6, 23, .45);
	backdrop-filter:blur(3px);
	z-index:999;
}

.modal{
	position:fixed;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:min(860px, calc(100vw - 32px));
	max-height:calc(100vh - 32px);
	overflow:auto;

	background:#fff;
	border:1px solid rgba(2, 6, 23, .12);
	border-radius:18px;
	box-shadow:0 30px 90px rgba(2, 6, 23, .25);
	padding:16px;

	z-index:1000;
}

.modal-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:10px;
}

.modal-body{
	padding-top:4px;
}

@media (max-width: 1250px){
	.under1250{display: none;}
}

@media (max-width: 1200px){
	.under1200{display: none;}
}

@media (max-width: 1100px){
	.under1100{display: none;}
}

@media (max-width: 1000px){
	.under1000{display: none;}
}

@media (max-width: 900px){
	.under900{display: none;}
}

@media (max-width: 800px){
	.under800{display: none;}
}

@media (max-width: 700px){
	.under700{display: none;}
}

@media (max-width: 600px){
	.under600{display: none;}
}

@media (max-width: 500px){
	.under500{display: none;}
}

.highlighted{
	color: var(--primary);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

tr.v-top th {
	vertical-align: top;
}