/* style.css */
:root {
    --c-primary: #398849; --c-primary-hover: #2e6e3b;
    --c-danger: #e74c3c; --c-edit: #2980b9; 
    --font-main: 'Segoe UI', system-ui, sans-serif; --h-header: 50px;
    --bg-body: #f4f6f8; --bg-panel: #ffffff; --bg-header: #398849;
    --text-main: #2c3e50; --text-muted: #7f8c8d; --border-color: #e2e8f0; --text-header: #ffffff;
    --table-head: #398849; --table-head-text: #ffffff; --link-stroke: #95a5a6;
    --grid-dot: #cbd5e1; --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    --tag-bg: #e2e8f0; --tag-text: #2c3e50;
    --editor-bg: #e2e6ea; --editor-border: #ced4da;
    --menu-hover: #f1f5f9;
}
[data-theme="dark"] {
    --bg-body: #18191a; --bg-panel: #242526; --bg-header: #1f4d29;
    --text-main: #e4e6eb; --text-muted: #b0b3b8; --border-color: #3e4042;
    --table-head: #2e6e3b; --table-head-text: #e4e6eb; --link-stroke: #606770;
    --grid-dot: #3a3b3c; --tag-bg: #3e4042; --tag-text: #e4e6eb;
    --editor-bg: #2d2e30; --editor-border: #4a4b4d;
    --menu-hover: #3a3b3c;
}
[data-theme="corporate"] {
    --bg-body: #f0f0f0; --bg-panel: #ffffff; --bg-header: #1c4f82;
    --text-main: #181818; --text-muted: #6b7280; --border-color: #d1d5db;
    --c-primary: #1c4f82; --c-primary-hover: #163d66;
    --table-head: #1c4f82; --table-head-text: #ffffff;
    --link-stroke: #9ca3af; --grid-dot: #d1d5db;
    --tag-bg: #e5e7eb; --tag-text: #181818;
    --editor-bg: #e5e7eb; --editor-border: #d1d5db;
    --menu-hover: #f3f4f6;
}
[data-theme="nord"] {
    --bg-body: #e5e9f0; --bg-panel: #eceff4; --bg-header: #3b4252;
    --text-main: #2e3440; --text-muted: #677691; --border-color: #d8dee9;
    --c-primary: #5e81ac; --c-primary-hover: #4c6f99;
    --table-head: #3b4252; --table-head-text: #eceff4;
    --link-stroke: #9099a8; --grid-dot: #d8dee9;
    --tag-bg: #d8dee9; --tag-text: #2e3440;
    --editor-bg: #d8dee9; --editor-border: #c4cad6;
    --menu-hover: #e5e9f0;
}
[data-theme="artis"] {
    --bg-body: #f0f7f1; --bg-panel: #ffffff; --bg-header: #398849;
    --text-main: #1a2e1c; --text-muted: #5a7a5c; --border-color: #c3ddc6;
    --c-primary: #398849; --c-primary-hover: #2e6e3b;
    --table-head: #398849; --table-head-text: #ffffff;
    --link-stroke: #8aab8c; --grid-dot: #c3ddc6;
    --tag-bg: #e6f4e8; --tag-text: #1a2e1c;
    --editor-bg: #e6f4e8; --editor-border: #c3ddc6;
    --menu-hover: #e6f4e8;
}
body, html { margin:0; padding:0; width:100%; height:100%; font-family:var(--font-main); background-color:var(--bg-body); color:var(--text-main); overflow:hidden; user-select:none; }

