/* ==========================================================================
   Dashboard Card
   ========================================================================== */

.wc-dashboard-card {

	display: flex;
	flex-direction: column;

	background: var(--wc-color-surface);

	border: 1px solid var(--wc-color-border);
	border-radius: var(--wc-radius-lg);

	box-shadow: var(--wc-shadow-sm);

	overflow: hidden;

	transition: var(--wc-transition);

}

.wc-dashboard-card:hover {

	box-shadow: var(--wc-shadow-md);

}

/* ==========================================================================
   Header
   ========================================================================== */

.wc-dashboard-card__header {

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1rem;

	padding: 1.25rem 1.5rem;

	border-bottom: 1px solid var(--wc-color-border);

}

.wc-dashboard-card__title {

	margin: 0;

	font-size: 1.125rem;
	font-weight: 600;

	color: var(--wc-color-text);

}

.wc-dashboard-card__subtitle {

	margin-top: .35rem;

	font-size: .875rem;

	color: var(--wc-color-text-light);

}

.wc-dashboard-card__actions {

	display: flex;
	align-items: center;
	gap: .75rem;

	flex-wrap: wrap;

}

/* ==========================================================================
   Body
   ========================================================================== */

.wc-dashboard-card__body {

	padding: 1.5rem;

	flex: 1;

}

/* ==========================================================================
   Footer
   ========================================================================== */

.wc-dashboard-card__footer {

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 1rem;

	padding: 1rem 1.5rem;

	border-top: 1px solid var(--wc-color-border);

	background: rgba(0, 0, 0, .015);

	flex-wrap: wrap;

}

/* ==========================================================================
   Modifiers
   ========================================================================== */

.wc-dashboard-card--compact .wc-dashboard-card__header {

	padding: 1rem 1.25rem;

}

.wc-dashboard-card--compact .wc-dashboard-card__body {

	padding: 1.25rem;

}

.wc-dashboard-card--compact .wc-dashboard-card__footer {

	padding: .85rem 1.25rem;

}

.wc-dashboard-card--flush .wc-dashboard-card__body {

	padding: 0;

}

.wc-dashboard-card--borderless {

	border: none;

	box-shadow: none;

}

.wc-dashboard-card--clickable {

	cursor: pointer;

}

.wc-dashboard-card--clickable:hover {

	border-color: var(--wc-color-primary);

	transform: translateY(-2px);

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {

	.wc-dashboard-card__header {

		flex-direction: column;
		align-items: flex-start;

	}

	.wc-dashboard-card__actions {

		width: 100%;

	}

	.wc-dashboard-card__footer {

		flex-direction: column;
		align-items: flex-start;

	}

}