/* Extracted styles from index.html */

/* --- CORE --- */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: #F3F4F6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    touch-action: none; 
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#viewport { width: 100%; height: 100%; position: relative; cursor: default; touch-action: none; }
#world { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }

#grid-layer {
    position: absolute; top: -50000px; left: -50000px; width: 100000px; height: 100000px;
    background-image: radial-gradient(#CBD5E1 1px, transparent 1px); background-size: 40px 40px;
    pointer-events: none; z-index: 0;
}
#connections-layer {
    position: absolute; top: -50000px; left: -50000px; width: 100000px; height: 100000px;
    overflow: visible; pointer-events: none; z-index: 1;
}
#nodes-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2; }

/* NOEUDS */
.node {
    position: absolute; background: white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 8px; transition: box-shadow 0.2s;
    display: flex; flex-direction: column;
    touch-action: none;
    overflow: visible; 
}
.node.selected {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    outline: 2px solid #3B82F6; z-index: 100 !important;
}
.node.target-candidate { outline: 2px dashed #3B82F6; cursor: crosshair; }

/* Types Spéciaux Styles */
.node[data-type="column"] { z-index: 5; background-color: #F8FAFC; border: 2px dashed #E2E8F0; overflow: hidden; }
.node[data-type="board"] { z-index: 15; overflow: hidden; }
.node[data-type="color"] { overflow: hidden; }
.node[data-type="comment"] { z-index: 20; border-radius: 50%; background: transparent; box-shadow: none; }

.node[data-type="heading"] { background: transparent; box-shadow: none; border: none; z-index: 12; }
.node[data-type="heading"] .editable-content { font-size: 24px; font-weight: 800; color: #1F2937; padding: 4px; line-height: 1.2; }
.node[data-type="table"] { z-index: 10; min-width: 150px; border-radius: 6px; overflow: visible; }

/* DRAG HANDLES STANDARDISÉS */
.drag-handle {
    height: 24px; width: 100%; cursor: grab;
    background-color: #F9FAFB;
    border-bottom: 1px solid #F3F4F6;
    border-radius: 6px 6px 0 0; 
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9CA3AF;
}
.drag-handle:active { cursor: grabbing; background-color: #F3F4F6; color: #3B82F6; }

/* EXCEPTIONS HANDLE */
.node[data-type="heading"] .drag-handle { 
    background: rgba(255,255,255,0.8); border: 1px solid #E5E7EB; border-radius: 4px;
    position: absolute; top: -28px; left: 0; width: 100%; height: 24px;
    opacity: 0; transition: opacity 0.2s;
}
.node[data-type="heading"].selected .drag-handle, .node[data-type="heading"]:hover .drag-handle { opacity: 1; }

.node[data-type="comment"] .drag-handle { display: none; }

/* Actions */
.node-actions { position: absolute; top: -14px; right: -14px; display: none; gap: 8px; z-index: 200; }
.node.selected .node-actions { display: flex; }
.action-btn {
    width: 40px; height: 40px; background: white; border: 1px solid #E5E7EB;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); color: #EF4444; cursor: pointer; pointer-events: auto; 
}
.action-btn:active { background-color: #FEE2E2; transform: scale(0.95); }

/* WIDGET CONTENT */
.editable-content { padding: 16px; outline: none; min-height: 40px; font-size: 16px; line-height: 1.5; color: #1F2937; user-select: text; -webkit-user-select: text; white-space: pre-wrap; cursor: text; position: relative; z-index: 1; }

/* TABLE WIDGET STYLES */
.table-container { display: flex; flex-direction: column; background: white; width: 100%; overflow: visible; }
.table-title { padding: 8px 12px; font-weight: 600; font-size: 14px; color: #374151; border-bottom: 1px solid #E5E7EB; outline: none; user-select: text; -webkit-user-select: text; pointer-events: auto; }
.data-table-wrapper { overflow-x: auto; width: 100%; position: relative; touch-action: pan-x; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; table-layout: fixed; }
.data-table th, .data-table td { border: 1px solid #E5E7EB; padding: 0; min-width: 100px; position: relative; height: 36px; }
.data-table th { background-color: #F9FAFB; color: #6B7280; font-weight: 500; }
.data-table .row-action-cell { width: 30px; min-width: 30px; background: #F9FAFB; border-right: 1px solid #E5E7EB; text-align: center; }
.row-del-btn { color: #EF4444; cursor: pointer; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; pointer-events: auto; opacity: 0.5; }
.row-del-btn:hover, .row-del-btn:active { opacity: 1; background-color: #FEE2E2; }

.th-content { display: flex; align-items: center; height: 100%; }
.type-icon { padding: 0 4px; cursor: pointer; color: #6B7280; display: flex; align-items: center; justify-content: center; height: 100%; width: 28px; border-right: 1px solid transparent; pointer-events: auto; transition: background 0.1s; }
.type-icon:hover { background-color: #E5E7EB; color: #374151; }

/* POPUP MENU */
#dropdown-portal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; }
.custom-dropdown { position: absolute; background: white; border: 1px solid #E5E7EB; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); border-radius: 8px; pointer-events: auto; padding: 6px; min-width: 180px; display: flex; flex-direction: column; animation: fadeIn 0.1s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.col-menu-header { font-size: 11px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; padding: 6px 10px; margin-bottom: 2px; }
.col-menu-item { padding: 10px; cursor: pointer; font-size: 14px; color: #374151; display: flex; align-items: center; gap: 10px; border-radius: 6px; transition: background 0.1s; }
.col-menu-item:hover, .col-menu-item:active { background-color: #F3F4F6; }
.col-menu-item.active { background-color: #EFF6FF; color: #2563EB; font-weight: 500; }
.col-menu-item.danger { color: #EF4444; border-top: 1px solid #F3F4F6; margin-top: 4px; padding-top: 12px; }
.col-menu-item.danger:hover { background-color: #FEF2F2; }
.col-menu-item.disabled { opacity: 0.5; cursor: not-allowed; }

.cell-input { width: 100%; height: 100%; padding: 6px 8px; border: none; outline: none; background: transparent; font-family: inherit; font-size: inherit; color: inherit; resize: none; overflow: hidden; user-select: text; -webkit-user-select: text; pointer-events: auto; line-height: 20px; }
.cell-number .cell-input { text-align: right; font-family: monospace; }
.cell-check { display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; pointer-events: auto; }
.cell-check input { width: 16px; height: 16px; cursor: pointer; }
.cell-link { display: flex; align-items: center; padding-right: 24px; position: relative; }
.cell-link .cell-input { color: #2563EB; text-decoration: underline; }
.cell-link-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); padding: 4px; color: #6B7280; cursor: pointer; pointer-events: auto; }
.table-controls { display: flex; border-top: 1px solid #E5E7EB; background: #F9FAFB; }
.table-add-btn { padding: 10px; font-size: 12px; color: #6B7280; cursor: pointer; flex: 1; text-align: center; border-right: 1px solid #E5E7EB; pointer-events: auto; display: flex; align-items: center; justify-content: center; gap: 4px; }
.table-add-btn:active { background-color: #E5E7EB; }

/* File Widget */
.file-container { display: flex; height: 100%; position: relative; }
.file-icon-area { width: 80px; background: #FEF2F2; display: flex; align-items: center; justify-content: center; border-right: 1px solid #F3F4F6; flex-shrink: 0; color: #EF4444; }
.file-info { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.file-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; pointer-events: auto; outline: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 11px; color: #9CA3AF; text-transform: uppercase; }
.file-download-btn { position: absolute; top: 8px; right: 8px; background: white; border: 1px solid #E5E7EB; border-radius: 4px; padding: 6px; width: 32px; height: 32px; color: #6B7280; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; box-shadow: 0 1px 2px rgba(0,0,0,0.05); pointer-events: auto; }
.file-download-btn:active { background-color: #F3F4F6; transform: scale(0.95); }

/* Comment Widget */
.comment-bubble { width: 100%; height: 100%; border-radius: 50%; background-color: #FCD34D; border: 3px solid white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; color: #92400E; font-weight: bold; position: relative; cursor: pointer; pointer-events: auto; }
.comment-popup { position: absolute; top: 120%; left: 50%; transform: translateX(-50%); width: 240px; background: white; padding: 12px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); display: none; flex-direction: column; gap: 8px; z-index: 50; cursor: default; border: 1px solid #E5E7EB; }
.node.open .comment-popup { display: flex; }
.comment-input { width: 100%; padding: 8px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 14px; outline: none; min-height: 60px; resize: none; user-select: text; -webkit-user-select: text; pointer-events: auto; }
.comment-meta { font-size: 10px; color: #9CA3AF; display: flex; justify-content: space-between; }
.comment-close-btn { align-self: flex-end; font-size: 12px; color: #3B82F6; cursor: pointer; padding: 4px; pointer-events: auto; }

/* Board Widget */
.board-container { display: flex; flex-direction: column; height: 100%; }
.board-icon-area { flex: 1; display: flex; align-items: center; justify-content: center; background: #FFF; border-bottom: 1px solid #F3F4F6; position: relative; }
.board-title { padding: 12px; text-align: center; font-weight: 600; font-size: 14px; outline: none; user-select: text; -webkit-user-select: text; pointer-events: auto; flex-shrink: 0; }
.board-open-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border: 1px solid #E5E7EB; border-radius: 20px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #3B82F6; box-shadow: 0 2px 4px rgba(0,0,0,0.05); pointer-events: auto; opacity: 0.9; }
.board-open-btn:active { background-color: #F3F4F6; transform: scale(0.95); }

/* Color Widget */
.color-preview { flex: 1; width: 100%; cursor: pointer; position: relative; border-radius: 0; pointer-events: auto; }
.color-hex { padding: 10px; text-align: center; font-family: monospace; font-size: 14px; color: #374151; background: white; border-top: 1px solid #F3F4F6; border-radius: 0 0 8px 8px; user-select: text; -webkit-user-select: text; pointer-events: auto; }
.color-input-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;}
.color-edit-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.8); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.color-preview:active .color-edit-icon { opacity: 1; }

/* Link Widget */
.link-container { display: flex; height: 100%; position: relative; }
.link-thumb { width: 80px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; border-right: 1px solid #F3F4F6; flex-shrink: 0; }
.link-info { flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.link-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; pointer-events: auto; outline: none;}
.link-desc { font-size: 12px; color: #6B7280; pointer-events: auto; outline: none;}
.link-visit-btn, .link-edit-btn { position: absolute; top: 8px; background: white; border: 1px solid #E5E7EB; border-radius: 4px; font-size: 11px; font-weight: 600; color: #3B82F6; cursor: pointer; z-index: 50; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); pointer-events: auto; }
.link-visit-btn { right: 8px; padding: 8px 12px; gap: 4px; min-height: 32px; }
.link-edit-btn { right: 90px; padding: 8px; width: 32px; height: 32px; color: #6B7280; }
.link-edit-btn:active, .link-visit-btn:active { background-color: #F3F4F6; transform: scale(0.95); }
.url-editor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 60; display: flex; flex-direction: column; padding: 10px; gap: 5px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.url-input { border: 1px solid #E5E7EB; padding: 8px; font-size: 14px; border-radius: 4px; width: 100%; pointer-events: auto; }
.url-save { background: #3B82F6; color: white; border: none; padding: 8px; border-radius: 4px; font-weight: 600; font-size: 12px; pointer-events: auto; }

/* Todo */
.todo-container { padding: 12px; position: relative; z-index: 1; }
.todo-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.todo-checkbox { margin-top: 4px; width: 24px; height: 24px; cursor: pointer; pointer-events: auto; }
.todo-text { flex: 1; outline: none; border-bottom: 1px solid transparent; font-size: 15px; }
.todo-text.checked { text-decoration: line-through; color: #9CA3AF; }
.add-todo-btn { padding: 10px; color: #6B7280; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; pointer-events: auto; }

/* Column */
.column-header { padding: 12px 16px; font-weight: 600; color: #4B5563; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid #CBD5E1; outline: none; position: relative; z-index: 1; background-color: rgba(255,255,255,0.5); }
.column-body { flex: 1; }

.connection-line { transition: stroke 0.2s, stroke-width 0.2s; cursor: pointer; pointer-events: auto; }
.connection-line:hover, .connection-line.selected { stroke: #3B82F6; stroke-width: 3; }

#toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background-color: #1F2937; color: white; padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; box-shadow: 0 4px 6px rgba(0,0,0,0.1); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1000; display: flex; align-items: center; gap: 8px; }
#toast.visible { opacity: 1; }
button.active-tool { background-color: #DBEAFE; color: #3B82F6; }
button.active-tool i { color: #3B82F6; }

#breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #6B7280; }
.crumb { cursor: pointer; padding: 4px 8px; }
#transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity 0.3s ease-out; }