/* JustReused dark theme compatibility layer
   Purpose: make older hardcoded white/gray UI follow data-jr-theme="spotify".
   Keep this loaded after page/component CSS. */

html[data-jr-theme="spotify"] {
    --jr-compat-bg: var(--jr-bg-base, #121212);
    --jr-compat-surface: var(--jr-bg-elevated, #181818);
    --jr-compat-surface-2: var(--jr-bg-highlight, #282828);
    --jr-compat-border: var(--jr-border, rgba(255, 255, 255, 0.1));
    --jr-compat-text: var(--jr-text-primary, #ffffff);
    --jr-compat-muted: var(--jr-text-secondary, #b3b3b3);
    --jr-compat-subtle: var(--jr-text-muted, #a7a7a7);
}

html[data-jr-theme="spotify"],
html[data-jr-theme="spotify"] body,
html[data-jr-theme="spotify"] main,
html[data-jr-theme="spotify"] .page-wrapper,
html[data-jr-theme="spotify"] .root-element-div {
    background-color: var(--jr-compat-bg) !important;
    color: var(--jr-compat-text) !important;
    color-scheme: dark;
}

/* Old Tailwind/background utility compatibility */
html[data-jr-theme="spotify"] .bg-white,
html[data-jr-theme="spotify"] .bg-gray-50,
html[data-jr-theme="spotify"] .bg-gray-100,
html[data-jr-theme="spotify"] .bg-slate-50,
html[data-jr-theme="spotify"] .bg-slate-100,
html[data-jr-theme="spotify"] .bg-warm-light,
html[data-jr-theme="spotify"] [style*="background: #fff"],
html[data-jr-theme="spotify"] [style*="background:#fff"],
html[data-jr-theme="spotify"] [style*="background-color: #fff"],
html[data-jr-theme="spotify"] [style*="background-color:#fff"],
html[data-jr-theme="spotify"] [style*="background: white"],
html[data-jr-theme="spotify"] [style*="background-color: white"] {
    background-color: var(--jr-compat-surface) !important;
    color: var(--jr-compat-text) !important;
}

html[data-jr-theme="spotify"] .bg-gray-200,
html[data-jr-theme="spotify"] .bg-gray-300,
html[data-jr-theme="spotify"] .bg-slate-200,
html[data-jr-theme="spotify"] .hover\:bg-gray-50:hover,
html[data-jr-theme="spotify"] .hover\:bg-gray-100:hover,
html[data-jr-theme="spotify"] .hover\:bg-slate-50:hover,
html[data-jr-theme="spotify"] .hover\:bg-slate-100:hover {
    background-color: var(--jr-compat-surface-2) !important;
    color: var(--jr-compat-text) !important;
}

/* Text utilities that otherwise stay dark on dark backgrounds */
html[data-jr-theme="spotify"] .text-black,
html[data-jr-theme="spotify"] .text-gray-700,
html[data-jr-theme="spotify"] .text-gray-800,
html[data-jr-theme="spotify"] .text-gray-900,
html[data-jr-theme="spotify"] .text-slate-700,
html[data-jr-theme="spotify"] .text-slate-800,
html[data-jr-theme="spotify"] .text-slate-900 {
    color: var(--jr-compat-text) !important;
}

html[data-jr-theme="spotify"] .text-gray-400,
html[data-jr-theme="spotify"] .text-gray-500,
html[data-jr-theme="spotify"] .text-gray-600,
html[data-jr-theme="spotify"] .text-slate-400,
html[data-jr-theme="spotify"] .text-slate-500,
html[data-jr-theme="spotify"] .text-slate-600 {
    color: var(--jr-compat-muted) !important;
}

/* Premium readable copy for legacy/static pages such as /pages/help */
html[data-jr-theme="spotify"] .common_page_style,
html[data-jr-theme="spotify"] .jr-static-page,
html[data-jr-theme="spotify"] .jr-static-page-content {
    color: #e7e7e7 !important;
}

html[data-jr-theme="spotify"] .jr-static-page-title,
html[data-jr-theme="spotify"] .jr-static-page h1,
html[data-jr-theme="spotify"] .jr-static-page h2,
html[data-jr-theme="spotify"] .jr-static-page h3,
html[data-jr-theme="spotify"] .jr-static-page h4,
html[data-jr-theme="spotify"] .jr-static-page strong,
html[data-jr-theme="spotify"] .jr-static-page b {
    color: #ffffff !important;
}

html[data-jr-theme="spotify"] .jr-static-page p,
html[data-jr-theme="spotify"] .jr-static-page li,
html[data-jr-theme="spotify"] .jr-static-page span,
html[data-jr-theme="spotify"] .jr-static-page div:not([class*="bg-"]) {
    color: #e7e7e7 !important;
}

html[data-jr-theme="spotify"] .jr-static-page small,
html[data-jr-theme="spotify"] .jr-static-page .text-muted,
html[data-jr-theme="spotify"] .jr-static-page .text-gray-500,
html[data-jr-theme="spotify"] .jr-static-page .text-gray-600 {
    color: #c7c7c7 !important;
}

html[data-jr-theme="spotify"] .jr-static-page a {
    color: #1ed760 !important;
    text-decoration-color: rgba(30, 215, 96, 0.45);
}

/* Borders/rings */
html[data-jr-theme="spotify"] .border,
html[data-jr-theme="spotify"] .border-gray-100,
html[data-jr-theme="spotify"] .border-gray-200,
html[data-jr-theme="spotify"] .border-gray-300,
html[data-jr-theme="spotify"] .border-slate-100,
html[data-jr-theme="spotify"] .border-slate-200,
html[data-jr-theme="spotify"] .ring-gray-100,
html[data-jr-theme="spotify"] .ring-slate-200,
html[data-jr-theme="spotify"] [style*="border-color: #e5e7eb"],
html[data-jr-theme="spotify"] [style*="border-color:#e5e7eb"] {
    border-color: var(--jr-compat-border) !important;
    --tw-ring-color: var(--jr-compat-border) !important;
}

/* Forms */
html[data-jr-theme="spotify"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-jr-theme="spotify"] textarea,
html[data-jr-theme="spotify"] select,
html[data-jr-theme="spotify"] .form-input,
html[data-jr-theme="spotify"] .form-select,
html[data-jr-theme="spotify"] .form-textarea {
    background-color: var(--jr-compat-surface-2) !important;
    border-color: var(--jr-compat-border) !important;
    color: var(--jr-compat-text) !important;
    box-shadow: none !important;
}

html[data-jr-theme="spotify"] input::placeholder,
html[data-jr-theme="spotify"] textarea::placeholder {
    color: var(--jr-compat-subtle) !important;
}

/* Common old cards, panels, dropdowns, modals, tables */
html[data-jr-theme="spotify"] .card,
html[data-jr-theme="spotify"] .modal-content,
html[data-jr-theme="spotify"] [role="dialog"] > .bg-white,
html[data-jr-theme="spotify"] .dropdown-menu,
html[data-jr-theme="spotify"] .shadow,
html[data-jr-theme="spotify"] .shadow-lg,
html[data-jr-theme="spotify"] .shadow-xl,
html[data-jr-theme="spotify"] table,
html[data-jr-theme="spotify"] thead,
html[data-jr-theme="spotify"] tbody,
html[data-jr-theme="spotify"] tr,
html[data-jr-theme="spotify"] td,
html[data-jr-theme="spotify"] th {
    background-color: var(--jr-compat-surface) !important;
    border-color: var(--jr-compat-border) !important;
    color: var(--jr-compat-text) !important;
}

html[data-jr-theme="spotify"] hr,
html[data-jr-theme="spotify"] .divide-y > :not([hidden]) ~ :not([hidden]),
html[data-jr-theme="spotify"] .border-t,
html[data-jr-theme="spotify"] .border-b,
html[data-jr-theme="spotify"] .border-l,
html[data-jr-theme="spotify"] .border-r {
    border-color: var(--jr-compat-border) !important;
}

/* Buttons that were white in legacy flows */
html[data-jr-theme="spotify"] button.bg-white,
html[data-jr-theme="spotify"] a.bg-white {
    background-color: var(--jr-compat-surface-2) !important;
    color: var(--jr-compat-text) !important;
    border-color: var(--jr-compat-border) !important;
}

/* Keep intentionally white media/logo wells readable */
html[data-jr-theme="spotify"] img,
html[data-jr-theme="spotify"] video,
html[data-jr-theme="spotify"] canvas,
html[data-jr-theme="spotify"] .jr-logo-mark,
html[data-jr-theme="spotify"] .fi {
    color-scheme: normal;
}