/**
 * KState Custom Dokka Theme
 * Matches the landing page design at https://kstate.acendas.ca
 *
 * Color Palette:
 * - Primary: #7C3AED (purple)
 * - Primary Dark: #5B21B6
 * - Primary Light: #A78BFA
 * - Secondary: #10B981 (green)
 * - Cyan: #06B6D4
 * - Background: #0F172A
 * - Surface: #1E293B
 * - Text: #F8FAFC
 * - Text Muted: #94A3B8
 */

/* ============================================
   ROOT VARIABLES - DARK THEME
   ============================================ */
:root {
    /* Override Dokka's default colors */
    --color-dark: #0F172A;
    --color-dark-background: #0F172A;
    --default-font-color: #F8FAFC;
    --average-color: #94A3B8;
    --brief-color: #94A3B8;
    --hover-link-color: #A78BFA;
    --active-link-color: #7C3AED;
    --active-tab-border-color: #7C3AED;
    --inactive-tab-border-color: #475569;

    /* Custom KState colors */
    --kstate-primary: #7C3AED;
    --kstate-primary-dark: #5B21B6;
    --kstate-primary-light: #A78BFA;
    --kstate-secondary: #10B981;
    --kstate-cyan: #06B6D4;
    --kstate-background: #0F172A;
    --kstate-surface: #1E293B;
    --kstate-surface-light: #334155;
    --kstate-text: #F8FAFC;
    --kstate-text-muted: #94A3B8;
    --kstate-border: #475569;
    --kstate-code-bg: #1E293B;
}

/* Dark theme is always active */
html, html.theme-dark {
    --background-color: var(--kstate-background);
    --color-dark: var(--kstate-background);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
    background: var(--kstate-background) !important;
    color: var(--kstate-text) !important;
}

/* ============================================
   NAVIGATION / HEADER
   ============================================ */
.navigation {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--kstate-border) !important;
}

.navigation.theme-dark {
    background: rgba(15, 23, 42, 0.95) !important;
}

.library-name--link {
    color: var(--kstate-text) !important;
    font-weight: 700 !important;
}

.library-version {
    background: linear-gradient(135deg, var(--kstate-primary), var(--kstate-cyan)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 600 !important;
}

/* Navigation controls */
.navigation-controls--btn {
    color: var(--kstate-text-muted) !important;
}

.navigation-controls--btn:hover {
    color: var(--kstate-text) !important;
}

/* Platform tags */
.platform-tag {
    background: var(--kstate-primary) !important;
    color: white !important;
    border-radius: 4px !important;
}

.platform-tag.jvm-like {
    background: linear-gradient(135deg, var(--kstate-primary), var(--kstate-cyan)) !important;
}

/* ============================================
   SIDEBAR
   ============================================ */
#leftColumn, .sidebar {
    background: var(--kstate-surface) !important;
    border-right: 1px solid var(--kstate-border) !important;
}

.sidebar .toc--link {
    color: var(--kstate-text-muted) !important;
}

.sidebar .toc--link:hover {
    color: var(--kstate-text) !important;
    background: var(--kstate-surface-light) !important;
}

.sidebar .toc--link.toc--link_active {
    color: var(--kstate-primary-light) !important;
    border-left-color: var(--kstate-primary) !important;
}

/* Side menu items */
#sideMenu a {
    color: var(--kstate-text-muted) !important;
}

#sideMenu a:hover {
    color: var(--kstate-text) !important;
}

#sideMenu .current > a,
#sideMenu .current-with-hierarchy > a {
    color: var(--kstate-primary-light) !important;
    font-weight: 600 !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
#main, .main-content {
    background: var(--kstate-background) !important;
}

/* ============================================
   HEADINGS
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--kstate-text) !important;
}

h1.cover {
    background: linear-gradient(135deg, var(--kstate-text) 0%, var(--kstate-text-muted) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--kstate-primary-light) !important;
}

a:hover {
    color: var(--kstate-cyan) !important;
}

/* ============================================
   CODE BLOCKS
   ============================================ */
.sample-container, pre, code {
    background: var(--kstate-code-bg) !important;
    border: 1px solid var(--kstate-border) !important;
    border-radius: 8px !important;
}

.sample-container {
    position: relative;
}

