/* ============================================================
   richc-styles.css
   Shared styles for richc.us tools and dashboard
   ============================================================ */

/* --- Background Image Treatment (consistent across pages) --- */
body {
  background-image: url('https://richc.us/rain.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Faded + blurred overlay effect on the background image */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  background-attachment: inherit;
  filter: blur(4px);
  opacity: 0.16;
}

/* Extra readability veil, stronger in dark mode */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,0.20);
}
.dark body::after {
  background: rgba(0,0,0,0.30);
}

/* --- Typography --- */
.logo-font {
  font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* --- Card Styles (used in dashboard and potentially tools) --- */
.card {
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.1s cubic-bezier(0.4, 0.0, 0.2, 1),
              border-color 0.1s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
}

.dark .card:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
}

.link-card {
  cursor: pointer;
}

/* --- Category Pills --- */
.category-pill {
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-pill.active {
  background-color: #111827;
  color: white;
  font-weight: 600;
}

.dark .category-pill.active {
  background-color: #e5e7eb;
  color: #111827;
}

/* --- Search Input --- */
.search-input {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* --- Utility Classes --- */
.section-header {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dashboard-grid {
  scrollbar-width: thin;
}

.stat {
  font-variant-numeric: tabular-nums;
}

/* --- Header Specific (for consistent branding) --- */
header a {
  text-decoration: none;
  color: inherit;
}

header a:hover {
  opacity: 0.9;
}

/* Reusable translucent header controls (pills, toggle) */
.header-control {
  background-color: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
}

.dark .header-control {
  background-color: rgba(9,9,11,0.7);
  border: 1px solid rgba(255,255,255,0.1);
}

/* --- Drop Zone Styles (for consistent upload areas across tools) --- */
.drop-zone {
  border: 2px dashed #ccc;
  background: #fafaf8;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.drop-zone:hover,
.drop-zone.drag-over {
  background: #e8f5ef;
  border-color: #00a878;
  border-style: dashed;
}

.drop-zone .drop-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.drop-zone .drop-title {
  font-size: 0.95rem;
  font-weight: 600;
}

.drop-zone .drop-hint {
  font-size: 0.78rem;
  color: #666;
}

/* === Refined dark mode tool cards (works better with background image) === */
.dark .tool-card {
    background: #1e293b;           /* slate-800 — softer and more balanced */
    color: #e2e8f0;
    border-color: #475569;
}

.dark .tool-card label,
.dark .tool-card .text-zinc-600,
.dark .tool-card .text-zinc-400,
.dark .tool-card .text-zinc-500 {
    color: #cbd5e1;
}

.dark input,
.dark textarea,
.dark select {
    background-color: #334155;     /* slate-700 */
    color: #e2e8f0;
    border-color: #475569;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b;
}