/* TabFlow Public Styles */

:root {
	--tabflow-primary-color: #2b5fe7;
	/* Blue from BookingPress generally */
	--tabflow-text-color: #333333;
	--tabflow-bg-color: #ffffff;
	--tabflow-border-color: #e5e7eb;
	--tabflow-sidebar-bg: #f9fafb;
	--tabflow-hover-bg: #eff6ff;
	--tabflow-border-radius: 8px;
	--tabflow-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--tabflow-drawer-width: 280px;
}

/* Base Wrapper */
.bkf-tabflow-wrapper {
	font-family: inherit;
	color: var(--tabflow-text-color);
	box-sizing: border-box;
	/* Permitimos que o TabFlow seja largo e fluido novamente */
	width: 100%;
}

.bkf-tabflow-wrapper * {
	box-sizing: border-box;
}

/* Mobile elements hidden by default on desktop */
.bkf-tabflow-overlay,
.bkf-tabflow-fab,
.bkf-tabflow-mobile-header {
	display: none;
}

/* ======= DESKTOP LAYOUT ======= */
@media (min-width: 769px) {
	.bkf-tabflow-wrapper {
		display: flex;
		/* Removed align-items: flex-start so content can dictate height/stretch naturally */
		gap: 30px;
	}

	.bkf-tabflow-sidebar {
		flex: 0 0 250px;
		/* Fixed width sidebar */
		background: transparent;
	}

	.bkf-tabflow-nav {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.bkf-tabflow-nav-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		background: var(--tabflow-sidebar-bg);
		border-radius: var(--tabflow-border-radius);
		cursor: pointer;
		font-weight: 500;
		transition: all 0.2s ease-in-out;
		color: #555;
		border: 1px solid transparent;
	}

	.bkf-tabflow-nav-item .dashicons {
		margin-right: 12px;
		color: #888;
		transition: color 0.2s ease;
	}

	.bkf-tabflow-nav-item:hover {
		background: var(--tabflow-hover-bg);
		color: var(--tabflow-primary-color);
	}

	.bkf-tabflow-nav-item.active {
		background: var(--tabflow-bg-color);
		color: var(--tabflow-primary-color);
		border-color: var(--tabflow-primary-color);
		box-shadow: 0 2px 8px rgba(43, 95, 231, 0.15);
	}

	.bkf-tabflow-nav-item.active .dashicons,
	.bkf-tabflow-nav-item:hover .dashicons {
		color: var(--tabflow-primary-color);
	}

	.bkf-tabflow-content-area {
		flex: 1;
		min-width: 0;
		/* CRITICAL: Allows flex children inside to shrink/wrap correctly */
		width: 100%;
		/* Force width reference for internal percentage grids */
		background: var(--tabflow-bg-color);
		border-radius: var(--tabflow-border-radius);
		box-shadow: var(--tabflow-box-shadow);
		padding: 30px;
		/* Removed min-height to prevent infinite scroll loops on dynamic content */
		border: 1px solid var(--tabflow-border-color);

		/* Isola o contexto de formatação para conter floats (clearfix moderno) e problemas de margens vazando */
		display: flow-root;
		/* Opcional: previne que algo dentro estoure a largura, mas geralmente min-width:0 no flex-child já resolve */
		/* overflow-x: clip; */
	}
}

/* ======= CONTENT PANES ======= */
.bkf-tabflow-content-pane {
	display: none;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.bkf-tabflow-content-pane.active {
	display: block;
}

.bkf-tabflow-content-pane.show {
	opacity: 1;
}

/* ======= MOBILE LAYOUT (up to 768px) ======= */
@media (max-width: 768px) {
	.bkf-tabflow-wrapper {
		display: block;
	}

	.bkf-tabflow-content-area {
		background: #ffffff;
		padding: 15px;
		border-radius: var(--tabflow-border-radius);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	/* Mobile FAB */
	.bkf-tabflow-fab {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		position: fixed;
		bottom: 25px;
		right: 25px;
		z-index: 9997;
		background-color: var(--tabflow-primary-color);
		color: #ffffff;
		border: none;
		border-radius: 50px;
		padding: 12px 20px;
		font-size: 16px;
		font-weight: 600;
		box-shadow: 0 4px 12px rgba(43, 95, 231, 0.4);
		cursor: pointer;
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.bkf-tabflow-fab:active {
		transform: scale(0.95);
	}

	/* Overlay */
	.bkf-tabflow-overlay {
		display: none;
		/* toggled via js class .tabflow-drawer-open */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9998;
		backdrop-filter: blur(2px);
	}

	.bkf-tabflow-overlay.active {
		display: block;
		animation: fadeInOverlay 0.3s ease;
	}

	@keyframes fadeInOverlay {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	/* Mobile Sidebar (Drawer) */
	.bkf-tabflow-sidebar {
		position: fixed;
		top: 0;
		left: -100%;
		/* Hidden off-canvas */
		bottom: 0;
		width: 75%;
		max-width: var(--tabflow-drawer-width);
		background: var(--tabflow-bg-color);
		z-index: 9999;
		box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
		transition: left 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895);
		display: flex;
		flex-direction: column;
	}

	/* Open state */
	.bkf-tabflow-sidebar.open {
		left: 0;
	}

	.bkf-tabflow-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		border-bottom: 1px solid var(--tabflow-border-color);
	}

	.bkf-tabflow-mobile-header h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
	}

	.bkf-tabflow-close-drawer {
		background: transparent;
		border: none;
		cursor: pointer;
		color: #777;
		padding: 5px;
	}

	.bkf-tabflow-nav {
		list-style: none;
		margin: 0;
		padding: 15px;
		overflow-y: auto;
		/* Allow scrolling if many tabs */
		flex: 1;
	}

	.bkf-tabflow-nav-item {
		display: flex;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid var(--tabflow-border-color);
		cursor: pointer;
		color: var(--tabflow-text-color);
		font-weight: 500;
	}

	.bkf-tabflow-nav-item:last-child {
		border-bottom: none;
	}

	.bkf-tabflow-nav-item .dashicons {
		margin-right: 15px;
		color: #888;
	}

	.bkf-tabflow-nav-item.active {
		color: var(--tabflow-primary-color);
		background-color: var(--tabflow-hover-bg);
		border-radius: var(--tabflow-border-radius);
		border-bottom: none;
	}

	.bkf-tabflow-nav-item.active .dashicons {
		color: var(--tabflow-primary-color);
	}
}

/* ======= BOOKINGFLOW OVERRIDES ======= */
/* Força a grade de cards do BookingFlow antigo e novo a respeitar sempre 2 colunas dentro das abas, ignorando o auto-fill fluido. */
@media (min-width: 769px) {

	.bkf-tabflow-content-pane .bk-bookings-grid,
	.bkf-tabflow-content-pane .bk-slots-grid,
	.bkf-tabflow-content-pane .bk-clients-grid,
    .bkf-tabflow-content-pane #clients-list > div[style*="display:grid"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 768px) {

	/* No mobile, o BookingFlow costuma ter regras próprias para 1 coluna, mas garantimos aqui só por segurança */
	.bkf-tabflow-content-pane .bk-bookings-grid,
	.bkf-tabflow-content-pane .bk-category-grid,
	.bkf-tabflow-content-pane .bk-slots-grid,
	.bkf-tabflow-content-pane .bk-clients-grid,
    .bkf-tabflow-content-pane #clients-list > div[style*="display:grid"] {
		grid-template-columns: 1fr !important;
	}
}