/* =========================================================================
   Easy Hotel – Admin Dashboard
   Scoped under .eshb-dashboard-wrap so nothing leaks to other admin pages.
   ========================================================================= */

.eshb-dashboard-wrap {
	--eshb-d-bg: #f4f5f8;
	--eshb-d-card: #ffffff;
	--eshb-d-navy1: #143055;
	--eshb-d-navy2: #0b2138;
	--eshb-d-blue: #3b62f6;
	--eshb-d-blue-soft: #e7edff;
	--eshb-d-text: #1f2a44;
	--eshb-d-muted: #8a93a6;
	--eshb-d-border: #eef0f4;
	--eshb-d-green: #1faa5b;
	--eshb-d-red: #e8536b;
	--eshb-d-amber: #f0a020;
	--eshb-d-radius: 14px;
	--eshb-d-shadow: 0 6px 24px rgba(20, 33, 61, 0.06);

	margin: 10px 20px 0 2px;
	color: var(--eshb-d-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	* {
		box-sizing: border-box;
	}

	.eshb-dash-shell {
		background: var(--eshb-d-bg);
		border-radius: 16px;
		overflow: hidden;
	}

	/* ------------------------------------------------------------- content */
	.eshb-dash-content {
		min-width: 0;
		padding: 20px 24px 28px;
	}

	/* --------------------------------------------------------------- stats */
	.eshb-dash-stats {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 18px;
		margin-bottom: 22px;
	}

	.eshb-dash-stat-card {
		background: var(--eshb-d-card);
		border-radius: var(--eshb-d-radius);
		box-shadow: var(--eshb-d-shadow);
		padding: 18px;
		display: flex;
		gap: 14px;
		align-items: flex-start;
	}

	.eshb-dash-stat-icon {
		flex: 0 0 46px;
		width: 46px;
		height: 46px;
		border-radius: 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		.dashicons {
			font-size: 22px;
			width: 22px;
			height: 22px;
		}

		&.accent-blue { background: #e7edff; color: #3b62f6; }
		&.accent-orange { background: #fff0db; color: #f0a020; }
		&.accent-green { background: #def2e4; color: #1faa5b; }
		&.accent-purple { background: #efe8fd; color: #7b5cf0; }
		&.accent-teal { background: #e2eefc; color: #3a93e0; }
		&.accent-red { background: #fde7ea; color: #e8536b; }
		&.accent-gray { background: #eef0f4; color: #6b7385; }
	}

	.eshb-dash-stat-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.eshb-dash-stat-label {
		font-size: 13px;
		color: var(--eshb-d-muted);
	}

	.eshb-dash-stat-value {
		font-size: 26px;
		font-weight: 700;
		color: var(--eshb-d-text);
		line-height: 1.2;
	}

	.eshb-dash-stat-delta {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		font-size: 12px;
		font-weight: 500;
		min-height: 16px;

		.dashicons {
			font-size: 14px;
			width: 14px;
			height: 14px;
		}

		&.is-up { color: var(--eshb-d-green); }
		&.is-down { color: var(--eshb-d-red); }
		&.is-muted { color: var(--eshb-d-muted); }
	}

	/* ---------------------------------------------------------------- grid */
	.eshb-dash-grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 18px;
		align-items: stretch;
		grid-template-areas:
			"cal cal cal cal cal qa qa qa tr tr tr tr"
			"rb rb rb rb rb rb rb rb st st st st";
	}

	.eshb-card-calendar { grid-area: cal; }
	.eshb-card-actions { grid-area: qa; }
	.eshb-card-trend { grid-area: tr; }
	.eshb-card-recent { grid-area: rb; }
	.eshb-dash-card-stack {
		grid-area: st;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	/* Cards stretch to fill their grid cell; content grows to fill the card
	   so no blank white space is left at the bottom. */
	.eshb-dash-card {
		background: var(--eshb-d-card);
		border-radius: var(--eshb-d-radius);
		box-shadow: var(--eshb-d-shadow);
		padding: 20px;
		display: flex;
		flex-direction: column;
	}

	.eshb-dash-card-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;

		h3 {
			margin: 0;
			font-size: 16px;
			font-weight: 600;
			color: var(--eshb-d-text);

			small {
				font-weight: 400;
				font-size: 13px;
				color: var(--eshb-d-muted);
			}
		}
	}

	.eshb-dash-link {
		font-size: 13px;
		color: var(--eshb-d-blue);
		text-decoration: none;
		font-weight: 500;

		&:hover { text-decoration: underline; }
	}

	.eshb-dash-dropdown {
		position: relative;
	}

	.eshb-dash-pill {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 12px;
		color: #5b6577;
		background: #fff;
		border: 1px solid var(--eshb-d-border);
		border-radius: 8px;
		padding: 6px 10px;
		cursor: pointer;
		line-height: 1.4;
		transition: border-color 0.15s ease, background 0.15s ease;

		&:hover { border-color: #d6dcef; }

		.dashicons {
			font-size: 14px;
			width: 14px;
			height: 14px;
			transition: transform 0.15s ease;
		}
	}

	.eshb-dash-dropdown-menu {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		min-width: 130px;
		margin: 0;
		padding: 6px;
		list-style: none;
		background: #fff;
		border: 1px solid var(--eshb-d-border);
		border-radius: 10px;
		box-shadow: 0 10px 30px rgba(20, 33, 61, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
		z-index: 20;

		li { margin: 0; }

		button {
			display: block;
			width: 100%;
			text-align: left;
			border: none;
			background: transparent;
			color: #4a5468;
			font-size: 13px;
			padding: 8px 12px;
			border-radius: 7px;
			cursor: pointer;

			&:hover { background: var(--eshb-d-bg); }

			&.is-active {
				background: var(--eshb-d-blue-soft);
				color: var(--eshb-d-blue);
				font-weight: 600;
			}
		}
	}

	.eshb-dash-dropdown.is-open {
		.eshb-dash-dropdown-menu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}

		.eshb-dash-pill .dashicons { transform: rotate(180deg); }
	}

	/* ------------------------------------------------------------ calendar */
	.eshb-dash-cal-legend {
		display: flex;
		gap: 14px;

		.legend {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 12px;
			color: #5b6577;

			&::before {
				content: "";
				width: 11px;
				height: 11px;
				border-radius: 3px;
				display: inline-block;
			}

			&.booked::before { background: #5ec27e; }
			&.available::before { background: #e3e7ee; }
			&.blocked::before { background: #ef8b8b; }
		}
	}

	.eshb-dash-cal-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-bottom: 8px;

		.eshb-cal-title {
			font-size: 15px;
			font-weight: 600;
		}

		button {
			border: none;
			background: transparent;
			cursor: pointer;
			color: #6b7385;
			padding: 4px;
			border-radius: 6px;
			line-height: 0;

			&:hover { background: var(--eshb-d-bg); }
			.dashicons, &.dashicons { font-size: 18px; }
		}
	}

	.eshb-dash-calendar {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;

		.eshb-cal-row {
			display: grid;
			grid-template-columns: repeat(7, 1fr);

			&:not(.eshb-cal-head) {
				flex: 1 1 auto;
			}
		}

		.eshb-cal-head .eshb-cal-cell {
			font-size: 12px;
			color: var(--eshb-d-muted);
			font-weight: 500;
			padding: 6px 0;
			text-align: center;
			min-height: auto;
		}

		.eshb-cal-cell {
			min-height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #f1f3f7;
			margin: -0.5px;
			font-size: 13px;
			position: relative;

			&.is-muted {
				color: #c4cad6;
				background: #fcfcfd;
			}

			&.is-day .eshb-cal-num {
				width: 30px;
				height: 30px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				border-radius: 8px;
			}

			&.is-booked { background: #def2e4; }
			&.is-booked .eshb-cal-num { color: #1f8a4c; font-weight: 600; }

			&.is-blocked { background: #fde2e2; }
			&.is-blocked .eshb-cal-num { color: #d65656; font-weight: 600; }

			&.is-today .eshb-cal-num {
				background: var(--eshb-d-blue);
				color: #fff;
				font-weight: 600;
			}
		}
	}

	/* ------------------------------------------------------- quick actions */
	.eshb-dash-actions {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 7px;
		flex: 1 1 auto;
	}

	.eshb-dash-action {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 8px 10px;
		border: 1px solid var(--eshb-d-border);
		border-radius: 10px;
		text-decoration: none;
		color: var(--eshb-d-text);
		transition: border-color 0.15s ease, box-shadow 0.15s ease;

		&:hover {
			border-color: #d6dcef;
			box-shadow: 0 4px 12px rgba(20, 33, 61, 0.05);
		}

		.eshb-dash-action-icon {
			flex: 0 0 30px;
			width: 30px;
			height: 30px;
			border-radius: 9px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;

			&.accent-blue { background: #e7edff; color: #3b62f6; }
			&.accent-green { background: #def2e4; color: #1faa5b; }
			&.accent-purple { background: #efe8fd; color: #7b5cf0; }
			&.accent-orange { background: #fff0db; color: #f0a020; }
			&.accent-red { background: #fde7ea; color: #e8536b; }
			&.accent-gray { background: #eef0f4; color: #6b7385; }
		}

		.eshb-dash-action-label {
			flex: 1 1 auto;
			font-size: 14px;
			font-weight: 500;
		}

		.eshb-dash-action-arrow {
			color: #b6bdca;
			font-size: 16px;
		}
	}

	/* --------------------------------------------------------------- trend */
	.eshb-dash-trend {
		width: 100%;
		flex: 1 1 auto;
		display: flex;
		min-height: 220px;

		.eshb-trend-svg {
			width: 100%;
			height: 100%;
			min-height: 220px;
			display: block;
		}

		.eshb-trend-grid { stroke: #eef1f6; stroke-width: 1; }
		.eshb-trend-axis { fill: #9aa3b4; font-size: 10px; }
		.eshb-trend-line { stroke: #3b62f6; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
	}

	/* ------------------------------------------------------------- recent */
	.eshb-dash-table-wrap {
		overflow-x: auto;
		flex: 1 1 auto;
	}

	.eshb-dash-table {
		width: 100%;
		height: 100%;
		border-collapse: collapse;

		thead th {
			text-align: left;
			font-size: 12px;
			font-weight: 600;
			color: var(--eshb-d-muted);
			padding: 10px 14px;
			border-bottom: 1px solid var(--eshb-d-border);
			white-space: nowrap;
		}

		tbody td {
			padding: 14px;
			font-size: 13px;
			color: #4a5468;
			border-bottom: 1px solid #f4f6fa;
			white-space: nowrap;
		}

		tbody tr:last-child td { border-bottom: none; }
		tbody tr:hover td { background: #fafbff; }

		.eshb-dash-booking-id {
			color: var(--eshb-d-blue);
			text-decoration: none;
			font-weight: 600;

			&:hover { text-decoration: underline; }
		}

		.eshb-dash-empty {
			text-align: center;
			color: var(--eshb-d-muted);
			padding: 28px 14px;
		}
	}

	.eshb-dash-badge {
		display: inline-block;
		padding: 4px 12px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 600;

		&.status-completed,
		&.status-confirmed { background: #e4f7ec; color: #16a34a; }
		&.status-pending,
		&.status-deposit-payment,
		&.status-on-hold { background: #fff3df; color: #d98a00; }
		&.status-processing { background: #e7edff; color: #3b62f6; }
		&.status-cancelled,
		&.status-refunded,
		&.status-failed { background: #fde7ea; color: #ef4444; }
	}

	/* --------------------------------------------------------------- rooms */
	.eshb-dash-rooms {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 22px;
		flex: 1 1 auto;
	}

	.eshb-dash-room {
		display: flex;
		align-items: center;
		gap: 16px;

		.eshb-dash-room-name {
			flex: 0 0 130px;
			width: 130px;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			font-size: 14px;
			font-weight: 500;
			color: var(--eshb-d-text);
		}

		.eshb-dash-room-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: var(--eshb-d-blue);
			flex: 0 0 auto;

			svg {
				width: 20px;
				height: 20px;
			}
		}

		.eshb-dash-room-label {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.eshb-dash-room-bar {
			flex: 1 1 auto;
			height: 9px;
			border-radius: 6px;
			background: #edf0f4;
			overflow: hidden;

			span {
				display: block;
				height: 100%;
				border-radius: 6px;

				&.is-high { background: #4cbf6f; }
				&.is-mid { background: #f0a020; }
				&.is-low { background: #e8536b; }
			}
		}

		.eshb-dash-room-count {
			flex: 0 0 auto;
			font-size: 13px;
			color: var(--eshb-d-muted);
			white-space: nowrap;
			text-align: right;

			.eshb-dash-room-count-num {
				color: var(--eshb-d-text);
				font-weight: 600;
			}
		}
	}

	/* -------------------------------------------------------------- upsell */
	.eshb-dash-upsell {
		background: linear-gradient(135deg, #f1ecff 0%, #eaf0ff 100%);
		text-align: left;
		position: relative;
		flex: 1 1 auto;
		justify-content: center;

		.eshb-dash-upsell-lock {
			color: #8a78d6;
			font-size: 22px;
			margin-bottom: 6px;
		}

		h4 {
			margin: 0 0 8px;
			font-size: 16px;
			color: var(--eshb-d-text);
		}

		p {
			margin: 0 0 16px;
			font-size: 13px;
			line-height: 1.6;
			color: #5b6577;
		}

		.eshb-dash-upsell-btn {
			display: inline-block;
			background: #7b5cf0;
			color: #fff;
			text-decoration: none;
			font-weight: 600;
			font-size: 13px;
			padding: 10px 18px;
			border-radius: 8px;
			width: fit-content;
			&:hover { background: #6a49e0; }
		}
	}
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
	.eshb-dashboard-wrap .eshb-dash-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.eshb-dashboard-wrap .eshb-dash-grid {
		grid-template-areas:
			"cal cal cal cal cal cal qa qa qa qa qa qa"
			"tr tr tr tr tr tr tr tr tr tr tr tr"
			"rb rb rb rb rb rb rb rb rb rb rb rb"
			"st st st st st st st st st st st st";
	}
}

@media (max-width: 782px) {
	.eshb-dashboard-wrap {
		margin: 10px 10px 0;

		.eshb-dash-content { padding: 16px; }

		.eshb-dash-stats { grid-template-columns: repeat(2, 1fr); }

		.eshb-dash-grid {
			grid-template-columns: 100%;
			grid-template-areas:
				"cal"
				"qa"
				"tr"
				"rb"
				"st";
		}
	}
}