/**
 * Dark Mode CSS - Optimized & Organized
 * Based on Reference Design
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    /* Light Mode */
    --bg-body: #fff;
    --bg-primary: #fff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-hover: #e5e7eb;
    
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-white: #fff;
    
    --border-color: rgba(0,0,0,.06);
    --border-strong: #e5e7eb;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.12);
    
    /* Semantic Colors */
    --green-50: #ecfdf5;
    --green-100: #d1fae5;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;
    --green-800: #065f46;
    --green-900: #064e3b;
    
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
    
    --purple-900: #581c87;
    --indigo-900: #312e81;
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-body: #0f172a;
    --bg-primary: #111827;
    --bg-secondary: rgba(31, 41, 55, 0.5);
    --bg-secondary-solid: #1f2937;
    --bg-tertiary: #374151;
    --bg-hover: #374151;
    
    --text-primary: #f9fafb;
    --text-secondary: #e2e8f0;
    --text-muted: #9ca3af;
    --text-light: #6b7280;
    --text-white: #fff;
    
    --border-color: rgba(255,255,255,.06);
    --border-strong: #374151;
    --border-medium: #1f2634;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.4);
    
    /* Dark Semantic Colors */
    --green-50: rgba(6, 78, 59, 0.3);
    --green-100: rgba(6, 78, 59, 0.2);
    --green-500: #10b981;
    --green-600: #6ee7b7;
    --green-700: #34d399;
    
    --blue-50: rgba(30, 58, 138, 0.3);
    --blue-100: rgba(30, 58, 138, 0.2);
    --blue-500: #60a5fa;
    --blue-600: #93c5fd;
    --blue-700: #dbeafe;
    
    --amber-50: rgba(120, 53, 15, 0.3);
    --amber-100: rgba(120, 53, 15, 0.2);
    --amber-500: #fbbf24;
    --amber-600: #fcd34d;
    --amber-700: #fef3c7;
    
    --purple-50: rgba(88, 28, 135, 0.3);
    --purple-600: #d8b4fe;
    
    --indigo-50: rgba(49, 46, 129, 0.3);
    --indigo-100: rgba(49, 46, 129, 0.2);
    --indigo-600: #a5b4fc;
}

/* ============================================
   Global Dark Styles
   ============================================ */
[data-theme="dark"] body {
    background-color: var(--bg-body);
    color: var(--text-primary)
}

[data-theme="dark"] a {
    color: var(--text-secondary)
}
[data-theme="dark"] a:hover {
    color: var(--text-primary)
}

/* ============================================
   Bootstrap Overrides
   ============================================ */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-primary) !important
}
[data-theme="dark"] .bg-light {
    background-color: var(--bg-secondary) !important
}
[data-theme="dark"] .bg-dark {
    background-color: #172031 !important
}
[data-theme="dark"] .text-body {
    color: var(--text-primary) !important
}
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: var(--border-medium) !important
}
[data-theme="dark"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important
}
[data-theme="dark"] .card {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}

/* Forms */
[data-theme="dark"] .form-control {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
    color: var(--text-primary)
}
[data-theme="dark"] .form-control:focus {
    background-color: var(--bg-primary);
    border-color: var(--green-500);
    color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(16,185,129,.2)
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-light)
}
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-tertiary);
    border-color: var(--border-strong);
    color: var(--text-muted)
}

/* Buttons */
[data-theme="dark"] .btn-light {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
    color: var(--text-secondary)
}
[data-theme="dark"] .btn-light:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary)
}

/* ============================================
   App Header
   ============================================ */
