/* Udyamo Theme — Light + Dark, matching the colorful Udyamo logo */
/* Logo colors: charcoal #3D3D3D, yellow #F4C430, blue #4285F4, green #0F9D58, orange #F4A235 */

/* =============================================
   LIGHT THEME (Default)
   ============================================= */

.light, .rust, .navy, .ayu,
html {
    --bg: #FFFFFF;
    --fg: #333333;
    --sidebar-bg: #F5F5F5;
    --sidebar-fg: #3D3D3D;
    --sidebar-non-existant: rgba(61,61,61,0.4);
    --sidebar-active: #3D3D3D;
    --sidebar-spacer: rgba(61,61,61,0.1);
    --scrollbar: #cccccc;
    --icons: #6B7280;
    --icons-hover: #3D3D3D;
    --links: #4285F4;
    --inline-code-color: #3D3D3D;
    --theme-popup-bg: #FFFFFF;
    --theme-popup-border: #E5E7EB;
    --theme-hover: #F0F0F0;
    --quote-bg: #FAFAFA;
    --quote-border: #F4C430;
    --table-border-color: #E5E7EB;
    --table-header-bg: #3D3D3D;
    --table-alternate-bg: #FAFAFA;
    --searchbar-border-color: #E5E7EB;
    --searchbar-bg: #FFFFFF;
    --searchbar-fg: #333333;
    --searchbar-shadow-color: rgba(0, 0, 0, 0.06);
    --searchresults-header-fg: #333333;
    --searchresults-border-color: #E5E7EB;
    --searchresults-li-bg: #FFFFFF;
    --search-mark-bg: #F4C430;
}

/* =============================================
   DARK THEME (Coal)
   ============================================= */

.coal {
    --bg: #1A1A1A !important;
    --fg: #E0E0E0 !important;
    --sidebar-bg: #141414 !important;
    --sidebar-fg: #CCCCCC !important;
    --sidebar-non-existant: rgba(255,255,255,0.3) !important;
    --sidebar-active: #E0E0E0 !important;
    --sidebar-spacer: rgba(255,255,255,0.1) !important;
    --scrollbar: #444444 !important;
    --icons: #999999 !important;
    --icons-hover: #E0E0E0 !important;
    --links: #6FA8F5 !important;
    --inline-code-color: #E0C06F !important;
    --theme-popup-bg: #222222 !important;
    --theme-popup-border: #444444 !important;
    --theme-hover: #333333 !important;
    --quote-bg: #222222 !important;
    --quote-border: #F4C430 !important;
    --table-border-color: #333333 !important;
    --table-header-bg: #333333 !important;
    --table-alternate-bg: #222222 !important;
    --searchbar-border-color: #444444 !important;
    --searchbar-bg: #222222 !important;
    --searchbar-fg: #E0E0E0 !important;
    --searchbar-shadow-color: rgba(0, 0, 0, 0.3) !important;
    --searchresults-header-fg: #E0E0E0 !important;
    --searchresults-border-color: #444444 !important;
    --searchresults-li-bg: #222222 !important;
    --search-mark-bg: #8B6914 !important;
}

/* ---- Hide Rust, Navy, Ayu from theme picker — only Light and Coal ---- */
#theme-list #rust,
#theme-list #navy,
#theme-list #ayu {
    display: none;
}

/* ---- Logo in sidebar ---- */
.sidebar .sidebar-scrollbox::before {
    content: "";
    display: block;
    background: url("../images/logo.png") no-repeat center;
    background-size: contain;
    height: 40px;
    margin: 18px 20px 14px 20px;
}

.coal .sidebar .sidebar-scrollbox::before {
    filter: brightness(0) invert(1);
}

/* ---- Sidebar ---- */
.sidebar,
.sidebar .sidebar-scrollbox {
    background: #F5F5F5 !important;
}

.sidebar .sidebar-scrollbox a {
    color: #555555;
}

.sidebar .sidebar-scrollbox a:hover {
    color: #3D3D3D;
}

.sidebar .sidebar-scrollbox .active {
    color: #3D3D3D;
    font-weight: 600;
    border-left: 3px solid #F4C430;
    padding-left: 8px;
}

.sidebar .sidebar-scrollbox li.part-title {
    color: #999999;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}

.sidebar-resize-handle {
    background: #E5E7EB;
}

/* Coal sidebar */
.coal .sidebar,
.coal .sidebar .sidebar-scrollbox {
    background: #141414 !important;
}

.coal .sidebar .sidebar-scrollbox a {
    color: #AAAAAA;
}

.coal .sidebar .sidebar-scrollbox a:hover {
    color: #E0E0E0;
}

.coal .sidebar .sidebar-scrollbox .active {
    color: #E0E0E0;
    border-left-color: #F4C430;
}

.coal .sidebar .sidebar-scrollbox li.part-title {
    color: #666666;
}

.coal .sidebar-resize-handle {
    background: #333333;
}

/* ---- Menu bar ---- */
#menu-bar,
#menu-bar.bordered {
    background-color: #FFFFFF !important;
    border-block-end: 1px solid #E5E7EB !important;
    color: #333333 !important;
}

#menu-bar .menu-title {
    color: #3D3D3D !important;
    font-weight: 700;
}

#menu-bar i,
#menu-bar .icon-button,
#menu-bar .icon-button i {
    color: #6B7280 !important;
}

