/* UI overrides v2 — shared by index.html and reseller.html.
   Covers: LTR layouts, per-language typography, light-theme contrast fixes,
   touch targets, mobile performance caps, skeleton loaders and the i18n switcher. */

/* ---- i18n switcher placement (below modal, above bottom nav) ---- */
#i18nWebSwitcher{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;z-index:60!important}
body[data-page="admin"] #i18nWebSwitcher{display:none!important}
#modal:not(.hidden) ~ #i18nWebSwitcher{display:none!important}

/* ---- LTR layout corrections for en/ru/zh ---- */
[dir="ltr"] .timeline{border-right:0;border-left:1px solid var(--line,rgba(127,137,162,.35));margin-right:0;margin-left:10px;padding-right:0;padding-left:20px}
[dir="ltr"] .timeline article:before{right:auto;left:-26px}
[dir="ltr"] .quick-grid button,[dir="ltr"] .profile-chip{text-align:left}
[dir="ltr"] .public-cta-row b,[dir="ltr"] .settings-list button b,[dir="ltr"] .home-guide-card strong{display:inline-block;transform:scaleX(-1)}
[dir="ltr"] .hero-copy,[dir="ltr"] .threshold-copy{text-align:left}
[dir="ltr"] .bottom-nav{direction:ltr}

/* ---- per-language typography ---- */
html[lang="zh"]{--font-ui:"Noto Sans SC","Vazirmatn",system-ui,sans-serif;--font-display:"Noto Sans SC","Vazirmatn",system-ui,sans-serif}
html[lang="ru"],html[lang="en"]{--font-display:"Vazirmatn",Inter,system-ui,sans-serif}
html[lang="ru"] body,html[lang="en"] body{letter-spacing:0}
:lang(ru) h1,:lang(en) h1,:lang(zh) h1,
:lang(ru) h2,:lang(en) h2,:lang(zh) h2{font-weight:700}

/* ---- light-theme contrast fixes (hardcoded pale colors) ---- */
body.light .notice.info,[data-visual-template="sobh"] .notice.info,[data-visual-template="madar"] .notice.info{color:var(--info,#245bb3)}
body.light .ticket-card p,body.light .prose,[data-visual-template="sobh"] .ticket-card p,[data-visual-template="sobh"] .prose,[data-visual-template="madar"] .ticket-card p,[data-visual-template="madar"] .prose{color:var(--text,#19213a)}
body.light .button.secondary,[data-visual-template="sobh"] .button.secondary,[data-visual-template="madar"] .button.secondary{color:var(--primary-hover,#4035ae)}
body.light .copy-field input,[data-visual-template="sobh"] .copy-field input,[data-visual-template="madar"] .copy-field input{color:var(--text,#19213a)}
body.light .glass,[data-visual-template="sobh"] .glass,[data-visual-template="madar"] .glass{background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(244,246,255,.78))}

/* ---- readability floor: no text below ~11.5px ---- */
.balance-pill small,.profile-chip small,.metric small,.section-head small,.chip,
.plan-card .plan-panel,.plan-card .price small,.order-card small,.ticket-card small,
.status,.usage-head,.timeline p,.quick-grid small,.admin-metric small,
.browser-account-card small,.profile-service-status{font-size:max(.72rem,11.5px)}

/* ---- touch targets >= 40px ---- */
.filter-row button,.admin-nav button{min-height:40px;display:inline-flex;align-items:center}
.order-actions button{min-height:40px;display:inline-flex;align-items:center}
.icon-button{min-width:42px;min-height:42px}

/* ---- mobile performance caps ---- */
@media (max-width:560px),(pointer:coarse){
  .ambient{display:none}
  .orbital i,.brand-mark span,.wheel-pointer,.planet{animation:none!important}
  .glass,.topbar{backdrop-filter:blur(8px)}
  .wallet-card,.plan-card,.order-card,.ticket-card,.admin-row{contain:content}
}

/* ---- skeleton loaders (populated by i18n_web.js) ---- */
.skeleton-card{border-radius:22px;padding:17px;background:var(--card,rgba(20,26,38,.6));border:1px solid var(--line,rgba(127,137,162,.25));display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.skeleton-line{display:block;height:12px;border-radius:8px;background:linear-gradient(90deg,rgba(160,170,190,.15),rgba(160,170,190,.32),rgba(160,170,190,.15));background-size:200% 100%;animation:skeletonPulse 1.4s ease-in-out infinite}
.skeleton-line.w60{width:60%}.skeleton-line.w90{width:90%}.skeleton-line.w40{width:40%}
@keyframes skeletonPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton-line{animation:none}}


/* ---- Telegram client palette (applied by i18n_web.js when available) ---- */
body.tg-themed{
  --bg:var(--tg-bg,#0b0d0f);
  --surface-1:var(--tg-surface,#111620);
  --surface-2:var(--tg-surface,#111620);
  --card:var(--tg-surface,#111620);
  --card-solid:var(--tg-surface,#111620);
  --text:var(--tg-text,#f4f7fa);
  --text-muted:var(--tg-hint,#aeb8c7);
  --border:var(--tg-hint,#59677f);
  --primary:var(--tg-button,#1f6feb);
  --primary-hover:var(--tg-button,#1f6feb);
  --primary2:var(--tg-button,#1f6feb);
  --primary-ink:var(--tg-button-text,#ffffff);
  --danger:var(--tg-destructive,#ff8498);
  --line:var(--border);
  --glass-1:var(--tg-bg,#0b0d0f);
  --glass-2:var(--tg-surface,#111620);
  --topbar-1:var(--tg-bg,#0b0d0f);
  --topbar-2:var(--tg-bg,#0b0d0f);
}
body.tg-themed .glass,body.tg-themed .topbar{background:var(--tg-bg,#0b0d0f)}
body.tg-themed .wallet-card{background:linear-gradient(135deg,var(--tg-button,#1f6feb),var(--tg-surface,#111620))}

/* ---- admin skeletons ---- */
.admin-metrics .skeleton-card,.bar-chart .skeleton-card{margin-bottom:0}
#adminMetrics.is-loading{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#salesChart.is-loading{display:flex;align-items:end;gap:5px}
#salesChart.is-loading .skeleton-card{flex:1;height:140px;margin:0}