/* === DARK THEME === */
/* Applied when html[data-theme="dark"] */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #333333;
    color: #ffffff;
}

html[data-theme="dark"] {
    --white: #333333;
    --black: #ffffff;
    --gray-light: #444444;
    --gray-dark: #ffffff;
    --gray: #aaaaaa;
}

/* === Welcome screen: dark bg, yellow text === */
html[data-theme="dark"] .screen-welcome {
    color: var(--yellow) !important;
}
html[data-theme="dark"] .screen-welcome * {
    color: var(--yellow) !important;
}
html[data-theme="dark"] .screen-welcome img {
    filter: none !important;
}
html[data-theme="dark"] .feed-header {
    background: #ffdd00 !important;
}

/* === Keep ad posts with yellow background === */
html[data-theme="dark"] .feed-post-ad {
    background: linear-gradient(135deg, #FFFDE7 0%, #FFF9C4 100%) !important;
    color: #000000 !important;
}
html[data-theme="dark"] .feed-post-ad * {
    color: #000000 !important;
}

/* === Logout button keeps text and icon white === */
html[data-theme="dark"] .btn-logout {
    color: #ffffff;
}

/* === Welcome screen buttons: always black bg, yellow text === */
html[data-theme="dark"] .screen-welcome .btn-primary,
html[data-theme="dark"] .screen-welcome .btn-secondary {
    background: #000000 !important;
    color: var(--yellow) !important;
}

/* === Error-mode primary button: keep red background === */
html[data-theme="dark"] .screen-form.error-mode .btn-primary {
    background: #FF4136 !important;
    color: #ffffff !important;
}

/* === Action buttons: white bg, black text === */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-follow:not(.request-pending),
html[data-theme="dark"] .btn-fr-accept,
html[data-theme="dark"] .comment-send-btn,
html[data-theme="dark"] .comment-edit-save {
    background: #ffffff !important;
    color: #000000 !important;
}

/* === Form inputs === */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .edit-input,
html[data-theme="dark"] .description-textarea,
html[data-theme="dark"] .location-input input,
html[data-theme="dark"] .code-input {
    background: #404040;
    color: #ffffff;
    border-color: #888888;
}
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .edit-input::placeholder,
html[data-theme="dark"] .description-textarea::placeholder {
    color: #aaaaaa;
}
html[data-theme="dark"] .form-input:-webkit-autofill,
html[data-theme="dark"] .form-input:-webkit-autofill:hover,
html[data-theme="dark"] .form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #404040 inset;
    box-shadow: 0 0 0px 1000px #404040 inset;
    -webkit-text-fill-color: #ffffff;
}

/* === Date select === */
html[data-theme="dark"] .date-select {
    background-color: #404040;
    color: #ffffff;
    border-color: #888888;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* === Post action icons === */
html[data-theme="dark"] .post-action {
    color: #ffffff;
}
html[data-theme="dark"] .post-action.liked,
html[data-theme="dark"] .post-action.liked svg {
    color: var(--yellow);
    fill: var(--yellow);
    stroke: var(--yellow);
}

/* === Bottom navigation === */
html[data-theme="dark"] .bottom-nav {
    background: #333333;
    border-top-color: #ffffff;
}
html[data-theme="dark"] .bottom-nav .nav-item:not(.logo-nav):not(.nav-item-avatar) {
    color: #ffffff;
}

/* === Modals === */
html[data-theme="dark"] .modal {
    background: #333333;
}
html[data-theme="dark"] .comments-container {
    background: #3a3a3a;
}
html[data-theme="dark"] .comments-header {
    border-bottom-color: #555555;
}
html[data-theme="dark"] #comment-input {
    background: #444444;
    color: #ffffff;
    border-color: #555555;
}
html[data-theme="dark"] .comments-input-container {
    background: #3a3a3a;
    border-top-color: #555555;
}
html[data-theme="dark"] .share-menu {
    background: #3a3a3a;
}
html[data-theme="dark"] .share-menu-header {
    border-bottom-color: #555555;
}

/* === Sticky back headers === */
html[data-theme="dark"] .screen-profile .back-header,
html[data-theme="dark"] .screen-user-posts .back-header {
    background: #333333;
}

/* === Avatar / image placeholders === */
html[data-theme="dark"] .profile-avatar,
html[data-theme="dark"] .result-avatar,
html[data-theme="dark"] .edit-avatar-preview,
html[data-theme="dark"] .avatar-placeholder,
html[data-theme="dark"] .post-avatar,
html[data-theme="dark"] .like-avatar,
html[data-theme="dark"] .comment-avatar,
html[data-theme="dark"] .comment-input-avatar {
    background: #444444;
}