[data-theme="dark"] .rtl .dw-box {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .app-header-title,
[data-theme="dark"] .app-header-name,
[data-theme="dark"] .app-title, [data-theme="dark"] .dlh-mini-name {
    color: var(--text-primary)
}
[data-theme="dark"] .app-header-dev {
    color: var(--text-muted)
}
[data-theme="dark"] .app-header-icon,
[data-theme="dark"] .dlh-mini-icon {
    border-color: var(--border-strong)
}
[data-theme="dark"] .app-verified-badge {
    border-color: var(--bg-primary)
}
/* ============================================
   Dark Mode - زي المثال بالظبط
   ============================================ */
[data-theme="dark"] .site-header{
    background:#111827;
    border-color:rgba(255,255,255,.06)
}
[data-theme="dark"] .header-btn{
    color:#9ca3af
}
[data-theme="dark"] .header-btn:hover{
    background:rgba(255,255,255,.08);
    color:#f9fafb
}

/* Lang Button & Dropdown Dark */
[data-theme="dark"] .header-lang-btn, [data-theme="dark"] .header-btn{
    background:#1f2937;
    color:#d1d5db
}
[data-theme="dark"] .header-lang-btn:hover{
    background:#374151
}
[data-theme="dark"] .header-lang-dropdown{
    background:#1f2937;
    border-color:#374151;
    box-shadow:0 10px 40px rgba(0,0,0,.4)
}
[data-theme="dark"] .header-lang-dropdown li a,
[data-theme="dark"] .header-lang-item{
    color:#d1d5db
}
[data-theme="dark"] .header-lang-dropdown li a:hover,
[data-theme="dark"] .header-lang-item:hover{
    background:#374151
}
[data-theme="dark"] .header-lang-dropdown li.current-lang a,
[data-theme="dark"] .header-lang-item.current-lang{
    background:#064e3b;
    color:#6ee7b7
}

/* Search Dark */
[data-theme="dark"] .search-overlay-bg{
    background:#111827
}
[data-theme="dark"] .search-input-wrap{
    background:#1f2937
}
[data-theme="dark"] .search-input-wrap:focus-within{
    background:#111827;
    box-shadow:0 0 0 2px #10b981
}
[data-theme="dark"] #searchInput{
    color:#f9fafb
}
[data-theme="dark"] .search-esc{
    background:#374151;
    color:#9ca3af
}
[data-theme="dark"] .search-close-btn{
    background:#1f2937;
    color:#9ca3af
}
[data-theme="dark"] .search-close-btn:hover{
    background:#374151;
    color:#f9fafb
}
[data-theme="dark"] .search-section-title{
    color:#6b7280
}
[data-theme="dark"] .search-tag{
    background:#1f2937;
    color:#d1d5db
}
[data-theme="dark"] .search-tag:hover{
    background:#064e3b;
    color:#6ee7b7
}
[data-theme="dark"] .search-cat-item{
    background:#1f2937;
    border-color:transparent
}
[data-theme="dark"] .search-cat-item:hover{
    background:#111827;
    border-color:#065f46
}
[data-theme="dark"] .search-cat-name{
    color:#d1d5db
}
[data-theme="dark"] .search-cat-item:hover .search-cat-name{
    color:#f9fafb
}
[data-theme="dark"] .search-cat-count{
    background:#374151;
    color:#9ca3af
}
[data-theme="dark"] .apkt-suggestions{
	background: rgb(17, 24, 39) !important;
    border: 1px solid rgb(31, 41, 55) !important;
}
[data-theme="dark"] .apkt-suggestion-item {
	border-bottom: 1px solid rgb(31, 41, 55) !important;
	background: rgb(17, 24, 39) !important;
}
/* Sidebar Dark */
[data-theme="dark"] .sidebar-panel{
    background:#111827;
    border-color:rgba(255,255,255,.06)
}
[data-theme="dark"] .sidebar-header{
    border-color:rgba(255,255,255,.06)
}
[data-theme="dark"] .sidebar-close-btn{
    background:#1f2937;
    color:#9ca3af
}
[data-theme="dark"] .sidebar-close-btn:hover{
    background:#374151;
    color:#f9fafb
}
[data-theme="dark"] .sidebar-menu > li > a{
    color:#d1d5db
}
[data-theme="dark"] .sidebar-menu > li > a:hover,
[data-theme="dark"] .sidebar-menu > li.current-menu-item > a{
    background:#1f2937;
    color:#f9fafb
}
[data-theme="dark"] .sidebar-menu .sub-menu a{
    color:#9ca3af
}
[data-theme="dark"] .sidebar-menu .sub-menu a:hover{
    background:#1f2937;
    color:#f9fafb
}
[data-theme="dark"] .sidebar-divider{
    background:rgba(255,255,255,.06)
}
[data-theme="dark"] .sidebar-lang-toggle{
    color:#d1d5db
}
[data-theme="dark"] .sidebar-lang-toggle:hover{
    background:#1f2937
}
[data-theme="dark"] .sidebar-lang-current{
    background:#374151;
    color:#9ca3af
}
[data-theme="dark"] .sidebar-lang-dropdown li a{
    color:#d1d5db
}
[data-theme="dark"] .sidebar-lang-dropdown li a:hover{
    background:#1f2937
}
[data-theme="dark"] .sidebar-lang-dropdown li.current-lang a{
    background:#064e3b;
    color:#6ee7b7
}
[data-theme="dark"] .sidebar-footer{
    border-color:rgba(255,255,255,.06)
}
/* ============================================
   Download Header (Mini)
   ============================================ */
