/**
 * الأزرار الموحدة: كل الأزرار ترث ألوانها من متغيرات --tnt-btn-* في base/tokens.css
 * (جزء من المكونات المركزية: تُحمّل كلها عبر المقبض tnt-components)
 */

.tnt .tnt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font: 600 14px/1 var(--tnt-font); border: 1px solid transparent; border-radius: var(--tnt-radius-sm);
	padding: 11px 18px; cursor: pointer; white-space: nowrap; text-decoration: none;
	transition: background .18s var(--tnt-ease), color .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.tnt .tnt-btn:focus-visible { outline: none; box-shadow: var(--tnt-ring); }
.tnt .tnt-btn:active { transform: translateY(1px); }
.tnt .tnt-btn[disabled] { opacity: .55; cursor: not-allowed; }
.tnt .tnt-btn--sm { padding: 7px 12px; font-size: 13px; border-radius: 7px; }
.tnt .tnt-btn--lg { padding: 14px 24px; font-size: 15.5px; border-radius: var(--tnt-radius); }
.tnt .tnt-btn--block { display: flex; width: 100%; }

/* المتغيرات (الألوان) في tokens.css تحت "ألوان الأزرار الموحدة" */
.tnt .tnt-btn--primary { background: var(--tnt-btn-primary-bg); color: var(--tnt-btn-primary-fg); box-shadow: var(--tnt-btn-primary-shadow); }
.tnt .tnt-btn--secondary { background: var(--tnt-btn-secondary-bg); color: var(--tnt-btn-secondary-fg); }
.tnt .tnt-btn--secondary:hover { background: var(--tnt-btn-secondary-hover); color: var(--tnt-btn-secondary-fg); }
.tnt .tnt-btn--gold { background: var(--tnt-btn-gold-bg); color: var(--tnt-btn-gold-fg); box-shadow: var(--tnt-btn-gold-shadow); }
.tnt .tnt-btn--success { background: var(--tnt-btn-success-bg); color: #fff; }
.tnt .tnt-btn--danger { background: var(--tnt-btn-danger-bg); color: #fff; box-shadow: var(--tnt-btn-danger-shadow); border-color: rgba(0, 0, 0, .06); }
.tnt .tnt-btn--primary:hover, .tnt .tnt-btn--gold:hover, .tnt .tnt-btn--success:hover, .tnt .tnt-btn--danger:hover { filter: brightness(1.08); }
.tnt .tnt-btn--primary:hover { color: var(--tnt-btn-primary-fg); }
.tnt .tnt-btn--gold:hover { color: var(--tnt-btn-gold-fg); }
.tnt .tnt-btn--success:hover, .tnt .tnt-btn--danger:hover { color: #fff; }
.tnt .tnt-btn--outline { background: var(--tnt-surface); color: var(--tnt-text); border-color: var(--tnt-btn-outline-border); }
.tnt .tnt-btn--outline:hover { border-color: var(--tnt-btn-outline-hover); color: var(--tnt-btn-outline-hover); }
.tnt .tnt-btn--ghost { background: transparent; color: var(--tnt-btn-ghost-fg); }
.tnt .tnt-btn--ghost:hover { background: var(--tnt-btn-ghost-hover-bg); color: var(--tnt-btn-ghost-hover-fg); }
.tnt .tnt-btn[hidden] { display: none; }

/*
 * أزرار الحذف والإزالة (ghost-danger): إطار أحمر هادئ، وعند المرور يمتلئ بتدرج أحمر مع توهج
 * وأيقونة سلة المهملات "يرتفع غطاؤها" قليلاً — كل أزرار الحذف والتغييب والإلغاء الخطِر ترث من هنا
 */
.tnt .tnt-btn--ghost-danger {
	background: var(--tnt-btn-danger-soft-bg); color: var(--tnt-danger);
	border: 1.5px solid var(--tnt-btn-danger-soft-border);
}
.tnt .tnt-btn--ghost-danger:hover, .tnt .tnt-btn--ghost-danger:focus-visible {
	background: var(--tnt-btn-danger-bg); color: #fff; border-color: transparent; box-shadow: var(--tnt-btn-danger-shadow);
}
.tnt .tnt-btn--ghost-danger .tnt-icon, .tnt .tnt-btn--danger .tnt-icon { transition: transform .2s var(--tnt-ease); transform-origin: 70% 30%; }
.tnt .tnt-btn--ghost-danger:hover .tnt-icon, .tnt .tnt-btn--danger:hover .tnt-icon { transform: rotate(-10deg) translateY(-1px); }

/*
 * زر الإلغاء والرجوع (UI::cancel): إطار مزدوج ناعم بخلفية متدرجة،
 * وأيقونة × تدور ربع دورة عند المرور، والإطار يتحول للكحلي
 */
.tnt .tnt-btn--cancel {
	background: var(--tnt-btn-cancel-bg); color: var(--tnt-btn-cancel-fg);
	border: 1.5px solid var(--tnt-btn-cancel-border);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), var(--tnt-shadow-xs);
}
.tnt .tnt-btn--cancel:hover, .tnt .tnt-btn--cancel:focus-visible {
	background: var(--tnt-surface); color: var(--tnt-navy-900); border-color: var(--tnt-btn-cancel-hover);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 14px -8px rgba(var(--tnt-navy-900-rgb), .35);
}
.tnt .tnt-btn--cancel .tnt-icon { transition: transform .25s var(--tnt-ease); color: var(--tnt-muted); }
.tnt .tnt-btn--cancel:hover .tnt-icon { transform: rotate(90deg); color: var(--tnt-danger); }
/* الرجوع: السهم يتحرك للخلف بدل الدوران */
.tnt .tnt-btn--cancel.is-back:hover .tnt-icon { transform: translateX(3px); color: var(--tnt-navy-700); }

.tnt .tnt-inline-form { display: inline; margin: 0; }
.tnt .tnt-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tnt .tnt-grow { flex: 1; }
/* مؤشر الانتظار (components/submit-guard.js): دائرة تدور مكان الأيقونة */
.tnt .tnt-btn.is-loading { opacity: .8; pointer-events: none; cursor: progress; }
.tnt .tnt-btn.is-loading > .tnt-icon:first-child, .tnt .tnt-btn.is-loading > svg:first-child { display: none; }
.tnt .tnt-btn.is-loading::before { content: ""; width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: tnt-spin .7s linear infinite; }
@keyframes tnt-spin { to { transform: rotate(360deg); } }

/* شاشة الانتظار للعمليات الطويلة (data-tnt-busy، مثل الاستيراد) */
.tnt .tnt-busy { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(var(--tnt-navy-900-rgb), .55); backdrop-filter: blur(3px); animation: tnt-busy-in .2s ease-out; }
.tnt .tnt-busy__box { display: grid; justify-items: center; gap: 10px; min-width: 260px; max-width: 360px; padding: 28px 26px; border-radius: 18px; background: #fff; box-shadow: var(--tnt-shadow-lg); text-align: center; }
.tnt .tnt-busy__box strong { font-size: 16px; color: var(--tnt-navy-900); }
.tnt .tnt-busy__box small { font-size: 12.5px; color: var(--tnt-text-3, #64748b); }
.tnt .tnt-busy__spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(var(--tnt-navy-900-rgb), .1); border-top-color: var(--tnt-gold); animation: tnt-spin .8s linear infinite; }
@keyframes tnt-busy-in { from { opacity: 0; } }


/* زر على خلفية داكنة (رؤوس كحلية): زجاجي شفاف بإطار فاتح */
.tnt .tnt-btn--on-dark { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.tnt .tnt-btn--on-dark:hover { background: rgba(255, 255, 255, .16); color: var(--tnt-gold); border-color: rgba(var(--tnt-gold-rgb), .55); }