/* HEADER */
header { position:fixed; top:0; left:0; width:100%; height:var(--h-header); background:var(--bg-header); border-bottom: 1px solid rgba(0,0,0,0.1); display:flex; align-items:center; justify-content:space-between; padding:0 20px; box-sizing:border-box; z-index:500; color: var(--text-header); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.app-title { font-weight:800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-header); display: flex; align-items: center; font-size: 1.1rem; } 
.app-version { background:rgba(255,255,255,0.2); color: #fff; padding:2px 6px; border-radius:4px; font-size:0.7em; font-weight:bold; margin-left:10px; }
.dirty-indicator { color: #ffeb3b; font-size: 1.2rem; margin-left: 5px; display: none; }
.header-actions { display: flex; gap: 5px; align-items: center; }

.icon-btn { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; padding: 8px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.icon-btn:hover { background: rgba(255,255,255,0.2); color: white; }
.icon-btn:disabled { opacity: 0.3; cursor: default; }
.icon-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* MENU */
.menu-container { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 10px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow); min-width: 220px; display: none; flex-direction: column; z-index: 1000; overflow: hidden; animation: slideDown 0.2s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-menu.show { display: flex; }
.menu-item { padding: 12px 15px; text-align: left; background: none; border: none; color: var(--text-main); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border-color); }
.menu-item:hover { background-color: var(--menu-hover); }
.menu-separator { height: 1px; background: var(--border-color); margin: 0; }

/* CANVAS */
#canvas-container { width:100vw; height:calc(100vh - var(--h-header)); margin-top:var(--h-header); background-image: radial-gradient(var(--grid-dot) 1.5px, transparent 1.5px); background-size: 25px 25px; overflow:hidden; touch-action:none; }
svg { width:100%; height:100%; display:block; }
.svg-table-body { stroke: var(--border-color); stroke-width: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)); }
.svg-table-header { fill: var(--table-head); }
.svg-text-title { fill: var(--table-head-text); font-weight:bold; font-size:12px; pointer-events:none; }
.svg-text-row { fill: var(--text-main); font-size:11px; user-select:none; }
.svg-link { fill:none; stroke: var(--link-stroke); stroke-width:2; pointer-events:none; transition: stroke 0.3s; }
.svg-link.nullable-link { stroke-dasharray: 6, 6; } /* NOUVEAU: Tirets distincts pour nullable */
.svg-arrow { fill: var(--link-stroke); transition: fill 0.3s; }
.table-header { cursor: move; }
.pk-icon { cursor:crosshair; font-weight:bold; fill: var(--text-main); } 
.idx-icon { font-weight:bold; fill: #f39c12; } 
.link-badge-group { cursor: pointer; }
.link-label-bg { fill:var(--bg-panel); stroke:var(--border-color); stroke-width:1px; rx:4; pointer-events: auto; }
.link-label-text { font-size:11px; font-weight:bold; fill:var(--text-main); pointer-events:none; text-anchor:middle; dominant-baseline:middle; }
.fab { position:fixed; bottom:25px; right:25px; background:var(--c-primary); color:white; border:none; padding:15px 25px; border-radius:50px; font-weight:bold; box-shadow:0 4px 15px rgba(57, 136, 73, 0.4); z-index:100; cursor: pointer; transition: transform 0.2s; font-size: 1rem; } .fab:active { transform: scale(0.95); }

/* NOUVEAU : CONTEXT MENU */
.context-menu { position: absolute; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 5px 0; display: none; z-index: 1000; min-width: 180px; }
.context-menu-item { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: none; padding: 10px 15px; cursor: pointer; color: var(--text-main); font-size: 0.9rem; font-family: var(--font-main); transition: background 0.2s; }
.context-menu-item:hover { background: var(--menu-hover); }

/* MODALS */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter: blur(2px); display:none; justify-content:center; align-items:center; z-index:1000; animation: fadeIn 0.2s; }
#confirm-dialog { z-index: 2000; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background:var(--bg-panel); border: 1px solid var(--border-color); border-radius:12px; width:95%; max-width:800px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); max-height: 90vh; }
.modal-header { padding: 15px 20px; background:var(--bg-body); border-bottom:1px solid var(--border-color); display:flex; flex-direction: column; gap: 10px; }
.modal-body { padding: 0; overflow-y: auto; color: var(--text-main); flex: 1; display: flex; flex-direction: column; }
.modal-footer { padding: 15px 20px; background:var(--bg-body); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.modal-footer.hidden { display: none !important; }

.tabs { display: flex; gap: 20px; border-bottom: 2px solid transparent; width: 100%; margin-top: 10px; }
.tab-btn { background: none; border: none; padding: 8px 0; font-weight: bold; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; font-size: 0.95rem; }
.tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tab-content { display: none; height: 100%; flex-direction: column; }
.tab-content.active { display: flex; }

/* FORMS */
.input-title { font-size: 1.2rem; font-weight: bold; border: none; border-bottom: 2px solid var(--c-primary); width: 100%; padding: 5px; outline: none; background:transparent; color: var(--text-main); box-sizing: border-box; }
.input-cell { width:100%; padding:8px 10px; border:1px solid var(--border-color); background: var(--bg-panel); color: var(--text-main); border-radius:6px; font-family: inherit; font-size: 0.9rem; box-sizing: border-box;}
.input-cell:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 2px rgba(57, 136, 73, 0.1); }
.btn { padding:10px 20px; border-radius:6px; border:none; font-weight:600; cursor:pointer; outline: none; transition: 0.2s; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-p { background:var(--c-primary); color:white; } .btn-p:hover { background: var(--c-primary-hover); }
.btn-s { background:var(--bg-panel); border: 1px solid var(--border-color); color:var(--text-main); } .btn-s:hover { background: var(--bg-body); border-color: var(--text-muted); }
.btn-danger { background: var(--c-danger); color: white; } .btn-danger:hover { filter: brightness(0.9); }
.btn-edit { background: var(--c-edit); color: white; padding: 6px 12px; font-size: 0.8rem; }
.btn-icon-only { padding: 6px; width: 32px; height: 32px; border-radius: 50%; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-btn { background: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-muted); padding: 15px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1rem; transition: 0.2s; }
.card-btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.card-btn.active { background: var(--c-primary); color: white; border-color: var(--c-primary); box-shadow: 0 4px 10px rgba(57, 136, 73, 0.3); }

.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom:1px solid var(--border-color); text-align: left; vertical-align: middle; }
.data-table th { color:var(--text-muted); font-size:0.75rem; text-transform: uppercase; background: var(--bg-panel); position: sticky; top: 0; z-index: 10; font-weight: 700; letter-spacing: 0.5px; }
.col-pk { width: 40px; text-align: center !important; } .col-act { width: 50px; text-align: center !important; }

