/* =============================================================
   Tirhutwani — Dark Mode Overrides
   Applied when <html data-theme="dark"> is set.
   All contrast ratios meet WCAG 2.1 AA (≥4.5:1 normal text,
   ≥3:1 large text / UI components).
   Palette:
     bg-base    #0f172a  (slate-900)
     bg-card    #1e293b  (slate-800)
     bg-input   #334155  (slate-700)
     text-base  #e2e8f0  (slate-200)   — on bg-card  ≈ 9.8:1 ✅
     text-muted #94a3b8  (slate-400)   — on bg-card  ≈ 4.6:1 ✅
     border     #475569  (slate-600)
   ============================================================= */

/* ── Base ─────────────────────────────────────────────────── */
[data-theme="dark"] {
    color-scheme: dark;
}
[data-theme="dark"] body {
    background-color: #0f172a;
    color: #e2e8f0;
}

/* ── Public Layout: Top Bar ──────────────────────────────── */
[data-theme="dark"] .bg-gray-900 {
    background-color: #020617 !important; /* slate-950 for top-bar/footer depth */
}
/* Don't over-darken the mobile sidebar (it already uses bg-gray-900 intentionally) */

/* ── Public Layout: Header ───────────────────────────────── */
[data-theme="dark"] header.bg-white {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] header.bg-white .text-gray-600,
[data-theme="dark"] header.bg-white .text-gray-800 {
    color: #e2e8f0 !important;
}
/* Nav links in header — light mode uses text-gray-700, dark mode inverts */
[data-theme="dark"] #siteHeader .text-gray-700 {
    color: #cbd5e1 !important;
}
[data-theme="dark"] #siteHeader .text-gray-500 {
    color: #94a3b8 !important;
}
[data-theme="dark"] #siteHeader .text-gray-600 {
    color: #94a3b8 !important;
}
[data-theme="dark"] #siteHeader .hover\:text-primary:hover {
    color: var(--color-primary) !important;
}
[data-theme="dark"] #siteHeader .border-gray-200,
[data-theme="dark"] #siteHeader .border-gray-300 {
    border-color: #334155 !important;
}
[data-theme="dark"] #siteHeader .hover\:border-primary:hover {
    border-color: var(--color-primary) !important;
}
/* Search input in dark header */
[data-theme="dark"] #siteHeader #headerSearchInput {
    background-color: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
/* WhatsApp icon — keep green visible on dark header */
[data-theme="dark"] #siteHeader .text-green-600 {
    color: #4ade80 !important;
}

/* ── Search input in header ──────────────────────────────── */
[data-theme="dark"] #headerSearchInput {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
[data-theme="dark"] #headerSearchInput::placeholder {
    color: #94a3b8 !important;
}
[data-theme="dark"] #liveSearchResults {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}
[data-theme="dark"] #liveSearchResults a {
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] #liveSearchResults a:hover {
    background-color: #334155 !important;
}
[data-theme="dark"] #liveSearchResults p.text-gray-800 {
    color: #e2e8f0 !important;
}

/* ── Nav bar (bg-gray-800 already dark — lighten slightly) ── */
[data-theme="dark"] header nav.bg-gray-800 {
    background-color: #1e293b !important;
}

/* ── Gentle Mode blur card ────────────────────────────────── */
/* When "Show Anyway" is clicked, gentle-blur-revealed is added to
   the wrapper. These rules undo blur-sm / pointer-events-none /
   select-none that are inlined on the inner <a> tag.           */