#menu-bar i:hover,
#menu-bar .icon-button:hover,
#menu-bar .icon-button:hover i {
    color: #3D3D3D !important;
}

/* Coal menu bar */
.coal #menu-bar,
.coal #menu-bar.bordered {
    background-color: #1A1A1A !important;
    border-block-end: 1px solid #333333 !important;
    color: #E0E0E0 !important;
}

.coal #menu-bar .menu-title {
    color: #E0E0E0 !important;
}

.coal #menu-bar i,
.coal #menu-bar .icon-button,
.coal #menu-bar .icon-button i {
    color: #999999 !important;
}

.coal #menu-bar i:hover,
.coal #menu-bar .icon-button:hover,
.coal #menu-bar .icon-button:hover i {
    color: #E0E0E0 !important;
}

/* ---- Headings ---- */
.content main h1 {
    color: #3D3D3D;
    border-bottom: 3px solid #F4C430;
    padding-bottom: 8px;
}

.content main h2 {
    color: #3D3D3D;
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 6px;
}

.content main h3 { color: #444444; }
.content main h4 { color: #555555; }

.coal .content main h1 {
    color: #E0E0E0;
    border-bottom-color: #F4C430;
}

.coal .content main h2 {
    color: #E0E0E0;
    border-bottom-color: #333333;
}

.coal .content main h3 { color: #CCCCCC; }
.coal .content main h4 { color: #BBBBBB; }

/* ---- Content area ---- */
.content {
    background: #FFFFFF !important;
}

.content main {
    color: #333333;
    font-size: 17px;
    line-height: 1.8;
    max-width: 800px;
}

.content main p { margin-bottom: 16px; }

.coal .content {
    background: #1A1A1A !important;
}

.coal .content main {
    color: #E0E0E0;
}

/* ---- Links ---- */
.content main a {
    color: #4285F4;
    text-decoration: none;
    border-bottom: 1px solid rgba(66, 133, 244, 0.3);
}

.content main a:hover {
    color: #1A73E8;
    border-bottom-color: #1A73E8;
}

.coal .content main a {
    color: #6FA8F5;
    border-bottom-color: rgba(111, 168, 245, 0.3);
}

.coal .content main a:hover {
    color: #8FBCF8;
    border-bottom-color: #8FBCF8;
}

/* ---- Blockquotes ---- */
.content main blockquote {
    border-left: 4px solid #F4C430;
    background: #FAFAFA;
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    color: #444444;
    line-height: 1.8;
}

.content main blockquote p { margin: 8px 0; }

.content main blockquote strong {
    color: #3D3D3D;
    font-style: normal;
}

.coal .content main blockquote {
    background: #222222;
    color: #CCCCCC;
}

.coal .content main blockquote strong {
    color: #E0E0E0;
}

/* ---- Tables ---- */
.content main table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
}

.content main table th {
    background: #3D3D3D;
    color: white;
    padding: 10px 15px;
    text-align: left;
    font-weight: 600;
}

.content main table td {
    padding: 10px 15px;
    border-bottom: 1px solid #E5E7EB;
    color: #333333;
}

.content main table tr:nth-child(even) { background: #FAFAFA; }
.content main table tr:hover { background: #FFF9E6; }

.coal .content main table th { background: #333333; }

.coal .content main table td {
    color: #E0E0E0;
    border-bottom-color: #333333;
}

.coal .content main table tr:nth-child(even) { background: #222222; }
.coal .content main table tr:hover { background: #2A2510; }

/* ---- Code ---- */
.content main code {
    background: #F5F5F5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #3D3D3D;
    font-size: 0.9em;
}

.content main pre {
    background: #2D2D2D;
    border-left: 4px solid #F4C430;
    border-radius: 6px;
    padding: 15px;
}

.content main pre code {
    background: transparent;
    color: #F5F5F5;
}

.coal .content main code {
    background: #2D2D2D;
    color: #E0C06F;
}

/* ---- Lists ---- */
.content main ul li::marker { color: #F4A235; }
.content main ol li::marker { color: #F4A235; font-weight: 600; }

/* ---- Horizontal rules ---- */
.content main hr {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, #F4C430, #4285F4, #0F9D58, #F4A235);
    margin: 40px 0;
    border-radius: 2px;
}

/* ---- Images ---- */
.content main img {
    max-width: 100%;
    border-radius: 6px;
    margin: 15px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---- Navigation ---- */
.nav-chapters { color: #6B7280; }
.nav-chapters:hover { color: #3D3D3D; }

.coal .nav-chapters { color: #999999; }
.coal .nav-chapters:hover { color: #E0E0E0; }

/* ---- Search highlight ---- */
.content main mark {
    background: #F4C430;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ---- Strong ---- */
.content main strong { color: #2D2D2D; }
.coal .content main strong { color: #F0F0F0; }

/* ---- Footer accent ---- */
.content main::after {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #F4C430, #4285F4, #0F9D58, #F4A235);
    margin-top: 60px;
    border-radius: 2px;
}

/* ---- Print ---- */
@media print {
    .content main h1 { color: #000; border-bottom-color: #999; }
    .content main blockquote { border-left-color: #999; background: #F5F5F5; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .content main { font-size: 16px; line-height: 1.7; }
    .sidebar .sidebar-scrollbox::before { height: 34px; margin: 10px 15px 8px 15px; }
}