/**
 * AapanSouq Smart Customer Dashboard — frontend styles.
 *
 * @package AapanSouq\SmartDashboard
 */

:root {
	--assd-radius: 14px;
	--assd-radius-sm: 10px;
	--assd-bg: #f6f7fb;
	--assd-surface: #ffffff;
	--assd-surface-border: #e8e9f0;
	--assd-text: #1a1d29;
	--assd-text-muted: #6b7280;
	--assd-primary: #5b4bda;
	--assd-primary-dark: #4636b8;
	--assd-primary-soft: #efecfd;
	--assd-primary-contrast: #ffffff;
	--assd-success: #16a34a;
	--assd-success-soft: #e9f9ef;
	--assd-warning: #d97706;
	--assd-warning-soft: #fef3e2;
	--assd-danger: #dc2626;
	--assd-danger-soft: #fdecec;
	--assd-shadow-sm: 0 1px 2px rgba(20, 20, 43, 0.05), 0 1px 3px rgba(20, 20, 43, 0.06);
	--assd-shadow-md: 0 4px 14px rgba(20, 20, 43, 0.08);
	--assd-transition: 160ms ease;
}

@media (prefers-color-scheme: dark) {
	:root {
		--assd-bg: #101119;
		--assd-surface: #191a24;
		--assd-surface-border: #2a2c3a;
		--assd-text: #f3f4f6;
		--assd-text-muted: #9599ad;
		--assd-primary-soft: #26214a;
		--assd-success-soft: #123423;
		--assd-warning-soft: #3a2a10;
		--assd-danger-soft: #3a1618;
		--assd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--assd-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
	}
}

body.assd-theme-dark {
	--assd-bg: #101119;
	--assd-surface: #191a24;
	--assd-surface-border: #2a2c3a;
	--assd-text: #f3f4f6;
	--assd-text-muted: #9599ad;
	--assd-primary-soft: #26214a;
	--assd-success-soft: #123423;
	--assd-warning-soft: #3a2a10;
	--assd-danger-soft: #3a1618;
}

body.assd-theme-light {
	--assd-bg: #f6f7fb;
	--assd-surface: #ffffff;
	--assd-surface-border: #e8e9f0;
	--assd-text: #1a1d29;
	--assd-text-muted: #6b7280;
}

/* ---------- Layout shell ---------- */

.assd-dashboard-shell {
	background: var(--assd-bg);
	color: var(--assd-text);
	font-size: 15px;
	line-height: 1.5;
	border-radius: var(--assd-radius);
	padding: 16px;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 20px;
	align-items: start;
	animation: assd-fade-in 200ms ease;
}

.assd-dashboard-shell * {
	box-sizing: border-box;
}

/*
 * `.woocommerce-MyAccount-content` is WooCommerce core's own wrapper div
 * (from the untouched `myaccount/my-account.php` template) around every
 * endpoint's content — including this plugin's overview/module content
 * AND any native WooCommerce screen (Addresses, Account Details) AND
 * any companion plugin's own endpoint (e.g. a booking plugin's own
 * "My Bookings" page). It becomes the grid's second column
 * automatically as a direct child of `.assd-dashboard-shell`; this rule
 * only guards against long unbroken content overflowing the grid track.
 */
.woocommerce-MyAccount-content {
	min-width: 0;
}

@media (max-width: 900px) {
	.assd-dashboard-shell {
		grid-template-columns: 1fr;
		padding: 10px;
	}
}

/* ---------- Sidebar / grouped list-menu (mobile "Account" style) ---------- */

.assd-sidebar {
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	border-radius: var(--assd-radius);
	box-shadow: var(--assd-shadow-sm);
	padding: 6px 0;
	position: sticky;
	top: 16px;
	overflow: hidden;
}

@media (max-width: 900px) {
	.assd-sidebar {
		position: static;
	}
}

.assd-menu__section {
	padding: 6px 0 10px;
	border-bottom: 8px solid var(--assd-bg);
}

.assd-menu__section:last-child {
	border-bottom: none;
}

.assd-menu__section--home {
	padding-bottom: 6px;
}

.assd-menu__section-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--assd-text-muted);
	margin: 4px 16px 4px;
}

.assd-menu-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	text-decoration: none;
	color: var(--assd-text);
	font-weight: 500;
	font-size: 14.5px;
	transition: background var(--assd-transition);
}

.assd-menu-row:hover {
	background: var(--assd-bg);
	color: var(--assd-text);
}

.assd-menu-row__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--assd-primary);
}

.assd-menu-row__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.assd-menu-row__badge {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--assd-primary-dark);
	background: var(--assd-primary-soft);
	padding: 3px 9px;
	border-radius: 999px;
}