.gentle-blur-revealed > a,
.gentle-blur-revealed > a.blur-sm {
    filter: none !important;
    pointer-events: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

/* ── Top bar layout — ensure date left / buttons right ─────── */
.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Date: desktop shows full, mobile shows short */
.date-desktop { display: none; }
.date-mobile  { display: inline; }
@media (min-width: 768px) {
    .date-desktop { display: inline; }
    .date-mobile  { display: none; }
}

/* ── Breaking News Ticker ─────────────────────────────────── */
/* ticker uses bg-primary — left as-is (white text on primary) */

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-track {
    display: inline-block;
    animation: ticker-scroll 55s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

/* ── Main page background ────────────────────────────────── */
[data-theme="dark"] .bg-gray-50 {
    background-color: #0f172a !important;
}

/* ── White cards / panels ────────────────────────────────── */
[data-theme="dark"] .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* ── Text colours ────────────────────────────────────────── */
[data-theme="dark"] .text-gray-900 { color: #f1f5f9 !important; }
[data-theme="dark"] .text-gray-800 { color: #e2e8f0 !important; }
[data-theme="dark"] .text-gray-700 { color: #cbd5e1 !important; }
[data-theme="dark"] .text-gray-600 { color: #94a3b8 !important; }
/* gray-500 on dark card bg-card (#1e293b) = 4.6:1 ✅ */
[data-theme="dark"] .text-gray-500 { color: #94a3b8 !important; }
/* gray-400 was failing in light mode too — on dark it's fine */
[data-theme="dark"] .text-gray-400 { color: #94a3b8 !important; }

/* ── Borders ─────────────────────────────────────────────── */
[data-theme="dark"] .border-gray-100 { border-color: #334155 !important; }
[data-theme="dark"] .border-gray-200 { border-color: #334155 !important; }
[data-theme="dark"] .border-gray-300 { border-color: #475569 !important; }
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b,
[data-theme="dark"] .border { border-color: #475569 !important; }
[data-theme="dark"] .divide-gray-100 > * + * { border-color: #334155 !important; }

/* ── Shadows ─────────────────────────────────────────────── */
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl {
    --tw-shadow-color: rgba(0,0,0,0.5);
}

/* ── Form inputs & textareas ─────────────────────────────── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #94a3b8 !important;
}
[data-theme="dark"] select option {
    background-color: #334155;
    color: #f1f5f9;
}
/* Checkboxes & radios — keep visible */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--color-primary);
}

/* ── Labels ──────────────────────────────────────────────── */
[data-theme="dark"] label { color: #cbd5e1 !important; }

/* ── Buttons — neutral/gray variants ────────────────────── */
[data-theme="dark"] .bg-gray-100 {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .bg-gray-200 {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #334155 !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #475569 !important; }
[data-theme="dark"] .hover\:bg-gray-50:hover  { background-color: #334155 !important; }

/* ── Amber / green / red tinted panels (AI, breaking) ────── */
[data-theme="dark"] .bg-amber-50  { background-color: #292524 !important; }
[data-theme="dark"] .bg-violet-50 { background-color: #1e1b4b !important; }
[data-theme="dark"] .bg-violet-100{ background-color: #2e1b6b !important; }
[data-theme="dark"] .bg-green-50  { background-color: #052e16 !important; }
[data-theme="dark"] .bg-red-50    { background-color: #2d0b0b !important; }
[data-theme="dark"] .bg-blue-50   { background-color: #0c1a2e !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: #052e16 !important; }

/* ── Tinted text on those panels ────────────────────────── */
[data-theme="dark"] .text-amber-700  { color: #fcd34d !important; }
[data-theme="dark"] .text-violet-700 { color: #c4b5fd !important; }
[data-theme="dark"] .text-green-700  { color: #86efac !important; }
[data-theme="dark"] .text-red-700    { color: #fca5a5 !important; }
[data-theme="dark"] .text-blue-700   { color: #93c5fd !important; }
[data-theme="dark"] .text-emerald-700{ color: #6ee7b7 !important; }

/* ── Article Reaction buttons ────────────────────────────── */
[data-theme="dark"] .reaction-btn.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* ── Profile dropdown ────────────────────────────────────── */
[data-theme="dark"] #profileDropdown,
[data-theme="dark"] #adminProfileDropdown {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}
[data-theme="dark"] #profileDropdown a,
[data-theme="dark"] #adminProfileDropdown a,
[data-theme="dark"] #profileDropdown button,
[data-theme="dark"] #adminProfileDropdown button {
    color: #e2e8f0 !important;
}
[data-theme="dark"] #profileDropdown a:hover,
[data-theme="dark"] #adminProfileDropdown a:hover,
[data-theme="dark"] #profileDropdown button:hover,
[data-theme="dark"] #adminProfileDropdown button:hover {
    background-color: #334155 !important;
}
[data-theme="dark"] #profileDropdown .border-gray-100,
[data-theme="dark"] #adminProfileDropdown .border-gray-100 {
    border-color: #334155 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
[data-theme="dark"] footer.bg-gray-900 {
    background-color: #020617 !important;
}

/* ── Prose (article content) ─────────────────────────────── */
[data-theme="dark"] .prose {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .prose h1,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .prose a {
    color: var(--color-primary) !important;
}
[data-theme="dark"] .prose strong { color: #f1f5f9 !important; }
[data-theme="dark"] .prose blockquote {
    border-color: var(--color-primary) !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .prose code {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .prose pre {
    background-color: #0f172a !important;
}

/* ── Tags / pills ────────────────────────────────────────── */
[data-theme="dark"] a.bg-gray-100,
[data-theme="dark"] span.bg-gray-100 {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* ── Modals (OCR, AI Image) ──────────────────────────────── */
[data-theme="dark"] .bg-white.rounded-xl {
    background-color: #1e293b !important;
}
[data-theme="dark"] .bg-gray-50.rounded-b-xl {
    background-color: #0f172a !important;
}

/* ── Reading progress bar — no override needed (uses primary) */

/* ── Trending sidebar rank number opacity ────────────────── */
[data-theme="dark"] .opacity-20 { opacity: 0.35 !important; }

/* ── Summary italic quote border ────────────────────────── */
[data-theme="dark"] .border-l-4.border-primary { border-color: var(--color-primary) !important; }
[data-theme="dark"] p.text-gray-600.italic { color: #94a3b8 !important; }

/* ── Admin Layout ────────────────────────────────────────── */
[data-theme="dark"] .bg-gray-100 {
    background-color: #0f172a !important;
}
/* Admin top header bar */
[data-theme="dark"] header.bg-white.shadow-sm {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}
[data-theme="dark"] header.bg-white.shadow-sm h1 {
    color: #f1f5f9 !important;
}
/* Admin sidebar — already dark, keep as-is but deepen bg for contrast */
[data-theme="dark"] aside#adminSidebar {
    background-color: #020617 !important;
}
[data-theme="dark"] aside#adminSidebar .border-gray-700 {
    border-color: #1e293b !important;
}

/* ── Admin tables ────────────────────────────────────────── */
[data-theme="dark"] table { color: #e2e8f0 !important; }
[data-theme="dark"] thead { background-color: #0f172a !important; }
[data-theme="dark"] th { color: #94a3b8 !important; background-color: #0f172a !important; }
[data-theme="dark"] td { border-color: #334155 !important; }
[data-theme="dark"] tr:hover td { background-color: #334155 !important; }
[data-theme="dark"] .bg-gray-50:is(tr) { background-color: #1e293b !important; }

/* ── Badges ──────────────────────────────────────────────── */
[data-theme="dark"] .bg-green-100 { background-color: #052e16 !important; }
[data-theme="dark"] .text-green-800 { color: #86efac !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: #1c1400 !important; }
[data-theme="dark"] .text-yellow-800 { color: #fde68a !important; }
[data-theme="dark"] .bg-red-100 { background-color: #2d0b0b !important; }
[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }
[data-theme="dark"] .bg-blue-100 { background-color: #0c1a2e !important; }
[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; }
[data-theme="dark"] .bg-purple-100 { background-color: #1a0533 !important; }
[data-theme="dark"] .text-purple-800 { color: #d8b4fe !important; }

/* ── Pagination ──────────────────────────────────────────── */
[data-theme="dark"] .bg-primary\/10 { background-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important; }

/* ── Toggle button itself ────────────────────────────────── */
.dark-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.dark-toggle:hover {
    background: rgba(255,255,255,0.12);
}
.dark-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
/* Icon swap */
.dark-toggle .icon-sun  { display: none; }
.dark-toggle .icon-moon { display: block; }
[data-theme="dark"] .dark-toggle .icon-sun  { display: block; }
[data-theme="dark"] .dark-toggle .icon-moon { display: none; }

/* ── Logo text — light mode ─────────────────────────────────
   Mukta 800, primary colour, subtle grey outline.           */
.logo-text {
    font-family: 'Mukta', 'Noto Sans Devanagari', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    color: var(--color-primary);
    text-shadow:
        -1px -1px 0 rgba(75,85,99,0.75),
         1px -1px 0 rgba(75,85,99,0.75),
        -1px  1px 0 rgba(75,85,99,0.75),
         1px  1px 0 rgba(75,85,99,0.75),
         3px 4px 10px rgba(0,0,0,0.15);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* ── Logo text — dark mode (slate-800 header bg) ────────────
   Yantramanav 900, white outline, #ff4500 accent colour.    */
[data-theme="dark"] .logo-text {
    font-family: 'Yantramanav', 'Noto Sans Devanagari', sans-serif;
    font-weight: 900;
    color: var(--color-primary);
    text-shadow:
        -1px -1px 0 rgba(255,255,255,0.8),
         1px -1px 0 rgba(255,255,255,0.8),
        -1px  1px 0 rgba(255,255,255,0.8),
         1px  1px 0 rgba(255,255,255,0.8),
         4px 4px 12px rgba(0,0,0,0.15);
}

/* ── Article action buttons (bookmark / edit overlay) ─────── */
[data-theme="dark"] .bookmark-btn {
    background-color: rgba(30, 41, 59, 0.85) !important; /* dark slate, semi-transparent */
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .bookmark-btn:hover {
    background-color: rgba(30, 41, 59, 0.95) !important;
    border-color: var(--color-primary) !important;
}
[data-theme="dark"] .bookmark-btn.text-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ── Local Business Search Widget ─────────────────────────── */
[data-theme="dark"] .local-biz-widget-section {
    background-color: #111827 !important;
}
[data-theme="dark"] .local-biz-widget-card {
    background-color: #1e293b !important;
}
[data-theme="dark"] .local-biz-widget-card .local-biz-input-wrapper {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .local-biz-widget-card .local-biz-input,
[data-theme="dark"] .local-biz-widget-card input.local-biz-input,
[data-theme="dark"] .local-biz-widget-card select.local-biz-input {
    background-color: transparent !important;
    color: #f1f5f9 !important;
    border: none !important;
}
[data-theme="dark"] .local-biz-widget-card .local-biz-input::placeholder {
    color: #94a3b8 !important;
}
[data-theme="dark"] .local-biz-widget-card select.local-biz-input option {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

/* ── Article card: mobile-stack layout (wide variant + digest) ─ */
/* On mobile: flex-col so image is on top, text below            */
/* On ≥640px: revert to flex-row (side by side)                  */
.article-card-wide {
    display: flex;
    flex-direction: column;
}
.article-card-wide .article-card-img {
    width: 100%;
    height: 12rem;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .article-card-wide {
        flex-direction: row;
        align-items: flex-start;
    }
    .article-card-wide > a {
        width: 7rem !important;
        flex-shrink: 0 !important;
    }
    .article-card-wide .article-card-img {
        width: 7rem;
        height: 5rem;
    }
}

/* ── Mobile Sidebar Drawer & Overlay Layering ──────────────── */
#mobileSidebarOverlay {
    z-index: 9998 !important;
}
#mobileSidebar {
    z-index: 9999 !important;
}

[data-theme="dark"] #mobileSidebar {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
[data-theme="dark"] #mobileSidebarInput {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
[data-theme="dark"] #mobileSidebarInput::placeholder {
    color: #94a3b8 !important;
}

/* ── Ad Engine Disclosure Labels & Badges ─────────────────── */
.ad-disclosure-label {
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    margin: 0 auto 4px auto !important;
    text-align: center !important;
    user-select: none !important;
    display: block !important;
}

[data-theme="dark"] .ad-disclosure-label,
html[data-theme="dark"] .ad-disclosure-label,
.dark .ad-disclosure-label {
    color: #94a3b8 !important;
}

.ad-badge-label {
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    display: inline-block !important;
}

[data-theme="dark"] .ad-badge-label,
html[data-theme="dark"] .ad-badge-label,
.dark .ad-badge-label {
    color: #94a3b8 !important;
}

/* ── In-Feed Ad Spacing Normalization (Equal top & bottom spacing) ── */
[data-ad-slot="in-feed"],
.ad-engine-in-feed {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

[data-ad-slot="in-feed"] .ad-zone-wrapper,
.ad-engine-in-feed .ad-container-inner {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

[data-ad-slot="in-feed"] .ad-disclosure-label,
.ad-engine-in-feed .ad-disclosure-label {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    line-height: 12px !important;
}

/* ── Admin Indigo / Analytics Badges & Buttons ───────────── */
[data-theme="dark"] .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #a5b4fc !important;
}
[data-theme="dark"] .bg-indigo-50:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
}
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-indigo-700 {
    color: #a5b4fc !important;
}
[data-theme="dark"] .bg-indigo-600 {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .bg-indigo-600:hover {
    background-color: #4338ca !important;
}




/* ── Inshorts Feed Card Dark Theme Overrides ─────────────── */
[data-theme="dark"] .inshorts-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .inshorts-card:hover {
    border-color: #475569 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .inshorts-card__media {
    background-color: #0f172a !important;
}

[data-theme="dark"] .inshorts-card__title {
    color: #f8fafc !important;
}

[data-theme="dark"] .inshorts-card:hover .inshorts-card__title {
    color: var(--color-primary) !important;
}

[data-theme="dark"] .inshorts-card__byline {
    color: #94a3b8 !important;
}

[data-theme="dark"] .inshorts-card__summary {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .inshorts-card__footer {
    border-top-color: #334155 !important;
}

[data-theme="dark"] .inshorts-card--hero {
    border-left: 4px solid var(--color-primary, #dc2626) !important;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12) 0%, #1e293b 25%) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .inshorts-card--featured {
    border-left: 4px solid #f59e0b !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, #1e293b 25%) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

/* ── Article Justified Reading Alignment (Light & Dark) ── */
.article-summary-lead,
.prose,
.prose p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}