/* === Checkbox === */
html[data-theme="dark"] .checkbox {
    background: #404040;
    border-color: #ffffff;
}
html[data-theme="dark"] .checkbox.checked {
    background: #ffffff;
}
html[data-theme="dark"] .checkbox.checked svg {
    fill: #333333;
}
html[data-theme="dark"] .btn-check {
    background: transparent;
}

/* === Secondary/cancel buttons === */
html[data-theme="dark"] .btn-avatar-upload,
html[data-theme="dark"] .btn-avatar-url {
    background: #444444;
    color: #ffffff;
    border-color: #888888;
}
html[data-theme="dark"] .btn-fr-reject,
html[data-theme="dark"] .btn-follow.request-pending {
    background: #444444;
    color: #ffffff;
}
html[data-theme="dark"] .btn-cancel {
    background: #444444;
    color: #ffffff;
}
html[data-theme="dark"] .btn-change-password {
    background: #444444;
    border-color: #888888;
    color: #ffffff;
}
html[data-theme="dark"] .comment-edit-cancel {
    background: #444444;
    color: #ffffff;
}

/* === Search box input === */
html[data-theme="dark"] .search-box input {
    background: transparent;
    color: #ffffff;
}

/* === Comment edit input === */
html[data-theme="dark"] .comment-edit-input {
    background: #444444;
    color: #ffffff;
    border-color: #555555;
}

/* === Toggle switch === */
html[data-theme="dark"] .toggle-slider {
    background-color: #555555;
}
html[data-theme="dark"] .toggle-slider:before {
    background-color: #cccccc;
}
html[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
    background-color: #ffffff;
}
html[data-theme="dark"] .toggle-switch input:checked + .toggle-slider:before {
    background-color: #333333;
}

/* === Notification states === */
html[data-theme="dark"] .notification-item.unread {
    background: rgba(255, 221, 0, 0.08);
}
html[data-theme="dark"] .notification-item:active {
    background: #444444;
}

/* === Hover states === */
html[data-theme="dark"] .search-result-item:hover,
html[data-theme="dark"] .search-result-post:hover,
html[data-theme="dark"] .share-option:hover,
html[data-theme="dark"] .folder-item:hover,
html[data-theme="dark"] .btn-avatar-upload:hover,
html[data-theme="dark"] .btn-avatar-url:hover,
html[data-theme="dark"] .btn-change-password:hover {
    background: #4a4a4a;
}

/* === Invert ALL icons to white === */
html[data-theme="dark"] img {
    filter: invert(1);
}

/* === Do NOT invert: ico-fuxel, avatars, photos, feed logo, yellow-screen images === */
html[data-theme="dark"] .fullscreen-image,
html[data-theme="dark"] .location-icon img,
html[data-theme="dark"] .location-icon-small img,
html[data-theme="dark"] .btn-logout-icon,
html[data-theme="dark"] .nav-item.logo-nav img,
html[data-theme="dark"] .screen-welcome img,
html[data-theme="dark"] .feed-logo,
html[data-theme="dark"] .profile-avatar img,
html[data-theme="dark"] .post-avatar img,
html[data-theme="dark"] .post-image img,
html[data-theme="dark"] .photo-item img,
html[data-theme="dark"] .selectable-photo img,
html[data-theme="dark"] .preview-large img,
html[data-theme="dark"] .preview-thumb img,
html[data-theme="dark"] .result-avatar img,
html[data-theme="dark"] .nav-item-avatar img,
html[data-theme="dark"] .carousel-slide img,
html[data-theme="dark"] .notification-avatar img,
html[data-theme="dark"] .notification-thumb img,
html[data-theme="dark"] .fr-avatar img,
html[data-theme="dark"] .like-avatar img,
html[data-theme="dark"] .comment-avatar img,
html[data-theme="dark"] .comment-input-avatar img,
html[data-theme="dark"] .register-avatar-preview img,
html[data-theme="dark"] .edit-avatar-preview img,
html[data-theme="dark"] .result-post-image img,
html[data-theme="dark"] .result-post-avatar {
    filter: none !important;
}

/* === Do NOT invert: SVG/img icons inside var(--red) elements === */
html[data-theme="dark"] .screen-form.error-mode .logo-smile img,
html[data-theme="dark"] .screen-form.error-mode .btn-primary .arrow img,
html[data-theme="dark"] .btn-arrow-left .arrow img,
html[data-theme="dark"] .btn-danger img,
html[data-theme="dark"] .btn-danger svg {
    filter: none !important;
}



/* === Box shadow === */
@media (min-width: 480px) {
    html[data-theme="dark"] #app {
        box-shadow: 0 0 30px rgba(0,0,0,0.6);
    }
}