/* ==================== BASE ==================== */
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* ==================== SNIPPET BLOCKS ==================== */
.snippet-block { background: #0d1117; border-radius: 0.75rem; overflow: hidden; margin-bottom: 1.5rem; border: 1px solid #21262d; }
.snippet-block__header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: #161b22; border-bottom: 1px solid #21262d; }
.snippet-block__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #8b949e; }
.snippet-block pre { margin: 0; padding: 1rem; overflow-x: auto; font-size: 0.85rem; }

.copy-btn { font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 0.4rem; background: #21262d; color: #c9d1d9; border: 1px solid #30363d; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; }
.copy-btn:hover { background: #30363d; }
.copy-btn:active { transform: scale(0.96); }
.copy-btn.bg-green-600 { background: #16a34a !important; border-color: #16a34a; }

/* ==================== TOOL CARDS / RESULT PANELS ==================== */
.tool-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.tool-card:hover { transform: translateY(-2px); }

.result-panel { background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%); border: 1px solid #e0e7ff; border-radius: 1rem; padding: 1.5rem; }
.result-panel__value { font-size: 2rem; font-weight: 700; color: #4338ca; line-height: 1.1; }
.result-panel__label { font-size: 0.8rem; color: #6366f1; text-transform: uppercase; letter-spacing: 0.05em; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.3s ease forwards; }

#mobile-menu { transition: max-height 0.2s ease; }

.clock-display { font-variant-numeric: tabular-nums; font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 700; letter-spacing: 0.02em; }

.day-btn { padding: 0.4rem 0.75rem; border-radius: 0.5rem; border: 1px solid #d1d5db; background: #fff; color: #4b5563; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.day-btn.is-selected { background: #4f46e5; border-color: #4f46e5; color: #fff; }

.plan-btn { padding: 0.6rem 0.5rem; border-radius: 0.5rem; border: 1px solid #d1d5db; background: #fff; color: #4b5563; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.plan-btn.is-selected { background: #4f46e5; border-color: #4f46e5; color: #fff; }

/* ==================== RESULT ACTION BAR ==================== */
.result-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.result-action-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid #d1d5db; background: #fff; color: #4b5563; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.result-action-btn:hover { background: #f9fafb; border-color: #4f46e5; color: #4f46e5; }

@media print {
    header, footer, form, .result-actions, #mobile-menu-btn { display: none !important; }
    .printable-area { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; color: #000 !important; }
    .result-panel { break-inside: avoid; border: 1px solid #ccc !important; background: #fff !important; }
}

/* =========================================================
   DARK MODE
   Every rule below is scoped under html.dark, and every value
   uses !important because it must override Tailwind's own
   utility classes of the same specificity level.
   ========================================================= */

html.dark { color-scheme: dark; }

html.dark body { background-color: #111827 !important; color: #f3f4f6 !important; }

/* Backgrounds */
html.dark .bg-white { background-color: #1f2937 !important; }
html.dark .bg-gray-50 { background-color: #111827 !important; }
html.dark .bg-gray-100 { background-color: #1f2937 !important; }
html.dark .bg-indigo-50 { background-color: #1e1b4b !important; }
html.dark .bg-amber-50 { background-color: #451a03 !important; }
html.dark .bg-red-50 { background-color: #450a0a !important; }
html.dark .bg-green-50 { background-color: #052e16 !important; }
html.dark .bg-blue-50 { background-color: #172554 !important; }
html.dark header { background-color: #111827 !important; }
html.dark footer { background-color: #030712 !important; }
html.dark #mobile-menu { background-color: #1f2937 !important; }

/* Borders */
html.dark .border-gray-100 { border-color: #374151 !important; }
html.dark .border-gray-200 { border-color: #374151 !important; }
html.dark .border-gray-300 { border-color: #4b5563 !important; }
html.dark .border-amber-200 { border-color: #78350f !important; }
html.dark .border-red-200 { border-color: #7f1d1d !important; }
html.dark .border-green-200 { border-color: #14532d !important; }
html.dark .border-blue-200 { border-color: #1e3a8a !important; }
html.dark .divide-gray-100 > * + * { border-color: #374151 !important; }

/* TEXT — this is the block that fixes "invisible text" */
html.dark, html.dark body { color: #f3f4f6 !important; }
html.dark * { color: inherit; }

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark p, html.dark span, html.dark div, html.dark label, html.dark li,
html.dark td, html.dark th {
    color: #e5e7eb;
}

html.dark .text-gray-900 { color: #f9fafb !important; }
html.dark .text-gray-800 { color: #f3f4f6 !important; }
html.dark .text-gray-700 { color: #e5e7eb !important; }
html.dark .text-gray-600 { color: #d1d5db !important; }
html.dark .text-gray-500 { color: #9ca3af !important; }
html.dark .text-gray-400 { color: #9ca3af !important; }
html.dark .text-indigo-600 { color: #818cf8 !important; }
html.dark .text-indigo-700 { color: #a5b4fc !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-red-600, html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-green-600, html.dark .text-green-700 { color: #86efac !important; }
html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .text-white { color: #ffffff !important; }

/* Form inputs */
html.dark input, html.dark select, html.dark textarea {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280 !important; opacity: 1; }
html.dark select { color-scheme: dark; }

/* Result panels */
html.dark .result-panel { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important; border-color: #4338ca !important; }
html.dark .result-panel__value { color: #c7d2fe !important; }
html.dark .result-panel__label { color: #a5b4fc !important; }

/* Result action buttons */
html.dark .result-action-btn { background: #1f2937 !important; border-color: #4b5563 !important; color: #d1d5db !important; }
html.dark .result-action-btn:hover { background: #374151 !important; border-color: #6366f1 !important; color: #a5b4fc !important; }

/* Day/plan toggle buttons */
html.dark .day-btn, html.dark .plan-btn, html.dark .mode-btn, html.dark .cat-btn, html.dark .qr-type-btn, html.dark .tz-result-item {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
}
html.dark .day-btn.is-selected, html.dark .plan-btn.is-selected { background-color: #4f46e5 !important; color: #fff !important; }

/* Blog prose content */
html.dark .prose { color: #d1d5db !important; }
html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose strong { color: #f3f4f6 !important; }
html.dark .prose a { color: #a5b4fc !important; }

/* Links without explicit color */
html.dark a { color: inherit; }
html.dark a.hover\:text-indigo-600:hover { color: #818cf8 !important; }

/* Table search-dropdown backgrounds (timezone picker etc) */
html.dark #tz-search-results { background-color: #1f2937 !important; border-color: #374151 !important; }

/* Smooth transition */
body, header, footer, .bg-white, .bg-gray-50, .bg-gray-100, input, select, textarea, .result-panel {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}