/**
 * Borsat shared UI components (GTM UX consolidation).
 * Built on tokens.css variables only — no raw hex / font stacks.
 *
 * Import order: tokens.css (or borsat-tokens.css shim), then borsat-ui.css.
 */

/* ── Base ──────────────────────────────────────────────────────────────── */
.b-reset, .b-reset *, .b-reset *::before, .b-reset *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Top navigation ───────────────────────────────────────────────────── */
.b-nav { background: var(--borsat-navy); height: 56px; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--borsat-font); }
.b-nav-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--borsat-white); font-weight: 800; font-size: 1.1rem; }
.b-nav-badge { font-size: 0.68rem; background: var(--accent-muted); color: var(--blue-200); padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); font-weight: 600; }
.b-nav-links { display: flex; align-items: center; gap: 1rem; }
.b-nav-links a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); text-decoration: none; transition: color var(--borsat-transition, 0.15s ease); }
.b-nav-links a:hover { color: var(--borsat-white); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.b-card { background: var(--borsat-white); border: 1px solid var(--borsat-gray-300); border-radius: var(--borsat-radius-lg); overflow: hidden; }
.b-card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--borsat-gray-100); display: flex; align-items: center; justify-content: space-between; }
.b-card-title { font-size: 0.95rem; font-weight: 700; color: var(--borsat-gray-900); }
.b-card-body { padding: 1.5rem; }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.b-stat { background: var(--borsat-white); border: 1px solid var(--borsat-gray-300); border-radius: var(--borsat-radius-md); padding: 1.1rem 1.25rem; }
.b-stat-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--borsat-gray-500); margin-bottom: 0.4rem; }
.b-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--borsat-gray-900); letter-spacing: -0.03em; }
.b-stat--blue { border-inline-start: 4px solid var(--borsat-blue); }
.b-stat--green { border-inline-start: 4px solid var(--borsat-good); }
.b-stat--amber { border-inline-start: 4px solid var(--borsat-warn); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.b-btn { padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); border: none; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: var(--borsat-font); transition: all var(--borsat-transition, 0.15s ease); }
.b-btn--primary { background: var(--borsat-blue); color: var(--borsat-white); }
.b-btn--primary:hover { background: var(--blue-800); }
.b-btn--outline { background: transparent; border: 1.5px solid var(--borsat-gray-300); color: var(--borsat-gray-700); }
.b-btn--outline:hover { border-color: var(--borsat-blue); color: var(--borsat-blue); }
.b-btn--danger { background: var(--surface-bad); color: var(--borsat-bad); border: 1px solid var(--surface-bad-border); }
.b-btn--danger:hover { background: var(--surface-bad-border); }
.b-btn--sm { padding: 0.35rem 0.75rem; font-size: 0.78rem; }
.b-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Badges ───────────────────────────────────────────────────────────── */
.b-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.04em; }
.b-badge--green { background: var(--surface-good); color: var(--borsat-good); }
.b-badge--blue { background: var(--blue-100); color: var(--blue-800); }
.b-badge--amber { background: var(--surface-warn); color: var(--borsat-warn); }
.b-badge--gray { background: var(--borsat-gray-100); color: var(--borsat-gray-500); }

/* ── Tables ───────────────────────────────────────────────────────────── */
.b-table { width: 100%; border-collapse: collapse; font-family: var(--borsat-font); }
.b-table th { padding: 0.6rem 1rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--borsat-gray-500); background: var(--gray-50); text-align: left; }
.b-table td { padding: 0.75rem 1rem; font-size: 0.85rem; border-top: 1px solid var(--borsat-gray-100); color: var(--borsat-gray-700); }
.b-table tr:hover td { background: var(--gray-50); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.b-field { margin-bottom: 1.1rem; }
.b-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--borsat-gray-700); margin-bottom: 0.4rem; }
.b-field input, .b-field select, .b-field textarea { width: 100%; padding: 0.65rem 0.85rem; border: 1.5px solid var(--borsat-gray-300); border-radius: var(--radius-sm); font-size: 0.87rem; color: var(--borsat-gray-900); background: var(--borsat-white); font-family: var(--borsat-font); transition: border-color var(--borsat-transition, 0.15s ease); }
.b-field input:focus, .b-field select:focus { outline: none; border-color: var(--borsat-blue); box-shadow: 0 0 0 3px var(--accent-muted); }

/* ── Alerts ───────────────────────────────────────────────────────────── */
.b-alert { padding: 0.85rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem; font-family: var(--borsat-font); }
.b-alert--success { background: var(--surface-good); color: var(--borsat-good); border: 1px solid var(--surface-good-border); }
.b-alert--error { background: var(--surface-bad); color: var(--borsat-bad); border: 1px solid var(--surface-bad-border); }
.b-alert--info { background: var(--surface-info); color: var(--surface-info-text); border: 1px solid var(--surface-info-border); }
.b-alert--warn { background: var(--surface-warn); color: var(--borsat-warn); border: 1px solid var(--surface-warn-border); }

/* ── Toasts (replaces alert()) ────────────────────────────────────────── */
.b-toast-host { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; max-width: 380px; }
.b-toast { padding: 0.8rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem; font-family: var(--borsat-font); background: var(--borsat-gray-900); color: var(--gray-200); border-inline-start: 4px solid var(--borsat-blue); animation: b-toast-in 0.2s ease; word-break: break-word; }
.b-toast--success { border-inline-start-color: var(--borsat-good); }
.b-toast--error { border-inline-start-color: var(--borsat-bad); }
.b-toast--warn { border-inline-start-color: var(--borsat-warn); }
@keyframes b-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Empty state ──────────────────────────────────────────────────────── */
.b-empty { text-align: center; padding: 2rem; color: var(--borsat-gray-500); font-size: 0.85rem; font-family: var(--borsat-font); }

/* ── Spinner ──────────────────────────────────────────────────────────── */
.b-spinner { width: 16px; height: 16px; border: 2px solid var(--borsat-gray-300); border-top-color: var(--borsat-blue); border-radius: 50%; animation: b-spin 0.7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes b-spin { to { transform: rotate(360deg); } }

/* ── RTL (Arabic) foundation ──────────────────────────────────────────── */
[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .b-table th, [dir="rtl"] .b-table td { text-align: right; }
[dir="rtl"] .b-toast-host { right: auto; left: 1.25rem; }