/* INDEX EDITOR */
#panel-idxs { padding: 0; background: var(--bg-body); height: 100%; display: flex; flex-direction: column; }

.index-list-section { background: var(--bg-panel); flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.index-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-panel); }
.index-row:hover { background: var(--bg-body); }
.index-info { display: flex; flex-direction: column; gap: 2px; }
.index-name { font-weight: bold; color: var(--text-main); font-size: 1rem; }
.index-cols { font-size: 0.85rem; color: var(--text-muted); }
.index-actions { display: flex; gap: 8px; }

.index-editor-section { 
    flex: 1; 
    background-color: var(--editor-bg);
    display: none; flex-direction: column; 
    border-top: 4px solid var(--c-edit);
}

.editor-header-bar {
    background-color: var(--c-edit);
    color: white;
    padding: 10px 20px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.editor-header-title { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }

.editor-body { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; }
.editor-controls { display: flex; gap: 15px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--border-color); flex-wrap: wrap; }
.validation-error { color: var(--c-danger); font-size: 0.85rem; font-weight: bold; display: none; margin-left: auto; }

.dnd-container { display: flex; gap: 20px; flex: 1; min-height: 200px; }
.dnd-column { flex: 1; display: flex; flex-direction: column; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.dnd-header { padding: 10px; background: var(--bg-body); border-bottom: 1px solid var(--border-color); font-weight: bold; text-align: center; color: var(--text-muted); font-size: 0.9rem; }
.dnd-list { flex: 1; overflow-y: auto; padding: 10px; list-style: none; margin: 0; }

.dnd-item { background: var(--bg-panel); padding: 10px; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: 6px; display: flex; align-items: center; gap: 10px; cursor: grab; touch-action: none; transition: transform 0.1s; }
.dnd-item:hover { border-color: var(--c-edit); background: #f0f8ff; }
.dnd-item.dragging { opacity: 0.8; background: #d6eaf8; border: 2px dashed var(--c-edit); transform: scale(1.02); }
.dnd-handle { color: var(--text-muted); cursor: grab; display: flex; align-items: center; }
.dnd-text { font-size: 0.9rem; font-weight: 500; }

.empty-state-text { text-align: center; color: var(--text-muted); padding: 40px; font-style: italic; font-size: 0.9rem; }

.sql-preview { width: 100%; height: 300px; background: var(--code-bg); color: var(--code-text); padding: 15px; box-sizing: border-box; font-family: 'Consolas', monospace; font-size: 0.9rem; overflow: auto; border-radius: 4px; white-space: pre; }