/* ==========================================================================
   Creen Platform - Global Dark Mode System
   ========================================================================== */

/* 1. Dark Mode CSS Tokens */
html.dark-mode {
    color-scheme: dark;

    /* Base Layer Colors */
    --body-bg: #0b0f19;
    --card-bg: #151c2c;
    --card-elevated: #1e273d;
    --navbar-bg: #111827;
    --sidebar-bg: #111827;
    
    /* Typography Colors */
    --text-color: #f1f5f9;
    --text-muted: #94a3b8;
    --dark-gray: #f8fafc;
    --light-gray: #1a2336;
    --medium-gray: #202b40;
    
    /* Borders & Inputs */
    --border-color: #232f46;
    --input-bg: #0f172a;
    --input-border: #2d3b55;
    --hover-bg: #1e283d;
    
    /* Scrollbars */
    --scrollbar-track-bg: #0b0f19;
    --scrollbar-thumb-bg: #334155;
    --scrollbar-thumb-hover-bg: #475569;

    /* Settings Page Specific Tokens */
    --settings-bg: #0b0f19;
    --settings-card-bg: #151c2c;
    --settings-header-bg: #151c2c;
    --settings-text-primary: #f1f5f9;
    --settings-text-secondary: #94a3b8;
    --settings-text-light: #64748b;
    --settings-border-color: #232f46;
}

