@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply bg-dz-black text-white antialiased selection:bg-dz-red selection:text-white;
    }
    
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-dz-darker;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-dz-lightgray rounded-full;
    }
}

@layer components {
    .markdown-body {
        @apply text-lg leading-relaxed text-gray-300 break-words w-full;
    }
    
    .markdown-body h1 { 
        font-size: 2.5rem !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #333 !important;
        color: #ffffff !important;
        display: block !important;
    }
    
    .markdown-body h2 { 
        font-size: 2rem !important;
        font-weight: 700 !important;
        margin-top: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding-left: 0.75rem !important;
        border-left: 4px solid #dc3545 !important;
        color: #ffffff !important;
        display: block !important;
    }
    
    .markdown-body h3 { 
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.75rem !important;
        color: #ffffff !important;
        display: block !important;
    }

    .markdown-body a { 
        @apply text-dz-red font-medium transition-colors hover:text-red-400 hover:underline; 
    }
    .markdown-body p { 
        @apply mb-4; 
    }
    .markdown-body img { 
        @apply max-w-full h-auto rounded-lg my-4 border border-dz-gray shadow-lg; 
    }
    .markdown-body strong { 
        @apply text-white font-bold; 
    }
    .markdown-body em { 
        @apply italic text-gray-400; 
    }
    .markdown-body blockquote {
        @apply my-6 px-6 py-4 bg-dz-dark border-l-4 border-dz-red text-gray-400 italic rounded-r-lg;
    }
    .markdown-body code {
        @apply bg-white/10 px-1.5 py-0.5 rounded font-mono text-sm text-red-300;
    }
    .markdown-body pre {
        @apply bg-[#0d0d0d] border border-dz-gray p-4 rounded-lg overflow-x-auto my-6 shadow-inner;
    }
    .markdown-body pre code { 
        @apply bg-transparent text-gray-300 p-0 text-base border-0; 
    }
    .markdown-body table { 
        @apply w-full my-6 border-collapse bg-dz-darker rounded-lg overflow-hidden; 
    }
    .markdown-body th, .markdown-body td { 
        @apply border border-dz-gray p-3; 
    }
    .markdown-body th { 
        @apply bg-dz-dark text-white font-bold text-left; 
    }
    .markdown-body tr:nth-child(even) { 
        @apply bg-[#0f0f0f]; 
    }
    .markdown-body ul, .markdown-body ol { 
        @apply mb-4 pl-8 list-disc; 
    }
    .markdown-body ol {
        @apply list-decimal;
    }
    .markdown-body li { 
        @apply mb-2; 
    }
    .markdown-body hr {
        @apply border-t border-dz-gray my-8;
    }

    .markdown-body details {
        @apply bg-dz-dark border border-dz-gray rounded-lg p-4 my-4;
    }
    .markdown-body details summary {
        @apply font-bold text-white cursor-pointer select-none outline-none flex items-center;
    }
    .markdown-body details[open] summary {
        @apply border-b border-dz-gray pb-3 mb-3;
    }

    .markdown-body .tabbed-set {
        @apply flex flex-wrap my-6 bg-dz-dark border border-dz-gray rounded-lg overflow-hidden;
    }
    .markdown-body .tabbed-set > input {
        @apply hidden;
    }
    .markdown-body .tabbed-set .tabbed-labels {
        @apply flex w-full bg-[#0d0d0d] border-b border-dz-gray overflow-x-auto;
    }
    .markdown-body .tabbed-set label {
        @apply px-6 py-3 cursor-pointer text-gray-400 font-bold text-sm border-b-2 border-transparent transition-colors whitespace-nowrap;
    }
    .markdown-body .tabbed-set label:hover {
        @apply bg-white/5 text-gray-200;
    }
    .markdown-body .tabbed-set input:nth-child(1):checked ~ .tabbed-labels label:nth-child(1),
    .markdown-body .tabbed-set input:nth-child(2):checked ~ .tabbed-labels label:nth-child(2),
    .markdown-body .tabbed-set input:nth-child(3):checked ~ .tabbed-labels label:nth-child(3),
    .markdown-body .tabbed-set input:nth-child(4):checked ~ .tabbed-labels label:nth-child(4),
    .markdown-body .tabbed-set input:nth-child(5):checked ~ .tabbed-labels label:nth-child(5) {
        @apply text-white border-dz-red bg-dz-dark;
    }
    .markdown-body .tabbed-set .tabbed-content {
        @apply hidden w-full p-6;
    }
    .markdown-body .tabbed-set input:nth-child(1):checked ~ .tabbed-content:nth-of-type(1),
    .markdown-body .tabbed-set input:nth-child(2):checked ~ .tabbed-content:nth-of-type(2),
    .markdown-body .tabbed-set input:nth-child(3):checked ~ .tabbed-content:nth-of-type(3),
    .markdown-body .tabbed-set input:nth-child(4):checked ~ .tabbed-content:nth-of-type(4),
    .markdown-body .tabbed-set input:nth-child(5):checked ~ .tabbed-content:nth-of-type(5) {
        @apply block;
    }

    /* ========================================= */
    /* СВЕТЛАЯ ТЕМА РЕДАКТОРА (ЧЕРНЫЙ ТЕКСТ / БЕЛЫЙ ФОН) */
    /* ========================================= */
    
    .editor-toolbar {
        background-color: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
        border-bottom: none !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
        opacity: 1 !important;
    }
    .editor-toolbar a {
        color: #000000 !important; /* Кнопки стали полностью черными */
        opacity: 0.7;
    }
    .editor-toolbar a.active, .editor-toolbar a:hover {
        background-color: #d1d5db !important;
        color: #000000 !important;
        opacity: 1;
        border-color: transparent !important;
    }
    .editor-toolbar i.separator {
        border-left: 1px solid #9ca3af !important;
        border-right: none !important;
    }
    
    .CodeMirror {
        background-color: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #d1d5db !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
        font-family: monospace !important;
        font-size: 15px !important;
        height: auto !important;
        min-height: 300px !important;
    }
    .CodeMirror-cursor {
        border-left: 2px solid #000000 !important;
    }
    
    .CodeMirror-code * {
        font-weight: normal !important;
        font-style: normal !important;
        text-decoration: none !important;
    }
    .cm-header { color: #b91c1c !important; font-weight: bold !important; }
    .cm-link, .cm-url { color: #2563eb !important; }
    .cm-string { color: #16a34a !important; }

    .editor-statusbar {
        color: #6b7280 !important;
        background-color: #f9fafb !important;
        border: 1px solid #d1d5db !important;
        border-top: none !important;
        border-radius: 0 0 0.5rem 0.5rem !important;
        padding: 4px 10px !important;
    }
    
    .editor-preview, .editor-preview-side {
        background-color: #ffffff !important;
        color: #000000 !important;
        padding: 20px !important;
        border: 1px solid #d1d5db !important;
    }

    .editor-preview .markdown-body, 
    .editor-preview-side .markdown-body {
        color: #000000 !important;
    }
    .editor-preview .markdown-body h1, 
    .editor-preview-side .markdown-body h1,
    .editor-preview .markdown-body h2, 
    .editor-preview-side .markdown-body h2,
    .editor-preview .markdown-body h3, 
    .editor-preview-side .markdown-body h3,
    .editor-preview .markdown-body h4, 
    .editor-preview-side .markdown-body h4,
    .editor-preview .markdown-body strong, 
    .editor-preview-side .markdown-body strong {
        color: #000000 !important;
    }
    .editor-preview .markdown-body h1, 
    .editor-preview-side .markdown-body h1 {
        border-bottom-color: #d1d5db !important;
    }
    .editor-preview .markdown-body pre, 
    .editor-preview-side .markdown-body pre {
        background-color: #f3f4f6 !important;
        border-color: #d1d5db !important;
    }
    .editor-preview .markdown-body pre code, 
    .editor-preview-side .markdown-body pre code {
        color: #000000 !important;
    }
    .editor-preview .markdown-body code, 
    .editor-preview-side .markdown-body code {
        background-color: #e5e7eb !important;
        color: #b91c1c !important;
    }
    .editor-preview .markdown-body table, 
    .editor-preview-side .markdown-body table {
        background-color: #ffffff !important;
    }
    .editor-preview .markdown-body th, 
    .editor-preview-side .markdown-body th {
        background-color: #f3f4f6 !important;
        color: #000000 !important;
        border-color: #d1d5db !important;
    }
    .editor-preview .markdown-body td, 
    .editor-preview-side .markdown-body td {
        border-color: #d1d5db !important;
    }
    .editor-preview .markdown-body tr:nth-child(even), 
    .editor-preview-side .markdown-body tr:nth-child(even) {
        background-color: #f9fafb !important;
    }
    .editor-preview .markdown-body blockquote, 
    .editor-preview-side .markdown-body blockquote {
        background-color: #f3f4f6 !important;
        color: #374151 !important;
        border-left-color: #dc3545 !important;
    }
    
    .editor-toolbar.fullscreen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 50px !important;
        z-index: 2147483647 !important;
        border-radius: 0 !important;
        background-color: #f3f4f6 !important;
    }
    
    .CodeMirror-fullscreen {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 50px) !important;
        z-index: 2147483647 !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
    }
    
    .editor-preview-side {
        position: fixed !important;
        top: 50px !important;
        right: 0 !important;
        width: 50vw !important;
        height: calc(100vh - 50px) !important;
        z-index: 2147483647 !important;
        border-radius: 0 !important;
        border-left: 1px solid #d1d5db !important;
        background-color: #ffffff !important;
    }
}