/**
 * Polish layer (loaded last): typography, Arabic/RTL correctness, number direction and layout fixes.
 * Kept in one file on purpose so it can be reviewed independently of the legacy component CSS.
 */

/* ---------- 1. Typography ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, button, input, select, textarea { font-family: var(--bap-font-sans); }
button, input, select, textarea { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
body { font-feature-settings: "kern", "liga"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
code, kbd, samp, pre, .bap-input.code, .bap-textarea.code { font-family: var(--bap-font-mono); }

/* Arabic: never letter-space or uppercase (it breaks letter joining), give it more line height. */
html[dir="rtl"] body,
html[lang^="ar"] body { line-height: 1.75; }
html[dir="rtl"] *,
html[lang^="ar"] *,
[dir="rtl"] *,
.bap-dashboard-wrap[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.4; font-weight: 700; }
[dir="rtl"] .bap-btn, [dir="rtl"] .bap-tab-btn { font-weight: 600; }

/* ---------- 2. Numbers & Latin tokens inside RTL text ---------- */
.bap-num, [dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] .bap-user-tag, [dir="rtl"] .bap-input.code,
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"], [dir="rtl"] input[type="password"] {
	direction: ltr;
	unicode-bidi: isolate;
}
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="password"], [dir="rtl"] input[type="number"] { text-align: end; }
[dir="rtl"] input[type="email"]::placeholder, [dir="rtl"] input[type="url"]::placeholder { text-align: end; }
[dir="rtl"] .bap-input.code { text-align: start; direction: ltr; }
.bap-num, [dir="rtl"] code { white-space: nowrap; }
.bap-num, .bap-metric-value, .bap-sub-count, .bap-table td, progress { font-variant-numeric: tabular-nums; }
bdi { unicode-bidi: isolate; }

/* ---------- 3. Buttons: never overflow their box, never fall back to the browser font ---------- */
.bap-btn {
	height: auto;
	min-block-size: 2.75rem;
	padding-block: 0.5rem;
	line-height: 1.35;
	white-space: normal;
	text-align: center;
	max-inline-size: 100%;
	font-family: inherit;
}
.bap-btn-sm, .bap-btn--sm { min-block-size: 2.25rem; padding-block: 0.35rem; }
.bap-btn svg, .bap-btn .bap-icon { flex: 0 0 auto; }
.bap-btn > span { min-inline-size: 0; overflow-wrap: anywhere; }
[dir="rtl"] .bap-btn svg[class*="play"], [dir="rtl"] .bap-icon-flip { transform: scaleX(-1); }

/* ---------- 4. Cards & grid: no doubled gaps, no min-width overflow ---------- */
.bap-bento-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.bap-bento-grid > .bap-card, .bap-bento-grid > .bap-checklist-card { margin-block-end: 0; min-inline-size: 0; }
.bap-card-span-2 { grid-column: 1 / -1; }
.bap-card, .bap-checklist-card { min-inline-size: 0; }
.bap-card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.bap-card-header h3 { margin: 0; }
.bap-card-desc { color: var(--bap-text-muted); font-size: 0.875rem; margin-block: 0.25rem 1rem; line-height: 1.6; }

/* Top status bar */
.bap-top-bar { gap: 1.25rem; flex-wrap: wrap; }
.bap-top-metrics { flex: 1 1 22rem; min-inline-size: 0; }
.bap-metric-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.bap-metric-value { white-space: normal; }
.bap-meter-native, .bap-progress-bar-native { inline-size: 100%; }

/* Tabs */
.bap-nav-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.bap-tab-btn { white-space: nowrap; font-family: inherit; }
@media (max-width: 900px) {
	.bap-nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
	.bap-nav-tabs::-webkit-scrollbar { display: none; }
	.bap-tab-btn { scroll-snap-align: start; flex: 0 0 auto; }
}