[data-theme="dark"] .dlh-chip,
[data-theme="dark"] .rtl .dw-box .img-thumb {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
    color: var(--text-secondary)
}
[data-theme="dark"] .dlh-chip-verified {
    background-color: var(--green-50);
    border-color: var(--green-800);
    color: var(--green-600)
}

/* ============================================
   Download Button & Wrapper
   ============================================ */
[data-theme="dark"] .download-wrapper {
    background-color: var(--bg-secondary)
}
[data-theme="dark"] .download-info-item {
    color: var(--text-muted)
}

/* ============================================
   Download Links Box
   ============================================ */
[data-theme="dark"] .dl-box {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .dl-box-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color)
}
[data-theme="dark"] .dl-box-header h3 {
    color: var(--text-primary)
}
[data-theme="dark"] .dl-arch-header {
    background-color: var(--bg-secondary)
}
[data-theme="dark"] .dl-arch-name {
    color: var(--text-primary)
}
[data-theme="dark"] .dl-arch-desc {
    color: var(--text-muted)
}
[data-theme="dark"] .dl-arch-section {
    border-color: var(--bg-secondary-solid)
}
[data-theme="dark"] .dl-file-item {
    border-color: var(--border-color)
}
[data-theme="dark"] .dl-file-item:hover {
    background-color: var(--bg-secondary)
}
[data-theme="dark"] .dl-file-type {
    color: var(--text-primary)
}
[data-theme="dark"] .dl-file-meta {
    color: var(--text-muted)
}

/* Download Badges */
[data-theme="dark"] .dl-badge-blue {
    background-color: var(--blue-50);
    color: var(--blue-600)
}
[data-theme="dark"] .dl-badge-purple {
    background-color: var(--purple-50);
    color: var(--purple-600)
}
[data-theme="dark"] .dl-badge-amber {
    background-color: var(--amber-50);
    color: var(--amber-600)
}
[data-theme="dark"] .dl-badge-indigo {
    background-color: var(--indigo-50);
    color: var(--indigo-600)
}
[data-theme="dark"] .dl-badge-emerald {
    background-color: var(--green-50);
    color: var(--green-600)
}

/* Download File Icons */
[data-theme="dark"] .dl-file-icon-emerald {
    background-color: var(--green-100)
}
[data-theme="dark"] .dl-file-icon-amber {
    background-color: var(--amber-100)
}
[data-theme="dark"] .dl-file-icon-indigo {
    background-color: var(--indigo-100)
}

/* Download Buttons */
[data-theme="dark"] .dl-btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary)
}
[data-theme="dark"] .dl-btn-secondary:hover {
    background-color: #4b5563;
    color: var(--text-primary) !important;
}

/* Telegram Button */
[data-theme="dark"] .telegram-btn {
    background-color: var(--blue-100);
    color: var(--blue-500);
    border-color: var(--blue-50)
}
[data-theme="dark"] .telegram-btn:hover{
	background-color: rgb(30 58 138 / 0.4);
	    color: #60a5fa;
}
/* ============================================
   Share Section
   ============================================ */
