/* ============================================
   1) GLOBAL BACKGROUND — clean, even
   ============================================ */

html, body, #inner_wrapper {
    background-color: #080a0d !important;
}

/* Remove patchy Tailwind backgrounds from wrappers */
#inner_wrapper > .container,
#services,
.services-group,
.services-list,
.container,
.container > div {
    background: none !important;
}

/* ============================================
   2) UNIFIED BASE COLORS (services, widgets, bookmarks)
   ============================================ */

.service-card,
.widget-container,
#bookmarks a {
    background-color: #111418 !important;
    border: 1px solid #1a1d22 !important;
    border-radius: 8px !important;
    color: #d8d8d8 !important;
    transition: 
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.2s ease;
}

/* ============================================
   3) UNIFIED HOVER EFFECT
   ============================================ */

.service-card:hover,
.widget-container:hover,
#bookmarks a:hover {
    background-color: #15181d !important;
    border-color: #24282f !important;
    color: #ffffff !important;
}

/* ============================================
   4) NEO ACCENT GLOW (subtle blue outline)
   ============================================ */

.service-card:hover,
.widget-container:hover,
#bookmarks a:hover {
    box-shadow: 0 0 6px rgba(80, 140, 255, 0.35) !important;
}

/* ============================================
   5) SERVICE CARDS — keep structure
   ============================================ */

.service-card {
    border-radius: 10px !important;
}

/* ============================================
   6) WIDGETS — input consistency
   ============================================ */

.information-widget-search input {
    background-color: #0f1114 !important;
    border: 1px solid #1a1d22 !important;
    color: #d8d8d8 !important;
}

/* ============================================
   7) BOOKMARKS — clean layout, no artifacts
   ============================================ */

#bookmarks li {
    padding: 0 !important;
    margin: 6px 0 !important;
}

#bookmarks a {
    display: block !important;
    padding: 6px 10px !important;
    text-decoration: none !important;
}

/* ============================================
   8) API ERROR BLOCK — restore red
   ============================================ */

details summary {
    background-color: rgba(127, 29, 29, 0.85) !important;
}

details > div {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   9) PROGRESS BARS — FINAL FIX (universal)
   ============================================ */

/* Background track (унифицирано осветяване) */
.service-card div[class*="bg-"],
.widget-container div[class*="bg-"] {
    background-color: rgba(255, 255, 255, 0.01) !important;
}

/* Filled portion (барът самият) */
.service-card div[style*="width"],
.widget-container div[style*="width"] {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* ============================================
   LIGHT THEME — Neo Light v1
   Mirrors the dark theme without breaking it
   ============================================ */

html:not(.dark), 
html:not(.dark) body, 
html:not(.dark) #inner_wrapper {
    background-color: #f5f6f7 !important;
    color: #1a1a1a !important;
}

/* Remove Tailwind backgrounds */
html:not(.dark) #inner_wrapper > .container,
html:not(.dark) #services,
html:not(.dark) .services-group,
html:not(.dark) .services-list,
html:not(.dark) .container,
html:not(.dark) .container > div {
    background: none !important;
}

/* ============================================
   CARDS / WIDGETS / BOOKMARKS
   ============================================ */

html:not(.dark) .service-card,
html:not(.dark) .widget-container,
html:not(.dark) #bookmarks a {
    background-color: #ffffff !important;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    color: #2a2a2a !important;
    transition: 
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.2s ease;
}

/* Hover */
html:not(.dark) .service-card:hover,
html:not(.dark) .widget-container:hover,
html:not(.dark) #bookmarks a:hover {
    background-color: #f0f2f4 !important;
    border-color: #c4c7cc !important;
    color: #000000 !important;
    box-shadow: 0 0 6px rgba(80, 140, 255, 0.25) !important;
}

/* ============================================
   SEARCH INPUT
   ============================================ */

html:not(.dark) .information-widget-search input {
    background-color: #ffffff !important;
    border: 1px solid #d5d7da !important;
    color: #1a1a1a !important;
}

/* ============================================
   API ERROR BLOCK
   ============================================ */

html:not(.dark) details summary {
    background-color: rgba(200, 40, 40, 0.85) !important;
    color: #ffffff !important;
}

html:not(.dark) details > div {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* ============================================
   PROGRESS BARS — Light Theme
   ============================================ */

/* Track */
html:not(.dark) .service-card div[class*="bg-"],
html:not(.dark) .widget-container div[class*="bg-"] {
    background-color: rgba(0, 0, 0, 0.01) !important;
}

/* Fill */
html:not(.dark) .service-card div[style*="width"],
html:not(.dark) .widget-container div[style*="width"] {
    background-color: rgba(0, 0, 0, 0.10) !important;
}