/**
 * Tools view: utilities used only by tools pages.
 * Loaded via ViewCSSManager for tools view. Per-tool CSS via additional_css.
 *
 * CANONICAL TOOL STRUCTURE (align all tools to qr-generator / invoice-generator):
 *   .tool-page
 *     section.tool-hero.relative.overflow-hidden
 *       .container
 *         .tool-hero-inner.text-center
 *           [optional] .tool-hero-badge.glass.border.border-line2.text-cta (label + icon use var(--cta))
 *           h1.text-fg  (optional <span class="grad"> in title)
 *           p.text-xl.text-muted.max-w-3xl.mx-auto  (description)
 *     section.container.py-16 (or .pb-16)
 *       [two-column] .grid.grid-cols-1.gap-8.lg:grid-cols-2
 *         div  (form column)
 *           .glass.border.border-line2.rounded-3xl.p-8
 *         div  (result column)
 *           .glass.border.border-line2.rounded-3xl.p-8.sticky.top-8
 *       [single-column] one or more .glass.border.border-line2.rounded-3xl.p-8
 * Section headings: .flex.items-center.gap-3.mb-4 + icon wrap (.w-8.h-8.bg-cta/10.rounded-lg) + h3.text-lg.font-semibold.text-fg
 */

/* ===== TOOL PAGE WRAPPER (all individual tool views) ===== */
.tool-page {
  background: var(--bg-900);
  min-height: 100vh;
  color: var(--fg);
  width: 100%;
  min-width: 0;
}

html[data-theme="light"] .tool-page {
  color-scheme: light;
}

html[data-theme="dark"] .tool-page {
  color-scheme: dark;
}

/* Tool page content uses .container from layout-core for max-width + padding */
.tool-page .container {
  width: 100%;
}

/* ===== TOOL HERO (shared hero section for individual tools) ===== */
.tool-page .tool-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0;
  min-height: 28vh;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .tool-page .tool-hero {
    min-height: 32vh;
    padding: var(--space-16) 0;
  }
}

.tool-page .tool-hero .container {
  position: relative;
  z-index: 1;
}

.tool-page .tool-hero-inner {
  text-align: center;
}

/* Hero description: prefer this over ad-hoc text-xl/max-w/mb utilities */
.tool-page .tool-hero-lead {
  font-size: var(--font-size-xl);
  line-height: 1.6;
  color: var(--muted);
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-8);
}

/* CLS: Reserve min-height for tool hero (first section in .tool-page) */
.tool-page > section:first-child {
  min-height: 28vh;
}

@media (min-width: 768px) {
  .tool-page > section:first-child {
    min-height: 32vh;
  }
}

/* Tool hero title (matches tools index hero title scale); theme foreground */
.tool-page .tool-hero h1 {
  font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
  font-weight: 700;
  margin-bottom: var(--space-6);
  line-height: 1.1;
  color: var(--fg);
}

.tool-page .tool-hero .tool-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
  border-radius: 9999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-6);
  color: var(--fg);
}

/* Tool cards / icon shells: theme foreground (fixes light theme; dark theme fg stays light) */
.tool-page [class*="-card"],
.tool-page [class*="-icon-wrap"],
.tool-page [class*="-icon-sm"],
.tool-page [class*="-feature-icon"] {
  color: var(--fg) !important;
}

/* Utility: hide element but keep for screen readers (canonical for all tools; per-tool .tool-XXX .hidden removed) */
.tool-page .hidden {
  display: none !important;
}

/* Shared card .btn-ghost touch target (per-tool card .btn-ghost rules consolidated here) */
.tool-page [class*="-card"] .btn-ghost {
  min-height: 44px;
}

/* ===== SHARED TOOL FORM CONTROLS (all tools with forms) ===== */
.tool-page select,
.tool-page input[type="text"],
.tool-page input[type="email"],
.tool-page input[type="password"],
.tool-page input[type="tel"],
.tool-page input[type="number"],
.tool-page input[type="date"],
.tool-page input[type="url"],
.tool-page input[type="color"],
.tool-page textarea {
  background-color: var(--bg-900) !important;
  color: var(--fg) !important;
  border-color: var(--line2) !important;
}