[data-theme="dark"] .share-section {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .share-title {
    color: var(--text-primary)
}
[data-theme="dark"] .share-btn-main {
    background-color: var(--bg-primary);
    border-color: var(--border-strong);
    color: #d1d5db
}
[data-theme="dark"] .share-btn-main:hover {
    background-color: var(--bg-secondary-solid);
    border-color: var(--bg-tertiary)
}
[data-theme="dark"] .share-dropdown {
    background: var(--bg-secondary-solid);
    border-color: var(--bg-tertiary)
}
[data-theme="dark"] .share-qr-btn {
    border-color: #3f4c62
}
[data-theme="dark"] .share-qr-btn:hover {
	background-color: #18212f;
}
[data-theme="dark"] .share-divider {
    background-color: #3f4c62
}
[data-theme="dark"] .share-copy-btn {
    background: var(--bg-primary);
    color: var(--text-muted)
}

/* ============================================
   Description Section
   ============================================ */
[data-theme="dark"] .desc-section {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .desc-header {
    color: var(--text-primary)
}
[data-theme="dark"] .desc-header svg {
    color: var(--text-muted)
}
[data-theme="dark"] .desc-text {
    color: var(--text-secondary)
}
[data-theme="dark"] .desc-text a,
[data-theme="dark"] .desc-read-more {
    color: var(--green-600)
}

/* ============================================
   FAQ Section
   ============================================ */
[data-theme="dark"] .faq-section,
[data-theme="dark"] .app-info-section,
[data-theme="dark"] .install-guide-section {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .faq-header {
    color: var(--text-primary)
}
[data-theme="dark"] .faq-list,
[data-theme="dark"] .faq-item {
    border-color: var(--border-color)
}
[data-theme="dark"] .faq-item:hover {
    border-color: inherit
}
[data-theme="dark"] .faq-question {
    background-color: transparent;
    color: var(--text-primary)
}
[data-theme="dark"] .faq-question:hover {
    background-color: var(--bg-secondary)
}
[data-theme="dark"] .faq-question svg {
    color: var(--text-muted)
}
[data-theme="dark"] .faq-answer-inner {
    color: var(--text-secondary)
}
[data-theme="dark"] .faq-answer p {
    color: var(--text-muted)
}

/* ============================================
   Screenshots Section
   ============================================ */
[data-theme="dark"] .screenshots-section {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .screenshots-header {
    color: var(--text-primary)
}
[data-theme="dark"] .screenshot-item img {
    border-color: var(--border-strong)
}

/* Lightbox */
[data-theme="dark"] .ss-lightbox {
    background: rgba(0,0,0,.95)
}
[data-theme="dark"] .ss-lightbox-close,
[data-theme="dark"] .ss-lightbox-prev,
[data-theme="dark"] .ss-lightbox-next {
    background: var(--bg-secondary);
    color: var(--text-primary)
}
[data-theme="dark"] .ss-lightbox-close:hover,
[data-theme="dark"] .ss-lightbox-prev:hover,
[data-theme="dark"] .ss-lightbox-next:hover {
    background: var(--bg-tertiary)
}
[data-theme="dark"] .ss-lightbox-counter {
    background: var(--bg-secondary);
    color: var(--text-muted)
}

/* ============================================
   Security Section
   ============================================ */
[data-theme="dark"] .security-section {
    background-color: var(--bg-secondary-solid);
    border-color: var(--border-strong)
}
[data-theme="dark"] .security-verified {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .security-title {
    color: var(--text-primary)
}
[data-theme="dark"] .security-text {
    color: var(--text-secondary)
}
[data-theme="dark"] .security-check {
    color: var(--text-muted)
}
[data-theme="dark"] .security-icon-wrap {
    background-color: var(--green-100)
}
[data-theme="dark"] .security-icon-wrap svg {
    color: var(--green-700)
}
[data-theme="dark"] .virustotal-link {
    border: 2px solid var(--bg-tertiary);
    background: var(--bg-primary)
}

/* ============================================
   Stats & Info Cards
   ============================================ */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color)
}
[data-theme="dark"] .stat-value {
    color: var(--text-white)
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .scan-label,
[data-theme="dark"] .security-date {
    color: var(--text-muted)
}
[data-theme="dark"] .info-value {
    color: var(--text-white)
}
[data-theme="dark"] .info-link a {
    color: var(--blue-500)
}
[data-theme="dark"] .info-label,
[data-theme="dark"] .info-mono {
    color: var(--text-muted)
}

/* ============================================
   Help Box
   ============================================ */
[data-theme="dark"] .help-box {
    background-color: var(--blue-100);
    border-color: var(--blue-800)
}
[data-theme="dark"] .help-box-title {
    color: var(--blue-700)
}
[data-theme="dark"] .help-box-list {
    color: var(--blue-600)
}
[data-theme="dark"] .help-box-icon-wrap {
    background-color: rgba(30, 58, 138, 0.4)
}
[data-theme="dark"] .help-box-icon-wrap svg {
    color: var(--blue-500)
}

/* ============================================
   XAPK Notice
   ============================================ */
[data-theme="dark"] .xapk-notice {
    background-color: var(--amber-100);
    border-color: var(--amber-500)
}
[data-theme="dark"] .xapk-notice-title {
    color: var(--amber-700)
}
[data-theme="dark"] .xapk-notice-text {
    color: rgba(252, 211, 77, 0.8)
}
[data-theme="dark"] .xapk-notice-icon {
    color: var(--amber-500)
}

/* ============================================
   Install Guide
   ============================================ */
[data-theme="dark"] .install-tabs-container {
    border-color: var(--bg-tertiary)
}
[data-theme="dark"] .install-tabs {
    background-color: var(--bg-secondary-solid)
}
[data-theme="dark"] .install-tab.active[data-tab="apk"] {
    color: var(--green-700);
    background-color: var(--bg-primary)
}
[data-theme="dark"] .install-tab.active[data-tab="xapk"] {
    background-color: var(--bg-primary)
}
[data-theme="dark"] .step-emerald {
    background-color: var(--green-50)
}
[data-theme="dark"] .step-blue {
    background-color: var(--blue-50)
}
[data-theme="dark"] .step-title {
    color: var(--text-white)
}
[data-theme="dark"] .step-desc {
    color: var(--text-muted)
}

/* ============================================
   Sticky Bottom Bar
   ============================================ */
[data-theme="dark"] .sticky-bottom-bar {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .sticky-app-title {
    color: var(--text-primary)
}
[data-theme="dark"] .sticky-app-meta {
    color: var(--text-muted)
}

/* ============================================
   Modals
   ============================================ */
[data-theme="dark"] .ci-modal-content {
    background-color: var(--bg-primary)
}
[data-theme="dark"] .ci-modal-content h4,
[data-theme="dark"] .ci-modal-title {
    color: var(--text-primary)
}
[data-theme="dark"] .ci-modal-content p,
[data-theme="dark"] .ci-modal-text {
    color: var(--text-secondary)
}
[data-theme="dark"] .ci-modal-text a {
    color: var(--blue-600)
}
[data-theme="dark"] .ci-modal-close {
    color: var(--text-muted)
}
[data-theme="dark"] .ci-modal-close:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary)
}
[data-theme="dark"] .ci-modal-icon {
    background-color: var(--blue-50);
    color: var(--blue-600)
}

/* ============================================
   Footer
   ============================================ */
[data-theme="dark"] footer,
[data-theme="dark"] .site-footer {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-secondary)
}
[data-theme="dark"] .site-footer .bg-dark {
    background-color: #172031 !important
}
[data-theme="dark"] .site-footer a {
    color: var(--text-muted)
}
[data-theme="dark"] .site-footer a:hover {
    color: var(--text-primary)
}
[data-theme="dark"] .site-footer svg {
    fill: var(--text-muted)
}

/* ============================================
   Badges
   ============================================ */
[data-theme="dark"] .badge-success,
[data-theme="dark"] .dl-badge-safe {
    background-color: var(--green-50);
    color: var(--green-600)
}
[data-theme="dark"] .badge-info,
[data-theme="dark"] .dl-badge-original {
    background-color: var(--blue-50);
    color: var(--blue-600)
}
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .dl-badge-xapk {
    background-color: var(--amber-50);
    color: var(--amber-600)
}

/* ============================================
   Tables
   ============================================ */
[data-theme="dark"] table {
    color: var(--text-secondary)
}
[data-theme="dark"] th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] td {
    border-color: var(--border-color)
}
[data-theme="dark"] tr:hover td {
    background-color: var(--bg-secondary)
}

/* ============================================
   App Cards (Listing)
   ============================================ */
[data-theme="dark"] .app-card {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .app-card:hover {
    background-color: var(--bg-secondary);
    border-color: var(--green-800)
}
[data-theme="dark"] .app-card-title {
    color: var(--text-primary)
}
[data-theme="dark"] .app-card-dev {
    color: var(--text-muted)
}
[data-theme="dark"] .app-card-category {
    background-color: var(--bg-tertiary);
    color: var(--text-muted)
}
[data-theme="dark"] .app-card-icon {
    border-color: var(--border-strong)
}

/* ============================================
   Pagination
   ============================================ */
[data-theme="dark"] .pagination .page-link {
    background-color: var(--bg-secondary);
    border-color: var(--border-strong);
    color: var(--text-secondary)
}
[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary)
}
[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--green-500);
    border-color: var(--green-500);
    color: #fff
}

