/**
 * Draw - Feuille de style principale
 *
 * Organisation :
 *   1. Reset & body
 *   2. Toolbar gauche
 *   3. Zone centrale (top-bar, canvas, coords, status)
 *   4. Sidebar droite (calques)
 *   5. Groupes de calques
 *   6. Drag and drop
 *   7. Scrollbar
 *   8. Overlay raccourcis clavier
 */

/* ========================================
   1. Reset & body
   ======================================== */
* { margin:0; padding:0; box-sizing:border-box; }
body { display:flex; height:100vh; font-family:'Segoe UI',sans-serif; background:#1a1a2e; color:#e0e0e0; overflow:hidden; }

/* ========================================
   2. Toolbar gauche
   ======================================== */
#toolbar { width:56px; background:#16213e; display:flex; flex-direction:column; align-items:center; padding:8px 0; gap:4px; border-right:1px solid #0f3460; flex-shrink:0; }
#toolbar button { width:42px; height:42px; border:none; border-radius:8px; background:transparent; color:#8892b0; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:all .15s; position:relative; }
#toolbar button:hover { background:#1a1a40; color:#e0e0e0; }
#toolbar button.active { background:#0f3460; color:#00d4ff; box-shadow:inset 3px 0 0 #00d4ff; }
/* Tooltip au survol */
#toolbar button[title]:hover::after { content:attr(title); position:absolute; left:52px; background:#0f3460; color:#fff; padding:4px 10px; border-radius:4px; font-size:12px; white-space:nowrap; z-index:100; pointer-events:none; }
/* Boutons d'action toolbar (Nouveau, Taille) */
#toolbar .toolbar-action { color:#fff; }
#toolbar .toolbar-action.new { background:#27ae60; }
#toolbar .toolbar-action.new:hover { background:#2ecc71; }
#toolbar .toolbar-action.resize { background:#2980b9; }
#toolbar .toolbar-action.resize:hover { background:#3498db; }

.toolbar-sep { width:32px; height:1px; background:#0f3460; margin:4px 0; }

/* ========================================
   3. Zone centrale
   ======================================== */
#canvas-area { flex:1; display:flex; flex-direction:column; min-width:0; }

/* Barre d'outils superieure */
#top-bar { height:44px; background:#16213e; border-bottom:1px solid #0f3460; display:flex; align-items:center; padding:0 16px; gap:12px; flex-shrink:0; }
#top-bar label { font-size:12px; color:#8892b0; }
#top-bar input[type="color"] { width:36px; height:36px; min-width:36px; min-height:36px; border:3px solid #0f3460; border-radius:6px; cursor:pointer; background:transparent; padding:0; flex-shrink:0; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
#top-bar input[type="color"]:hover { border-color:#00d4ff; box-shadow:0 0 6px rgba(0,212,255,0.4); }
#top-bar input[type="color"]::-webkit-color-swatch-wrapper { padding:2px; }
#top-bar input[type="color"]::-webkit-color-swatch { border:none; border-radius:3px; }
#top-bar input[type="color"]::-moz-color-swatch { border:none; border-radius:3px; }
#top-bar input[type="range"] { width:80px; accent-color:#00d4ff; }
#top-bar select { background:#1a1a2e; color:#e0e0e0; border:1px solid #0f3460; border-radius:4px; padding:3px 6px; font-size:12px; }
#top-bar .separator { width:1px; height:24px; background:#0f3460; }

/* Nom du projet dans la top-bar */
#projectTitle { font-size:13px; font-weight:700; color:#00d4ff; cursor:pointer; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 6px; border-radius:4px; transition:background .15s; }
#projectTitle:hover { background:#0f3460; }
#projectTitleInput { background:#0d0d1a; color:#fff; border:1px solid #00d4ff; border-radius:4px; padding:2px 6px; font-size:13px; font-weight:700; outline:none; width:150px; }
#top-bar .val { font-size:12px; color:#00d4ff; min-width:20px; }

/* Boutons de la barre superieure */
.top-btn { background:#0f3460; border:none; color:#ccd6f6; padding:5px 10px; border-radius:4px; cursor:pointer; font-size:12px; transition:background .15s; }
.top-btn:hover { background:#1a3a6e; color:#fff; }
.top-btn.danger { background:#e74c3c; }
.top-btn.danger:hover { background:#c0392b; }
.top-btn.success { background:#27ae60; }
.top-btn.success:hover { background:#219a52; }

/* Canvas wrapper et canvas */
#canvas-wrapper { flex:1; display:grid; grid-template-columns:20px 1fr; grid-template-rows:20px 1fr; overflow:auto; background:#0d0d1a; position:relative; }
#ruler-corner { background:#16213e; border-right:1px solid #0f3460; border-bottom:1px solid #0f3460; }
.ruler { display:block; }
#rulerH { grid-column:2; grid-row:1; border-bottom:1px solid #0f3460; }
#rulerV { grid-column:1; grid-row:2; border-right:1px solid #0f3460; }
canvas#myCanvas { grid-column:2; grid-row:2; background:#ffffff; cursor:crosshair; box-shadow:0 4px 30px rgba(0,0,0,0.5); place-self:center; }

/* Palette couleurs recentes */
#recent-colors { display:flex; gap:3px; padding:4px 8px; flex-wrap:wrap; min-height:0; }
.recent-swatch { width:24px; height:24px; border-radius:4px; cursor:pointer; border:2px solid #0f3460; transition:transform .1s; }
.recent-swatch:hover { transform:scale(1.3); border-color:#00d4ff; }

/* Panneau proprietes avancees */
.shape-props-panel { display:flex; gap:8px; padding:6px 10px; border-bottom:1px solid #0f3460; flex-wrap:wrap; align-items:center; }
.shape-props-panel label { font-size:11px; color:#8892b0; display:flex; align-items:center; gap:4px; }
.shape-props-panel input[type="range"] { width:60px; accent-color:#00d4ff; }
.shape-props-panel input[type="number"] { background:#0d0d1a; color:#fff; border:1px solid #0f3460; border-radius:4px; padding:2px 4px; font-size:11px; }
.shape-props-panel input[type="color"] { width:30px; height:30px; border:2px solid #0f3460; border-radius:5px; padding:0; cursor:pointer; }
.shape-props-panel input[type="checkbox"] { accent-color:#00d4ff; }
.shape-props-panel .val { font-size:11px; color:#00d4ff; min-width:16px; }

/* Snap grid button */
.top-btn#btnSnapGrid.active { background:#0f3460; color:#00d4ff; box-shadow:inset 0 -2px 0 #00d4ff; }

/* Indicateurs position et statut */
#coords { position:absolute; top:10px; left:10px; background:rgba(22,33,62,0.9); color:#00d4ff; padding:4px 10px; border-radius:4px; font-size:12px; font-family:monospace; }
#status { position:absolute; bottom:10px; left:10px; background:rgba(22,33,62,0.9); color:#8892b0; padding:4px 10px; border-radius:4px; font-size:11px; }

/* ========================================
   4. Sidebar droite (calques)
   ======================================== */
#sidebar { width:240px; background:#16213e; border-left:1px solid #0f3460; display:flex; flex-direction:column; flex-shrink:0; }
#sidebar h3 { font-size:13px; padding:0; color:#8892b0; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
#layerList { flex:1; overflow-y:auto; padding:0 8px 8px; }

/* Element calque individuel */
.layer { background:#1a1a2e; padding:8px 10px; margin-bottom:4px; border:1px solid transparent; border-radius:6px; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:8px; }
.layer:hover { border-color:#0f3460; }
.layer.selected { border-color:#00d4ff; background:#0f3460; }
.layer .color-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.layer .layer-name { flex:1; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; min-width:0; }
.layer .layer-name.layer-hidden { opacity:0.4; text-decoration:line-through; }
.layer .layer-name.layer-locked { font-style:italic; }

/* Boutons visibilite / verrouillage */
.layer .act-vis, .layer .act-lock { width:22px; height:22px; border:none; border-radius:4px; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; background:transparent; color:#8892b0; transition:all .15s; flex-shrink:0; padding:0; }
.layer .act-vis:hover { color:#2ecc71; }
.layer .act-lock:hover { color:#e67e22; }

/* Boutons d'action sur les calques */
.layer-actions { display:flex; gap:2px; flex-shrink:0; margin-left:auto; }
.layer-actions button { width:26px; height:26px; border:none; border-radius:4px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; background:#1a1a40; color:#8892b0; transition:all .15s; position:relative; z-index:2; }
.layer-actions button:hover { color:#fff; }
.layer-actions .act-copy:hover { background:#e67e22; }
.layer-actions .act-del:hover { background:#e74c3c; }
.layer-actions .act-move:hover { background:#9b59b6; }
.layer-actions .act-up:hover, .layer-actions .act-down:hover { background:#2980b9; }
.layer-actions .act-front:hover, .layer-actions .act-back:hover { background:#8e44ad; }

/* Input texte inline sur le canvas */
.canvas-text-input { z-index:10; min-width:80px; line-height:1.2; }

/* Barre flottante texte */
.text-toolbar { position:fixed; display:flex; align-items:center; gap:4px; background:#16213e; border:1px solid #00d4ff; border-radius:8px; padding:6px 10px; box-shadow:0 4px 20px rgba(0,0,0,0.5); z-index:999; transition:opacity .15s; }
.text-toolbar.hidden { display:none; }
.text-toolbar select { background:#0d0d1a; color:#e0e0e0; border:1px solid #0f3460; border-radius:4px; padding:3px 4px; font-size:11px; max-width:110px; }
.text-toolbar input[type="number"] { width:50px; background:#0d0d1a; color:#fff; border:1px solid #0f3460; border-radius:4px; padding:3px 4px; font-size:11px; text-align:center; }
.text-toolbar input[type="color"] { width:34px; height:34px; border:2px solid #0f3460; border-radius:5px; padding:0; cursor:pointer; background:transparent; }
.ft-btn { width:28px; height:28px; border:1px solid #0f3460; border-radius:4px; background:#1a1a2e; color:#8892b0; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.ft-btn:hover { background:#0f3460; color:#fff; }
.ft-btn.active { background:#00d4ff; color:#0d0d1a; border-color:#00d4ff; }

/* Boutons Bold/Italic dans le panneau props */
.prop-btn { width:26px; height:26px; border:1px solid #0f3460; border-radius:4px; background:#1a1a2e; color:#8892b0; cursor:pointer; font-size:13px; font-weight:700; transition:all .15s; }
.prop-btn:hover { background:#0f3460; color:#fff; }
.prop-btn.active { background:#00d4ff; color:#0d0d1a; border-color:#00d4ff; }

/* ========================================
   5. Groupes de calques
   ======================================== */
.sidebar-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 6px; }
.sidebar-header h3 { margin:0; font-size:13px; color:#8892b0; text-transform:uppercase; letter-spacing:1px; font-weight:600; }
.btn-new-group { background:#0f3460; border:none; color:#8892b0; padding:3px 8px; border-radius:4px; cursor:pointer; font-size:11px; transition:all .15s; }
.btn-new-group:hover { background:#1a3a6e; color:#fff; }

/* Conteneur de groupe */
.layer-group { margin-bottom:4px; border-radius:6px; overflow:hidden; }

/* En-tete du groupe */
.layer-group-header { background:#0f3460; padding:6px 10px; display:flex; align-items:center; gap:6px; cursor:pointer; border:1px solid transparent; border-radius:6px; transition:all .15s; }
.layer-group-header:hover { border-color:#00d4ff44; }
.layer-group-header.selected { border-color:#00d4ff; }
.layer-group-header .group-toggle { font-size:10px; color:#8892b0; transition:transform .15s; width:14px; text-align:center; flex-shrink:0; }
.layer-group-header .group-toggle.collapsed { transform:rotate(-90deg); }
.layer-group-header .group-icon { color:#e67e22; font-size:14px; flex-shrink:0; }
.layer-group-header .group-name { flex:1; font-size:12px; color:#ccd6f6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; min-width:0; }
.layer-group-header .group-count { font-size:10px; color:#8892b0; flex-shrink:0; }
.layer-group-header .group-actions { display:flex; gap:2px; flex-shrink:0; }
.layer-group-header .group-actions button { width:22px; height:22px; border:none; border-radius:4px; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; background:#1a1a40; color:#8892b0; transition:all .15s; }
.layer-group-header .group-actions button:hover { color:#fff; }
.layer-group-header .group-actions .act-del:hover { background:#e74c3c; }

/* Enfants du groupe */
.layer-group-children { padding-left:16px; }
.layer-group-children.collapsed { display:none; }

/* Bouton d'assignation a un groupe */
.layer .act-grp { font-size:11px; }
.layer .act-grp:hover { background:#e67e22 !important; }

/* ========================================
   6. Drag and drop
   ======================================== */
.layer[draggable="true"] { cursor:grab; }
.layer[draggable="true"]:active { cursor:grabbing; }
.layer.dragging { opacity:0.4; }
.layer.drag-over-top { border-top:2px solid #00d4ff !important; }
.layer.drag-over-bottom { border-bottom:2px solid #00d4ff !important; }
.layer-group-header.drag-over { border-color:#e67e22 !important; background:#1a3a6e; }
.layer-group-children.drag-over { border:1px dashed #e67e22; border-radius:4px; min-height:30px; }
#layerList.drag-over-root { border-bottom:2px solid #00d4ff; }

/* ========================================
   7. Scrollbar personnalisee
   ======================================== */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#1a1a2e; }
::-webkit-scrollbar-thumb { background:#0f3460; border-radius:3px; }

/* ========================================
   8. Barre d'alignement
   ======================================== */
#align-bar { display:flex; gap:2px; padding:4px 8px 8px; border-bottom:1px solid #0f3460; }
#align-bar button { flex:1; height:28px; border:none; border-radius:4px; background:#1a1a2e; color:#8892b0; cursor:pointer; font-size:12px; transition:all .15s; }
#align-bar button:hover { background:#0f3460; color:#00d4ff; }

/* Bouton grille actif */
.top-btn#btnGrid.active { background:#0f3460; color:#00d4ff; box-shadow:inset 0 -2px 0 #00d4ff; }

/* ========================================
   9. Overlay dimensions canvas
   ======================================== */
#resize-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:1000; align-items:center; justify-content:center; }
#resize-overlay.show { display:flex; }
#resize-box { background:#16213e; border:1px solid #0f3460; border-radius:12px; padding:24px; max-width:400px; width:90%; }
#resize-box h3 { color:#00d4ff; margin-bottom:16px; font-size:16px; text-transform:uppercase; letter-spacing:1px; }
.resize-fields { display:flex; gap:16px; margin-bottom:16px; }
.resize-field { flex:1; display:flex; flex-direction:column; gap:4px; }
.resize-field label { font-size:12px; color:#8892b0; }
.resize-field input { background:#0d0d1a; color:#fff; border:1px solid #0f3460; border-radius:6px; padding:8px 10px; font-size:14px; outline:none; width:100%; }
.resize-field input:focus { border-color:#00d4ff; }
.resize-name-field { margin-bottom:16px; }
.resize-name-field input { width:100%; }
.resize-presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.preset-btn { background:#1a1a2e; border:1px solid #0f3460; color:#8892b0; padding:5px 10px; border-radius:6px; cursor:pointer; font-size:11px; transition:all .15s; }
.preset-btn:hover { border-color:#00d4ff; color:#00d4ff; background:#0f3460; }
#resize-footer { display:flex; gap:8px; }
#resize-footer button { flex:1; }

/* ========================================
   10. Overlay sauvegardes (style jeu video)
   ======================================== */
#saves-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:1000; align-items:center; justify-content:center; }
#saves-overlay.show { display:flex; }
#saves-box { background:#16213e; border:1px solid #0f3460; border-radius:12px; padding:24px; max-width:560px; width:94%; max-height:80vh; display:flex; flex-direction:column; }
#saves-box h3 { color:#00d4ff; margin-bottom:16px; font-size:16px; text-transform:uppercase; letter-spacing:1px; }
#saves-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:60px; max-height:50vh; }

/* Slot de sauvegarde */
.save-slot { display:flex; align-items:center; gap:12px; background:#1a1a2e; border:1px solid #0f3460; border-radius:8px; padding:10px 12px; cursor:pointer; transition:all .15s; }
.save-slot:hover { border-color:#00d4ff; background:#0f3460; }
.save-thumb { width:80px; height:50px; border-radius:4px; object-fit:cover; background:#0d0d1a; border:1px solid #0f3460; flex-shrink:0; }
.save-info { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.save-name { font-size:14px; font-weight:600; color:#ccd6f6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.save-meta { font-size:11px; color:#8892b0; }
.save-actions { display:flex; gap:4px; flex-shrink:0; }
.save-btn { width:32px; height:32px; border:none; border-radius:6px; background:#1a1a40; color:#8892b0; cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.save-btn:hover { color:#fff; }
.save-btn.save-load:hover, .save-btn.save-overwrite:hover { background:#27ae60; }
.save-btn.save-rename:hover { background:#2980b9; }
.save-btn.save-delete:hover { background:#e74c3c; }
.save-rename-input { width:100%; background:#0d0d1a; color:#fff; border:1px solid #00d4ff; border-radius:4px; padding:2px 6px; font-size:13px; outline:none; }
.save-empty { color:#8892b0; text-align:center; padding:30px; font-size:14px; }

/* Footer overlay sauvegardes */
#saves-footer { display:flex; gap:8px; margin-top:16px; }
#saves-footer button { flex:1; }

/* ========================================
   10. Overlay raccourcis clavier
   ======================================== */
#shortcuts-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center; }
#shortcuts-overlay.show { display:flex; }
#shortcuts-box { background:#16213e; border:1px solid #0f3460; border-radius:12px; padding:24px 32px; max-width:420px; width:90%; }
#shortcuts-box h3 { color:#00d4ff; margin-bottom:12px; }
#shortcuts-box table { width:100%; font-size:13px; }
#shortcuts-box td { padding:4px 0; }
#shortcuts-box td:first-child { color:#00d4ff; font-family:monospace; width:100px; }
#shortcuts-box .close-btn { margin-top:16px; width:100%; }

/* ========================================
   Theme clair
   ======================================== */
body.light-theme { background:#f0f0f0; color:#333; }
body.light-theme #toolbar { background:#e8e8e8; border-right-color:#ccc; }
body.light-theme #toolbar button { color:#666; }
body.light-theme #toolbar button:hover { background:#ddd; color:#333; }
body.light-theme #toolbar button.active { background:#fff; color:#2980b9; box-shadow:inset 3px 0 0 #2980b9; }
body.light-theme #top-bar { background:#e8e8e8; border-bottom-color:#ccc; }
body.light-theme #top-bar label { color:#666; }
body.light-theme #sidebar { background:#e8e8e8; border-left-color:#ccc; }
body.light-theme #sidebar h3 { color:#666; }
body.light-theme .layer { background:#f5f5f5; }
body.light-theme .layer.selected { background:#e0e8ff; border-color:#2980b9; }
body.light-theme .layer-actions button { background:#eee; color:#666; }
body.light-theme #canvas-wrapper { background:#ccc; }
body.light-theme #ruler-corner { background:#e8e8e8; border-color:#ccc; }
body.light-theme #rulerH, body.light-theme #rulerV { border-color:#ccc; }
body.light-theme #coords { background:rgba(255,255,255,0.9); color:#2980b9; }
body.light-theme #status { background:rgba(255,255,255,0.9); color:#666; }
body.light-theme .top-btn { background:#ddd; color:#333; }
body.light-theme .top-btn:hover { background:#ccc; }
body.light-theme #projectTitle { color:#2980b9; }
body.light-theme .shape-props-panel { border-bottom-color:#ccc; }
body.light-theme .shape-props-panel label { color:#666; }
body.light-theme #align-bar button { background:#f0f0f0; color:#666; }
body.light-theme .layer-group-header { background:#ddd; }
body.light-theme #shortcuts-box, body.light-theme #saves-box, body.light-theme #resize-box { background:#fff; border-color:#ccc; }
body.light-theme #shortcuts-box h3, body.light-theme #saves-box h3, body.light-theme #resize-box h3 { color:#2980b9; }

/* Mode presentation plein ecran */
#canvas-wrapper:fullscreen { background:#000; display:flex; align-items:center; justify-content:center; }
#canvas-wrapper:fullscreen .ruler, #canvas-wrapper:fullscreen #ruler-corner { display:none; }
#canvas-wrapper:fullscreen #coords, #canvas-wrapper:fullscreen #status { display:none; }