/**
 * MDO Custom API Documentation Theme
 * Overrides Scribe's default theme to match mumineen.org branding
 */

/* Import Inter font */
@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');

/* === REMOVE TEXT SHADOW GLOW EFFECT === */
p, h1, h2, h3, h4, h5, h6, div, span, a, li, td, th {
    text-shadow: none !important;
}

/* === HEADINGS === */
.content h1 {
    background-image: linear-gradient(180deg, rgba(37, 99, 235, 0.05), rgba(79, 70, 229, 0.02)) !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-top: 1px solid #e5e7eb !important;
}

.content h2 {
    background-image: linear-gradient(180deg, rgba(37, 99, 235, 0.03), rgba(79, 70, 229, 0.01)) !important;
    border-top: 1px solid #e5e7eb !important;
}

@media (prefers-color-scheme: dark) {
    .content h1,
    .dark .content h1 {
        background-image: linear-gradient(180deg, rgba(37, 99, 235, 0.1), rgba(79, 70, 229, 0.05)) !important;
        border-bottom-color: #374151 !important;
        border-top-color: #374151 !important;
    }

    .content h2,
    .dark .content h2 {
        background-image: linear-gradient(180deg, rgba(37, 99, 235, 0.08), rgba(79, 70, 229, 0.03)) !important;
        border-top-color: #374151 !important;
    }
}

/* === FANCY HEADING PANEL === */
.fancy-heading-panel {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(79, 70, 229, 0.05)) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
}

@media (prefers-color-scheme: dark) {
    .fancy-heading-panel,
    .dark .fancy-heading-panel {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(79, 70, 229, 0.08)) !important;
        border-color: #374151 !important;
    }
}

