/* Basic page colors */
html[data-theme="dark"] body {
    background-color: var(--theme-bg);
    color: var(--theme-text);
}

/* Tailwind / Bootstrap background overrides used in the main layout */
html[data-theme="dark"] .bg-white {
    background-color: var(--theme-surface) !important;
}

html[data-theme="dark"] .bg-gray-700,
html[data-theme="dark"] .bg-dark {
    background-color: var(--theme-surface-strong) !important;
}

html[data-theme="dark"] .hover\:bg-gray-50:hover {
    background-color: #263449 !important;
}

/* Navbar text only */
html[data-theme="dark"] nav a,
html[data-theme="dark"] nav button:not(.theme-toggle-button) {
    color: #e5e7eb !important;
}

html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav button:not(.theme-toggle-button):hover {
    color: var(--link-color-hover) !important;
}

/* Keep text readable inside light cards that are not converted yet */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6,
html[data-theme="dark"] .card p {
    color: #374151;
}

/* Navbar / dropdowns */
html[data-theme="dark"] nav {
    border-color: var(--theme-border);
}

html[data-theme="dark"] #packages-menu {
    background-color: var(--theme-surface) !important;
    border: 1px solid var(--theme-border);
    box-shadow: 0 16px 40px var(--theme-shadow);
}

html[data-theme="dark"] #packages-menu a {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] #packages-menu a:hover {
    background-color: #263449 !important;
    color: var(--link-color-hover) !important;
}

html[data-theme="dark"] #mobile-menu {
    background-color: var(--theme-surface);
}

/* Cookie banner */
html[data-theme="dark"] #cookies-banner {
    background-color: #111827 !important;
    border-top: 1px solid var(--theme-border);
}

html[data-theme="dark"] #accept-necessary-cookies {
    background-color: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
}

/* Cards and simple surfaces */
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg {
    box-shadow: 0 16px 40px var(--theme-shadow) !important;
}

/* Theme toggle button */
.theme-toggle-button {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    min-height: 2rem;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    touch-action: manipulation;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.theme-toggle-button:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.65);
    transform: translateY(-1px);
}

html[data-theme="dark"] .theme-toggle-button {
    background: rgba(170, 214, 211, 0.16);
    border-color: rgba(170, 214, 211, 0.55);
}

#theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    font-size: 0.95rem;
    line-height: 1;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

/* Moon icon: button will enable dark mode */
html[data-theme="light"] #theme-toggle-icon {
    color: #dbeafe;
}

/* Sun icon: button will enable light mode */
html[data-theme="dark"] #theme-toggle-icon {
    color: #facc15;
}

.theme-toggle-button:hover #theme-toggle-icon {
    transform: scale(1.1);
}

/* Dark theme readability for main content pages */
html[data-theme="dark"] main.text-gray-800 {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] main.text-gray-800 h1,
html[data-theme="dark"] main.text-gray-800 h2 {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] main.text-gray-800 > section > p {
    color: var(--theme-text-muted) !important;
}


/* Keep instruction cards readable when cards stay light */
html[data-theme="dark"] main.text-gray-800 .instruction-card {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
}

html[data-theme="dark"] main.text-gray-800 .instruction-card h1,
html[data-theme="dark"] main.text-gray-800 .instruction-card h2,
html[data-theme="dark"] main.text-gray-800 .instruction-card h3,
html[data-theme="dark"] main.text-gray-800 .instruction-card h4,
html[data-theme="dark"] main.text-gray-800 .instruction-card h5,
html[data-theme="dark"] main.text-gray-800 .instruction-card h6 {
    color: #111827 !important;
}

html[data-theme="dark"] main.text-gray-800 .instruction-card p {
    color: #4b5563 !important;
}

html[data-theme="dark"] main.text-gray-800 .instruction-card p.text-\[\#467886\] {
    color: #467886 !important;
}

html[data-theme="dark"] main.text-gray-800 .instruction-card a {
    color: #007bff !important;
}