html[data-theme="dark"] .tool-page select {
  color-scheme: dark;
}

html[data-theme="light"] .tool-page select {
  color-scheme: light;
}

.tool-page select option {
  background-color: var(--bg-900) !important;
  color: var(--fg) !important;
  padding: 8px 12px;
}

.tool-page select:focus option {
  background-color: var(--bg-800) !important;
}

.tool-page input[type="text"]:focus,
.tool-page input[type="email"]:focus,
.tool-page input[type="password"]:focus,
.tool-page input[type="tel"]:focus,
.tool-page input[type="number"]:focus,
.tool-page input[type="date"]:focus,
.tool-page input[type="url"]:focus,
.tool-page input[type="color"]:focus,
.tool-page textarea:focus,
.tool-page select:focus {
  background-color: var(--bg-900) !important;
  color: var(--fg) !important;
  border-color: var(--cta) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--cta) !important;
}

.tool-page input::placeholder,
.tool-page textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.7;
}

html[data-theme="light"] .tool-page input::placeholder,
html[data-theme="light"] .tool-page textarea::placeholder {
  opacity: 0.88;
}

.tool-page select,
.tool-page input,
.tool-page textarea {
  color: var(--fg) !important;
}

.tool-page select,
.tool-page input[type="text"],
.tool-page input[type="email"],
.tool-page input[type="password"],
.tool-page input[type="tel"],
.tool-page input[type="number"],
.tool-page input[type="date"],
.tool-page input[type="url"] {
  min-height: 2.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}

.tool-page input[type="number"]::-webkit-inner-spin-button,
.tool-page input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tool-page input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.tool-page input[type="file"]:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

.tool-page input[type="range"]:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
}

/* Sticky result panel (two-column tools) */
.tool-page .sticky {
  position: sticky;
}

.tool-page .top-8 {
  top: var(--space-8);
}

/* ===== Disabled tool page (/tools/* when admin disabled) ===== */
.tool-page.tool-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}

.tool-disabled__inner {
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.tool-disabled__icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.tool-disabled__icon {
  width: 6rem;
  height: 6rem;
  color: var(--color-error, #dc2626);
}

html[data-theme="light"] .tool-disabled__icon {
  color: #b91c1c;
}

.tool-disabled__title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  margin: 0 0 var(--space-4);
}

.tool-disabled__accent {
  color: var(--color-error, #dc2626);
  font-weight: 700;
}

html[data-theme="light"] .tool-disabled__accent {
  color: #b91c1c;
}

.tool-disabled__lead {
  font-size: var(--font-size-xl);
  color: var(--muted);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

.tool-disabled__countdown-line {
  font-size: var(--font-size-lg);
  color: var(--muted);
  margin: 0 0 var(--space-8);
  line-height: 1.5;
}

.tool-disabled__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .tool-disabled__actions {
    flex-direction: row;
  }
}

.tool-disabled__actions .btn {
  min-height: 44px;
}

@media (max-width: 639px) {
  .tool-disabled__actions .btn {
    width: 100%;
    max-width: 20rem;
    justify-content: center;
  }
}

/* Tailwind-style reds on tool pages: light theme contrast (Lighthouse / WCAG) */
html[data-theme="light"] .tool-page .text-red-400 {
  color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  .tool-page .btn,
  .tool-page [class*="-card"] {
    transition-duration: 0.01ms !important;
  }
}

/* CLS: main tool column layout before deferred utilities — mirrors critical CSS in meta.php */
.tool-page > section.container.py-16 {
  min-height: min(72vh, 880px);
  box-sizing: border-box;
}

.tool-page .tool-hero p.text-xl {
  min-height: 5.5rem;
  line-height: 1.6;
}