.assd-menu-row__chevron {
	flex: 0 0 auto;
	color: var(--assd-text-muted);
}

.assd-menu-row.is-active {
	background: var(--assd-primary-soft);
	color: var(--assd-primary-dark);
	font-weight: 600;
}

.assd-menu-row--danger {
	color: var(--assd-danger);
}

.assd-menu-row--danger .assd-menu-row__icon {
	color: var(--assd-danger);
}

.assd-menu-row--danger:hover {
	background: var(--assd-danger-soft);
}

/* ---------- Profile card + quick actions (dashboard overview) ---------- */

.assd-profile-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	border-radius: var(--assd-radius);
	box-shadow: var(--assd-shadow-sm);
	padding: 16px;
	text-decoration: none;
	color: var(--assd-text);
	margin-bottom: 14px;
}

.assd-profile-card__avatar {
	flex: 0 0 auto;
	display: inline-flex;
	border-radius: 50%;
	overflow: hidden;
}

.assd-profile-card__avatar img {
	display: block;
	border-radius: 50%;
}

.assd-profile-card__name {
	flex: 1 1 auto;
	font-size: 17px;
	font-weight: 700;
}

.assd-profile-card__chevron {
	flex: 0 0 auto;
	color: var(--assd-text-muted);
}

.assd-quick-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.assd-quick-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	border-radius: var(--assd-radius);
	box-shadow: var(--assd-shadow-sm);
	padding: 18px 12px;
	text-decoration: none;
	color: var(--assd-text);
	font-weight: 600;
	font-size: 13.5px;
	text-align: center;
	transition: transform var(--assd-transition);
}

.assd-quick-action:hover {
	transform: translateY(-1px);
	color: var(--assd-text);
}

.assd-quick-action__icon {
	display: inline-flex;
	color: var(--assd-primary);
}

/* ---------- Main content ---------- */

.assd-dashboard {
	min-width: 0;
}

.assd-dashboard__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.assd-dashboard__header h1 {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	color: var(--assd-text);
}

.assd-card__section-title {
	text-transform: none;
	font-size: 15px;
	font-weight: 700;
	color: var(--assd-text);
	margin-bottom: 12px;
}

/* ---------- Promo banner (referral / cashback) ---------- */

.assd-promo-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--assd-primary) 0%, #8b5cf6 100%);
	color: #fff;
	border-radius: var(--assd-radius);
	padding: 18px 22px;
	margin-bottom: 20px;
	box-shadow: var(--assd-shadow-md);
}

.assd-promo-banner__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.18);
	flex: 0 0 auto;
}

.assd-promo-banner__body {
	flex: 1 1 240px;
}

.assd-promo-banner__title {
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 2px;
}

.assd-promo-banner__text {
	margin: 0;
	font-size: 13.5px;
	opacity: 0.92;
}

.assd-promo-banner__cta {
	background: #fff;
	color: var(--assd-primary-dark);
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 13.5px;
	white-space: nowrap;
	transition: transform var(--assd-transition);
}

.assd-promo-banner__cta:hover {
	transform: translateY(-1px);
}

/* ---------- Cards ---------- */

.assd-card {
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	border-radius: var(--assd-radius);
	padding: 18px;
	box-shadow: var(--assd-shadow-sm);
}

.assd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.assd-cards--summary {
	margin-bottom: 22px;
}

.assd-card h2 {
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--assd-text-muted);
	margin: 0;
}

.assd-card__stat {
	font-size: 24px;
	font-weight: 700;
	margin: 6px 0 0;
	color: var(--assd-text);
}

.assd-card__stat--large {
	font-size: 34px;
}

.assd-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	background: var(--assd-primary-soft);
	color: var(--assd-primary-dark);
	text-transform: capitalize;
}

.assd-badge--completed,
.assd-badge--delivered,
.assd-badge--unlocked {
	background: var(--assd-success-soft);
	color: var(--assd-success);
}

.assd-badge--cancelled,
.assd-badge--failed,
.assd-badge--refunded {
	background: var(--assd-danger-soft);
	color: var(--assd-danger);
}

.assd-badge--pending,
.assd-badge--processing,
.assd-badge--on-hold {
	background: var(--assd-warning-soft);
	color: var(--assd-warning);
}

/* ---------- Buttons ---------- */

.assd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: var(--assd-radius-sm);
	border: none;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--assd-transition), background var(--assd-transition), box-shadow var(--assd-transition);
}

.assd-btn:hover {
	transform: translateY(-1px);
}

.assd-btn--primary {
	background: var(--assd-primary);
	color: #fff;
	box-shadow: 0 3px 10px rgba(91, 75, 218, 0.3);
}

