/* =========================================================
   IDD Moodboard — LAYOUT v3
   --------------------------------------------------------
   Pattern « plan-salle » : toolbar fixed bottom (full width)
   + sidebar gauche sticky dock contre la sidebar principale,
   repliable via classe .is-tools-collapsed sur le root.
   ========================================================= */

#idd-moodboard.idd-mb-root {
	--idd-mb-tools-w: 320px;
}

#idd-moodboard[hidden] { display: none !important; }
#idd-moodboard .idd-tool-toolbar [hidden],
#idd-moodboard .idd-tool-panel [hidden] { display: none !important; }

/* Topbar legacy → cachée */
#idd-moodboard > .idd-mb__topbar { display: none !important; }
/* Section-actions du canvas legacy → cachée (déplacées en toolbar) */
#idd-moodboard .idd-mb__section--canvas .idd-mb__section-actions { display: none !important; }

/* =========================================================
   TOOLBAR — toujours fixed bottom (mobile + desktop)
   ========================================================= */
.idd-mb-root .idd-tool-toolbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: env(safe-area-inset-bottom, 0px);
	z-index: 40;
	margin: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	box-shadow: 0 -6px 24px -10px rgba(29, 24, 25, 0.12);
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--app-brand, #B5637A) var(--app-surface-2, #FAF5F3);
}
.idd-mb-root .idd-tool-toolbar::-webkit-scrollbar { height: 8px; }
.idd-mb-root .idd-tool-toolbar::-webkit-scrollbar-track {
	background: var(--app-surface-2, #FAF5F3);
}
.idd-mb-root .idd-tool-toolbar::-webkit-scrollbar-thumb {
	background: var(--app-brand, #B5637A);
	border-radius: 999px;
	border: 2px solid var(--app-surface-2, #FAF5F3);
}

/* =========================================================
   MOBILE (< 1024px) — sidebar = bottom-sheet (toolkit héritage)
   ========================================================= */
@media (max-width: 1023px) {
	#idd-moodboard.idd-mb-root .idd-mb__layout {
		display: block;
		gap: 0;
		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
	}
	#idd-moodboard .idd-mb__sidebar { display: none !important; }
	#idd-moodboard .idd-mb__main { width: 100%; }
	.idd-mb-tools-collapse,
	.idd-mb-tools-expand {
		display: none !important;
	}
}

/* =========================================================
   DESKTOP ≥ 1024px — dock-left sidebar + workspace 1fr
   ========================================================= */
@media (min-width: 1024px) {
	#idd-moodboard.idd-mb-root {
		display: grid;
		grid-template-columns: var(--idd-mb-tools-w) 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: "tools workspace";
		min-height: calc(100vh - var(--app-header-h, 60px));
		gap: 0;
	}
	#idd-moodboard.idd-mb-root.is-tools-collapsed {
		grid-template-columns: 0 1fr;
	}

	/* Pleine largeur (octobre 2026) : le thème plafonne les outils à 1200 px ; le moodboard prend
	   toute la zone de travail, comme les plans. Les onglets « Couleurs » et « Détails » gardent
	   une largeur de lecture. */
	.app-workspace__inner > #idd-moodboard.idd-mb-root,
	#idd-moodboard.idd-mb-root {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
	#idd-moodboard .idd-mb-panel[data-mb-panel="couleurs"],
	#idd-moodboard .idd-mb-panel[data-mb-panel="details"] {
		max-width: 1200px;
		margin-inline: auto;
	}

	#idd-moodboard.idd-mb-root .idd-mb__layout {
		grid-area: workspace;
		display: block;
		min-width: 0;
		padding: 4px 0 0;
		padding-bottom: calc(125px + env(safe-area-inset-bottom, 0px));
		gap: 0;
	}

	#idd-moodboard.idd-mb-root:not(.is-tools-collapsed) .idd-mb__layout { padding-left: 20px; }

	/* Ancienne sidebar moodboard → masquée (remplacée par .idd-tool-panel) */
	#idd-moodboard .idd-mb__sidebar { display: none !important; }

	/* Sidebar = dock-left sticky */
	#idd-moodboard .idd-tool-panel {
		grid-area: tools;
		position: sticky !important;
		top: calc(var(--app-header-h, 60px) + var(--app-adminbar-h, 0px));
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: auto !important;
		height: calc(100vh - var(--app-header-h, 60px) - var(--app-adminbar-h, 0px) - 64px - env(safe-area-inset-bottom, 0px)) !important;
		min-height: 0 !important;
		max-height: calc(100vh - var(--app-header-h, 60px) - var(--app-adminbar-h, 0px) - 64px - env(safe-area-inset-bottom, 0px));
		overflow: hidden;
		transform: none !important;
		visibility: visible !important;
		z-index: 1;
		background: var(--app-surface, #fff) !important;
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
		box-shadow: none !important;
		border-left: 0;
		border-right: 1px solid var(--app-line, #E2D9CC);
		display: flex;
		flex-direction: column;
		transition: margin-left .25s, opacity .25s;
		padding-bottom: 0 !important;
	}
	#idd-moodboard .idd-tool-panel::before { display: none; }
	#idd-moodboard .idd-tool-panel__header { flex-shrink: 0; }
	#idd-moodboard .idd-tool-panel__body {
		flex: 1 1 0;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	#idd-moodboard .idd-tool-panel__footer { flex-shrink: 0; }

	#idd-moodboard.is-tools-collapsed .idd-tool-panel {
		margin-left: calc(-1 * var(--idd-mb-tools-w));
		opacity: 0;
		pointer-events: none;
	}

	#idd-moodboard .idd-tool-toolbar__burger,
	#idd-moodboard .idd-tool-panel__close,
	#idd-moodboard .idd-tool-panel-backdrop {
		display: none !important;
	}

	.idd-mb-tools-collapse {
		display: inline-flex;
		appearance: none;
		background: transparent;
		border: 0;
		color: var(--app-muted, #718096);
		cursor: pointer;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
	}
	.idd-mb-tools-collapse:hover {
		background: var(--app-surface-2, #F4EFE6);
		color: var(--app-ink, #2D3748);
	}
	.idd-mb-tools-collapse svg { width: 16px; height: 16px; }

	.idd-mb-tools-expand {
		display: none;
		position: fixed;
		left: calc(var(--app-sidebar-w, 260px) + 0px);
		top: 50%;
		transform: translateY(-50%);
		background: var(--app-brand, #B5637A);
		color: #fff;
		border: 0;
		width: 28px;
		height: 56px;
		border-radius: 0 8px 8px 0;
		cursor: pointer;
		z-index: 20;
		align-items: center;
		justify-content: center;
	}
	#idd-moodboard.idd-mb-root.is-tools-collapsed .idd-mb-tools-expand {
		display: inline-flex;
	}
	.idd-mb-tools-expand svg { width: 14px; height: 14px; }
}

/* =========================================================
   IMPRESSION
   ========================================================= */
@media print {
	#idd-moodboard.idd-mb-root {
		display: block !important;
		grid-template-columns: none !important;
		padding: 0 !important;
	}
	#idd-moodboard .idd-tool-toolbar,
	#idd-moodboard .idd-tool-panel,
	#idd-moodboard .idd-tool-panel-backdrop,
	.idd-mb-tools-expand {
		display: none !important;
	}
	#idd-moodboard .idd-mb__layout { padding: 0 !important; }
}