/**
 * tool-card.css — Critical styles for tool cards on the homepage.
 *
 * Loaded BEFORE Tailwind CDN via a synchronous <link> in <head> so these
 * rules are parsed and applied as part of the FIRST render pass, before
 * Tailwind's JS PostCSS rewriter runs. This eliminates the FOUC (flash of
 * unstyled content) where cards briefly appeared broken (full-width
 * horizontal bands, missing pill backgrounds, giant icons).
 *
 * All rules here use !important to match the specificity intended by the
 * original inline <style> block. The classes / selectors here must stay
 * in sync with the HTML generated by renderGrid() in freesoft-ui.js.
 */

/* ===== BASE TOOL CARD ===== */
.tool-card {
  position: relative;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 6px 20px rgba(0,0,0,0.05) !important;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 250ms ease,
              border-color 200ms ease,
              background 200ms ease !important;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  max-width: none !important;
  width: 100% !important;
}
.tool-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--border-hover) !important;
  background: var(--card-hover) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.16),
              0 0 0 1px rgba(139,92,246,0.12),
              0 8px 24px rgba(139,92,246,0.12) !important;
}

/* ===== CARD BODY — icon + title + description ===== */
.tool-card-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  flex: 1 !important;
}

/* ===== CARD FOOTER — category tag + usage pill ===== */
.tool-card-footer {
  padding: 14px 24px 20px 24px !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* ===== ICON CONTAINER — the small rounded square with the tool icon ===== */
.tool-card .icon-container {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: none !important;
}
.tool-card:hover .icon-container {
  transform: scale(1.12) !important;
}
.tool-card .icon-container .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 32px !important;
  font-variation-settings: 'FILL' 1 !important;
}

/* ===== CARD TITLE ===== */
.tool-card .card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

/* ===== CARD DESCRIPTION ===== */
.tool-card .card-desc {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* ===== CATEGORY BADGE ===== */
.tool-card .cat-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: var(--cat-bg, rgba(139,92,246,0.10)) !important;
  color: var(--cat-color, #A78BFA) !important;
  border: 1px solid var(--cat-border, rgba(139,92,246,0.15)) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ===== STATUS BADGE (HOT / NEW / SOON) ===== */
.tool-card .status-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border: 1px solid !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
  line-height: 1 !important;
}
.tool-card .status-badge.hot {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
}
.tool-card .status-badge.new {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #fff !important;
}
.tool-card .status-badge.soon {
  background: rgba(148,163,184,0.15) !important;
  color: #94A3B8 !important;
}
.light-mode .tool-card .status-badge.hot {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #fff !important;
}
.light-mode .tool-card .status-badge.new {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: #fff !important;
}
.light-mode .tool-card .status-badge.soon {
  background: rgba(100,116,139,0.15) !important;
  color: #475569 !important;
}

/* ===== USAGE PILL — view count with eye icon ===== */
.tool-card .usage-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 26px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(148,163,184,0.12) !important;
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}
.tool-card .usage-pill:hover {
  background: rgba(148,163,184,0.18) !important;
  color: var(--text-primary) !important;
}
.tool-card .usage-pill-icon {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.tool-card .usage-pill-count {
  font-variant-numeric: tabular-nums !important;
}
.light-mode .tool-card .usage-pill {
  background: rgba(15,23,42,0.06) !important;
  color: #475569 !important;
}
.light-mode .tool-card .usage-pill:hover {
  background: rgba(15,23,42,0.10) !important;
  color: #0F172A !important;
}

/* ===== CARD ARROW ===== */
.tool-card .card-arrow {
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  transition: opacity 200ms ease, transform 200ms ease !important;
  color: var(--accent-light) !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.tool-card:hover .card-arrow {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ===== LIST VIEW OVERRIDES ===== */
#toolGrid.list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
#toolGrid.list-view .tool-card {
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  border-radius: 14px !important;
  height: 124px !important;
  min-height: 0 !important;
  gap: 0 !important;
  position: relative !important;
  overflow: visible !important;
}
#toolGrid.list-view .tool-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(139,92,246,0.12) !important;
}
#toolGrid.list-view .tool-card-body {
  padding: 14px 20px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
}
#toolGrid.list-view .icon-container {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
}
#toolGrid.list-view .icon-container .material-symbols-outlined {
  font-size: 28px !important;
}
#toolGrid.list-view .card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
}
#toolGrid.list-view .card-desc {
  font-size: 13px !important;
  -webkit-line-clamp: 1 !important;
}
#toolGrid.list-view .cat-badge {
  font-size: 11px !important;
  padding: 4px 12px !important;
  height: 26px !important;
  border-radius: 20px !important;
}
#toolGrid.list-view .usage-pill {
  font-size: 11px !important;
  padding: 0 10px !important;
  height: 26px !important;
  border-radius: 20px !important;
  gap: 5px !important;
}
#toolGrid.list-view .usage-pill-icon {
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
#toolGrid.list-view .card-arrow {
  display: none !important;
}