@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);
	}
}

#wpadminbar {

	.ndizi-ab-panel {
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
		background: rgba(30, 41, 59, 0.95);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 8px;
		box-sizing: border-box;
		color: #f1f5f9;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		padding: 20px;
		width: 320px;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);

		* {
			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: #6366f1 !important;
				box-shadow: 0 0 0 2px rgba(99, 102, 241, 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 {
			display: flex;
			align-items: center;
			margin-top: 10px;
		}

		.ndizi-ab-checkbox-label {
			color: #cbd5e1;
			cursor: pointer;
			display: flex;
			align-items: center;
			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: #6366f1 !important;
					border-color: #6366f1 !important;
				}
			}
		}

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

		.button {
			border: 1px solid transparent !important;
			border-radius: 6px !important;
			box-shadow: none !important;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 12px !important;
			font-weight: 600 !important;
			height: 34px !important;
			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 {
				fill: currentcolor;
				vertical-align: middle;
				display: inline-block;
			}

			&.button-primary {
				background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
				color: #fff !important;

				&:disabled {
					background: rgba(99, 102, 241, 0.3) !important;
					color: rgba(255, 255, 255, 0.4) !important;
					cursor: not-allowed;
				}

				&:hover:not(:disabled) {
					background: linear-gradient(135deg, #4f46e5, #4338ca) !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-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-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 {
				vertical-align: middle;
				display: inline-block;

				&.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 {
			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;
			animation: ndizi-ab-pulse-anim 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
		}

		&.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-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;
			}
		}

		&.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 {
				background-color: #ef4444 !important;
				animation: ndizi-ab-pulse-warning-anim 1.6s infinite cubic-bezier(0.66, 0, 0, 1) !important;
			}
		}

		.ab-sub-wrapper {
			background: transparent !important;
			box-shadow: none !important;
			border: none !important;
			overflow: visible !important;
		}

		.ab-submenu {
			background: transparent !important;
			box-shadow: none !important;
			border: none !important;
			padding: 0 !important;
			overflow: visible !important;
		}
	}

	.ndizi-ab-panel-wrapper {
		height: auto !important;
		overflow: visible !important;

		.ab-item.ab-empty-item {
			background: transparent !important;
			height: auto !important;
			line-height: normal !important;
			padding: 0 !important;
			overflow: visible !important;
		}
	}
}