/*
 * overrides.css — Production overrides applied across all pages.
 * Loaded AFTER each page's inline <style> block so these rules win on specificity ties.
 */

/* ── Hide sponsor/ad placeholders in production ───────────────── */
.ad-slot { display: none !important; }

/* ── Responsive overflow / wrapping fixes ─────────────────────── */
.stat-value {
  word-break: break-word;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  line-height: 1.1;
}
.stat-card  { min-width: 0; overflow: hidden; }
.stat-grid  { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }

.tool-card           { min-width: 0; }
.tool-card-name,
.tool-card-desc,
.tool-card-tag       { min-width: 0; overflow-wrap: anywhere; }

.hash-value          { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.uuid-text           { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }

/* Make tool body containers safe on small viewports */
.tool-body .container { min-width: 0; }
.control-section,
.control-body,
.result-card,
.qr-preview-wrap     { min-width: 0; }

/* Avoid horizontal scroll caused by stray wide elements */
body { overflow-x: hidden; }

/* Tab bar wrap on small screens */
@media (max-width: 640px) {
  .tab-bar { flex-wrap: wrap; }
  .tab-btn { padding: 0.5rem 0.875rem; font-size: 0.75rem; }
  .hash-row { grid-template-columns: 60px 1fr auto; gap: 0.5rem; }
  .options-grid { grid-template-columns: 1fr !important; }
  .qr-layout { grid-template-columns: 1fr !important; }
}

/* ── Tool-page label visibility fix (section labels were clipped) ── */
.control-header-title { padding-left: 0; }
.section-label        { padding-left: 0; }
.label                { padding-left: 0; }

/* Tool page hero label clipping on left edge */
.tool-header .container { overflow: visible; }

/* Drop zone hint wrap */
.drop-zone-hint, .drop-zone-text { text-align: center; padding: 0 0.5rem; overflow-wrap: anywhere; }

/* Buttons should not overflow on tight layouts */
.btn { white-space: normal; max-width: 100%; }
.btn-icon { white-space: nowrap; }

/* Toast container left for mobile small screens */
@media (max-width: 480px) {
  #toast-container { left: 1rem !important; right: 1rem !important; max-width: calc(100vw - 2rem) !important; }
}

/* ─── Helper: 'lang-en' / 'lang-tr' etc bodies hide non-matching i18n nodes ─── */
[data-i18n] { /* placeholder for future enhancement */ }