@use 'sass:color';
@use 'variables' as *;

.simplestats-dashboard-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;

	&__greeting {
		// Typography/Body/SemiBold (240:859): 20/28 SemiBold
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin: 0;
		display: inline-flex;
		gap: 6px;
	}
	&__greeting-prefix { color: $text-secondary; }  // Text Secondary
	&__greeting-name   { color: $text-primary;   }  // color/neutral/text-1
}

.simplestats-date-range {
	position: relative;

	&__button {
		// Dropdown (240:861): 296×48, Light Stroke border, neutral/900 text, font 14/20 SemiBold.
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: 48px;
		padding: 0 14px;
		background: #fff;
		border: 1px solid #D0CEBC;              // Light Stroke colour
		border-radius: 8px;
		cursor: pointer;
		color: #18191D;                         // neutral/900
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;

		&:hover { border-color: color.adjust( #D0CEBC, $lightness: -8% ); }

		.simplestats-date-range__button-label-prefix { font-weight: 600; }
		.simplestats-date-range__button-label-range  { font-weight: 400; }
		.simplestats-date-range__button-chevron      { color: #32343A; margin-left: auto; }   // neutral/700
		.simplestats-date-range__button-cal-icon     { color: #32343A; }                       // neutral/700
	}

	&__popover {
		position: absolute;
		top: calc( 100% + 6px );
		right: 0;
		min-width: 240px;
		background: #fff;
		border: 1px solid #D0CEBC;              // Light Stroke colour
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.06 );
		padding: 8px;
		z-index: 50;
	}

	&__presets { display: flex; flex-direction: column; }

	&__preset, &__custom-trigger {
		display: block;
		width: 100%;
		text-align: left;
		padding: 8px 12px;
		background: transparent;
		border: 0;
		border-radius: 6px;
		font-size: 14px;
		color: #18191D;                         // neutral/900
		cursor: pointer;

		&:hover     { background: #F4F3EE; }    // neutral/100
		&.is-active { background: #FEF9C3; color: #A16207; font-weight: 500; }   // brand/100 + brand/700
	}
	&__custom-trigger {
		border-top: 1px solid #D0CEBC;          // Light Stroke colour
		margin-top: 4px;
		padding-top: 10px;
		color: #A16207;                         // brand/700
		font-weight: 500;
	}

	&__calendar { width: 520px; padding: 12px; }

	&__cal-nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
		color: #18191D;                         // neutral/900
		font-size: 14px;
	}
	&__cal-nav-btn {
		width: 28px; height: 28px;
		border-radius: 6px;
		border: 0;
		background: transparent;
		cursor: pointer;
		font-size: 18px;
		color: #32343A;                         // neutral/700

		&:hover { background: #F4F3EE; }        // neutral/100
	}

	&__cal-grids {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	&__cal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid #D0CEBC;          // Light Stroke colour
	}
	&__btn-secondary, &__btn-primary {
		padding: 8px 14px;
		border-radius: 6px;
		font-size: 13px;
		font-weight: 600;
		line-height: 20px;
		cursor: pointer;

		// WP admin styles `a:focus` with outline / box-shadow / border-radius —
		// pin these so the branded button shape stays put on focus.
		&:focus,
		&:focus-visible {
			outline: none;
			box-shadow: none;
			border-radius: 6px;
		}
	}
	&__btn-secondary {
		background: #fff;
		color: #18191D;                         // neutral/900
		border: 1px solid #D0CEBC;              // Light Stroke colour

		&:hover { background: #F4F3EE; }        // neutral/100
	}

	// Brand citron primary button (per simplestats-citron-brand-guidelines .btn-primary):
	// brand/300 fill, neutral/900 text.
	&__btn-primary {
		background: #FFE57D;                    // brand/300
		color: #18191D;                         // neutral/900
		border: 0;

		&:hover,
		&:focus,
		&:focus-visible,
		&:active {
			background: #FFE57D;
			color: #18191D;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}
}

.simplestats-cal-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 2px;

	&__hdr {
		font-size: 11px;
		text-align: center;
		color: #7A7660;                         // neutral/500
		padding: 4px 0;
	}
	&__cell {
		display: flex; align-items: center; justify-content: center;
		height: 32px; padding: 0;
		font-size: 13px; color: #18191D;        // neutral/900
		background: transparent;
		border: 0;
		border-radius: 6px;
		cursor: pointer;

		&:hover { background: #FEF9C3; }                            // brand/100
		&.is-start, &.is-end { background: #CA8A04; color: #fff; }  // brand/600 + white
		&.is-mid { background: #FEF9C3; }                            // brand/100
		&.is-blank { cursor: default; }
	}
}
