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

/* ============================================
   Dark mode overrides
   (extraits de layout.php et public-share.php)
   ============================================ */
.dark .bg-white { background-color: #1f2937 !important; }
.dark .text-gray-900 { color: #f3f4f6 !important; }
.dark .text-gray-700 { color: #d1d5db !important; }
.dark .text-gray-500 { color: #9ca3af !important; }
.dark .text-gray-400 { color: #9ca3af !important; }
.dark .border-gray-300 { border-color: #4b5563 !important; }
.dark .border-gray-200 { border-color: #374151 !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important; }
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select { background-color: #374151 !important; color: #f3f4f6 !important; border-color: #4b5563 !important; }
.dark input::placeholder, .dark textarea::placeholder { color: #6b7280 !important; }

/* ============================================
   Note content typography
   (extrait de public-share.php)
   ============================================ */
.note-content h1 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.note-content h2 { font-size: 1.25rem; font-weight: 600; margin: 0.8rem 0 0.4rem; }
.note-content h3 { font-size: 1.1rem; font-weight: 600; margin: 0.6rem 0 0.3rem; }
.note-content p { margin: 0.4rem 0; }
.note-content ul, .note-content ol { margin: 0.4rem 0; padding-left: 1.5rem; }
.note-content ul { list-style-type: disc; }
.note-content ol { list-style-type: decimal; }
.note-content li { margin: 0.2rem 0; }
.note-content blockquote { border-left: 3px solid #6366f1; padding-left: 0.75rem; margin: 0.5rem 0; color: #6b7280; }
.note-content pre { background: #f3f4f6; border-radius: 0.375rem; padding: 0.75rem; overflow-x: auto; font-size: 0.85rem; margin: 0.5rem 0; }
.dark .note-content pre { background: #374151; }
.note-content code { font-family: ui-monospace, monospace; font-size: 0.85em; }
.note-content a { color: #4f46e5; text-decoration: underline; }
.note-content img { max-width: 100%; border-radius: 0.375rem; margin: 0.5rem 0; }

/* ============================================
   Print styles
   (extrait de dashboard.php)
   ============================================ */
@media print { .sensitive-note { display: none !important; } }
@media print { .sensitive-note-warning { display: block !important; } }

/* ============================================
   Quill editor font families
   (extrait de dashboard.php)
   ============================================ */
.ql-font-sans-serif,
.ql-editor .ql-font-sans-serif { font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.ql-font-serif,
.ql-editor .ql-font-serif { font-family: Georgia, "Times New Roman", serif !important; }
.ql-font-monospace,
.ql-editor .ql-font-monospace { font-family: "Cascadia Code", "Fira Code", ui-monospace, monospace !important; }

/* Toolbar font picker labels */
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "Sans-serif"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: "Serif"; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { content: "Monospace"; }

/* Preview font in picker dropdown */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"] { font-family: Georgia, serif; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"] { font-family: ui-monospace, monospace; }

/* PDF embed preview */
.pdf-embed-wrapper { margin: 0.5rem 0; }
.pdf-embed-wrapper iframe {
    width: 100%; height: 500px;
    border: 1px solid #e5e7eb; border-radius: 0.375rem;
}
.dark .pdf-embed-wrapper iframe { border-color: #374151; }
.pdf-embed-wrapper .pdf-download-link {
    display: block; margin-top: 0.25rem;
    font-size: 0.8rem; color: #4f46e5; text-decoration: none;
}
.pdf-embed-wrapper .pdf-download-link:hover { text-decoration: underline; }

/* Attachment context menu */
.attach-ctx-menu {
    position: fixed; z-index: 100;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); padding: 0.25rem 0;
    min-width: 12rem; animation: ctx-fade-in 0.1s ease-out;
}
.dark .attach-ctx-menu { background: #1f2937; border-color: #374151; }
.attach-ctx-menu button {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; padding: 0.5rem 0.75rem; border: none; background: none;
    font-size: 0.8125rem; color: #374151; cursor: pointer; text-align: left;
}
.dark .attach-ctx-menu button { color: #d1d5db; }
.attach-ctx-menu button:hover { background: #f3f4f6; }
.dark .attach-ctx-menu button:hover { background: #374151; }
.attach-ctx-menu button.text-red { color: #dc2626; }
.dark .attach-ctx-menu button.text-red { color: #f87171; }
.attach-ctx-menu hr { border: none; border-top: 1px solid #e5e7eb; margin: 0.25rem 0; }
.dark .attach-ctx-menu hr { border-color: #374151; }
@keyframes ctx-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Liens cliquables dans l'éditeur */
.ql-editor a { cursor: pointer; }

/* Quill editor dark mode */
.dark .ql-toolbar.ql-snow { border-color: #374151; background: #111827; }
.dark .ql-container.ql-snow { border-color: #374151; }
.dark .ql-editor { color: #e5e7eb; background: #111827; }
.dark .ql-editor.ql-blank::before { color: #6b7280; }
.dark .ql-snow .ql-stroke { stroke: #9ca3af; }
.dark .ql-snow .ql-fill { fill: #9ca3af; }
.dark .ql-snow .ql-picker { color: #9ca3af; }
.dark .ql-snow .ql-picker-options { background: #1f2937; border-color: #374151; }
.dark .ql-snow .ql-picker-label:hover,
.dark .ql-snow .ql-picker-item:hover { color: #e5e7eb; }
.dark .ql-snow .ql-picker-label:hover .ql-stroke,
.dark .ql-snow button:hover .ql-stroke { stroke: #e5e7eb; }
.dark .ql-snow .ql-picker-label:hover .ql-fill,
.dark .ql-snow button:hover .ql-fill { fill: #e5e7eb; }

/* ============================================
   Modal backdrop (remplace les inline styles)
   ============================================ */
.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}
.modal-backdrop-dark {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
}

/* ============================================
   Mobile navigation
   ============================================ */
@media (max-width: 767px) {
    /* Sidebar en plein ecran mobile */
    #sidebar {
        position: fixed;
        top: 3rem;
        bottom: 3.5rem;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 40;
    }

    /* Note list en plein ecran mobile */
    #note-list-panel {
        position: fixed;
        top: 3rem;
        bottom: 3.5rem;
        left: 0;
        right: 0;
        width: 100% !important;
        z-index: 40;
    }

    /* Editor en plein ecran mobile */
    #editor-panel {
        position: fixed;
        top: 3rem;
        bottom: 3.5rem;
        left: 0;
        right: 0;
        z-index: 40;
    }

    /* Bottom bar active tab */
    .mob-tab.text-indigo-400 {
        color: #818cf8;
    }
}

/* Toolbar Quill compacte en mobile */
@media (max-width: 767px) {
    .ql-toolbar.ql-snow {
        padding: 4px;
    }
    .ql-toolbar .ql-formats {
        margin-right: 4px;
    }
    /* Cacher les options avancees par defaut */
    .ql-toolbar .ql-font,
    .ql-toolbar .ql-blockquote,
    .ql-toolbar .ql-code-block,
    .ql-toolbar .ql-link,
    .ql-toolbar .ql-image,
    .ql-toolbar .ql-attachment,
    .ql-toolbar .ql-clean {
        display: none;
    }
    /* Bouton "+" pour montrer les options avancees */
    .ql-toolbar.ql-expanded .ql-font,
    .ql-toolbar.ql-expanded .ql-blockquote,
    .ql-toolbar.ql-expanded .ql-code-block,
    .ql-toolbar.ql-expanded .ql-link,
    .ql-toolbar.ql-expanded .ql-image,
    .ql-toolbar.ql-expanded .ql-attachment,
    .ql-toolbar.ql-expanded .ql-clean {
        display: inline-block;
    }
}