/* Quick-start checklist */
.bap-checklist-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bap-checklist-card__header > :first-child { flex: 1 1 14rem; min-inline-size: 0; }
.bap-checklist-card__header .bap-btn { flex: 1 1 100%; justify-content: flex-start; text-align: start; }
.bap-progress-bar-native { display: block; block-size: 0.5rem; margin-block: 0.75rem 1rem; border-radius: 999px; overflow: hidden; }
.bap-checklist-grid { display: grid; gap: 0.75rem; margin: 0; }
.bap-checklist-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.85rem; align-items: start; min-inline-size: 0; }
.bap-checklist-item__badge { grid-row: span 2; flex: 0 0 auto; }
.bap-checklist-item__actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bap-checklist-item__desc { overflow-wrap: anywhere; }
.bap-guide-feedback { grid-column: 1 / -1; }

/* D17 box */
.bap-d17-featured-box { padding: 1.25rem; }
.bap-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bap-flex-row { display: flex; align-items: center; gap: 0.75rem; }
#bappD17PhoneCode { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em !important; padding: 0.3rem 0.75rem; border-radius: var(--bap-radius-sm, 8px); background: var(--bap-surface); border: 1px solid var(--bap-border); }
.bap-d17-steps-grid { display: grid; grid-template-columns: 1fr; gap: 0.85rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px dashed var(--bap-border); }
.bap-d17-step-item { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.7; font-size: 0.9375rem; }
.bap-d17-step-num { flex: 0 0 auto; inline-size: 1.75rem; block-size: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bap-primary); color: var(--bap-primary-contrast, #fff); font-size: 0.8125rem; font-weight: 700; margin-block-start: 0.1rem; }

/* Forms */
.bap-form-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.bap-input, .bap-select, .bap-textarea { font-family: inherit; max-inline-size: 100%; }
.bap-select { padding-inline-end: 2rem; }
.bap-key-row { flex-wrap: wrap; }
.bap-key-row .bap-input { flex: 1 1 14rem; min-inline-size: 0; }
.bap-table-wrap { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bap-table th, .bap-table td { text-align: start; }

/* Alerts */
.bap-alert { overflow-wrap: anywhere; }

@media (max-width: 640px) {
	.bap-card, .bap-checklist-card { padding: 1.1rem; }
	.bap-bento-grid { gap: 1rem; }
	.bapp-plan-selector-grid { grid-template-columns: 1fr; }
}

/* ---------- 5. Button/alert modifier names used by the templates (BEM "--" form) ----------
   portal.css only knows the single-dash form (.bap-btn-primary), and loads after components.css, so the
   "--primary/--secondary/--ghost" modifiers were losing to the base .bap-btn rule. Map both spellings. */
.bap-btn--primary {
	background: var(--bap-gradient-primary);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}
.bap-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.42); color: #ffffff; }
.bap-btn--secondary { background: var(--bap-surface-elevated); color: var(--bap-text); border-color: var(--bap-border); }
.bap-btn--ghost { background: transparent; border-color: transparent; color: var(--bap-text-muted); }
.bap-btn--ghost:hover { background: var(--bap-surface-2); color: var(--bap-text); }
.bap-btn--icon { min-inline-size: 2.25rem; padding-inline: 0.5rem; }
.bap-btn--danger { background: rgba(239, 68, 68, 0.1); color: var(--bap-danger); border-color: rgba(239, 68, 68, 0.25); }
.bap-alert--warn { background: rgba(245, 158, 11, 0.1); color: var(--bap-warning); border: 1px solid rgba(245, 158, 11, 0.25); }
.bap-alert--info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.25); }
.bap-alert--danger, .bap-alert--error { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.25); }
.bap-alert--success { background: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.25); }
.bap-alert[hidden], .bap-guide-feedback[hidden] { display: none; }

/* Counters and labels are prose, not code: use the UI font, keep digits aligned. */
.bap-metric-value, .bap-sub-count, .bap-queue-stats { font-family: var(--bap-font-sans); font-weight: 700; letter-spacing: 0; }
.bap-metric-value { font-size: 0.9375rem; }
.bap-sub-count { font-size: 0.8125rem; }

/* Mobile top bar: the metrics column must size to its content, not to a 22rem flex-basis. */
@media (max-width: 768px) {
	.bap-top-metrics { flex: 0 0 auto; inline-size: 100%; }
	.bap-top-main { inline-size: 100%; }
}