/**
 * Shibhu Matrimony – Reports Page Styles
 *
 * @package Modern_Matrimony
 * @since   1.2.0
 */

/* ============================================================
   Wrap & heading
   ============================================================ */
.sm-reports-wrap {
	max-width: 1200px;
}

.sm-reports-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.5rem;
	color: #1d2327;
	margin-bottom: 28px;
}

.sm-reports-heading .dashicons {
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	color: #6366f1;
}

/* ============================================================
   Stat cards grid
   ============================================================ */
.sm-stat-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 20px;
	margin-bottom: 36px;
}

.sm-stat-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 18px;
	border-radius: 12px;
	text-decoration: none;
	color: #fff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sm-stat-card:hover,
.sm-stat-card:focus {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0,0,0,.18);
	color: #fff;
}

/* Colour variants */
.sm-card--blue   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.sm-card--indigo { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
.sm-card--pink   { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.sm-card--teal   { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.sm-card--amber  { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }

/* Icon bubble */
.sm-stat-card__icon {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255,255,255,.22);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sm-stat-card__icon .dashicons {
	font-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	color: #fff;
}

/* Numeric value */
.sm-stat-card__value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
}

.sm-stat-card__label {
	font-size: .8rem;
	opacity: .88;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* Arrow decoration */
.sm-stat-card__arrow {
	position: absolute;
	right: 14px;
	bottom: 14px;
	opacity: .45;
	font-size: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	display: none;
}

/* ============================================================
   Activity Log section
   ============================================================ */
.sm-activity-wrap {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.sm-activity-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid #e2e8f0;
	background: #f8fafc;
}

.sm-activity-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 600;
	color: #1e293b;
	margin: 0;
}

.sm-activity-title .dashicons {
	color: #6366f1;
}

/* Clear log button */
.sm-btn-danger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
	transition: background .15s, color .15s;
}

.sm-btn-danger:hover,
.sm-btn-danger:focus {
	background: #fef2f2 !important;
	border-color: #dc2626 !important;
}

.sm-btn-danger .dashicons {
	font-size: .9rem;
	width: .9rem;
	height: .9rem;
}

/* Empty state */
.sm-activity-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 24px;
	color: #94a3b8;
	text-align: center;
}

.sm-activity-empty .dashicons {
	font-size: 2rem;
	width: 2rem;
	height: 2rem;
}

.sm-activity-empty p {
	margin: 0;
	font-size: .95rem;
}

/* ============================================================
   Timeline
   ============================================================ */
.sm-timeline {
	list-style: none;
	margin: 0;
	padding: 20px 24px;
}

.sm-timeline__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid #f1f5f9;
	animation: sm-fade-in .3s ease both;
}

.sm-timeline__item:last-child {
	border-bottom: none;
}

@keyframes sm-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Dot icon */
.sm-tl-dot {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.sm-tl-dot .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
	color: #fff;
}

.sm-tl-dot--green  { background: #22c55e; }
.sm-tl-dot--blue   { background: #3b82f6; }
.sm-tl-dot--teal   { background: #14b8a6; }
.sm-tl-dot--amber  { background: #f59e0b; }
.sm-tl-dot--grey   { background: #94a3b8; }

/* Content */
.sm-tl-content {
	flex: 1;
}

.sm-tl-message {
	margin: 0 0 4px;
	font-size: .88rem;
	color: #334155;
	line-height: 1.5;
}

.sm-tl-message strong {
	color: #1e293b;
}

.sm-tl-message em {
	color: #475569;
	font-style: normal;
	font-weight: 500;
}

.sm-tl-time {
	font-size: .78rem;
	color: #94a3b8;
}

/* Inline action links */
.sm-tl-action {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s, color .15s;
}

.sm-tl-action--approve {
	background: #dcfce7;
	color: #16a34a;
}

.sm-tl-action--approve:hover,
.sm-tl-action--approve:focus {
	background: #16a34a;
	color: #fff;
}

.sm-tl-action--edit {
	background: #eff6ff;
	color: #2563eb;
}

.sm-tl-action--edit:hover,
.sm-tl-action--edit:focus {
	background: #2563eb;
	color: #fff;
}

/* ============================================================
   Responsive
   ============================================================ */
@media ( max-width: 782px ) {
	.sm-stat-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 480px ) {
	.sm-stat-grid {
		grid-template-columns: 1fr;
	}

	.sm-activity-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}