/* =========================================================
   IDD Playlist — LAYOUT v3 (pattern plan-salle)
   ========================================================= */

#idd-playlist.idd-pl-root { --idd-pl-tools-w: 320px; }
#idd-playlist[hidden] { display: none !important; }
#idd-playlist .idd-tool-toolbar [hidden],
#idd-playlist .idd-tool-panel [hidden] { display: none !important; }
#idd-playlist .idd-pl__sidebar { display: none !important; }

.idd-pl-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);
}

@media (max-width: 1023px) {
	#idd-playlist.idd-pl-root .idd-pl__layout {
		display: block;
		padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
	}
	.idd-pl-tools-collapse, .idd-pl-tools-expand { display: none !important; }
}

@media (min-width: 1024px) {
	#idd-playlist.idd-pl-root {
		display: grid;
		grid-template-columns: var(--idd-pl-tools-w) 1fr;
		grid-template-areas: "tools workspace";
		min-height: calc(100vh - var(--app-header-h, 60px));
		gap: 0;
	}
	#idd-playlist.idd-pl-root.is-tools-collapsed { grid-template-columns: 0 1fr; }

	#idd-playlist.idd-pl-root .idd-pl__layout {
		grid-area: workspace;
		display: block;
		min-width: 0;
		padding: clamp(20px, 2.4vw, 36px) clamp(20px, 3vw, 40px);
		padding-bottom: calc(125px + env(safe-area-inset-bottom, 0px));
	}

	#idd-playlist .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-playlist .idd-tool-panel::before { display: none; }
	#idd-playlist .idd-tool-panel__header { flex-shrink: 0; }
	#idd-playlist .idd-tool-panel__body { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
	#idd-playlist .idd-tool-panel__footer { flex-shrink: 0; }

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

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

	.idd-pl-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-pl-tools-collapse:hover { background: var(--app-surface-2, #F4EFE6); color: var(--app-ink, #2D3748); }
	.idd-pl-tools-collapse svg { width: 16px; height: 16px; }

	.idd-pl-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-playlist.idd-pl-root.is-tools-collapsed .idd-pl-tools-expand { display: inline-flex; }
	.idd-pl-tools-expand svg { width: 14px; height: 14px; }
}

/* Stats sidebar compactes */
#idd-playlist .idd-tool-panel .idd-pl__stats {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0;
}
#idd-playlist .idd-tool-panel .idd-pl__stat-card {
	padding: 10px 8px;
	background: var(--app-surface-2, #F4EFE6);
	border: 1px solid var(--app-line, #E2D9CC);
	border-radius: 10px; text-align: center;
	display: flex; flex-direction: column; gap: 2px;
}
#idd-playlist .idd-tool-panel .idd-pl__stat-card--accent {
	grid-column: span 2;
	background: var(--app-brand-soft, rgba(181,99,122,0.10));
	border-color: var(--app-brand-border, rgba(181,99,122,0.25));
}
#idd-playlist .idd-tool-panel .idd-pl__stat-num {
	font-family: var(--font-serif, 'Cormorant Garamond', serif);
	font-size: 1.2rem; font-weight: 600;
	color: var(--app-ink, #2D3748); line-height: 1.1;
}
#idd-playlist .idd-tool-panel .idd-pl__stat-card--accent .idd-pl__stat-num { color: var(--app-brand-dark, #9A4F65); }
#idd-playlist .idd-tool-panel .idd-pl__stat-label {
	font-size: .68rem; color: var(--app-muted, #718096); letter-spacing: .04em;
}

@media print {
	#idd-playlist.idd-pl-root { display: block !important; grid-template-columns: none !important; padding: 0 !important; }
	#idd-playlist .idd-tool-toolbar, #idd-playlist .idd-tool-panel,
	#idd-playlist .idd-tool-panel-backdrop, .idd-pl-tools-expand { display: none !important; }
	#idd-playlist .idd-pl__layout { padding: 0 !important; }
}