/* ConvertCap — app.css */

:root {
  --bs-primary: #0057ff;
  --bs-primary-rgb: 0, 87, 255;
  --bs-link-color: #0057ff;
  --bs-link-hover-color: #0040cc;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; color: #1e1e2e; }
h1,h2,h3,h4,h5,.navbar-brand { font-family: 'Space Grotesk', sans-serif; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary { --bs-btn-bg:#0057ff; --bs-btn-border-color:#0057ff; --bs-btn-hover-bg:#0040cc; --bs-btn-hover-border-color:#0040cc; --bs-btn-active-bg:#0033aa; }
.btn-outline-primary { --bs-btn-color:#0057ff; --bs-btn-border-color:#0057ff; --bs-btn-hover-bg:#0057ff; }

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid rgba(0,0,0,.06); }
.navbar-brand { font-size: 1.5rem; letter-spacing: -0.5px; }
.nav-link { font-size: .9rem; font-weight: 500; color: #333 !important; }
.nav-link:hover { color: #0057ff !important; }
.dropdown-menu-wide { min-width: 480px; max-height: 70vh; overflow-y: auto; padding: .5rem; }
.dropdown-item { font-size: .85rem; border-radius: 6px; }
.dropdown-item:hover { background: rgba(0,87,255,.08); color: #0057ff; }
.dropdown-item.active { background: #0057ff; color: #fff; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-section { background: linear-gradient(160deg, #f0f5ff 0%, #ffffff 60%); border-bottom: 1px solid #e8edf5; }
.hero-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: #1a1a2e; }

/* ── Tool textarea ───────────────────────────────────────────── */
.tool-textarea { font-family: 'JetBrains Mono','Fira Code','Courier New',monospace; font-size: .95rem; min-height: 180px; resize: vertical; border-radius: .5rem; border-color: #d0d7e3; }
.tool-textarea:focus { border-color: #0057ff; box-shadow: 0 0 0 .2rem rgba(0,87,255,.15); }

/* ── Tool wrapper ────────────────────────────────────────────── */
.tool-wrapper { border: 1px solid #e4e9f0; }

/* ── Stats bar ───────────────────────────────────────────────── */
.stats-bar { background: #f8faff; border-radius: 0 0 .5rem .5rem; font-size: .85rem; color: #555; }
.stat-item strong { color: #0057ff; font-weight: 700; }

/* ── Conversion buttons ──────────────────────────────────────── */
.conversion-buttons .btn { white-space: nowrap; font-size: .82rem; padding: .3rem .75rem; }

/* ── Category cards ──────────────────────────────────────────── */
.category-card { transition: box-shadow .2s, transform .2s; }
.category-card:hover { box-shadow: 0 8px 30px rgba(0,87,255,.12) !important; transform: translateY(-2px); }
.category-icon-wrap { display: inline-flex; align-items: center; justify-content: center; min-width: 60px; min-height: 60px; }
.tool-list-preview li { line-height: 1.9; }
.tool-list-preview a { color: #4a5568; font-size: .88rem; text-decoration: none; }
.tool-list-preview a:hover { color: #0057ff; }

/* ── Tool card (category page) ───────────────────────────────── */
.tool-card { transition: box-shadow .15s, border-color .15s; text-decoration: none; color: inherit; }
.tool-card:hover { box-shadow: 0 4px 20px rgba(0,87,255,.1) !important; border-color: rgba(0,87,255,.2) !important; color: inherit; }

/* ── Sections ────────────────────────────────────────────────── */
.section-title { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); }
.hover-primary:hover { color: #0057ff !important; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer-dark { background-color: #1a1a2e; }
.footer-link { color: #8892a4; text-decoration: none; line-height: 2; display: block; }
.footer-link:hover { color: #fff; }

/* ── HTMX spinner ────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 576px) {
  .dropdown-menu-wide { min-width: 90vw; }
  .hero-title { font-size: 1.8rem; }
}

/* ── Dark Mode ───────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --bs-primary: #6ea8fe;
  --bs-primary-rgb: 110, 168, 254;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #9ec5fe;
  --bs-body-bg: #0d1117;
  --bs-body-color: #c9d1d9;
}

/* Darker base background */
[data-bs-theme="dark"] body { background: #0d1117; color: #c9d1d9; }

/* Navbar */
[data-bs-theme="dark"] .navbar { background: #161b22 !important; border-bottom-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .nav-link { color: #c9d1d9 !important; }
[data-bs-theme="dark"] .nav-link:hover { color: #6ea8fe !important; }
[data-bs-theme="dark"] .navbar-brand .text-dark { color: #e6edf3 !important; }

/* Hero — fix white border-bottom line */
[data-bs-theme="dark"] .hero-section {
  background: linear-gradient(160deg, #0d1f3c 0%, #0d1117 60%);
  border-bottom-color: rgba(110,168,254,.12);
}
[data-bs-theme="dark"] .hero-title { color: #e6edf3; }

/* Tool components */
[data-bs-theme="dark"] .tool-wrapper { background: #161b22 !important; border-color: #30363d !important; }
[data-bs-theme="dark"] .bg-white { background: #161b22 !important; border-color: #30363d !important; }
[data-bs-theme="dark"] .stats-bar { background: #1c2128; border-top-color: #30363d; color: #8b949e; }
[data-bs-theme="dark"] .tool-textarea { background: #0d1117; border-color: #30363d; color: #e6edf3; }
[data-bs-theme="dark"] .tool-textarea:focus { border-color: #6ea8fe; box-shadow: 0 0 0 .2rem rgba(110,168,254,.2); }
[data-bs-theme="dark"] .stat-item strong { color: #6ea8fe; }

/* Cards */
[data-bs-theme="dark"] .card { background: #161b22; border-color: #30363d; }
[data-bs-theme="dark"] .card-header { background: #161b22 !important; border-color: #30363d !important; }
[data-bs-theme="dark"] .card-footer { background: #161b22 !important; border-color: #30363d !important; }
[data-bs-theme="dark"] .list-group-item { background: transparent; border-color: #30363d; }

/* Sections */
[data-bs-theme="dark"] .bg-light { background: #161b22 !important; }
[data-bs-theme="dark"] .section-title { color: #e6edf3; }

/* Buttons */
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg:#1f6feb; --bs-btn-border-color:#1f6feb; --bs-btn-hover-bg:#388bfd; --bs-btn-hover-border-color:#388bfd; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color:#6ea8fe; --bs-btn-border-color:#6ea8fe; --bs-btn-hover-bg:#1f6feb; --bs-btn-hover-border-color:#1f6feb; }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color:#8b949e; --bs-btn-border-color:#30363d; --bs-btn-hover-bg:#21262d; }
[data-bs-theme="dark"] .btn-success { --bs-btn-bg:#196c2e; --bs-btn-border-color:#196c2e; --bs-btn-hover-bg:#238636; }

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu { background: #161b22; border-color: #30363d; }
[data-bs-theme="dark"] .dropdown-item { color: #c9d1d9; }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(110,168,254,.1); color: #6ea8fe; }
[data-bs-theme="dark"] .dropdown-item.active { background: #1f6feb; color: #fff; }

/* Text overrides */
[data-bs-theme="dark"] .text-dark { color: #e6edf3 !important; }
[data-bs-theme="dark"] .text-muted { color: #8b949e !important; }
[data-bs-theme="dark"] .text-secondary { color: #8b949e !important; }
[data-bs-theme="dark"] .text-body { color: #c9d1d9 !important; }
[data-bs-theme="dark"] .fw-semibold { color: #e6edf3; }

/* Borders */
[data-bs-theme="dark"] .border { border-color: #30363d !important; }
[data-bs-theme="dark"] .border-top { border-top-color: #30363d !important; }
[data-bs-theme="dark"] .border-bottom { border-bottom-color: #30363d !important; }
[data-bs-theme="dark"] hr { border-color: #30363d; }

/* Breadcrumb */
[data-bs-theme="dark"] .breadcrumb-item a { color: #6ea8fe; }
[data-bs-theme="dark"] .breadcrumb-item.active { color: #8b949e; }

/* Footer */
[data-bs-theme="dark"] .footer-dark { background-color: #010409; }
[data-bs-theme="dark"] .footer-link { color: #8b949e; }
[data-bs-theme="dark"] .footer-link:hover { color: #e6edf3; }

/* Alert */
[data-bs-theme="dark"] .alert { border-color: #30363d; }

/* Badges */
[data-bs-theme="dark"] .badge.bg-secondary { background: #21262d !important; color: #8b949e !important; }
[data-bs-theme="dark"] .bg-opacity-25 { --bs-bg-opacity: 0.15; }

/* Tool-list links */
[data-bs-theme="dark"] .tool-list-preview a { color: #8b949e; }
[data-bs-theme="dark"] .tool-list-preview a:hover { color: #6ea8fe; }

/* Category icon wrap */
[data-bs-theme="dark"] .category-icon-wrap { background: rgba(110,168,254,.1) !important; }
[data-bs-theme="dark"] .bg-primary.bg-opacity-10 { background: rgba(110,168,254,.1) !important; }