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

:root {
    --doc-font-size: 12pt;
    --doc-line-height: 1.7;
    --doc-font-family: 'Cairo', sans-serif;
    --page-width: 210mm;
    --page-height: 297mm;
    --primary-color: #4f46e5;
    --bg-code: #0f172a;
}
* { box-sizing: border-box; }
body { font-family: 'Cairo', sans-serif; }

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background-color: #cbd5e1; 
    border-radius: 4px; 
    border: 2px solid transparent; 
    background-clip: content-box; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

/* Mobile Preview Toggle */
.mobile-show-preview #editor-panel { transform: translateX(-100%) !important; }
.mobile-show-preview #preview-panel { transform: translateX(0) !important; z-index: 20; }
@media (min-width: 1024px) {
    #editor-panel, #preview-panel {
        transform: none !important;
        position: relative !important;
        width: 50%;
        display: flex !important;
    }
}

/* Page Dimensions Wrapper */
.a4-sheet {
    width: var(--page-width, 210mm);
    min-height: var(--page-height, 297mm);
    position: relative;
    background: white;
    border-radius: 2px;
}

/* Preview Typography */
#preview-container {
    font-size: var(--doc-font-size);
    line-height: var(--doc-line-height);
    font-family: var(--doc-font-family, 'Cairo', sans-serif);
    color: #334155;
}
#preview-container[dir="rtl"] { direction: rtl; text-align: right; }
#preview-container[dir="ltr"] { direction: ltr; text-align: left; }
#preview-container h1 {
    font-size: 2em; font-weight: 800;
    border-bottom: 3px solid #e2e8f0;
    padding-bottom: 0.3em; margin: 0 0 0.8em 0;
    color: #0f172a; letter-spacing: -0.02em;
    break-after: avoid;
    page-break-after: avoid;
}
#preview-container h2 {
    font-size: 1.5em; font-weight: 700;
    margin: 1.5em 0 0.6em 0;
    color: #1e293b; break-after: avoid;
    page-break-after: avoid;
}
#preview-container h3 {
    font-size: 1.25em; font-weight: 600;
    margin: 1.2em 0 0.5em 0; color: #334155;
    break-after: avoid;
    page-break-after: avoid;
}
#preview-container p { margin-bottom: 1em; }
#preview-container ul, #preview-container ol { margin-bottom: 1em; padding-inline-start: 1.5em; }
#preview-container ul { list-style-type: disc; }
#preview-container ol { list-style-type: decimal; }
#preview-container li { margin-bottom: 0.25em; padding-inline-start: 0.2em; }
#preview-container li::marker { color: var(--primary-color); font-weight: bold; }

#preview-container blockquote {
    background: #f8fafc;
    border-inline-start: 4px solid var(--primary-color);
    padding: 1em 1.2em; margin: 1.5em 0;
    border-radius: 0 8px 8px 0;
    color: #475569; font-style: italic;
    page-break-inside: avoid;
    break-inside: avoid;
}
#preview-container[dir="rtl"] blockquote { border-radius: 8px 0 0 8px; }

#preview-container table {
    width: 100%; border-collapse: collapse; margin: 1.5em 0;
    font-size: 0.95em; border-radius: 6px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    page-break-inside: avoid;
    break-inside: avoid;
}
#preview-container th {
    background: #f1f5f9; color: #334155; padding: 0.8em;
    border-bottom: 2px solid #e2e8f0; font-weight: 700; text-align: inherit;
}
#preview-container td { padding: 0.7em 0.8em; border-bottom: 1px solid #e2e8f0; color: #475569; }
#preview-container tr { page-break-inside: avoid; break-inside: avoid; }
#preview-container tr:last-child td { border-bottom: none; }
#preview-container tr:nth-child(even) { background-color: #f8fafc; }

#preview-container pre {
    background: var(--bg-code); color: #e2e8f0;
    padding: 1.2em; border-radius: 8px;
    overflow-x: auto; direction: ltr; text-align: left;
    margin: 1.5em 0; 
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); font-size: 0.9em;
}
#preview-container pre code {
    font-family: 'JetBrains Mono', monospace; background: transparent; padding: 0;
}
#preview-container code:not(pre code) {
    font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
    background: #f1f5f9; color: #dc2626;
    padding: 0.2em 0.4em; border-radius: 4px; border: 1px solid #e2e8f0;
}
#preview-container a {
    color: var(--primary-color); text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color 0.2s;
}
#preview-container a:hover { border-bottom-color: var(--primary-color); }
#preview-container img {
    max-width: 100%; height: auto; display: block;
    margin: 1.5em auto; border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    page-break-inside: avoid;
    break-inside: avoid;
}
#preview-container hr { border: 0; height: 1px; background: #e2e8f0; margin: 2em 0; }
#preview-container strong { font-weight: 700; color: #1e293b; }
#preview-container em { font-style: italic; }

.ltr-block { direction: ltr !important; text-align: left !important; }
.page-break {
    border-bottom: 2px dashed #cbd5e1; margin: 3em 0; position: relative;
}
.page-break::after {
    content: '✂️ فاصل صفحات';
    position: absolute; left: 50%; top: -0.9em; transform: translateX(-50%);
    background: #ffffff; padding: 0 0.8em; color: #94a3b8; font-size: 0.85em; font-weight: 600;
}

/* Margin Editor Visuals */
.visual-margin-editor {
    display: flex; flex-direction: column; align-items: center;
    gap: 0.5rem; padding: 1rem;
    background-color: #f8fafc; border-radius: 0.75rem; border: 1px solid #e2e8f0;
}
.margin-center-row { display: flex; align-items: center; gap: 1rem; width: 100%; justify-content: center; }
.margin-input-wrapper { display: flex; flex-direction: column; align-items: center; }
.margin-input {
    width: 60px; text-align: center; border: 1px solid #cbd5e1;
    border-radius: 0.375rem; padding: 0.25rem; font-family: monospace; font-size: 0.875rem;
}
.margin-input:focus { outline: none; border-color: #4f46e5; ring: 2px solid #4f46e5; }
.mini-a4-preview { width: 80px; height: 113px; }

/* Enhanced Print Styles */
@media print {
    * { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }
    
    .no-print, header, #editor-panel, #settings-modal { 
        display: none !important; 
    }
    
    body, main, #preview-panel {
        margin: 0 !important; 
        padding: 0 !important;
        width: 100% !important; 
        height: auto !important;
        overflow: visible !important; 
        display: block !important;
        background: white !important;
        position: relative !important;
    }
    
    .a4-sheet {
        width: 100% !important; 
        margin: 0 !important;
        box-shadow: none !important; 
        border: none !important;
        padding: 0 !important;
        min-height: auto !important;
    }
    
    #preview-container table { box-shadow: none; border: 1px solid #e2e8f0; }
    #preview-container pre { box-shadow: none; border: 1px solid #e2e8f0; }
    
    .page-break { 
        border: none; 
        margin: 0; 
        height: 0; 
        break-after: page; 
        page-break-after: always; 
    }
    .page-break::after { display: none; }
}