.assd-btn--primary:hover {
	background: var(--assd-primary-dark);
	color: #fff;
}

.assd-btn--ghost {
	background: transparent;
	border: 1px solid var(--assd-surface-border);
	color: var(--assd-text);
}

.assd-btn--ghost:hover {
	background: var(--assd-bg);
	color: var(--assd-text);
}

.assd-btn--danger {
	background: var(--assd-danger-soft);
	color: var(--assd-danger);
}

/* ---------- Notices / empty states ---------- */

.assd-notice {
	padding: 14px 18px;
	border-radius: var(--assd-radius-sm);
	font-size: 13.5px;
}

.assd-notice--info {
	background: var(--assd-primary-soft);
	color: var(--assd-primary-dark);
}

.assd-empty {
	color: var(--assd-text-muted);
	font-style: normal;
	font-size: 13.5px;
	padding: 24px 0;
	text-align: center;
}

/* ---------- Tables ---------- */

.assd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.assd-table th {
	text-align: left;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--assd-text-muted);
	padding: 8px 12px;
	border-bottom: 1px solid var(--assd-surface-border);
}

.assd-table td {
	text-align: left;
	padding: 12px;
	border-bottom: 1px solid var(--assd-surface-border);
}

.assd-table tbody tr:last-child td {
	border-bottom: none;
}

/* ---------- Orders ---------- */

.assd-order-list,
.assd-booking-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.assd-order-card,
.assd-booking-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.assd-order-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.assd-order-card__id {
	font-weight: 600;
}

.assd-order-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: var(--assd-text-muted);
}

.assd-order-card__actions,
.assd-booking-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---------- Bookings ---------- */

.assd-booking-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.assd-booking-card__id {
	font-weight: 600;
	font-size: 13.5px;
	color: var(--assd-text-muted);
}

.assd-booking-card__body {
	display: flex;
	gap: 12px;
}

.assd-booking-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.assd-booking-card__details p {
	margin: 0 0 3px;
	font-size: 13.5px;
}

.assd-booking-card__service {
	font-weight: 700;
	font-size: 14.5px;
	margin: 0 0 4px !important;
}

.assd-booking-card__notes {
	color: var(--assd-text-muted);
	font-style: italic;
}

/* ---------- Referral campaigns ---------- */

.assd-referral-summary__code {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 4px 0 12px;
	color: var(--assd-primary-dark);
}

.assd-input {
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--assd-radius-sm);
	border: 1px solid var(--assd-surface-border);
	background: var(--assd-bg);
	color: var(--assd-text);
	font-size: 13.5px;
	margin-bottom: 14px;
}

/* ---------- Notifications ---------- */

.assd-notification-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.assd-notification-list__item {
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	border-radius: var(--assd-radius-sm);
	padding: 12px 14px;
	font-size: 13.5px;
}

.assd-notification-list__item strong {
	display: block;
	margin-bottom: 2px;
}

.assd-notification-list__item p {
	margin: 0;
	color: var(--assd-text-muted);
}

.assd-notification-list__item time {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	color: var(--assd-text-muted);
}

.assd-notification-list__item.is-unread {
	border-left: 3px solid var(--assd-primary);
	cursor: pointer;
}

/* ---------- External (companion-plugin passthrough) content ---------- */

.assd-dashboard--external {
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	border-radius: var(--assd-radius);
	padding: 20px;
}

/* ---------- Skeleton loaders ---------- */

.assd-skeleton {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.06) 63%);
	background-size: 400% 100%;
	animation: assd-skeleton-loading 1.4s ease infinite;
	border-radius: 8px;
}

@keyframes assd-skeleton-loading {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* ---------- Toasts ---------- */

.assd-toast-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	left: 20px;
	max-width: 360px;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 9999;
}

.assd-toast {
	background: var(--assd-surface);
	border: 1px solid var(--assd-surface-border);
	color: var(--assd-text);
	padding: 12px 16px;
	border-radius: var(--assd-radius-sm);
	box-shadow: var(--assd-shadow-md);
	animation: assd-slide-in 200ms ease;
	font-size: 13.5px;
}

.assd-toast--success { border-left: 4px solid var(--assd-success); }
.assd-toast--error { border-left: 4px solid var(--assd-danger); }
.assd-toast--warning { border-left: 4px solid var(--assd-warning); }

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

@keyframes assd-slide-in {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

/* ---------- Error state ---------- */

.assd-error {
	background: var(--assd-danger-soft);
	color: var(--assd-danger);
	padding: 14px 18px;
	border-radius: var(--assd-radius-sm);
	font-size: 13.5px;
}