@use "../shared/variables" as *;

@keyframes ndizi-ab-pulse-anim {

	0% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
	}
}

@keyframes ndizi-ab-pulse-warning-anim {

	0% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
	}

	70% {
		box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
	}
}

/* ── Dialog shell ── */
#ndizi-time-dialog {
	background: transparent;
	border: none;
	margin: 36px 10px auto auto;
	padding: 0;

	&::backdrop {
		background: rgba(0, 0, 0, 0.4);
	}
}

.ndizi-dialog-close {
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	color: #94a3b8;
	cursor: pointer;
	font-size: 14px;
	height: 24px;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 24px;

	&:hover {
		background: rgba(255, 255, 255, 0.2);
		color: #fff;
	}
}

/* ── Panel (now lives inside the dialog, not the admin bar) ── */
.ndizi-ab-panel {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(30, 41, 59, 0.97);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
	color: #f1f5f9;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	padding: 20px;
	position: relative;
	width: 320px;

	* {
		box-sizing: border-box;
	}

	.ndizi-ab-section-title {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		color: #94a3b8;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		margin-bottom: 15px;
		padding-bottom: 8px;
		text-transform: uppercase;
	}

	.ndizi-ab-form-group {
		margin-bottom: 12px;
	}

	.ndizi-ab-select,
	.ndizi-ab-input {
		background: rgba(15, 23, 42, 0.6) !important;
		border: 1px solid rgba(255, 255, 255, 0.12) !important;
		border-radius: 6px !important;
		box-shadow: none !important;
		color: #f8fafc !important;
		font-size: 13px !important;
		height: 36px !important;
		outline: none !important;
		padding: 0 10px !important;
		transition: all 0.2s ease !important;
		width: 100% !important;

		&:focus {
			background: rgba(15, 23, 42, 0.8) !important;
			border-color: $ndizi-orchid !important;
			box-shadow: 0 0 0 2px rgba($ndizi-orchid, 0.2) !important;
		}

		&::placeholder {
			color: #64748b;
		}
	}

	select.ndizi-ab-select {
		appearance: none;
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 9l3 3 3-3' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		background-position: right 8px center !important;
		background-repeat: no-repeat !important;
		background-size: 18px !important;
		padding-right: 30px !important;

		option {
			background: #1e293b;
			color: #f1f5f9;
		}
	}

	.ndizi-ab-flex-row {
		align-items: center;
		display: flex;
		margin-top: 10px;
	}

	.ndizi-ab-checkbox-label {
		align-items: center;
		color: #cbd5e1;
		cursor: pointer;
		display: flex;
		font-size: 12px;

		input[type="checkbox"] {
			appearance: checkbox !important;
			background: rgba(15, 23, 42, 0.6) !important;
			border: 1px solid rgba(255, 255, 255, 0.12) !important;
			border-radius: 3px !important;
			height: 15px !important;
			margin: 0 8px 0 0 !important;
			width: 15px !important;

			&:checked {
				background: $ndizi-orchid !important;
				border-color: $ndizi-orchid !important;
			}
		}
	}

	.ndizi-ab-actions-grid {
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr 1fr;
		margin-top: 15px;
	}

	.button {
		align-items: center;
		border: 1px solid transparent !important;
		border-radius: 6px !important;
		box-shadow: none !important;
		cursor: pointer;
		display: inline-flex;
		font-size: 12px !important;
		font-weight: 600 !important;
		height: 34px !important;
		justify-content: center;
		text-shadow: none !important;
		transition: all 0.2s ease !important;

		.dashicons,
		.ndizi-ab-btn-icon-svg {
			font-size: 14px;
			height: 14px;
			margin-right: 4px;
			width: 14px;
		}

		.dashicons {
			font-family: dashicons, sans-serif !important;
			line-height: 14px;
		}

		.ndizi-ab-btn-icon-svg {
			display: inline-block;
			fill: currentcolor;
			vertical-align: middle;
		}

		&.button-primary {
			background: linear-gradient(135deg, $ndizi-orchid, $ndizi-plum) !important;
			color: #fff !important;

			&:disabled {
				background: rgba($ndizi-orchid, 0.3) !important;
				color: rgba(255, 255, 255, 0.4) !important;
				cursor: not-allowed;
			}

			&:hover:not(:disabled) {
				background: linear-gradient(135deg, $ndizi-plum, $ndizi-ink) !important;
			}
		}

		&.button-secondary {
			background: #10b981 !important;
			color: #fff !important;

			&:hover:not(:disabled) {
				background: #059669 !important;
			}
		}

		&:not(.button-primary):not(.button-secondary) {
			background: rgba(255, 255, 255, 0.08) !important;
			border-color: rgba(255, 255, 255, 0.12) !important;
			color: #e2e8f0 !important;

			&:hover {
				background: rgba(255, 255, 255, 0.15) !important;
				color: #fff !important;
			}
		}
	}

	.ndizi-ab-stats-card {
		background: rgba(15, 23, 42, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 6px;
		margin-bottom: 5px;
		margin-top: 15px;
		padding: 10px;

		.ndizi-ab-stat-item {
			align-items: center;
			display: flex;
			font-size: 12px;
			justify-content: space-between;
			line-height: 1.6;

			&:not(:last-child) {
				border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
				margin-bottom: 4px;
				padding-bottom: 4px;
			}
		}

		.ndizi-ab-stat-label {
			color: #94a3b8;
		}

		.ndizi-ab-stat-value {
			color: #38bdf8;
			font-weight: 600;
		}
	}

	.ndizi-ab-manual-log-panel {
		border-top: 1px dashed rgba(255, 255, 255, 0.08);
		margin-top: 15px;
		padding-top: 15px;

		.ndizi-ab-duration-fields {
			align-items: center;
			display: flex;
			justify-content: center;
			margin-bottom: 12px;
		}

		.ndizi-ab-duration-input-col {
			align-items: center;
			display: flex;
			flex-direction: column;
			width: 60px;

			input {
				font-size: 16px !important;
				font-weight: 700 !important;
				text-align: center !important;
			}
		}

		.ndizi-ab-duration-label {
			color: #64748b;
			font-size: 10px;
			margin-top: 4px;
			text-transform: uppercase;
		}

		.ndizi-ab-duration-separator {
			color: #475569;
			font-size: 20px;
			font-weight: 700;
			margin: 0 10px 18px 10px;
		}

		.ndizi-ab-date-section {
			align-items: center;
			display: flex;
			flex-direction: column;
			gap: 6px;
			margin-bottom: 12px;
			text-align: center;
		}

		.ndizi-ab-date-change-btn {
			background: none !important;
			border: none !important;
			box-shadow: none !important;
			color: $ndizi-orchid !important;
			cursor: pointer;
			font-size: 11px !important;
			padding: 0 !important;
			text-decoration: underline;

			&:hover {
				color: $ndizi-yellow !important;
			}
		}

		.ndizi-ab-date-input {
			color-scheme: dark;
			font-size: 11px !important;
			height: 26px !important;
			padding: 2px 6px !important;
			text-align: center;
			width: auto !important;

			&:disabled {
				cursor: default;
				opacity: 0.5;

				&::-webkit-calendar-picker-indicator {
					display: none;
				}
			}

			&::-webkit-calendar-picker-indicator {
				cursor: pointer;
				filter: brightness(0) invert(1);
				opacity: 0.7;

				&:hover {
					opacity: 1;
				}
			}
		}

		.ndizi-ab-btn-save-manual {
			width: 100% !important;
		}
	}

	.ndizi-ab-active-timer-view {
		display: none;
		text-align: center;
	}

	.ndizi-ab-new-timer-view {
		display: block;
	}

	&.ndizi-timer-running {

		.ndizi-ab-active-timer-view {
			display: block;
		}

		.ndizi-ab-new-timer-view {
			display: none;
		}
	}

	.ndizi-ab-running-details {
		background: rgba(15, 23, 42, 0.4);
		border: 1px solid rgba(255, 255, 255, 0.06);
		border-radius: 6px;
		margin-bottom: 15px;
		padding: 12px;
		text-align: left;

		.ndizi-ab-proj-tag {
			color: #38bdf8;
			font-size: 13px;
			font-weight: 700;
			margin-bottom: 4px;
		}

		.ndizi-ab-task-tag {
			color: #94a3b8;
			font-size: 11px;
			font-weight: 600;
			margin-bottom: 6px;
		}

		.ndizi-ab-desc-tag {
			border-top: 1px dashed rgba(255, 255, 255, 0.06);
			color: #e2e8f0;
			font-size: 12px;
			font-style: italic;
			margin-top: 6px;
			overflow: hidden;
			padding-top: 6px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.ndizi-ab-ticker {
		color: #10b981;
		font-family: monospace;
		font-size: 32px;
		font-weight: 800;
		letter-spacing: 0.05em;
		margin-bottom: 15px;
		text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
	}

	.ndizi-ab-btn-stop {
		background: #ef4444 !important;
		color: #fff !important;
		font-size: 13px !important;
		height: 38px !important;
		width: 100% !important;

		&:hover {
			background-color: #dc2626 !important;
		}
	}

	.ndizi-ab-warning-banner {
		align-items: center;
		background: #fee2e2;
		border: 1px solid #fca5a5;
		border-radius: 6px;
		color: #991b1b;
		display: flex;
		font-size: 12px;
		gap: 8px;
		line-height: 1.4;
		margin-bottom: 15px;
		padding: 10px 12px;
		text-align: left;

		svg {
			flex-shrink: 0;
		}
	}
}

/* ── Admin bar trigger button ── */
#wpadminbar {

	.ndizi-ab-time-tracker {

		.ndizi-ab-icon-wrapper {
			align-items: center;
			display: inline-flex;
			justify-content: center;
			margin-right: 6px;
			position: relative;

			.dashicons,
			.ndizi-ab-icon-svg {
				color: #94a3b8;
				font-size: 16px;
				height: 16px;
				transition: color 0.2s ease;
				width: 16px;
			}

			.dashicons {
				font-family: dashicons, sans-serif !important;
				line-height: 16px;
			}

			.ndizi-ab-icon-svg {
				display: inline-block;
				vertical-align: middle;

				&.ndizi-ab-icon-punch {
					fill: currentcolor;
				}

				&.ndizi-ab-icon-banana,
				&.ndizi-ab-icon-clock,
				&.ndizi-ab-icon-hourglass {
					fill: none;
					stroke: currentcolor;
					stroke-width: 2px;
				}
			}
		}

		.ndizi-ab-pulse {
			animation: ndizi-ab-pulse-anim 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
			background-color: #10b981;
			border-radius: 50%;
			box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
			height: 6px;
			position: absolute;
			right: -2px;
			top: -2px;
			width: 6px;
		}

		&.ndizi-timer-active {

			.ndizi-ab-icon-wrapper .dashicons,
			.ndizi-ab-icon-wrapper .ndizi-ab-icon-svg {
				color: #10b981;
			}

			.ndizi-ab-label {
				color: #10b981 !important;
				font-weight: 700;
			}
		}

		&.ndizi-timer-idle-warning {

			.ndizi-ab-icon-wrapper .dashicons,
			.ndizi-ab-icon-wrapper .ndizi-ab-icon-svg {
				color: #ef4444 !important;
			}

			.ndizi-ab-label {
				color: #ef4444 !important;
				font-weight: 700;
			}

			.ndizi-ab-pulse {
				animation: ndizi-ab-pulse-warning-anim 1.6s infinite cubic-bezier(0.66, 0, 0, 1) !important;
				background-color: #ef4444 !important;
			}
		}
	}
}