/* === TYPOGRAPHY === */
html {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* === PRIMARY COLORS === */
/* Override Scribe's default blue (#2484ff) with our blue-600 */
:root {
    --scribe-primary: #2563eb;
    --scribe-primary-dark: #1d4ed8;
    --scribe-primary-light: #3b82f6;
    --scribe-secondary: #4f46e5;
}

/* === HEADER AND NAVIGATION === */
/* Top header bar */
.scribe-header,
.scribe-topbar {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    border-bottom: none !important;
}

/* Header title */
.scribe-header h1,
.scribe-topbar h1 {
    background: linear-gradient(to right, #ffffff, #e0e7ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === SIDEBAR === */
/* Sidebar background */
.scribe-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
}

/* Dark mode sidebar */
@media (prefers-color-scheme: dark) {
    .scribe-sidebar,
    .dark .scribe-sidebar {
        background-color: #1f2937 !important;
        border-right: 1px solid #374151 !important;
    }
}

/* Sidebar links */
.scribe-sidebar a {
    color: #374151 !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.scribe-sidebar a:hover {
    color: #2563eb !important;
}

/* Active sidebar link */
.scribe-sidebar a.active {
    color: #2563eb !important;
    border-left-color: #2563eb !important;
}

/* Dark mode sidebar links */
@media (prefers-color-scheme: dark) {
    .scribe-sidebar a,
    .dark .scribe-sidebar a {
        color: #d1d5db !important;
    }

    .scribe-sidebar a:hover,
    .dark .scribe-sidebar a:hover {
        color: #60a5fa !important;
    }

    .scribe-sidebar a.active,
    .dark .scribe-sidebar a.active {
        color: #60a5fa !important;
        border-left-color: #60a5fa !important;
    }
}

/* === MAIN CONTENT === */
/* Content background */
.scribe-main,
.content {
    background-color: #f9fafb !important;
}

/* Dark mode content background */
@media (prefers-color-scheme: dark) {
    .scribe-main,
.content,
.dark .scribe-main,
.dark .content {
    background-color: #111827 !important;
    color: #f9fafb !important;
    }
}

/* === HEADINGS === */
h1, h2, h3, h4, h5, h6 {
    color: #111827 !important;
    font-weight: 600 !important;
}

@media (prefers-color-scheme: dark) {
    h1, h2, h3, h4, h5, h6,
    .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
        color: #f9fafb !important;
    }
}

/* === BUTTONS === */
/* Primary buttons */
.btn-primary,
.scribe-btn-primary,
button[type="submit"].btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
.scribe-btn-primary:hover,
button[type="submit"].btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Secondary buttons */
.btn-secondary {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.btn-secondary:hover {
    background-color: #e5e7eb !important;
}

/* Dark mode secondary buttons */
@media (prefers-color-scheme: dark) {
    .btn-secondary,
    .dark .btn-secondary {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #e5e7eb !important;
    }

    .btn-secondary:hover,
    .dark .btn-secondary:hover {
        background-color: #4b5563 !important;
    }
}

/* === CARDS AND PANELS === */
.endpoint-card,
.info-box,
.warning-box {
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
}

.endpoint-card {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    .endpoint-card,
    .info-box,
    .warning-box,
    .dark .endpoint-card,
    .dark .info-box,
    .dark .warning-box {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }
}

/* === CODE BLOCKS === */
pre,
code {
    border-radius: 0.375rem !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
}

pre {
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
}

/* Inline code */
code {
    background-color: #f3f4f6 !important;
    color: #4f46e5 !important;
    padding: 0.125rem 0.375rem !important;
    font-size: 0.875em !important;
    border: 1px solid #e5e7eb !important;
}

@media (prefers-color-scheme: dark) {
    code,
    .dark code {
        background-color: #1e293b !important;
        color: #a5b4fc !important;
        border-color: #334155 !important;
    }
}

/* === TABS === */
.nav-tabs,
.tab-buttons {
    border-bottom: 2px solid #e5e7eb !important;
}

.nav-tabs .nav-link,
.tab-buttons button {
    color: #6b7280 !important;
    font-weight: 500 !important;
    border: none !important;
    border-radius: 0.375rem 0.375rem 0 0 !important;
}

.nav-tabs .nav-link:hover,
.tab-buttons button:hover {
    color: #2563eb !important;
    background-color: #f9fafb !important;
}

.nav-tabs .nav-link.active,
.tab-buttons button.active {
    color: #2563eb !important;
    border-bottom: 2px solid #2563eb !important;
}

@media (prefers-color-scheme: dark) {
    .nav-tabs,
    .tab-buttons,
    .dark .nav-tabs,
    .dark .tab-buttons {
        border-bottom-color: #374151 !important;
    }

    .nav-tabs .nav-link,
    .tab-buttons button,
    .dark .nav-tabs .nav-link,
    .dark .tab-buttons button {
        color: #9ca3af !important;
    }

    .nav-tabs .nav-link:hover,
    .tab-buttons button:hover,
    .dark .nav-tabs .nav-link:hover,
    .dark .tab-buttons button:hover {
        color: #60a5fa !important;
        background-color: #1f2937 !important;
    }

    .nav-tabs .nav-link.active,
    .tab-buttons button.active,
    .dark .nav-tabs .nav-link.active,
    .dark .tab-buttons button.active {
        color: #60a5fa !important;
        border-bottom-color: #60a5fa !important;
    }
}

/* === BADGES AND TAGS === */
.badge,
.tag {
    border-radius: 9999px !important;
    font-weight: 500 !important;
    padding: 0.25rem 0.75rem !important;
}

.method-get {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
}

.method-post {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}

.method-put {
    background-color: #e0e7ff !important;
    color: #4338ca !important;
}

.method-delete {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

/* === TABLES === */
table {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    border: 1px solid #e5e7eb !important;
}

thead {
    background-color: #f9fafb !important;
    border-bottom: 2px solid #e5e7eb !important;
}

@media (prefers-color-scheme: dark) {
    table,
    .dark table {
        border-color: #374151 !important;
    }

    thead,
    .dark thead {
        background-color: #1f2937 !important;
        border-bottom-color: #374151 !important;
    }
}

/* === LINKS === */
a {
    color: #2563eb !important;
    transition: color 0.2s ease;
}

a:hover {
    color: #4f46e5 !important;
}

@media (prefers-color-scheme: dark) {
    a,
    .dark a {
        color: #60a5fa !important;
    }

    a:hover,
    .dark a:hover {
        color: #818cf8 !important;
    }
}

/* === INPUTS AND FORMS === */
input,
select,
textarea {
    border-radius: 0.375rem !important;
    border: 1px solid #d1d5db !important;
    background-color: #ffffff !important;
    color: #111827 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #2563eb !important;
    outline: 2px solid rgba(37, 99, 235, 0.1) !important;
}

@media (prefers-color-scheme: dark) {
    input,
    select,
    textarea,
    .dark input,
    .dark select,
    .dark textarea {
        background-color: #1f2937 !important;
        border-color: #4b5563 !important;
        color: #f9fafb !important;
    }

    input:focus,
    select:focus,
    textarea:focus,
    .dark input:focus,
    .dark select:focus,
    .dark textarea:focus {
        border-color: #60a5fa !important;
        outline-color: rgba(96, 165, 250, 0.1) !important;
    }
}

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

    .endpoint-card {
        border-radius: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }
}