/* Custom Styles for Maquette Builder */
body {
    font-family: 'Inter', sans-serif;
}
#live-preview {
    transition: background-color 0.3s ease;
}
:root {
    --primary-color: #3b82f6;
    --secondary-color: #6b7280;
    --global-title-color: #1a202c;
    --global-text-color: #4a5568;
    --primary-color-rgb: 59, 130, 246;
}
.primary-bg { background-color: var(--primary-color); }
.primary-text { color: var(--primary-color); }
.primary-border { border-color: var(--primary-color); }
.secondary-bg { background-color: var(--secondary-color); }
.secondary-text { color: var(--secondary-color); }
.secondary-border { border-color: var(--secondary-color); }
.global-title-text { color: var(--global-title-color); }
.global-text-color { color: var(--global-text-color); }

/* Light Mode Defaults */
body { background-color: #f8f8f8; }
.light-mode-panel { background-color: #ffffff; }
.light-mode-card { background-color: #f0f4f8; }
.light-mode-card-alt { background-color: #e0e7ff; }
.light-mode-text { color: #1a202c; }
.light-mode-text-secondary { color: #4a5568; }
.light-mode-input { background-color: #ffffff; border-color: #cbd5e0; color: #2d3748; }
.light-mode-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2); }
.light-mode-button { background-color: #e2e8f0; color: #2d3748; }
.light-mode-button:hover { background-color: #cbd5e0; }
.light-mode-bg-secondary { background-color: #f9fafb; }
.light-mode-border-dashed { border-color: #cbd5e0; }
.light-mode-preview-bg { background-color: #e5e7eb; }
.light-mode-preview-content { background-color: #ffffff; }
.light-mode-border { border-color: #e5e7eb; }
.light-mode-border-hover:hover { border-color: #93c5fd; }
.light-mode-border-top { border-top-color: #e5e7eb; }


/* Dark Mode Overrides */
body.dark-theme { background-color: #111827; }
body.dark-theme .dark-mode-panel { background-color: #1f2937; }
body.dark-theme .dark-mode-card { background-color: #374151; }
body.dark-theme .dark-mode-card-alt { background-color: #2a4365; }
body.dark-theme .dark-mode-text { color: #f3f4f6; }
body.dark-theme .dark-mode-text-secondary { color: #9ca3af; }
body.dark-theme .dark-mode-input { background-color: #374151; border-color: #4b5563; color: #d1d5db; }
body.dark-theme .dark-mode-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.3); }
body.dark-theme .dark-mode-button { background-color: #4b5563; color: #d1d5db; }
body.dark-theme .dark-mode-button:hover { background-color: #6b7280; }
body.dark-theme .dark-mode-bg-secondary { background-color: #1f2937; }
body.dark-theme .dark-mode-border-dashed { border-color: #4b5563; }
body.dark-theme .dark-mode-preview-bg { background-color: #111827; }
body.dark-theme .dark-mode-preview-content { background-color: #1f2937; }
body.dark-theme .dark-mode-border { border-color: #374151; }
body.dark-theme .dark-mode-border-hover:hover { border-color: #60a5fa; }
body.dark-theme .dark-mode-border-top { border-top-color: #4b5563; }


.primary-bg-button { color: white !important; background-color: var(--primary-color); }
.primary-bg-button:hover { opacity: 0.9; }

.sortable-ghost { opacity: 0.4; background-color: rgba(var(--primary-color-rgb), 0.2); border: 2px dashed var(--primary-color); border-radius: 0.5rem; }
.sortable-chosen { border: 2px solid var(--primary-color) !important; box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5) !important; }

.block-card { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); cursor: grab; transition: transform 0.1s ease-in-out, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; position: relative; border: 1px solid transparent; }
.light-mode-panel .block-card { background-color: #ffffff; color: #1f2937; border-color: #e5e7eb; }
.dark-mode-panel .block-card { background-color: #374151; color: #f3f4f6; border-color: #4b5563; box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.12); }
.block-card:active { cursor: grabbing; transform: scale(1.02); }
.block-card .remove-block-btn { background-color: transparent; color: #ef4444; padding: 0.25rem; transition: color 0.15s ease-in-out; }
.block-card .remove-block-btn:hover { color: #dc2626; }
.block-card .settings-block-btn { background-color: transparent; border: none; padding: 0.25rem; margin-right: 0.5rem; cursor: pointer; transition: color 0.15s ease-in-out; }
.light-mode-panel .block-card .settings-block-btn { color: #6b7280; }
.dark-mode-panel .block-card .settings-block-btn { color: #9ca3af; }
.block-card .settings-block-btn:hover { color: var(--primary-color); }

.preview-thumbnail { width: 100%; height: 100px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 0.375rem; border: 1px solid; transition: background-color 0.3s ease, border-color 0.3s ease; position: relative; }
.light-mode-panel .preview-thumbnail { background-color: #f9fafb; border-color: #e5e7eb; }
.dark-mode-panel .preview-thumbnail { background-color: #1f2937; border-color: #374151; }
.preview-thumbnail > div { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; overflow: hidden; position: relative; }
.preview-thumbnail > div > * { transform: scale(0.35); transform-origin: top left; width: calc(100% / 0.35); height: calc(100% / 0.35); position: absolute; top: 0; left: 0; box-sizing: border-box; }

.block-settings-panel { padding: 1rem; margin-top: 0; border-radius: 0 0 0.5rem 0.5rem; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }

/* Style pour le bouton de prévisualisation plein écran */
#fullPreviewBtn {
    /* Classes Tailwind déjà appliquées dans l'HTML, mais on peut ajouter des styles spécifiques ici si besoin */
    /* Exemple: s'assurer qu'il est au-dessus de tout */
    z-index: 100; 
}

@media (max-width: 1023px) { 
    .flex-1.overflow-hidden { flex-direction: column; }
    .w-full.lg\:w-1\/2 { width: 100%; max-height: 60vh; }
    .hidden.lg\:block { display: block; width: 100%; height: auto; min-height: 40vh; margin-top: 1rem; }
    #fullPreviewBtn { bottom: 6rem; /* Ajuster pour ne pas chevaucher d'autres éléments sur mobile si nécessaire */ }
}