/* Smooth Transitions on Theme Toggle */
body,
.top-navbar,
.mobile-header,
.post-card,
.settings-menu,
.dropdown-menu,
.account-management-header {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 2. Global Body & Containers */
html.dark-mode body {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #ffffff !important;
}

html.dark-mode #app,
html.dark-mode .main-layout,
html.dark-mode .center-content {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
}

/* 3. Top Navigation & Mobile Headers */
html.dark-mode .top-navbar,
html.dark-mode .mobile-header {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .top-navbar .search-bar,
html.dark-mode .search-bar {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
}

html.dark-mode .top-navbar .search-bar input,
html.dark-mode .search-bar input {
    background: transparent !important;
    color: var(--text-color) !important;
}

html.dark-mode .top-navbar .search-bar input::placeholder,
html.dark-mode .search-bar input::placeholder {
    color: var(--text-muted) !important;
}

html.dark-mode .top-navbar .nav-icon,
html.dark-mode .mobile-header .nav-icon {
    color: var(--text-muted) !important;
}

html.dark-mode .top-navbar .nav-icon i,
html.dark-mode .mobile-header .nav-icon i {
    color: #cbd5e1 !important;
}

html.dark-mode .top-navbar .nav-icon:hover i,
html.dark-mode .mobile-header .nav-icon:hover i {
    color: #60a5fa !important;
}

/* Mobile Bottom Navigation */
html.dark-mode .mobile-footer-nav,
body.dark-mode-active .mobile-footer-nav,
html.dark-mode .mobile-bottom-nav,
html.dark-mode .bottom-nav {
    background-color: #111827 !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45) !important;
}

html.dark-mode .mobile-footer-nav .nav-item,
body.dark-mode-active .mobile-footer-nav .nav-item,
html.dark-mode .mobile-bottom-nav a,
html.dark-mode .bottom-nav a {
    color: var(--text-muted) !important;
}

html.dark-mode .mobile-footer-nav .nav-item i,
body.dark-mode-active .mobile-footer-nav .nav-item i {
    color: #94a3b8 !important;
}

html.dark-mode .mobile-footer-nav .nav-item.active i,
body.dark-mode-active .mobile-footer-nav .nav-item.active i,
html.dark-mode .mobile-bottom-nav a.active,
html.dark-mode .bottom-nav a.active {
    color: #3b82f6 !important;
}

html.dark-mode .mobile-footer-nav .live-btn,
body.dark-mode-active .mobile-footer-nav .live-btn {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid var(--border-color) !important;
}

html.dark-mode .mobile-footer-nav .live-btn i,
html.dark-mode .mobile-footer-nav .live-btn span,
body.dark-mode-active .mobile-footer-nav .live-btn i,
body.dark-mode-active .mobile-footer-nav .live-btn span {
    color: #f1f5f9 !important;
}

html.dark-mode .mobile-footer-nav .live-btn:hover,
body.dark-mode-active .mobile-footer-nav .live-btn:hover {
    background: #27354f !important;
}

html.dark-mode .mobile-footer-nav .user-avatar-item img,
body.dark-mode-active .mobile-footer-nav .user-avatar-item img {
    border: 1px solid #334155 !important;
}

/* 4. Dropdowns, Menus & Panels */
html.dark-mode .dropdown-menu,
html.dark-mode .notifications-panel {
    background-color: var(--card-elevated) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-item {
    color: var(--text-color) !important;
}

html.dark-mode .dropdown-item:hover {
    background-color: var(--hover-bg) !important;
    color: #60a5fa !important;
}

html.dark-mode .dropdown-divider {
    border-top: 1px solid var(--border-color) !important;
}

html.dark-mode .notifications-header,
html.dark-mode .notifications-footer {
    background-color: var(--card-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .notifications-list .notification-item {
    background-color: var(--card-elevated) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .notifications-list .notification-item.unread {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

html.dark-mode .notifications-list .notification-item:hover {
    background-color: var(--hover-bg) !important;
}

/* 5. Feed, Posts & Cards */
html.dark-mode article.post,
html.dark-mode .post,
html.dark-mode .post-card,
html.dark-mode .create-post-card,
html.dark-mode .card,
html.dark-mode .feed-item,
html.dark-mode .feed-post-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Post Titles & Headings - White Font */
html.dark-mode .post-header .post-username,
html.dark-mode .post-username,
html.dark-mode .post-title,
html.dark-mode .post-content h1,
html.dark-mode .post-content h2,
html.dark-mode .post-content h3,
html.dark-mode .post-content h4,
html.dark-mode .post-content h5,
html.dark-mode .post-content h6,
html.dark-mode article.post h1,
html.dark-mode article.post h2,
html.dark-mode article.post h3,
html.dark-mode article.post h4,
html.dark-mode .post h1,
html.dark-mode .post h2,
html.dark-mode .post h3,
html.dark-mode .post-card h1,
html.dark-mode .post-card h2,
html.dark-mode .post-card h3,
html.dark-mode [style*="color: #012f60"],
html.dark-mode [style*="color:#012f60"],
html.dark-mode [style*="color: rgb(1, 47, 96)"] {
    color: #ffffff !important;
}

/* Post Content & Body Text - White Font */
html.dark-mode .post-text,
html.dark-mode .post-content,
html.dark-mode .post-content p,
html.dark-mode .post-content .content-text,
html.dark-mode .content-text,
html.dark-mode article.post p,
html.dark-mode .post p,
html.dark-mode .user-name {
    color: #ffffff !important;
}

html.dark-mode .post-content .content-wrapper,
html.dark-mode .post .content-wrapper {
    background: transparent !important;
}

html.dark-mode .post-time,
html.dark-mode .post-place,
html.dark-mode .user-role,
html.dark-mode .post-subtext,
html.dark-mode .post-visibility-icon {
    color: #94a3b8 !important;
}

/* Read More */
html.dark-mode .read-more,
html.dark-mode .read-more-link {
    color: #60a5fa !important;
}

html.dark-mode .read-more-wrapper {
    background: linear-gradient(to top, var(--card-bg, #151c2c), rgba(21, 28, 44, 0.9), transparent) !important;
}

/* Post Action Buttons & Counts */
html.dark-mode .footer-actions .count,
html.dark-mode .post-footer .count,
html.dark-mode .footer-stats .count {
    color: #cbd5e1 !important;
}

html.dark-mode .footer-actions .action-btn,
html.dark-mode .post-footer .action-btn {
    color: #94a3b8 !important;
}

html.dark-mode .footer-actions .action-btn:hover,
html.dark-mode .post-footer .action-btn:hover {
    color: #60a5fa !important;
}

/* Post Link Cards (Embedded links) */
html.dark-mode .post-link-card {
    background: #1e273d !important;
    border: 1px solid var(--border-color) !important;
    color: #ffffff !important;
}

html.dark-mode .post-link-card:hover {
    background: #24304a !important;
}

html.dark-mode .post-link-card-title {
    color: #ffffff !important;
}

html.dark-mode .post-link-card-domain {
    color: #cbd5e1 !important;
}

html.dark-mode .post-link-card-desc,
html.dark-mode .post-link-card-url {
    color: #94a3b8 !important;
}

html.dark-mode .post-link-card-browse-btn {
    background-color: #2a3754 !important;
    color: #e2e8f0 !important;
    border-color: #3b4b6e !important;
}

html.dark-mode .post-link-card-browse-btn:hover {
    background-color: #3b4f7a !important;
    color: #ffffff !important;
}

html.dark-mode .post-link-card-external-link,
html.dark-mode .post-link-card-browse-icon-btn {
    background-color: #2a3754 !important;
    color: #cbd5e1 !important;
    border-color: #3b4b6e !important;
}

html.dark-mode .post-actions-bar,
html.dark-mode .post-footer,
html.dark-mode .comments-section {
    border-top: 1px solid var(--border-color) !important;
}

html.dark-mode .post-action-btn {
    color: var(--text-muted) !important;
}

html.dark-mode .post-action-btn:hover {
    background-color: var(--hover-bg) !important;
    color: #60a5fa !important;
}

html.dark-mode .comments-section {
    background-color: rgba(11, 15, 25, 0.5) !important;
}

html.dark-mode .comment-input-wrapper input,
html.dark-mode .comment-input-wrapper textarea {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-color) !important;
}

/* 6. Sidebars (Left & Right) */
html.dark-mode .right-sidebar,
html.dark-mode .left-sidebar,
html.dark-mode .sidebar {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .sidebar-heading,
html.dark-mode .sidebar-section-title {
    color: var(--text-muted) !important;
}

html.dark-mode .sidebar-item,
html.dark-mode .contact-item {
    color: var(--text-color) !important;
}

html.dark-mode .sidebar-item:hover,
html.dark-mode .contact-item:hover {
    background-color: var(--hover-bg) !important;
}

/* 7. Settings Page & Orders (The current view) */
html.dark-mode .account-management-page-container,
html.dark-mode .settings-page-container {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
}

html.dark-mode .account-management-header,
html.dark-mode .settings-main-header {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .account-management-header h1,
html.dark-mode .settings-main-header h1 {
    color: var(--text-color) !important;
}

html.dark-mode .header-action-btn {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--input-border) !important;
}

html.dark-mode .account-management-tabs-bar {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html.dark-mode .account-tab-btn {
    color: var(--text-muted) !important;
}

html.dark-mode .account-tab-btn.active {
    color: #3b82f6 !important;
    border-bottom-color: #3b82f6 !important;
}

html.dark-mode .settings-group,
html.dark-mode .settings-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}

html.dark-mode .settings-item {
    background-color: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .settings-item:hover {
    background-color: var(--hover-bg) !important;
}

html.dark-mode .item-icon-text span {
    color: var(--text-color) !important;
}

html.dark-mode .item-icon-text i:first-child {
    color: #60a5fa !important;
}

html.dark-mode .item-arrow {
    color: #64748b !important;
}

html.dark-mode .order-item-card,
html.dark-mode .service-item-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .search-bar-account-management {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
}

html.dark-mode .search-bar-account-management input {
    color: var(--text-color) !important;
}

/* 8. Modals & Action Sheets */
html.dark-mode .modal-settings,
html.dark-mode .action-sheet,
html.dark-mode .modal-dialog .modal-content {
    background-color: var(--card-elevated) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modal-content-settings h3,
html.dark-mode .modal-content-settings p {
    color: var(--text-color) !important;
}

html.dark-mode .modal-action-btn-settings.cancel {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

html.dark-mode .modal-action-btn-settings.cancel:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-color) !important;
}

/* Language Choice Cards inside Language Modal */
html.dark-mode .lang-choice-card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .lang-choice-card.active {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
}

/* 9. Form Controls, Inputs & Selects */
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-color) !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
}

/* 10. Chat System */
html.dark-mode .chat-area,
html.dark-mode .chat-room,
html.dark-mode .chat-main {
    background-color: var(--body-bg) !important;
    color: var(--text-color) !important;
}

html.dark-mode .message-bubble.received,
html.dark-mode .received-message {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid var(--border-color) !important;
}

html.dark-mode .message-bubble.sent,
html.dark-mode .sent-message {
    background-color: #0061f2 !important;
    color: #ffffff !important;
}

html.dark-mode .chat-input-bar {
    background-color: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* 11. Shop & Products */
html.dark-mode .product-card,
html.dark-mode .shop-item-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark-mode .product-card .product-title {
    color: var(--text-color) !important;
}

html.dark-mode .product-card .price {
    color: #60a5fa !important;
}