/* Dark theme: public page headers, e.g. Blog */
html[data-theme="dark"] .container > .text-center h1.text-gray-800 {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .container > .text-center p.text-gray-600 {
    color: var(--theme-text-muted) !important;
}

/* Dark theme: Twoje potrzeby - kontakt page */
html[data-theme="dark"] .page-content {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .page-content .header,
html[data-theme="dark"] .page-content .card,
html[data-theme="dark"] .page-content .prompt-box,
html[data-theme="dark"] .page-content .prompt-replacements,
html[data-theme="dark"] .page-content .prompt-box .instructions {
    background: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 16px 40px var(--theme-shadow) !important;
}

html[data-theme="dark"] .page-content .card.prompt-card {
    background: var(--theme-bg-soft) !important;
    border-color: rgba(170, 214, 211, 0.55) !important;
}

html[data-theme="dark"] .page-content .header h1,
html[data-theme="dark"] .page-content .section-title,
html[data-theme="dark"] .page-content .card h3,
html[data-theme="dark"] .page-content .prompt-box h2,
html[data-theme="dark"] .page-content .prompt-replacements-label {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .page-content .header p,
html[data-theme="dark"] .page-content .card p,
html[data-theme="dark"] .page-content .prompt-box .instructions,
html[data-theme="dark"] .page-content .prompt-textarea {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .page-content .card-icon {
    background: rgba(170, 214, 211, 0.12) !important;
    border-color: rgba(170, 214, 211, 0.35) !important;
    color: var(--link-color-hover) !important;
}

html[data-theme="dark"] .page-content .card-icon i,
html[data-theme="dark"] .page-content .prompt-title-icon,
html[data-theme="dark"] .page-content .btn-copy .icon i {
    color: var(--link-color-hover) !important;
}

html[data-theme="dark"] .page-content .prompt-textarea {
    background: #111827 !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .page-content .btn-close {
    background: #374151 !important;
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .page-content a {
    color: var(--link-color-hover) !important;
}

/* Dark theme: homepage section headings readability */
html[data-theme="dark"] .bg-\[\#fafae7\].bg-opacity-40 > .max-w-7xl > h2.text-\[\#4f4f4f\] {
    color: #f3f4f6 !important;
}

html[data-theme="dark"] .bg-\[\#fafae7\].bg-opacity-40 > .max-w-7xl > p.text-\[\#95a5a6\] {
    color: #cbd5e1 !important;
}

/* Dark theme: homepage about section text */
html[data-theme="dark"] .bg-white > .max-w-7xl h2.text-\[\#4f4f4f\],
html[data-theme="dark"] .bg-white > .max-w-7xl h3.text-\[\#4f4f4f\] {
    color: #f3f4f6 !important;
}

html[data-theme="dark"] .bg-white > .max-w-7xl p.text-\[\#b9b9b9\] {
    color: #d1d5db !important;
}

/* Dark theme: homepage final about heading */
html[data-theme="dark"] .bg-white > h3.text-\[\#4f4f4f\] {
    color: #f3f4f6 !important;
}

/* Dark theme: login / auth forms should stay readable */
html[data-theme="dark"] .login-container {
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 16px 40px var(--theme-shadow) !important;
}

html[data-theme="dark"] .login-container h1,
html[data-theme="dark"] .login-container h2,
html[data-theme="dark"] .login-container h3,
html[data-theme="dark"] .login-container label,
html[data-theme="dark"] .login-container p,
html[data-theme="dark"] .login-container div {
    color: #111827 !important;
}

html[data-theme="dark"] .login-container input,
html[data-theme="dark"] .login-container textarea,
html[data-theme="dark"] .login-container select {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    color-scheme: light;
}

html[data-theme="dark"] .login-container input:focus,
html[data-theme="dark"] .login-container textarea:focus,
html[data-theme="dark"] .login-container select:focus {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #aad6d3 !important;
    box-shadow: 0 0 0 3px rgba(170, 214, 211, 0.35) !important;
    outline: none !important;
}

html[data-theme="dark"] .login-container a {
    color: #007bff !important;
}

html[data-theme="dark"] .login-container .google-signin-btn {
    background: #ffffff !important;
    color: #3c4043 !important;
    border-color: #dadce0 !important;
}

html[data-theme="dark"] .login-container .google-signin-btn:hover {
    background: #f8f9fa !important;
    color: #3c4043 !important;
}

/* Dark theme: keep homepage hero text readable on the light hero background */
html[data-theme="dark"] .relative.bg-white.overflow-hidden h2.text-\[\#4f4f4f\] {
    color: #4f4f4f !important;
}

html[data-theme="dark"] .relative.bg-white.overflow-hidden h1.text-\[\#b9b9b9\],
html[data-theme="dark"] .relative.bg-white.overflow-hidden p.text-\[\#b9b9b9\] {
    color: #b9b9b9 !important;
}

html[data-theme="dark"] .relative.bg-white.overflow-hidden p.text-\[\#aad6d3\] {
    color: #aad6d3 !important;
}

/* Dark theme: registration form */
html[data-theme="dark"] .auth-form-container .col-md-6 {
    background: #ffffff !important;
    color: #111827 !important;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 16px 40px var(--theme-shadow) !important;
}

html[data-theme="dark"] .auth-form-container h1,
html[data-theme="dark"] .auth-form-container h2,
html[data-theme="dark"] .auth-form-container h3,
html[data-theme="dark"] .auth-form-container label,
html[data-theme="dark"] .auth-form-container p {
    color: #111827 !important;
}

html[data-theme="dark"] .auth-form-container .text-muted {
    color: #6b7280 !important;
}

html[data-theme="dark"] .auth-form-container input,
html[data-theme="dark"] .auth-form-container textarea,
html[data-theme="dark"] .auth-form-container select {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    color-scheme: light;
}

html[data-theme="dark"] .auth-form-container input:focus,
html[data-theme="dark"] .auth-form-container textarea:focus,
html[data-theme="dark"] .auth-form-container select:focus {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #aad6d3 !important;
    box-shadow: 0 0 0 3px rgba(170, 214, 211, 0.35) !important;
    outline: none !important;
}

/* Pricing table information rows */
html[data-theme="dark"] .pricing-table .pricing-info-cell {
    background-color: var(--theme-bg-soft) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .pricing-table .pricing-info-cell a {
    color: var(--link-color) !important;
}


/* Common application questions — dark mode */

html[data-theme="dark"] .content {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .content .input,
html[data-theme="dark"] .content .inputs-box {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .content .question,
html[data-theme="dark"] .content .questionHeader,
html[data-theme="dark"] .content .question i {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .content .inputs-box label,
html[data-theme="dark"] .content .inputs-box label i,
html[data-theme="dark"] .content .inputs-box label b {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .content .warning,
html[data-theme="dark"] .content .warning b {
    color: var(--theme-text-muted) !important;
}

html[data-theme="dark"] .content .page,
html[data-theme="dark"] .content .category {
    color: var(--theme-text) !important;
}

html[data-theme="dark"] .content label:hover {
    background-color: rgba(145, 202, 198, 0.18) !important;
}

html[data-theme="dark"] .content input:checked + label {
    background-color: rgba(145, 202, 198, 0.25) !important;
    border-radius: 8px;
}

html[data-theme="dark"] .content hr {
    border-color: var(--theme-border) !important;
}

/* Old application tooltips */

html[data-theme="dark"] .tooltip-underline:hover::after,
html[data-theme="dark"] .infoTab,
html[data-theme="dark"] .textDetails {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: #91cac6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Tippy tooltips */

html[data-theme="dark"] .tippy-box {
    background-color: #080d16 !important;
    color: #f8fafc !important;
    border: 1px solid var(--theme-border) !important;
}

html[data-theme="dark"] .tippy-box .tippy-content,
html[data-theme="dark"] .tippy-box .tippy-content span,
html[data-theme="dark"] .tippy-box .tippy-content b {
    color: #f8fafc !important;
}

/* Common application form controls — dark mode */

html[data-theme="dark"] .content input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
html[data-theme="dark"] .content textarea,
html[data-theme="dark"] .content select {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    caret-color: #f8fafc !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .content input::placeholder,
html[data-theme="dark"] .content textarea::placeholder {
    color: #9ca3af !important;
    -webkit-text-fill-color: #9ca3af !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .content input:disabled,
html[data-theme="dark"] .content input[readonly],
html[data-theme="dark"] .content textarea:disabled,
html[data-theme="dark"] .content textarea[readonly],
html[data-theme="dark"] .content select:disabled {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Date value rendered internally by Chromium browsers */

html[data-theme="dark"] .content input[type="date"] {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .content input[type="date"]::-webkit-datetime-edit,
html[data-theme="dark"] .content input[type="date"]::-webkit-datetime-edit-fields-wrapper,
html[data-theme="dark"] .content input[type="date"]::-webkit-datetime-edit-text,
html[data-theme="dark"] .content input[type="date"]::-webkit-datetime-edit-day-field,
html[data-theme="dark"] .content input[type="date"]::-webkit-datetime-edit-month-field,
html[data-theme="dark"] .content input[type="date"]::-webkit-datetime-edit-year-field {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Application card description — dark mode */
html[data-theme="dark"] .app-card-description {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}

/* Tippy tooltip text — dark mode */
html[data-theme="dark"] .tippy-box .tippy-content,
html[data-theme="dark"] .tippy-box .tippy-content * {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    opacity: 1 !important;
}