/* ============================================
   Breadcrumb
   ============================================ */
[data-theme="dark"] .breadcrumb {
    background-color: transparent
}
[data-theme="dark"] .breadcrumb-item a {
    color: var(--text-muted)
}
[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--text-primary)
}
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary)
}
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-light)
}

/* ============================================
   Alerts
   ============================================ */
[data-theme="dark"] .alert-info {
    background-color: var(--blue-50);
    border-color: var(--border-color);
    color: var(--blue-600)
}
[data-theme="dark"] .alert-success {
    background-color: var(--green-50);
    border-color: var(--green-800);
    color: var(--green-600)
}
[data-theme="dark"] .alert-warning {
    background-color: var(--amber-50);
    border-color: var(--amber-500);
    color: var(--amber-600)
}

/* ============================================
   Comments
   ============================================ */
[data-theme="dark"] .comments-section {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .comment {
    border-color: var(--border-color)
}
[data-theme="dark"] .comment-author {
    color: var(--text-primary)
}
[data-theme="dark"] .comment-text {
    color: var(--text-secondary)
}
[data-theme="dark"] .comment-date {
    color: var(--text-muted)
}

/* ============================================
   Widgets
   ============================================ */
[data-theme="dark"] .widget {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .widget-title {
    color: var(--text-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .widget a {
    color: var(--text-secondary)
}
[data-theme="dark"] .widget a:hover {
    color: var(--text-primary)
}

/* ============================================
   Related Apps
   ============================================ */
[data-theme="dark"] .related-apps {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .related-app-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color)
}
[data-theme="dark"] .related-app-card:hover {
    background-color: var(--bg-tertiary)
}
[data-theme="dark"] .related-app-name {
    color: var(--text-primary)
}

/* ============================================
   Archive / Category Pages
   ============================================ */
[data-theme="dark"] .archive-header {
    background-color: var(--bg-primary);
    border-color: var(--border-color)
}
[data-theme="dark"] .archive-title {
    color: var(--text-primary)
}
[data-theme="dark"] .archive-description {
    color: var(--text-secondary)
}

/* ============================================
   Scrollbar
   ============================================ */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary-solid)
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-light)
}

/* ============================================
   Selection
   ============================================ */
[data-theme="dark"] ::selection {
    background-color: var(--green-500);
    color: #fff
}

/* ============================================
   Transitions (Applied to both modes)
   ============================================ */
body,
.site-header,
.bg-white,
.card,
.form-control,
.btn,
.desc-section,
.faq-section,
.screenshots-section,
.dl-box,
.help-box,
.app-card,
.security-section,
.install-guide-section {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease
}