/* Objectifs Block Layout (Mini-Notion) */

.obj-layout {
    display: flex;
    height: 100%;
    /* Fill card height */
    gap: var(--space-md);
    overflow: hidden;
    /* Prevent card overflow */
}

/* Sidebar (Left) */
.obj-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: none;
    /* Hidden by default (Small view) */
    flex-direction: column;
    padding-right: var(--space-sm);
    overflow-y: auto;
    background: var(--bg-card);
}

/* Show sidebar when Card is Expanded (Zoom Mode) */
.card-expanded .obj-sidebar {
    display: flex;
}

/* Manual Overrides via Toggle */
.obj-layout.show-sidebar .obj-sidebar {
    display: flex !important;
}

.obj-layout.hide-sidebar .obj-sidebar {
    display: none !important;
}

/* Sidebar Toggle Button (in Content) */
.btn-toggle-sidebar {
    margin-right: 8px;
    color: var(--text-muted);
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.btn-toggle-sidebar:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}


.obj-actions {
    margin-bottom: var(--space-sm);
    display: flex;
    justify-content: flex-end;
}

.obj-btn-add {
    font-size: 0.8rem;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.obj-btn-add:hover {
    background: rgba(0, 0, 0, 0.1);
}

.obj-tree {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Page Item in Tree */
.page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
}

.page-item:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-main);
}

.page-item.active {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
    font-weight: 500;
}

.page-item-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}

.page-icon {
    font-size: 1rem;
}

.page-title-tree {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sub-pages indentation */
.page-children {
    margin-left: 12px;
    padding-left: 8px;
    /* Added indentation */
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    /* Guide line */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Actions per page (hover) */
.page-item-actions {
    opacity: 0;
    display: flex;
    gap: 4px;
}

.page-item:hover .page-item-actions {
    opacity: 1;
}

.mini-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--text-muted);
}

.mini-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-main);
}

/* Main Content (Right) */
.obj-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: var(--space-sm);
    overflow-y: auto;
}

.page-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.page-title-editor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    border: none;
    background: none;
    width: 100%;
    outline: none;
}

.page-body-placeholder {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.95rem;
}

/* Responsive: Collapse Sidebar on small screens */
@media (max-width: 600px) {
    .obj-layout {
        flex-direction: column;
    }

    .obj-sidebar {
        width: 100%;
        height: 150px;
        /* Fixed height for list on mobile */
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding-right: 0;
        padding-bottom: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
}

/* --- Block Editor Styles --- */
.editor-container {
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Block separation */
}

.editor-block {
    display: flex;
    align-items: flex-start;
    /* Align icon/checkbox with first line */
    gap: 8px;
    position: relative;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.1s;
}

.editor-block.selected {
    background: rgba(46, 170, 220, 0.15);
    /* Light blue selection */
    /* border: 1px solid rgba(46, 170, 220, 0.4); */
    /* Optional border */
}

.editor-block:hover {
    background: rgba(0, 0, 0, 0.015);
}

/* Block Content Wrapper */
.block-content-wrapper {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* Block Controls (Handle + Plus) */
.block-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    margin-top: 4px;
    margin-right: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    /* Ensure it's on top */
}

.editor-block:hover .block-controls {
    opacity: 1;
}

/* Drag & Drop Visuals */
.editor-block.drag-source {
    opacity: 0.4;
    background: #f5f5f5;
}

.editor-block.drag-over-top {
    border-top: 2px solid #2eaadc;
    /* Notion blue-ish */
}

.editor-block.drag-over-bottom {
    border-bottom: 2px solid #2eaadc;
}

/* Disable default drag ghost sometimes needed, but default is okay for now */

.block-handle {
    width: 16px;
    color: #ddd;
    cursor: grab;
    user-select: none;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-handle:active {
    cursor: grabbing;
}

.block-plus {
    width: 24px;
    /* Bigger touch target */
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    background: transparent;
    /* Explicit */
    pointer-events: auto;
    /* Force clickable */
}

.block-plus:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}

.block-handle:hover {
    color: var(--text-muted);
}

/* Reusing Slash Menu style for Context Menu */
#block-plus-menu {
    position: fixed;
    z-index: 5000;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px;
    display: flex;
    flex-direction: column;
    width: 180px;
    font-size: 0.9rem;
}

/* Specific Block Types */
.b-h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 16px;
    margin-bottom: 8px;
}

.b-h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
}

.b-p {
    font-size: 1rem;
    line-height: 1.5;
    min-height: 1.5rem;
}

.b-bullet {
    display: list-item;
    list-style-type: disc;
    margin-left: 20px;
}

.b-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 16px 0;
    height: 1px;
    width: 100%;
}

/* Editable Area */
.editable-text {
    width: 100%;
    outline: none;
    border: none;
    background: transparent;
    font-family: inherit;
    color: var(--text-main);
    word-break: break-word;
}

.editable-text:empty::before {
    content: attr(placeholder);
    color: #ccc;
    pointer-events: none;
    /* Hide placeholder if not focused (except for specific cases if needed, but per request: only on active) */
    display: none;
}

.editable-text:empty:focus::before {
    display: block;
}

/* Optional: Keep To-do placeholder always visible if desired? 
   User said "Le ‘To-do’ doit être un placeholder visuel". 
   But user also complained about "Tapez '/'..." 
   Let's check if we can differentiate. 
   We have classes like .b-p, .b-todo inside .editable-text usually has class b-todo too.
*/
.editable-text.b-todo:empty::before {
    display: block;
    /* Always show "To-do" placeholder? Or obey focus rule? User said "To-do must be visual placeholder", implied always visible like Notion? Let's try focus first based on "Smart Placeholders" section B which says "UNIQUEMENT sur le  bloc actuellement focus" (refers to 'Tapez /').
    Actually, Notion shows 'To-do' always. 
    Let's make 'Tapez /' (p) only on focus, others always?
*/
}

.editable-text.b-p:empty:not(:focus)::before {
    display: none;
}

.editable-text.b-p:empty:focus::before {
    display: block;
}

/* For To-do, let's keep it visible? Or simplify: Follow the prompt strictly:
   "Placeholder ... doit apparaître UNIQUEMENT sur le bloc actuellement focus/actif" -> This refers to the long one.
   "Cas TODO: Le 'To-do' doit être un placeholder visuel".
   I will set display:none by default for .b-p when not focused.
*/
.editable-text:empty::before {
    /* Fallback: Show always? */
    display: block;
}

.editable-text.b-p:empty:not(:focus)::before {
    display: none;
}

/* Checkbox Style */
/* Checkbox Style (Unified with Todo Block) */
.todo-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--text-main);
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
    background: white;
}

.todo-check:checked {
    background: var(--text-main);
    border-color: var(--text-main);
    position: relative;
}

.todo-check:checked::after {
    content: '✔';
    color: white;
    font-size: 14px;
    position: static;
    /* Center via flex in parent */
}

.checked-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Add Block Menu (Simple) */
.add-block-menu {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.add-block-menu:hover {
    opacity: 1;
}

.btn-type {
    font-size: 0.75rem;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 4px;
    color: #666;
    border: 1px solid transparent;
}


/* Slash Command Menu */
#slash-menu {
    position: fixed;
    z-index: 5000;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px;
    display: flex;
    flex-direction: column;
    width: 200px;
    font-size: 0.9rem;
}

.slash-item {
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

.slash-item.active,
.slash-item:hover {
    background: var(--bg-app);
    color: var(--accent-color);
}

.slash-icon {
    width: 20px;
    text-align: center;
    color: var(--text-muted);
    font-weight: bold;
}