code {
    color: var(--kstate-text) !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* Inline code */
p code, li code, td code {
    background: var(--kstate-surface) !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 4px !important;
    font-size: 0.875em !important;
}

/* Code syntax highlighting */
.token.keyword {
    color: #C792EA !important;
}

.token.string {
    color: #C3E88D !important;
}

.token.function {
    color: #82AAFF !important;
}

.token.number {
    color: #F78C6C !important;
}

.token.comment {
    color: #676E95 !important;
}

.token.class-name, .token.type {
    color: #FFCB6B !important;
}

.token.property {
    color: #F07178 !important;
}

/* Prism.js overrides */
.language-kotlin .keyword,
.language-kotlin .builtin {
    color: #C792EA !important;
}

.language-kotlin .string {
    color: #C3E88D !important;
}

.language-kotlin .function {
    color: #82AAFF !important;
}

.language-kotlin .number {
    color: #F78C6C !important;
}

.language-kotlin .comment {
    color: #676E95 !important;
}

/* Copy button */
.copy-icon, .copy-popup-icon {
    filter: invert(1) !important;
}

/* ============================================
   TABLES
   ============================================ */
.table, table {
    background: var(--kstate-surface) !important;
    border: 1px solid var(--kstate-border) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.table-row, tr {
    border-bottom: 1px solid var(--kstate-border) !important;
}

.table-row:hover, tr:hover {
    background: var(--kstate-surface-light) !important;
}

th {
    background: var(--kstate-surface-light) !important;
    color: var(--kstate-text) !important;
    font-weight: 600 !important;
}

td {
    color: var(--kstate-text-muted) !important;
}

/* ============================================
   TABS
   ============================================ */
.tabs-section-body {
    background: var(--kstate-surface) !important;
    border: 1px solid var(--kstate-border) !important;
    border-radius: 8px !important;
}

.tabs-section button {
    background: transparent !important;
    color: var(--kstate-text-muted) !important;
    border: none !important;
}

.tabs-section button:hover {
    color: var(--kstate-text) !important;
}

.tabs-section button.active {
    color: var(--kstate-primary-light) !important;
    border-bottom: 2px solid var(--kstate-primary) !important;
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */
.cover {
    border-bottom: 1px solid var(--kstate-border) !important;
    padding-bottom: 2rem !important;
    margin-bottom: 2rem !important;
}

.platform-hinted {
    background: transparent !important;
}

.content.sourceset-dependent-content {
    background: transparent !important;
}

/* ============================================
   PARAGRAPHS AND TEXT
   ============================================ */
p, .paragraph {
    color: var(--kstate-text-muted) !important;
    line-height: 1.7 !important;
}

strong, b {
    color: var(--kstate-text) !important;
}

/* Lists */
ul, ol {
    color: var(--kstate-text-muted) !important;
}

li {
    margin-bottom: 0.5rem !important;
}

/* ============================================
   DECLARATIONS / API ITEMS
   ============================================ */
.declarations {
    background: var(--kstate-surface) !important;
    border: 1px solid var(--kstate-border) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
}

.symbol {
    color: var(--kstate-text) !important;
}

.symbol .keyword {
    color: #C792EA !important;
}

.symbol .function {
    color: #82AAFF !important;
}

/* ============================================
   SEARCH
   ============================================ */
#searchBar {
    background: var(--kstate-surface) !important;
    border: 1px solid var(--kstate-border) !important;
    color: var(--kstate-text-muted) !important;
    border-radius: 6px !important;
}

#searchBar:hover {
    border-color: var(--kstate-primary) !important;
}

.search-result {
    background: var(--kstate-surface) !important;
    border: 1px solid var(--kstate-border) !important;
}

.search-result:hover {
    background: var(--kstate-surface-light) !important;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--kstate-surface) !important;
    border-top: 1px solid var(--kstate-border) !important;
    color: var(--kstate-text-muted) !important;
}

.footer a {
    color: var(--kstate-primary-light) !important;
}

/* Go to top button */
.footer--button_go-to-top {
    background: var(--kstate-primary) !important;
    border-radius: 50% !important;
}

.footer--button_go-to-top:hover {
    background: var(--kstate-primary-dark) !important;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
    color: var(--kstate-text-muted) !important;
}

.breadcrumbs a {
    color: var(--kstate-primary-light) !important;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown--list {
    background: var(--kstate-surface) !important;
    border: 1px solid var(--kstate-border) !important;
    border-radius: 8px !important;
}

.dropdown--option:hover {
    background: var(--kstate-surface-light) !important;
}

/* ============================================
   ICONS
   ============================================ */
.ui-kit-icon {
    filter: brightness(0) saturate(100%) invert(65%) sepia(10%) saturate(500%) hue-rotate(190deg) !important;
}

/* ============================================
   ANCHOR LINKS
   ============================================ */
.anchor-icon {
    color: var(--kstate-primary-light) !important;
    opacity: 0.5 !important;
}

.anchor-icon:hover {
    opacity: 1 !important;
}

/* ============================================
   RESIZER
   ============================================ */
#resizer {
    background: var(--kstate-border) !important;
}

#resizer:hover {
    background: var(--kstate-primary) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--kstate-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--kstate-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kstate-primary);
}

/* ============================================
   ANIMATIONS
   ============================================ */
a, button, .table-row, tr, .toc--link, .dropdown--option {
    transition: all 0.2s ease !important;
}

/* ============================================
   FILTER SECTION (Platform selector)
   ============================================ */
.filter-section {
    background: transparent !important;
}

.platform-selector {
    background: var(--kstate-primary) !important;
    color: white !important;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */

/* Note/Warning boxes */
.note, .warning, .tip {
    background: var(--kstate-surface) !important;
    border-left: 4px solid var(--kstate-primary) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 1rem !important;
}

.warning {
    border-left-color: #F59E0B !important;
}

.tip {
    border-left-color: var(--kstate-secondary) !important;
}

/* Deprecation notices */
.deprecation-content {
    background: var(--kstate-surface) !important;
    border: 1px solid #F59E0B !important;
    border-radius: 8px !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .navigation {
        padding: 0.75rem 1rem !important;
    }

    #leftColumn {
        background: var(--kstate-background) !important;
    }
}

/* ============================================
   DARK MODE OVERRIDES (ensure dark is always on)
   ============================================ */
html:not(.theme-dark) {
    /* Force dark theme colors even in light mode */
    --background-color: var(--kstate-background);
}

html:not(.theme-dark) body {
    background: var(--kstate-background) !important;
    color: var(--kstate-text) !important;
}

html:not(.theme-dark) .navigation {
    background: rgba(15, 23, 42, 0.95) !important;
}

html:not(.theme-dark) #leftColumn {
    background: var(--kstate-surface) !important;
}

html:not(.theme-dark) .sample-container,
html:not(.theme-dark) pre,
html:not(.theme-dark) code {
    background: var(--kstate-code-bg) !important;
}